Toolbar messed up in Opera And Padding Issues...

[t-buck]

I have this site I'm working on:

http://www.nebrad.org

I just did the menu, and I want the orange color to connect with the main text box when you hover over it. I messed with the padding, until it reached the content box, but when I open the site in opera, it doesn't connect? And I'm assuming it isn't connected in IE either? Firefox and Safari display it fine. Any help?

My other question, has to do with padding. The words "Welcome" I wanted to add padding to the style of the words in the CSS. But every time I do that, it makes the box expand weirdly, even though, obviously a 10px padding, shouldn't push the right side of the box out? What am I doing wrong?

[Fang]

The html seems wrong. This would be more logical:

<div id="maincontent">
<p class="maincontentheader">Welcome</p>
</div>

Then add padding to .maincontentheader

[t-buck]

That change in code fixed my one problem. Does anybody know why the toolbar won't connect to the orange box below it in Opera, but it will in safari and firefox?

[jlhaslip]

doesn't seem to connect for me using FF2, either, but Opera has a wider gap.
can't quite figure it either...

you might try eliminating all padding and margin from the page by inserting the following css rule:

* { margin: 0; padding:0; }

to see what happens.

[jlhaslip]

#maincontent{
position:absolute; left:137px; top:245px;width:609px; height:437px;z-index:1; visibility:visible; background-color:#f7f5e7;
}
and 
* { margin:0; padding:0; }

Mostly just the absolute positioning of the maincontent area needed to come up towards the menu.
Appears good in my Local copy. ff2.0.0.8, safari(win), IE7 and opera9.24
The horiz nav is a little different in several of them. Might need to tweak it a little.

[t-buck]

I changed that size on the top, but now in Opera it's completely messed up? I have no idea what happened now?

[jlhaslip]

Fortunately, i still have a copy of the file I was using. Try it.

body{
margin: 0px 0px;
color: #FFFFFF;
text-align:center;
background-color: #E7EBF1;
}

#container {
margin: 0px auto;
padding:0;
text-align:left;
width:1062px;
height:900px;
position:relative;


}

#headergraphic {position:absolute; left:0px; top:0px;width:1062px; height:215px;z-index:1; visibility:visible;}
#headerleft {position:absolute; left:0px; top:215px;width:137px; height:49px;z-index:2; visibility:visible;}
#headerright {position:absolute; left:746px; top:215px;width:316px; height:49px;z-index:4; visibility:visible;}

#maincontent{ 
position:absolute; left:137px; top:245px;width:609px; height:437px;z-index:1; visibility:visible; background-color:#f7f5e7;
}

.maincontentheader {
font-family:georgia;
font-size:24px;
color:#b6a623;
padding-left:40px;
padding-top:20px;


}

.maincontenttext {
font-family:arial;
font-size:12px;
color:#000000;
padding-left:40px;
padding-top:5px;
}

#menu {
position:absolute; left:137px; top:215px;width:609px; height:49px;z-index:1; visibility:visible; background-color:#FFFFFF;
}

#advertise {position:absolute; left:762px; top:280px;width:175px; height:176px;z-index:5; visibility:visible;
font-family:arial;
font-size:10px;
color:#254a7c;
background-color:#e7ebf1;
text-align:center;
padding-top:10px;
}
.ad {padding-bottom:20px;}

#infobox {position:absolute; left:762px; top:472px;width:175px; height:221px;z-index:1; visibility:visible;
background-color:#e7ebf1; text-align:center;}
.styleinfoboxheader{
font-family:arial;
font-size:18px;
color:#254a7c;
z-index:1;


}
.styleinfoboxtext{
font-family:arial;
font-size:12px;
color:#777777;

}

#contentbackground {
    position:absolute;
    left:87px;
    top:264px;
    width:900px;
    height:636px;
    
    background-color:#FFFFFF;
    
}


ul#navlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

#navlist li
{
display: inline;
list-style-type: none;
}

#navlist a { padding: 3px 13px; }

#navlist a:link, #navlist a:visited
{
color: #abaaaa;
background-color: #FFFFFF;
text-decoration: none;
font-family:arial;
font-size:12px;
font-weight:600;
}

#navlist a:hover
{
color: #b6a623;
background-color: #f7f5e7;
text-decoration: none;
padding-bottom:18px;
}

[t-buck]

Ok I got it to look correct in opera again. I changed the position of the maincontentbox, but then in firefox it makes the menu too close to the content box. I mean, it looks ok, you can see everything, but I wanted the items to be higher up from the content area? Any other idea on how to get this to look correct?

[jlhaslip]

That's too high.

FF2 has space under the links.

Also, the index page is missing the "Home" tab, which should show as class=current when you arrive at the Index page, to avoid the Navbar moving when you click a navbar item. Display all of them, all the time for a consistent look to the page.

[t-buck]

I fixed the Home button issue. Thanks for catching that.

But as far as the menu not reaching the content box. When I change the style sheet to what you recommended it makes the menu touch the content box, but it makes the buttons on my mac in firefox and safari very small. I wanted them to be bigger. Is there any way i can fix this, and still have them touch the content area?