SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Site breaks in IE ( Nav wraps to new line, Nav's elements aren't tall enough, etc)

    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.


    The site is: the-irf.com/site/index.html


    Thank you very much for any and all help & Best Regards,
    Team 1504.

  2. #2
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Here are some screenshots of the site breaking where the navigation's elements are not tall enough or the 4th element drops to a new line.

    At 486x621:
    486x621.JPG

    At 491x632:
    491x632.JPG

    At 558x612:
    558x612.JPG

    At 578x612:
    578x612.JPG

    At 848x617:
    848x617.JPG

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    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).

  4. #4
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

    Thank you very much for the help!

  5. #5
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

    Here is the page where this is all happening.

    1.) In a viewport-width of 847px and less, there is this space that appears under the navigation. I tried to eliminate margins and padding and even played with the height of the header, but the space remained.
    The space is in the red-brackets in this image: http://cl.ly/image/1u392v2o0Z3S

    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

    3.) And, lastly, in the viewport-width of 1186px and greater, the items in the navigation are too tall as they overflow over the header and its container.
    The part that is overflowing and that I have been unable to get rid of in IE7 is surrounded by a black-border in this image: http://cl.ly/image/35213W1N2331

    All of these issues occur in IE7 and unfortunately enough of the users of this site use IE7 that it needs to be supported. At least somewhat.

    Here is the page where this is all happening.

    Thank you greatly in Advance,
    Team 1504

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    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.

    Quote Originally Posted by team1504 View Post

    1.) In a viewport-width of 847px and less, there is this space that appears under the navigation. I tried to eliminate margins and padding and even played with the height of the header, but the space remained.
    The space is in the red-brackets in this image: http://cl.ly/image/1u392v2o0Z3S
    I'm guessing its the 10px bottom margin on the anchor here:

    Code:
    nav#desktopNav a {
    	display: block;
    	margin-bottom: 10px;
    	padding: 15px 0;
    	text-align: center;
    	text-decoration: none;
    	color: #fff;
    	background: #52a573;
    	background: rgb(82, 165, 115);
    }
    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.


    3.) And, lastly, in the viewport-width of 1186px and greater, the items in the navigation are too tall as they overflow over the header and its container.
    The part that is overflowing and that I have been unable to get rid of in IE7 is surrounded by a black-border in this image: http://cl.ly/image/35213W1N2331

    All of these issues occur in IE7 and unfortunately enough of the users of this site use IE7 that it needs to be supported. At least somewhat.

    Here is the page where this is all happening.
    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.

  7. #7
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code:
    @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;
    	}
    }
    If you think a copy of the site might help, here is zip: http://cl.ly/0l3f323M0Q2e

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by team1504 View Post
    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 ?
    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.

    e.g.

    Code:
    desktopNav li{
    display:inline-block;
    *display:inline;
    zoom:1.0;
    }
    I''ll try and look at the code tomorrow as I don't have much time today.

    ( Note that the 80px height should only be given to IE7 and under using the ie classes added to the html element:

    e.g.

    Code:
    .lt-ie8 #desktopNav a{etc...}

  9. #9
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Sorry, I have been busy. I'll try and have a look later in the day.

  11. #11
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Sorry, I have been busy. I'll try and have a look later in the day.
    No problem, thank you. I appreciate it your help.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    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.

    Code:
    .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}	
    }

    Here is a live version:

    http://www.pmob.co.uk/team1504/site/index.html

    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.

  13. #13
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you veyr much. You are a life saver. I can't express how appreciate I am.

    Thank you.

    And I'll redo the header so that it is styled and layed out with better / best practices.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •