1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Argh Problem in Firefox and all IE but not IE7?

Discussion in 'HTML & Website Design' started by wd_2k6, Dec 27, 2007.

0
  1. #1
    Ok I've tried to minimize the code down as much as possible:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>X</title>
<style type="text/css" media="screen">
#container
{
width: 768px;
margin: 0px auto;
color: black;
border: 1px;
line-height: 130%;
}

#content
{
margin-left: 120px;
border-left: 1px;
margin-right: 120px;
border-right: 1px;
}

#menu {
margin-left: auto; 
margin-right: auto;
margin-top: 0px;
width: 707px;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 101px;
float: left;
}

#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
margin: 0;
padding: 2px 3px;
}

#menu li {position: relative;}

#menu ul ul {
position: absolute;
z-index: 500;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;} 

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
</head>
<body>

<div id="container">

<div id="menu">
<ul><li><h2>News</h2>
<ul><li><a href="x.html" title="Latest News">a</a></li>
<li><a href="x.html" title="News Archives">b</a></li>
</ul></li></ul>
</div>

<div id="content">
<table width="100%">
<tr><td>X</td></tr></table>
</div>

</div>
</body>
</html>
    Code (markup):
    In IE 7 and Opera the X appears below the menu inside the content as it should. However in Firefox it appears to the right of the menu? I think it may be a problem with the CSS menu code, but it works in IE7 so i don't understand why this happens.
     
    wd_2k6, Dec 27, 2007 IP
  2. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Ok fair enough, i'm sorry i was a bit silly posting all that code. Ignore my first post.
    I've deleted line by line of code, and it seems that this is the problem:

    #menu {
    width: 1000px;
    }
    #menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 101px;
    float: left;
    }

    float:left is causing the problem in firefox, however not in IE7 and Opera. However if this line is deleted the sections of the nav bar do not align side by side, instead they appear underneath each other. Does anybody know how to solve this problem?
    P.S the problem is that the content that should appear below the navbar appears to the right in firefox, whereas it should appear below the nav bar in a completely seperate div.
     
    wd_2k6, Dec 27, 2007 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hmm, why float the menu? Float the li's or the a's instead. You want a horizontal menu?

    <ul id="menu"> (no need for wrapping div unless you really want)
    <li><a href="#">Spam</a></li>
    <li><a href="#">Eggs</a></li>
    <li><a href="#">Brian</a></li>
    </ul>

    CSS something like
    #menu { (this is the ul)
    list-style: none;
    margin: 0;
    padding: 0;
    width: 101px;
    }
    #menu li {
    display: inline; Makes horizontal and helps an IE buggitty bug-bug
    }
    #menu li a {
    float: left;
    text-decoration: none;
    otherstuff you want;
    }

    Remember after the menu then to clear the floats... one of the crusties here does something else so you don't have to clear them but I forget what that is.

    It's almost as if, because you're floating the menu, IE7 and Opera think there's not enough room for the next thing (the X) to ride up along side the menu, but FF thinks there IS enough room. Were the menu shorter, IE7 and Opera would prolly also have the X to the right. That stuff happens with floats. If the menu was bigger, even FF prolly woulda had the X underneath too-- floats and stuff after floats only try to ride up alongside each other when they think there's enough room to do so.

    Another reason to have universal margin and padding reset, as now you can see big differences between browsers.

    Helps though if you can show a picture of what you want, or a URL.
     
    Stomme poes, Dec 28, 2007 IP
    wd_2k6 likes this.
  4. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Thanks again, got it to work in Firefox correctly.
    I had to keep the float:left inside the ul for the menu to stay horizontal putting it anywhere else would cause it to become vertical one underneath each other instead of side by side.
    It seemed the problem was that i wasn't clearing the floats, i wasn't sure what this meant but by adding overflow; hidden to the main menu property did the trick.

    EDIT: The above stopped my menu from working altogther, however i have solved this now by using a clever bit of CSS from Tony Aslett on positioniseverything website:

    .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
     
    wd_2k6, Dec 28, 2007 IP
  5. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Just remember that IE is dumb enough not to know what :after means, but since its containers try to contain floats anyway (also not supposed to) it should look okay for everyone.

    Seriously though you don't need to float the UL to make the menu horizontal. Ul's default is display: block. I change the li's to display:inline, and then like I said if you float the anchors they will stack alongside each other so long as there's room in the ul.
     
    Stomme poes, Dec 29, 2007 IP