Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations MikeeOK on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

padding-left pushes the DIV over in Netscape7

Status
Not open for further replies.

organicg

Programmer
Oct 21, 2002
151
US
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;
}
 
Try taking away the width:100% on the top nav menu. The 232px is appended to the 100% width, which is correct according to the CSS box model.

News and views of some obscure guy
 
I should have said that I tried that already, of course. It causes the box to terminate right after the text, only about 1/2 way across the screen. Not what I want.
.
.
.
OK, your advice helped. The nav DIV was position:absolute and nested in another DIV that was also set width:100%. I did a quick tester, and the position:absolute definitely caused the problem. I did not test what renders with a position:relative DIV nested in a DIV with width:100%, but whatever.
I figured for the logo and the nav menu I'd force everything with position:absolute, since it was near the top of the page, not realizing that was a bad idea.
Thanks, on to the next issue. I'm uploading a new version of this site tonight, Friday. You can check out what I've been working on. SkiCarpool.com. I've still got lots to work on, and Sitepoint's CSS book just came in the mail yesterday.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top