On XP, IE8 site http://rweberjewelry.com/ is ignoring styles. Here's a video http://www.screenr.com/AeMH. It works fine on Win7 IE9. This started when I updated to WP 3.5.2 and latest theme version.
Problems - images not showing, fonts are huge, page container does not fill page, and just overall ignoring of most styles!
Theme designer says it renders well on their browser emulator and "..there is something else in play either on your network or computer. If the browser is getting pushed into compatibility mode for some reason or something similar."
I had a friend check her computer and it is having the same problem.
I read a suggestion to add the following but it didn't help:
meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE"
I checked:
IE>tools>compatibility mode> website is not listed and "display all websites in compatibility mode" is not checked and ripped paper icon is not showing next to the URL so I don't think it is in compatibility mode.
Much thanks for any ideas.
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
<link rel="stylesheet" type="text/css" media="all" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/style.css" />
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/css/grid.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/css/base.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/css/layout.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/css/slideshow.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/css/shortcodes.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/js/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/js/projekktor/theme/style.css" type="text/css" media="screen"/>
<!-- plugin and theme output with wp_head() -->
<link rel='stylesheet' id='testimonials-widget-css' href='http://www.rweberjewelry.com/wp-content/plugins/testimonials-widget/testimonials-widget.css?ver=3.5.2' type='text/css' media='all' />
<link rel='stylesheet' id='avia-woocommerce-css-css' href='http://www.rweberjewelry.com/wp-content/themes/propulsion/config-woocommerce/woocommerce-mod.css?ver=3.5.2' type='text/css' media='all' />
<!-- custom styles set at your backend-->
<style type='text/css' id='dynamic-styles'>
<!----a ton of stuff deleted - too long ----->
</style>
<!-- google webfont font replacement -->
<link id="google_webfont_1" rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Cardo" />
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/css/custom.css" type="text/css" media="screen"/>
</head>
You seem to have some HTML issues that IE8 isn't handling quite as gracefully as the other browsers. Some of the worst offenses are apostrophes in HTML attributes, which prematurely end the attribute.
W3C validator results
Related
I have used these lines inside head tag
<link href="~/Content/site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
Bootstrap seems to work, but site.css is not loading..I even tried
<link href='#Url.Content("~/Content/site.css")' rel="stylesheet" type="text/css" />
I couldn't find any solution. Where am I going wrong?
I have an ASP.NET MVC project using Boostrap 4 and jQuery DataTables. For both tools, the CSS files load but none of the CSS rules are applied. Looking at the network tab of Chrome dev tools, content type is coming over as text/css. Here's the code within the head tag of the main layout page:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
#*<link href="#Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />*#
<link href="#Url.Content("~/Content/Site.css")"rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/pushy.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/MyStyle.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/jquery-ui.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/font-awesome.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/theme.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/DataTables/css/jquery.dataTables.min.css")" rel="stylesheet" type="text/css" />
#*<link rel="stylesheet" type="text/css" href="#Url.Content("~/Content/DataTables/css/dataTables.bootstrap.min.css")" />*#
<link href="#Url.Content("~/Content/DataTables/css/dataTables.bootstrap4.min.css")" rel="stylesheet" type="text/css" />
I've tried using runat="server" in both the link and head tags, using #Styles.Render instead of a link tag, swapping out the minified file with the full one, href with and without #Url.Content(), and using a file directly from Bootstrap, all with no success (haven't been able to find any other solutions on SO either).
MyStyle.css loads and applies properly, but not the Bootstrap or DataTables CSS. This is driving me nuts trying to figure out the issue - what am I missing?
I'm running .NET 4.6.1 on Visual Studio 2017.
Actually another css file from _Layout.cshtml overwrites the view page css file.removed main.css from Viewpage.cshtml
I'm new to web development and am using Laravel. For this, I purchased a HTML admin page template which already included Laravel (so basically Laravel plus the theme in HTML already set up). Now I'm using some elements from everywhere inside the template and I ended up having heavily long reference lists. I don't think this is necessary or even considered good code (rather HTML markup), and I even tried to remove some of the references, but then for some reason some elements of the page do not properly work anymore.
For example, I choose a certain button element from a HTML page included in the template, I copy the code and paste it inside where I need it. I also copy the references, but not necessarily all the references (because there were not only buttons on the page). However, not having -all- the references ended in a messed-up page with few things working. I wonder if there is like any tool which automatically removes these statements since I feel that the following is ridiculous compared to the actual size/content of the page (which is merely a form to enter your personal data):
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrapvalidator/css/bootstrapValidator.min.css')}}"/>
<!--page level styles-->
<link type="text/css" rel="stylesheet" href="{{asset('assets/css/pages/wizards.css')}}"/>
<!--End of page styles-->
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/inputlimiter/css/jquery.inputlimiter.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/jquery-tagsinput/css/jquery.tagsinput.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/daterangepicker/css/daterangepicker.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/datepicker/css/bootstrap-datepicker.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-timepicker/css/bootstrap-timepicker.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-switch/css/bootstrap-switch.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/jasny-bootstrap/css/jasny-bootstrap.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/datetimepicker/css/DateTimePicker.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/j_timepicker/css/jquery.timepicker.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/clockpicker/css/jquery-clockpicker.css')}}" />
<!-- end of plugin styles -->
<link type="text/css" rel="stylesheet" href="{{asset('assets/css/pages/colorpicker_hack.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-switch/css/bootstrap-switch.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/switchery/css/switchery.min.css')}}" />
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/inputlimiter/css/jquery.inputlimiter.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/chosen/css/chosen.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/daterangepicker/css/daterangepicker.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/datepicker/css/bootstrap-datepicker.min.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-timepicker/css/bootstrap-timepicker.min.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/bootstrap-switch/css/bootstrap-switch.min.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/jasny-bootstrap/css/jasny-bootstrap.min.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/fileinput/css/fileinput.min.css')}}"/>
<link type="text/css" rel="stylesheet" href="{{asset('assets/vendors/multiselect/css/multi-select.css')}}"/>
<!--End of plugin styles-->
<!--Page level styles-->
<link type="text/css" rel="stylesheet" href="{{asset('assets/css/pages/form_elements.css')}}"/>
(Not to forget all the JS at the bottom!)
Just simply go to Google's developer by clicking Short cut (control + shift+ I) and then go to Audit tab, you will find all the details and performance audit report. From there you can find the used and unused css and JavaScript codes.
You can inspect the particular webpage. During inspecting, you can find out the error/unused portion of css/js files in console. They basically name the unused file with line number.
I'm quite new to the Spring|Hibernate|Eclipse setup. For some reason, My index.jsp files are not picking on the css files (css & css01).
Any clue why?
<link rel="stylesheet" href="css/theme_switcher.css" type="text/css">
<link rel="stylesheet" href="css01/job_blue.responsive.css" title="job_blue" type="text/css">
You have not provided the end tag of the link tag. Provide it like this.
<link rel="stylesheet" href="css/theme_switcher.css" type="text/css" />
<link rel="stylesheet" href="css01/job_blue.responsive.css" title="job_blue" type="text/css" />
OR
<link rel="stylesheet" href="css/theme_switcher.css" type="text/css"></link>
<link rel="stylesheet" href="css01/job_blue.responsive.css" title="job_blue" type="text/css"></link>
on my site i have 3 css
<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<link rel="stylesheet" type="text/css" media="handheld" href="handheld.css" />
i thought the media handheld will automatically load my site formated for devices
when i load my site with my android, i still see the "site.css" why it does not load the handheld.css?
Apparently Android/iPhone/Nokia browsers don't think that they are handhelds.
You should use media queries to detect devices.