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.
Related
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
I have recently built my own site www.poolspots.com. I am new to css and I have been developing in FF. When I checked it out in IE everything in the header and the footer is out of wack. I was wondering if anybody has any idea on how to fix this problem. If you look at it in FF it looks fine but when you look in IE it is way out of wack. I did manage to get the border off of the logo but it is still there for the Social Network Icons. Any help would be much appreciated.
P.S. I am not sure what version of IE I am using, I've looked everywhere but I can't find it.
add this to your CSS a img { border: 0 }
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'm creating a site in Sharepoint and have a problem with the dropdown navigation... in IE7 the li width is not setting to 100% and honestly it looks pretty stupid.
Having tried (and failed) miserably to get a working example on jsFiddle (unfortunately the live site needs a login, so I can't post a direct link) it's really hard to get an idea of what's going on... but I was kinda hoping this was a fairly common problem (although after a silly amount of time on Google, I've not found a solution) that someone can help with. Apologies again for the very simple and elegant code generated by Sharepoint ;)
Thank you!
(CSS) Sharepoint's default stylesheet
(CSS) my own custom stylesheet
Firefox vs IE7 comparison shot
It's not the li's width which is wrong it's the hyperlink inheriting OOTB styles from coreV4.css
Add this to your custom CSS file.
.s4-tn ul.dynamic li a
{
min-width: auto;
zoom: normal;
}
Tested this on IE 7, 8, 9, FF, Chrome and Safari on a Win7 box.
I don't know what this CSS bug is called but it works :)
Have fun!
Problem:
Thanks for taking the time to read this. I'm having a problem which I need to solve as simple as possible. There's a website I'm re-developing, but since I updated to IE8, I've totaly forgotten about IE7, but ofcourse, there are still people using it.
I need to know what specific things I should change for this site to display the same way as it does in IE8. But I don't know where to start. Is there anyone with experience in this, who can give me a guideline? Are there scripts for doing so?
URL: http://www.testsite.c-tz.nl/
If you view this with IE8 it looks perfect.
But if you view it with IE7, things are not where they supposed to be, very ugly.
As the other said, your question is to broad. You'll need to break it down in smaller problems - which will possibly help you solve it yourself along the way.
One thing I did notice: IE has problems with display: inline-block on elements, which were orignally block elements. Either use span (only possible if it doesn't contain block elements), or use another method to places blocks side by side such as float.
BTW, you have far too many divs in your HTML. It's not necessary to wrap every img, every ul, etc. in it's own div. Usually any styles you apply to the div can just as well be applied you the "wrapped" element directly.
This is not a cool idea... But you can try when you are sick with very old browsers like ie6 or ie5 ...
1.use javascript to detect the browser and version..
2.later use the similar way to redirect the visitor to download the IE 8..
<script>
if(''+browserName+''+fullVersion+'' == "Microsoft Internet Explorer6.0" )
{
alert("You're using an Old Browser.Update the browser to view the website.(or) Try Latest Google Chrome , Firefox , Safari, Opera")
window.location = "http://www.microsoft.com/download/en/details.aspx?id=43"
}
//document.write(''+browserName+''+fullVersion+'');
</script>