I have a logo positioned absolute in the top left of my page.
I have a horizontal navigation menu contained in a <div class=topnavmenu> with width:100% that lays underneath the logo.
I am using padding-left:232px attribute to cause my menu text to start beyond the right edge of the logo. The logo has a transparent background and the .topnavmenu class DIV spans the entire page width. My problem is that Netscape...I've only checked NS7... renders the menu DIV 232px OVER the right edge of all other content causing horizontal scrollbars.
The <div class=topnavmenu> is positioned relative 'bottom left' in the <div class=header>
Here's the relevant CSS, does someone know why this is happening, or a work around for Netscape? It looks great in IE.
Here's the relevant CSS. Thanks for your help...and patience!
.header
{
width: 100%;
position: relative;
height: 105px;
background-color: rgb(154,154,154);
}
img.leftpart
{
position:absolute;
top:0px;
left:0px;
z-index:15;
}
img.rightpart
{
position:absolute;
top:0px;
left:231px;
z-index:15;
}
.topnavmenu
{
position:absolute;
bottom:0px;
left:0px;
width:100%;
background-color:#003366;
padding-left:232px;
z-index:10;
}
I have a horizontal navigation menu contained in a <div class=topnavmenu> with width:100% that lays underneath the logo.
I am using padding-left:232px attribute to cause my menu text to start beyond the right edge of the logo. The logo has a transparent background and the .topnavmenu class DIV spans the entire page width. My problem is that Netscape...I've only checked NS7... renders the menu DIV 232px OVER the right edge of all other content causing horizontal scrollbars.
The <div class=topnavmenu> is positioned relative 'bottom left' in the <div class=header>
Here's the relevant CSS, does someone know why this is happening, or a work around for Netscape? It looks great in IE.
Here's the relevant CSS. Thanks for your help...and patience!
.header
{
width: 100%;
position: relative;
height: 105px;
background-color: rgb(154,154,154);
}
img.leftpart
{
position:absolute;
top:0px;
left:0px;
z-index:15;
}
img.rightpart
{
position:absolute;
top:0px;
left:231px;
z-index:15;
}
.topnavmenu
{
position:absolute;
bottom:0px;
left:0px;
width:100%;
background-color:#003366;
padding-left:232px;
z-index:10;
}