Hello,
I am trying to build a responsive site and I used the HTML5 Boiler Plate Responsive template. I know there are some styles in the template that target IE and I don’t know if those are messing up the site in IE or if it is IE’s bugs and IE being IE that is messing it up. I have found these problems to exist in IE 8 and less, by the way; and, I am looking for any help is solving them.
The site looks and functions fine in Chrome. So, if you are willing to help, please look at it in chrome to see how it is supposed to look.
In IE:
The 4th element in the nav (#desktopNav) wraps to a new line, when it is supposed to be on one line.
The 4 elements in the nav are too short at times. They are supposed to reach the border of the header, which is the same colour ( the darker green) as them.
In some of the small / smaller breakpoints the text is too big to fit in the header.
I think the 3rd issue I can fix with IE conditional comments and a smaller text-size, but I am wondering why it is not working when it works well in chrome. Is it because of the units I used for the font-size?
I also know that the 1 image and 1 unicode do not appear. I will fix those two myself.
But, I don’t know how to fix the navigation / navigation elements issues and I would appreciate any help is fixing those.
I can provide screenshots of how the site breaks if it will help.
These grids/templates all seem to suffer in older versions of IE because they use floats and percentages which IE can’t handle very well and will round things up so that they are bigger than the space available and the last item will drop down. You will need to use the .ie rules and apply smaller widths for those items in Ie7 and under. IE8 is usually ok. Or just apply a smaller width to the last item in each row (or a right negative margin to soak up the rounding errors).
I notice you are using :last-child to remove the right margin from the last elements but Ie8 and under don’t understand last-child so you will need to add a class to the last item and then remove the right margin (I didn’t check if you were using js to support last-child).
Ah, I understand. Thank you for pointing that out.
I wasn’t using js to support :last-child, but I may. I will also work on using the .ie classes to get the nav items taller and prevent them from dropping by applying a negative margin-right.
I worked on each of the parts that broke / looked bad in IE individually and solved most of them. However, there are 3 that I have been trying to solve, but nothing seems to work.
I would greatly appreciate any help in fixing these last 3 issues that occur in IE7.
2.) Also in the viewport of 847px and less, the navigation is not centred. I believe this is because each of the four elements are not 25%; and, the remaining percentage is causing the off-set. However, their width can not be made any bigger as doing so causes the 4th element in the navigation to drop-down to a new-line. Is there a way the nav can still be, or appear to be, centred? The nav is surrounded by a black-border in this image: http://cl.ly/image/1u392v2o0Z3S
This is awkward to test because my ietester doesn’t have developer tools and IE7 only works on online sites and not locally so I can’t copy the code locally for testing (and media moderniser doesn’t work locally either as far as emulating media queries goes).
Here are a few comments anyway.
I’m guessing its the 10px bottom margin on the anchor here:
Try setting that to zero and see if it relates to the problem or not.
2.) Also in the viewport of 847px and less, the navigation is not centred. I believe this is because each of the four elements are not 25%; and, the remaining percentage is causing the off-set. However, their width can not be made any bigger as doing so causes the 4th element in the navigation to drop-down to a new-line. Is there a way the nav can still be, or appear to be, centred? The nav is surrounded by a black-border in this image: http://cl.ly/image/1u392v2o0Z3S
I would use display:inline-block for the anchors instead of floating and then apply text-align:center on the parent ul to center them regardless of their width.
I would guess that this is due to you using box-sizing which IE7 doesn’t understand so you get the 103px height + the 25px padding. You will need to reduce the height for IE7 because it doesn’t use the border box model. The box-sizing rule really assumes that you aren’t going to support browsers older than IE8. Most of these new grids/bootstrap etc don’t really cater for older browsers.
Thank you @Paul_O_B for your help.
Ah, yes, I don’t have developer tools either that is why I couldn’t figure out some of these issues.
Your solutions make sense, but they don’t seem to be working :-/
The inline-block and text-align centre makes the nav items somewhat more centred, but they are still off, however.
Do you think triggering haslayout with display:inline will fix it since this is IE7 ?
Otherwise, here are my implementations of the solutions. I put them in my ie.css file and gave them !important rules, too.
@media only screen and (max-width: 848px){
#desktopNav a{
margin-bottom: 0 !important;
display:inline-block !important;
}
#desktopNav ul{
text-align: center !important;
}
}
@media only screen and (min-width: 1186px){
#desktopNav a{
height:80px !important;
}
}
The display:inline-block is a trigger for haslayout anyway and as the element is an inline element you don’t need to do anything fancy for IE7 as inline-block works on inline elements. You may also need to set the list element to display:inline-block and then you would need the hack.
Hello @Paul_O_B,
I just wanted to let you know that I added the haslayout trigger so it is display:inline in IE7 and IE6, but the items are still not centred. Nor are they touching the bottom (that stubborn margin isn’t collapsing).
Have you gotten a chance to look at the code?
Here is the link to the site: http://the-irf.com/site/
and the code is linked in my last / previous post.
None of the IE media queries are being actioned because your media query fix for IE doesn’t work as you have hidden them in conditional comments which as far as the script is concerned is just html comments and ignored.
The reason that all the IE classes are added to the html element is that you don’t need to use CCs and you just prefix the rule with the appropriate class to target the version of IE required.
e.g.
This should be at the end of the main style sheet.
.lt-ie8 #desktopNav a{
height:85px !important;
width:20% !important;
}
@media only screen and (max-width: 230px){
.lt-ie8 .header-container{
height:20em !important;
}
}
@media only screen and (max-width: 247px){
.lt-ie8 .header-container{
height:15em !important;
}
}
/**/
@media only screen and (max-width: 455px){
.lt-ie8 header{
position:relative !important;
top:42px !important;
zoom:1.0;
}
}
@media only screen and (max-width: 848px){
.lt-ie8 #desktopNav a{
width:20% !important;
margin-bottom: 0 !important;
display:inline-block !important;
float:none!important;
}
.lt-ie8 #desktopNav ul{
text-align: center !important;
}
}
@media only screen and (min-width: 1186px){
.lt-ie8 #desktopNav a{
height:55px !important;
}
.lt-ie8 #svg{float:left;}
.lt-ie8 .title{
left:-50px;
top:30px;
}
.lt-ie8 #desktopNav{top:-68px}
}
That header section is badly coded with heights and negative margins and you should code it more logically. If you want to support Ie7 then you must make sure floats come first as they always drop to a new line in IE when they follow inline content (unlike other browsers).
Try not rely on heights and negative top margins to pull things into position as that is too fragile. Just apply the elements in the correct order as required and float (or display:inline-block) when you need horizontal alignment.
