Forum Moderators: not2easy
May I please ask for your help.
A.I have created a navigation-menu using an unordered list and css styling (will add hovers later).
B.Below my navbar, I wish to have a banner which spans the screen. In xhtml I have this as a empty div and in the css, I will do image replacement.
My problem occurs in Firefox. The navbar overlaps onto the banner graphic (which is what I don't want), whereas in IE7.0, there is no overlap, with the banner sitting below the navbar.
** If I put some text into the html of the banner div, in IE and FF, this falls under the navbar. I think my problem must relate to image replacement in CSS.
Thanks in advance
Mfox
I have removed unimportant code:
HEre is the xhtml:
<body>
<div id="container">
<div id="branding">
<h1>Title</h1>
</div>
<div id="nav_bar">
<ul><li ><a href="">Menu 1</a></li></ul>
<ul><li ><a href="">Menu 2</a></li></ul>
</div>
<div id="banner">
</div>
<div id="content">
</div>
</div>
</body>
Here is the CSS:
div#branding {
width: 100%;
height: 150px;
}
#nav_bar {
width: 100%;
}
#nav_bar ul {
float: left;
}
div#banner {
background-image: url(../images/banner.jpg);
background-repeat: no-repeat;
height: 150px;
width: 800px;
}
and a warm welcome to these forums. ;)
Try adding clear:both; to your #banner rules.
For further information, do a search for clearing floats.
birdbrain
No problem, you're very welcome. ;)
