SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: IE9 width issue

  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2009
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE9 width issue

    my site looks different in IE9.

    The red block on the right of Find Us shifts down onto the next line but in IE8 firefox and opera it displays fine.

    Is there a way to sort this without conditional statements or do i need to redo the menu set up agian?

    Here is a snippet of the css for the menu:
    Code:
    #topMenu {  width:960px; position:absolute; bottom:0;}
    ul#menu
    {
    	margin:0;
    	padding:0;
    	list-style-type:none;
    	width:auto;
    	position:relative;
    	display:block;
    	font-size:16px;
    }
    
    ul#menu li
    {
    	display:block;
    	float:left;
    	margin:0;
    	padding:0; 
    }
    .left { width:206px; background-color:#d30507; height:19px; }
    
    .right { width:55px; background-color:#d30507; height:19px; }	
    
    ul#menu li a
    {
    	display:block;
    	float:left;
    	color:#fff;
    	text-decoration:none;
    	padding:0px 20px 0 20px;
    	border-right: 1px solid #d30507;
    }
    	
    ul#menu li a:hover
    {	
    	color:#fff;
    	background: #d30507;		
    }
    	
    
    ul#menu li a.current
    {
    	display:inline;
    	color:#fff;
    	background: #d30507;		
    	float:left;
    	margin:0;
    }

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

    It's on the next line in Firefox on the mac also.

    You can't just add some px to the end of some text content and expect it to be the same cross browser as all render it differently by as much as 10px for the whole line in some cases (not counting users who large text settings or have 120dpi settings and large fonts etc).

    Remove the left and right empty list elements and as you never want to do things like that.

    Add a red background to the ul and a black background to the list element. Then give the UL some left padding and then clear the floats.


    Code:
    ul#menu {
        display: block;
        font-size: 16px;
        list-style-type: none;
        margin: 0;
        padding:0 0 0 200px;
        position: relative;
        width: auto;
            background:red;
            overflow:hidden;
            zoom:1.0;
    }
    ul#menu li{background:#000}
    That leaves breathing space on the right to soak up the differences.


    )

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2009
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    It's on the next line in Firefox on the mac also.

    You can't just add some px to the end of some text content and expect it to be the same cross browser as all render it differently by as much as 10px for the whole line in some cases (not counting users who large text settings or have 120dpi settings and large fonts etc).

    Remove the left and right empty list elements and as you never want to do things like that.

    Add a red background to the ul and a black background to the list element. Then give the UL some left padding and then clear the floats.


    Code:
    ul#menu {
        display: block;
        font-size: 16px;
        list-style-type: none;
        margin: 0;
        padding:0 0 0 200px;
        position: relative;
        width: auto;
            background:red;
            overflow:hidden;
            zoom:1.0;
    }
    ul#menu li{background:#000}
    That leaves breathing space on the right to soak up the differences.


    )
    Thank you very much for your help! I did exactly what you said and have learned something today, thank you!


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
  •