Background
I've built a responsive website template. I've chosen to use Bootstrap 2.3.2 because it needs to work in IE7+ and be suitable for mobile devices. I've used respond.js and html5shiv.js so that it will work in IE.
Problem
The site works beautifully in Chrome and Firefox. And it displays well in IE8. However in IE8 it's incredibly slow. Even after the page has finished loading the browser freezes up if I try to scroll down or click on something. It looks great but the slow response time makes it virtually unusable.
Cause of problem
I've identified that Bootstrap.min.css is the cause. When I remove bootstrap.min.css from the page and leave everything else the same, the styles don't work but the page loads quickly and it's very quick to scroll up and down and click on buttons.
I think (or rather I hope!) that the cause is not Bootstrap but rather because I'm using the responsive elements of Bootstrap (e.g. row-fluid). I'd like to keep the site responsive for all non-IE users, but I'd like to try making all widths fixed for IE8 users and below.
Attempts to fix
I've tried overriding the percentage widths in IE by creating a conditional IE stylesheet. However it doesn't appear to be possible to override the media queries, even using !important (example below).
HTML
<div class="row-fluid">
<div class="span10 width7">
</div>
</div>
Bootstrap
This is an example of what I've been trying to override.
#media (min-width: 1200px)
.row-fluid .span10 {
width: 40.92827004219409%;
}
CSS to override Bootstrap
The code below is not able to override the bootstrap css above.
.row-fluid .span10.width7{
width: 485px !important;
}
Question
Has anyone got any suggestions about how I might adapt my template so that it continues to be responsive for non-IE users but has fixed widths for IE8 and below?
Many thanks,
Katie
Related
We have a major problem where for some reason Chrome is firing responsive Media Queries too early.
So instead of firing at 1000px, it fires around 984px. Max width/min width containing any value makes no difference. It's as though it's off by about 14 to 24px depending on factors only it understands.
There are also no conflicting queries that could be causing this (we tried it on 'fresh pages' in the project) and even nuked the main stylesheet, but the problem still persists. Also we're not doing anything funky by manipulating window/document or body widths, margins, scale/zoom with Javascript or CSS.
We're completely baffled by this one and have tried for a few days to fix + check Stackoverflow etc. but to no avail so far.
Code below:
div {
background: orange;
}
#media only screen and (min-width: 1000px) {
div {
width: 100px;
height: 100px;
background: green;
}
}
Some things in place and background:
This worked previously, however all of a sudden we're encountering this bug...
It is happening in Chrome and Brave, but works fine in Edge and Firefox. We've tried several other machines and different versions of Chrome, but the issue persists. We can only guess that maybe something got introduced into the project that is causing this, but we are stumped as to what.
Browser zoom is correct # 100%
Meta tag viewport is in place correctly
Tried the 'decimal fix' like 1000.0px - but it doesn't work...
Dev tool says that the window size is 1000px, but Chrome only fires the code at 983px or thereabouts
Code works in a test file (with the same index/template that is in the project) and Chrome handles the media query 100% correctly
React Solution with Bootstrap 4.5.3
Worked before
Any ideas?
Is there a way that we can 'reset' Chrome's media queries or what are we missing?
Answers in other similar questions in StackOverflow do not appear to work which makes us think that this is maybe a separate issue or new bug?
Any help / insight is greatly appreciated! :)
Perhaps your meta tag is missing the content attribute with values: width=device-width, initial-scale=1?
<meta name="viewport" content="width=device-width, initial-scale=1">
as far as i can recall chrome requires these attributes and values to work proper with custom media queries
EDIT
After a discussing with #user2381937 in chat and reading some external resources:
https://inspirnathan.com/posts/2-media-query-inspector-chrome/
https://www.sitepoint.com/rwd-scrollbars-is-chrome-better/
we found that chrome and firefox differ in how they consider the width of the scrollbar when rendering the page. And that the way forward is either to swap query breakpoints to account for the offset or to make browser specific queries.
I'm building a html website using foundation.zurb 4 framework and now I'm having an issue on making the nav bar work on IE8. I kind of manage to make everything work on IE8 except that nav bar. I'm using a separate css file for the nav bar menu and another one for the IE8 tweaks. All the files can be found here.
I'd like to apologise the fact that the code is quite long and hope my request is not a bit too much to ask. I hope someone could help me as I'm getting a bit desperate now :(
Update: See it in action here It doesn't need to be responsive on IE8 I just want it to be static ;)
Media Queries - Responsive CSS3 is not supported for ie8 or less.
You are using this:
#media only screen and (min-width: 58.75em)
.top-bar .toggle-topbar {
display: none;
}
IE8 is like..."WTFISTHIS?"
Meaning it tries doing it but it just doesn't understand going back and forth
There is this plugin:
https://github.com/scottjehl/Respond
If you really need to support it but my answer is to let ie8 be static like a regular desktop version.
I created a web page using the bootstrap grid.
This page is rendered perfectly, as expected, when I just open it with a browser.
The container in bootstrap is smaller than the screen, everything is perfect.
BUT, if I render the exact same page as an application.html.erb layout in rails, it always send this message to the browser: #media (min-width: 1200px). This makes my page become a bit bigger than my screen. The rest is fine. Bootstrap works but the container width is too big! In the plain page it is 960px, which is perfect!
Why?
I don't want this to happen! It is really weird. I read some posts where people say it happened to them, but I have the two pages side by side and "inspect element" shows #media (min-width: 1200px) in the css of the "row" class in the rails page and nothing in the other!
I am totally not willing to hack the bootstrap css. I would just like to figure out what is happening and fix it ! I would really like to use it as a stylesheet and not as a gem...
thanks so much in advance!
P.S.:
In rails, I copied the bootstrap folder in my /assets/stylesheets/ directory
How about adding your own style in the file 'bootstrap_and_overrides.css.less' (or any other you have)?
In my own CSS, I have this:
.container {
width: 960px;
}
and the problem is solved. :)
Maybe the answers to my questions regarding Bootstrap & Rails provide you with some insight:
How to access Bootstrap Files individually
How to pass Bootstrap-Variables in Rails
I have a website that will be loaded in a web frame of an iPad app, so I have created a separate CSS file for the iPad, which is automatically loaded by a user agent call. Nothing too difficult here.
The problem is that 2 divs are not responding to the display:none CSS. The sidebar and the footer are still showing, despite being specifically called in the CSS just the same as all of the other elements, which are hidden correctly in Safari on the iPad.
www.themonitorgroup.com/disclaimer.html is a good page to illustrate this issue.
www.themonitorgroup.com/css/ipad.css is the specific CSS file for the ipad.
I assume there is something stupid simple I am missing. Please let me know if you can find anything. Thanks so much in advance.
Validators are your friend. You're missing a closing brace here:
#mainnav {
display: none;
And you have #sidebar rather than .sidebar in the style sheet.
I've read through other questions but to no avail - I really can't work this out.
The site is (Been redesigned, so isn't relevant anymore. It used HTML5 elements, but they weren't declared as block, and IE doesn't assume that they should be.)
The gradient on the footer looks great in non IE browsers, but fails to show in IE 7,8 and the IE9 dev preview.
Any ideas?
You could try adding this to your footer CSS (in addition to your existing footer styles).
footer
{
display:block;
}
This fixed it for me under FF3.6, and I'm assuming will fix it in IE as well - The default display style for <footer> is inline which doesn't play nice with backgrounds regardless of browser. Applying block to it will treat it more like a div.
You'll also want to be careful with your use of HTML 5. Not sure of how well supported it is in all browsers. You might want to consider <div id="footer"><!-- contents of footer --></div> and applying styles to it by id in CSS instead..
I had a similar problem, but finally find the solution.
Change your format image to png.
And works fine in IE8.
This works:
#footer_text {
background: url(/media/img/gradient.php?w=4&h=160&sc=4c4c4c&ec=000000) repeat-x scroll top left;
}
I'd be careful about applying any styling to html5 elements like footer right now. They're not well supported by all browsers.
You can use them for semantic reasons, though.
If I look at the footer using IE 8's developer toolbar, I get this as the background-image definition:
url(/media/img/gradient.php?w=4&h=160&sc=4c4c4c&ec=000000); TEXT-ALIGN: center
Notice the part to the right. I'm not sure where it comes from - it's not in the style sheet. Maybe the sheet is somehow garbled. If I remove the text-align part, the footer image shows fine. The same is happening to your body definition.
try opening the file in Photoshop or similar, and doing a clean save for web as a PNG.