SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)

    Internet Explorer CSS Issue

    Hey everyone,

    Im new to the network and I already require help, lol

    I am working on a new portfolio design for my website but unfortunately Im having an issue occur, of which I can seem to resolve, ive tried resetting elements, ive tried redoing the css file from scratch, but all roads seem to lead to Internut Exploder breaking my design...

    I have a navigation menu... it is absolutly positioned (to gain vertical alignment), has 100% width (I wish the menus to span the entire width of the page), and each item is floated (to maintain block) with a set width of 20% - as there are 5 list items... 20% * 5 = 100% (width).

    Now under every other browser, the math is working... IE8 even shows it working fine (must have been fixed post IE7), but IE7 and lower causes the design to push the last element to the next row, breaking the design.

    Below is the HTML:

    HTML Code:
    <body>
    <ul id="nav">
    	<li><a href="#" title="About">About</a></li>
    	<li><a href="#" title="Work">Work</a></li>
    	<li><a href="#" title="Learn">Learn</a></li>
    	<li><a href="#" title="Login">Login</a></li>
    	<li><a href="#" title="Contact">Contact</a></li>
    </ul>
    </body>
    Below is the CSS:

    Code CSS:
    @media screen {
    * {
    	border: 0;
    	margin: 0;
    	padding: 0;
    }
    #nav {
    	margin-top: -65px;
    	padding: 10px 0 10px 0;
    	position: absolute;
    	top: 50%;
    	width: 100%;
    }
    #nav li {
    	display: inline;
    }
    #nav li a {
    	background: #0A2E2C;
    	color: #AFAFAF;
    	display: block;
    	float: left;
    	height: 100px;
    	line-height: 100px;
    	overflow: hidden;
    	text-align: center;
    	text-decoration: none;
    	width: 20%;
    }
    }

    any help you can provide would be very helpful as ive been stressing over this bug for the past 3 hours with no end in sight, so i come to you for assistance Thanks a lot.

    Alex

  2. #2
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why do you need a perfect 20&#37; for each? Why not use ems, pixels? IE does sometimes incorrectly calculate, try making the total not exceed or be 100%, but instead 95-99ish.
    Cross browser css bugs

    Dan Schulz you will be missed

  3. #3
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    well the idea behind the 20% was to get the links to scale depending on the resolution of the user (so wider displays didnt have a "condensed" viewing experience).

    I could probably margin offset the left and take the width down to 90% with 5% margin each side (the problem with block anchors isthe requirement of floating as well as display:inline which forces left or right positioning).

    btw: as a side note - i seem to have a strange issue with my design rendering in IE8 where a background color set in body...

    Code CSS:
    body {background: url('/common/images/back.jpg') #0A2E2C fixed center center no-repeat;}

    the location of the image is correct and works in all other browsers... but for some strange reason IE shows the background color, but not the image (however it does show part of the image behind a transparent png file in the document.

    Just in case anyone has any ideas while im at it, lol

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi Alex, Welcome to SitePoint!
    As SS mentioned IE has problems with percentage rounding errors. I came up with a "visual" workaround for you.

    If you will set your ul within a div rather than assigning all the styles to the ul you can give the last list item a class that has a width of 19.5&#37; while all the others remain 20%.

    Then by setting a bg color on the 100% wide div it will give the last list item the appearance of being 20% wide. I have disabled the test bg color on the .last class, just set it back to red and you will see IE's rounding error at different window widths.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>demo</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
    
    * {
        border: 0;
        margin: 0;
        padding: 0;
    }
    #nav {
        margin-top: -65px;
        padding: 0;
        position: absolute;
        width:100%;
        background: #0A2E2C;
        top: 50%;
    }
    #nav li {
        display: inline;
    }
    #nav li a {
        background: #0A2E2C;
        color: #AFAFAF;
        float: left;
        height: 100px;
        line-height: 100px;
        text-align: center;
        text-decoration: none;
        width: 20%;
    } 
    #nav li.last a{
    width:19.5%;
    /*background: red; */
    }
    </style>
    </head>
    <body>
    
    <div id="nav">
    <ul>
        <li><a href="#" title="About">About</a></li>
        <li><a href="#" title="Work">Work</a></li>
        <li><a href="#" title="Learn">Learn</a></li>
        <li><a href="#" title="Login">Login</a></li>
        <li class="last"><a href="#" title="Contact">Contact</a></li>
    </ul>
    </div>
    
    </body>
    </html>

  5. #5
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    thanks for the feedback guys

    I seemed to have a spark of inspiration based on what you guys mentioned (workarounds floating in my mind with the tips you gave, lol), what i did was to remedy the browsers which triggered the issue (IE5x and IE6 - i managed to fix IE7 with overflow:hidden behind moved) I simply left the 5 values at 20&#37; (equating to 100%) however i took advantage of IE's lack of compatability with the visual formatting model in css (no hacks required)...

    min-width: 20%
    width: 19.5%

    Normal browsers can see min-width and going by the visual formatting model in the css spec if the min width is greater then the current width, the browser should change the width (in this case to 20%, which the good browsers could render properly).

    However IE5-6 cannot understand min-width, so they simply ignore the line and proceed to use the slightly undervalued width, therefore counteracting the 100%+excess issue they both are well known for causing.

    No hacks, nice and clean, valid markup... yey!

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    i managed to fix IE7 with overflow:hidden behind moved
    What do you mean "behind moved"?

    IE7 (as well as other browsers) still has Rounding Errors. Resize your browser window ever so slightly and you will see how gaps appear on the black box of that test at the link I just gave.


    If I understand your last post correctly, then IE7 is still dropping the last list item at various window widths with this code -

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>demo</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
    
    * {
        border: 0;
        margin: 0;
        padding: 0;
    }
    #nav {
        margin-top: -65px;
        padding: 0;
        position: absolute;
        width:100&#37;;
        background: #0A2E2C;    
        top: 50%;
    }
    #nav li {
        display: inline;
    }
    #nav li a {
        background: #0A2E2C;
        color: #AFAFAF;
        float: left;
        height: 100px;
        line-height: 100px;
        overflow: hidden;
        text-align: center;
        text-decoration: none;
        width:19.5%;
        min-width: 20%; 
    } 
    
    </style>
    </head>
    <body>
    
    <ul id="nav">
        <li><a href="#" title="About">About</a></li>
        <li><a href="#" title="Work">Work</a></li>
        <li><a href="#" title="Learn">Learn</a></li>
        <li><a href="#" title="Login">Login</a></li>
        <li><a href="#" title="Contact">Contact</a></li>
    </ul>
    
    </body>
    </html>

  7. #7
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Usually a small negative right margin on the last <a> link should stop the drop.

  8. #8
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    yea, that seems to have fixed it properly, thanks everyone


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
  •