SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Netscape not showing border correctly in lists

    Hi everyone,

    This is my first go at CSS and I'm going through some growing pains. I've been able to work out most things by finding answers online but this one's really got me stumped.

    For some reason, when viewed in Netscape, the dropdown list sometimes loses its bottom border. For example, when you click on 'Programmes', the border under the last item ('CTESOL') is there but when you click on 'About Us', the border under 'Review is not. However, when I add a few more items to the dropdown under 'About Us', the border would reappear so it seems to be affected by the number of list items which doesn't really make any sense. Here's the code...PLEASE HELP!!!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>

    <head>
    <title>Test Site</title>

    <style type="text/css">

    body
    {
    font-family: verdana;
    color: black;
    font-size: .75em;
    background-color: #000066;
    text-align: center;
    }

    #container
    {
    width: 749px;
    background-color: white;
    margin: 0 auto;
    }

    #headerlogo
    {
    float: left;
    height: 45px;
    width: 350px;
    margin: 0;
    background-image: url("images/logo5.jpg");
    background-repeat: no-repeat;
    background-color: #000066;
    border-bottom: white solid 1px;
    }

    * html #headerlogo
    {
    margin-right: -3px;
    }

    #header
    {
    background-color: #000066;
    margin-left: 350px;
    height: 45px;
    padding: 0;
    border-bottom: white solid 1px;
    }

    * html #header
    {
    margin-left: 347px;
    }

    #header p
    {
    text-align: right;
    color: white;
    padding: 20px 5px 0 0;
    font-size: .85em;
    }

    div.float
    {
    float: left;
    border-right: 1px solid white;
    margin: 0;
    padding: 0;
    }

    * html div.float
    {
    border-bottom: white solid 2px;
    }

    div.noborder
    {
    border-right: 0;
    }

    div.silverline
    {
    border-bottom: gray solid 1px;
    margin: 0;
    padding: 0;

    }

    #nav, #nav ul { /* all lists */
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: #AFAFFF;
    }

    #nav a {
    display: block;
    width: 106px;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    color: black;
    font-size: .95em;
    padding: .5em 0 .5em 0;
    }

    #nav li { /* all list items */
    float: left;
    width: 106px; /* width needed or else Opera goes nuts */
    text-align: left;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    background-color: #AFAFFF;
    }


    li#last /* main menu faqs*/
    {
    width: 107px;
    border-right: none;
    }

    #nav li a:hover
    {
    color: white;
    }

    #nav li li
    {
    border-bottom: 0;
    }

    #nav li li a
    {
    font-weight: normal;
    padding: .75em 0 .75em 0;
    }

    #nav li ul { /* second-level lists */
    position: absolute;
    border-left: 1px solid gray;
    border-bottom: 1px solid gray;
    border-right: 1px solid gray;
    margin-left: -1px;
    width: 106px;
    left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    }

    * html #nav li ul {
    border-right: 0;
    }

    #nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
    left: auto;
    }

    #content {
    clear: left;
    margin: 0;
    padding: 2em;
    text-align: left;
    }

    p {
    padding: 0;
    margin: 0;
    }

    .clearfloat
    {
    clear: both;
    margin: 0;
    padding: 0;
    }

    </style>

    <script type="text/javascript"><!--//--><![CDATA[//><!--

    sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
    this.className+=" sfhover";
    }
    sfEls[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    }
    }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);

    //--><!]]></script>


    </head>

    <body>


    <div id="container">
    <div id="headerlogo"></div><div id="header"><p>July 14, 2006</p></div><div class="clearfloat"></div><div class="float"><img src="images/pic1.jpg" WIDTH="249" HEIGHT="133"></div>
    <div class="float"><img src="images/pic2.jpg" WIDTH="249" HEIGHT="133"></div>
    <div class="float noborder"><img src="images/pic3.jpg" WIDTH="249" HEIGHT="133"></div>
    <div class="clearfloat"></div><div class="silverline"></div>
    <ul id="nav">

    <li><a href="#">Home</a></li>

    <li><a href="#">Programmes</a>
    <ul>
    <li><a href="#">Programme Overview</a></li>
    <li><a href="#">1-to-1 Tuition</a></li>
    <li><a href="#">Out of School Classes</a></li>
    <li><a href="#">Academic Achiever</a></li>
    <li><a href="#">Foreign Languages</a></li>
    <li><a href="#">e-Interactive</a></li>
    <li><a href="#">Holiday Camps</a></li>
    <li><a href="#">Overseas Camps</a></li>
    <li><a href="#">CTESOL</a></li>

    </ul>
    </li>

    <li><a href="#">About Us</a>
    <ul>
    <li><a href="#">History</a></li>
    <li><a href="#">Our Staff</a></li>
    <li><a href="#">Our Venues</a></li>
    <li><a href="#">Relation with Parents</a></li>
    <li><a href="#">Reviews</a></li>
    </ul>
    </li>
    <li><a href="#">Parent's Zone</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Contact Us</a></li>
    <li id="last"><a href="#">FAQ's</a></li>

    </ul><div id="content">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus. Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et, volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus. Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan turpis at erat.</p>
    <ul><li> test1</li><li> test1</li><li> test1</li><li> test1</li><li> test1</li>
    </ul>
    </div>
    </div>
    </body>

    </html>

  2. #2
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Welcome to the world of the EM rounding error - where the combination of fractions, the fact that no two browsers start out with the same EM value, and differing system metrics can make different browsers wierd out.

    Of course, on my machine this same problem is what causes your "Parent's Zone" text to split to two lines and 'pop' below it's container in Opera and IE.

    Because you are putting the items across the page in a fixed width, you should probably be using a fixed PX sized font there, and setting your line-heights as well.

    All those EM sizings for padding, font sizes, etc in your menu are boning the height calculations between browsers. I just switched your source over to pt and it worked fine.

    Code:
    body
    {
    font-family: verdana;
    color: black;
    font-size: 12px;
    background-color: #000066;
    text-align: center;
    }
    
    #container
    {
    width: 749px;
    background-color: white;
    margin: 0 auto;
    }
    
    #headerlogo
    {
    float: left;
    height: 45px;
    width: 350px;
    margin: 0;
    background-image: url("images/logo5.jpg");
    background-repeat: no-repeat;
    background-color: #000066;
    border-bottom: white solid 1px;
    }
    
    * html #headerlogo 
    {
    margin-right: -3px; 
    }
    
    #header
    {
    background-color: #000066;
    margin-left: 350px;
    height: 45px;
    padding: 0;
    border-bottom: white solid 1px;
    }
    
    * html #header 
    {
    margin-left: 347px; 
    }
    
    #header p
    {
    text-align: right;
    color: white;
    padding: 20px 5px 0 0;
    font-size: 10px;
    }
    
    div.float
    {
    float: left;
    border-right: 1px solid white;
    margin: 0;
    padding: 0;
    }
    
    * html div.float
    {
    border-bottom: white solid 2px;
    }
    
    div.noborder
    {
    border-right: 0;
    }
    
    div.silverline
    {
    border-bottom: gray solid 1px;
    margin: 0;
    padding: 0;
    
    }
    
    #nav, #nav ul { /* all lists */
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: #AFAFFF;
    }
    
    #nav a {
    display: block;
    width: 106px;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    color: black;
    font-size: 11px;
    padding: 6px 0 6px 0;
    }
    
    #nav li { /* all list it6:35 AM 7/18/2006s */
    float: left;
    width: 106px; /* width needed or else Opera goes nuts */
    text-align: left;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    background-color: #AFAFFF;
    }
    
    
    li#last /* main menu faqs*/
    {
    width: 107px;
    border-right: none;
    }
    
    #nav li a:hover
    {
    color: white;
    }
    
    #nav li li
    {
    border-bottom: 0;
    }
    
    #nav li li a
    {
    font-weight: normal;
    padding: 9px 0 9px 0;
    }
    
    #nav li ul { /* second-level lists */
    position: absolute;
    border-left: 1px solid gray;
    border-bottom: 1px solid gray;
    border-right: 1px solid gray;
    margin-left: -1px;
    width: 106px;
    left: -3000px; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    }
    
    * html #nav li ul {
    border-right: 0;
    }
    
    #nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
    left: auto;
    }
    
    #content {
    clear: left;
    margin: 0;
    padding: 24px;
    text-align: left;
    }
    
    p {
    padding: 0;
    margin: 0;
    }
    
    .clearfloat
    {
    clear: both;
    margin: 0;
    padding: 0;
    }
    Which is why I argue AGAINST the use of EM, despite many so called 'experts' ranting and raving about it as if it were the second coming. It doesn't work reliably cross-browser in fixed layouts.

    You'll notice I did the conversion at 16px = 1em, which is what firefox/mozilla/netscape defaults to on all machines... but NOT what Opera defaults to (it does 20px or 27px depending on large fonts/small fonts) nor what IE does (which is set in pt at roughly the same as firefox in small fonts, and 33% larger in small fonts.)

    I'd also consider making the content text 9 or 10pt, so it auto-resizes - but keep the menu text px or it IS going to screw up across platforms.

  3. #3
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    small rounding error in FF, I have set the borders on the A tags

    PS if you must use xhtml, please use XHTML 1.0

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Test Site</title>
    
    <style type="text/css">
    
    body
    {
    font-family: verdana,sans-serif;
    color: black;
    font-size: .75em;
    background-color: #000066;
    text-align: center;
    }
    
    #container
    {
    width: 749px;
    background-color: white;
    margin: 0 auto;
    }
    
    #headerlogo
    {
    float: left;
    height: 45px;
    width: 350px;
    margin: 0;
    background-image: url("images/logo5.jpg");
    background-repeat: no-repeat;
    background-color: #000066;
    border-bottom: white solid 1px;
    }
    
    * html #headerlogo 
    {
    margin-right: -3px; 
    }
    
    #header
    {
    background-color: #000066;
    margin-left: 350px;
    height: 45px;
    padding: 0;
    border-bottom: white solid 1px;
    }
    
    * html #header 
    {
    margin-left: 347px; 
    }
    
    #header p
    {
    text-align: right;
    color: white;
    padding: 20px 5px 0 0;
    font-size: .85em;
    }
    
    div.float
    {
    float: left;
    border-right: 1px solid white;
    margin: 0;
    padding: 0;
    }
    
    * html div.float
    {
    border-bottom: white solid 2px;
    }
    
    div.noborder
    {
    border-right: 0;
    }
    
    div.silverline
    {
    border-bottom: gray solid 1px;
    margin: 0;
    padding: 0;
    
    }
    
    #nav, #nav ul { /* all lists */
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: #AFAFFF;
    }
    
    #nav a {
    display: block;
    text-align: center;
    font-weight: bold;
    text-decoration:none;
    color:black;
    font-size: .95em;
    padding: .5em 0 .5em 0;
    border:1px solid gray;
    border-top:none;
    border-left:none;
    width: 106px;
    }
    #nav ul li a {
    border-left:1px solid gray;
    }
    
    #nav li { /* all list items */
    float: left;
     /* width needed or else Opera goes nuts */
    text-align: left;
    
    background-color:#AFAFFF;
    }
    
    
    li#last /* main menu faqs*/
    {
    width: 107px;
    border-right: none;
    }
    
    #nav li a:hover
    {
    color: white;
    }
    
    #nav li li
    {
    border-bottom: 0;
    }
    
    #nav li li a
    {
    font-weight: normal;
    padding: .75em 0 .75em 0;
    }
    
    #nav li ul { /* second-level lists */
    position:absolute;
    /*border-left: 1px solid gray;
    border-bottom: 1px solid gray;
    border-right: 1px solid gray;*/
    margin-left: -1px;
    width: 106px;
    left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    }
    
    * html #nav li ul {
    border-right: 0;
    }
    
    #nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
    left: auto;
    }
    
    #content {
    clear: left;
    margin: 0;
    padding: 2em;
    text-align: left;
    }
    
    p {
    padding: 0;
    margin: 0;
    }
    
    .clearfloat
    {
    clear: both;
    margin: 0;
    padding: 0;
    }
    	head+/**/body .fc:after{ /* min-height browsers but not IE 7 */
    	content:".";
    	display:block;
    	height:0px;
    	clear:both;
    	visibility:hidden;
    	}
    	
    	* html .fc{height:1%;}
    
    </style>
    	<!--[if IE]>
    	<style type="text/css">
    	*+html .fc{zoom:1;} /* IE 7 */
    	</style>
    	<![endif]-->
    <script type="text/javascript">
    
    sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
    this.className+=" sfhover";
    }
    sfEls[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    }
    }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    </script>
    
    
    </head>
    
    <body>
    
    
    <div id="container">
    <div id="headerlogo"></div>
    <div id="header" class="fc"><p>July 14, 2006</p></div><div class="clearfloat"></div>
    <div class="float"><img src="images/pic1.jpg" width="249" height="133" alt="" /></div>
    <div class="float"><img src="images/pic2.jpg" width="249" height="133" alt="" /></div>
    <div class="float noborder"><img src="images/pic3.jpg" width="249" height="133" alt="" /></div>
    <div class="clearfloat"></div>
    <div class="silverline"></div>
    
    <ul id="nav" class="fc">
    
    <li><a href="##">Home</a></li>
    
    <li><a href="##">Programmes</a>
    <ul>
    <li><a href="##">Programme Overview</a></li>
    <li><a href="##">1-to-1 Tuition</a></li>
    <li><a href="##">Out of School Classes</a></li>
    <li><a href="##">Academic Achiever</a></li>
    <li><a href="##">Foreign Languages</a></li>
    <li><a href="##">e-Interactive</a></li>
    <li><a href="##">Holiday Camps</a></li>
    <li><a href="##">Overseas Camps</a></li>
    <li><a href="##">CTESOL</a></li>
    
    </ul>
    </li>
    
    <li><a href="##">About Us</a>
    <ul>
    <li><a href="##">History</a></li>
    <li><a href="##">Our Staff</a></li>
    <li><a href="##">Our Venues</a></li>
    <li><a href="##">Relation with Parents</a></li>
    <li><a href="##">Reviews</a></li>
    </ul>
    </li>
    <li><a href="##">Parent's Zone</a></li>
    <li><a href="##">Gallery</a></li> 
    <li><a href="##">Contact Us</a></li> 
    <li id="last"><a href="##">FAQ's</a></li>
    
    </ul>
    <div id="content">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus. Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et, volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus. Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan turpis at erat.</p>
    <ul><li> test1</li><li> test1</li><li> test1</li><li> test1</li><li> test1</li>
    </ul>
    </div>
    </div>
    </body>
    
    </html>


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
  •