Can't seem to line up banner with Nav bar

niemie

07-08-2005, 12:31 AM

This is driving me nuts, for the life of me I don't understand why the banner and the nav bar aren't lining up on the edges, and it appears to be different (how it is off) in IE and Firefox. Basically they should both be 750px in width but the edges of the nav bar and banner beneath it never line up. Thanks for any help....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

body {
margin:0;
padding:0;
text-align: center; /* IE5/Win fix */
}

#wrapper {
width:750px;
height:100%;
margin:0 auto 0 auto;
text-align: left;
}

#top {
width:750px;
height:60px;
padding:5px 1px 0 3px;
}

#logohead {
width:370px;
height:60px;
position:absolute;
left:157px;
top:17px;
background-image:url(../images/ricochetlogo.gif);
background-repeat:no-repeat;
background-position:bottom left;
z-index:5000;
}

#toplinks {
height:60px;
width:365px;
margin-left:380px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#666666;
}

#midbanner {
width:auto;
height:170px;
position:relative;
background: url(banner.gif) no-repeat;
}

#midblock {
width:auto;
height:45px;
position:relative;
background-color:#6292BB;
margin:1px 0 0 0;
}

#bottomcontent {
width:auto;
height:auto;
}

#leftnavbox {

}

#leftboxes {
width:185px;
height:auto;
padding:5px 5px 0 5px;
float:left;
/*border:1px solid gray;*/
}

.leftbox, .leftboxBottom {
height:80px;
width:98%;
border:1px solid #8D8D8D;
background-image:url(../images/leftboxstrip.gif);
background-repeat:no-repeat;
background-position:top;
color:#334C99;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
padding-top:2px;
}

.leftbox{
margin-bottom:10px;
}

#rightboxes {
width:535px;
padding:5px 0 0 0;
margin-left:205px;
border:1px solid pink;
}
.rightbox1, .rightbox2, .rightbox3 {
height:176px;
width:165px;
border:1px solid blue;
background-image:url(../images/teststip.gif);
background-repeat:no-repeat;
background-position:top;
color:#ffffff;
font-weight:bold;
}

.rightbox1 {
float:left;
}

.rightbox2 {
margin-left:183px;
}

.rightbox3 {
float:right;
}

#bottombox {
height:80px;
width:535px;
margin-top:10px;
border:1px solid orange;
}

/* hide from IE/Mac \*/
* html #bottomcontent,* html #midbanner {
width:750.5px;
wid\th:750px;
}
/* end hide */
/****** BEGIN MENU ******/
#nav,#nav li,#nav li ul {
list-style-type: none;
margin: 0;
padding: 0;
}

#nav {
position: relative;
width:750px;
min-height: 3.1em;
height:auto;
margin:0;
font-size: .8em;
top: 0;
}

#nav li {
margin: 0 0 0 2px;
padding: 0;
width:100px;
float:right;
text-align:center;
font-weight: bold;
color:#444;
}

#nav a {
display:block;
color:#999999;
text-decoration:none;
background: url(inactive.gif) no-repeat;
background-image: url(inactive.gif);
background-repeat: no-repeat;
background-position: top left;
margin:0;
position: relative;
font-weight: bold;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
top: 0;
line-height: 1.4em;
}

#nav a:hover {
color:#888888;
}

ul#nav li a.here {
background: url(active.gif) no-repeat;
z-index: 310;
position: relative;
margin-bottom: -1px;
color:#334C99;
}

ul#nav li a.here:hover {
color:#334C99;
}

ul#subnav {
width:750px;
min-height: 23px;
height: 1.7em;
background:url(subnav_background.gif) repeat-x;
border-top:1px solid #CECECE;
border-left:1px solid #CECECE;
border-right:1px solid #CECECE;
text-align:right;
padding:0 2px 0 0;
clear:both;
z-index:290;
position:absolute;
margin: 0;
right: 0;
top: 1.34em;
}
/* hide from IE/Mac \*/
* html #nav {
height: 3.1em;
wid\th:752px;
lef\t: 1px;
}

* html #nav a {
height: 1%;
}

* html ul#subnav {
wid\th:753px;
}
/* end hide */

#subnav li {
position:relative;
z-index:102;
display: block;
margin: 0;
padding: 0;
float:left;
line-height: 1.4em;
width:50px;
}

ul#subnav li a {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
margin-top:3px;
color:#666666;
background-image:url();
border-left:1px solid #cccccc;
}
/* end menu */
</style>
</head>
<body>
<div id="wrapper">
<div id="top">
<div id="logohead"> </div>
<div id="toplinks" align="right"><img src="images/arrows2.gif">Client Login</div>
</div>
<ul id="nav">
<li><a class="a3" href="#">Link1</a></li>
<li><a class="a2" href="#">Link2</a></li>
<li><a class="a1" href="#">Link3</a></li>
<li><a class="a0 here" href="#">Home</a>
<ul id="subnav"><li> </li></ul>
</li>
</ul>
<div id="midbanner"></div>
<div id="bottomcontent">
</div>
</div>
</body>
</html>

_Aerospace_Eng_

07-08-2005, 01:16 AM

Personally I think you are overcomplicating your CSS. What browsers are you trying to cater to? You seem to be using absolute positioning when it isn't necessary. If its okay with you I would like to recode your CSS and html. Do you have an image of how it should look?

niemie

07-08-2005, 01:18 AM

As many as I can..... but mainly IE, Mozilla/Firefox, and Mac users as well.

I am sure my code is not as efficient as could be, but it takes me awhile to do things in CSS because I have only done a few. I can send you an image if you'd like....

EDIT: I sent you an email.

_Aerospace_Eng_

07-08-2005, 02:12 AM

Check this out
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

html,body {
margin:0;
padding:0;
text-align: center; /* IE5/Win fix */
height:100%;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#FFFFFF;
color:#FFFFFF;
}
#wrapper {
width:750px;
margin:auto;
}
#nav {
list-style:none;
width:400px;
float:right;
}
#nav li {
width:100px;
height:20px;
float:left;
}
a.inactive, a.inactive:link, a.inactive:visited, a.inactive:active {
display:block;
height:15px;
background-image:url(inactive.gif);
background-repeat:no-repeat;
color:#999999;
text-align:center;
text-decoration:none;
padding-top:5px;
}
a.inactive:hover {
color:#888888;
font-weight:bold;
}
a.active, a.active:link, a.active:visited, a.active:active {
display:block;
height:15px;
background-image:url(active.gif);
background-repeat:no-repeat;
color:#334C99;
text-align:center;
text-decoration:none;
padding-top:5px;
}
a.active:hover {
color:#334C99;
font-weight:bold;
}
#subnav {
list-style:none;
background-image:url(subnav_background.gif);
height:22px;
clear:both;
border:1px solid #CECECE;
border-bottom:0;
color:#999999;
}
#subnav li {
width:124px;
height:18px;
text-align:center;
float:left;
}
#subnav li a, #subnav li a:link, #subnav li a:visited, #subnav li a:active {
display:block;
height:14px;
padding-top:4px;
color:#999999;
text-decoration:none;
}
#subnav li a:hover {
color:#888888;
font-weight:bold;
}
#midbanner {
height:170px;
background-image:url(banner.gif);
text-align:left;
}
#bottomcontent {
text-align:left;
color:#000000;
}
</style>
</head>
<body>
<div id="wrapper">
<ul id="nav">
<li><a class="active" href="#">Home</a></li>
<li><a class="inactive" href="#">Link1</a></li>
<li><a class="inactive" href="#">Link2</a></li>
<li><a class="inactive" href="#">Link3</a></li>
</ul>
<ul id="subnav">
<li><a href="#">Subnav 1</a></li>
<li><a href="#">Subnav 2</a></li>
<li><a href="#">Subnav 3</a></li>
<li><a href="#">Subnav 4</a></li>
<li><a href="#">Subnav 5</a></li>
<li><a href="#">Subnav 6</a></li>
</ul>
<div id="midbanner">Mid Banner</div>
<div id="bottomcontent">Bottom Content</div>
</div>
</body>
</html>
It looks good among the latest browsers.

niemie

07-08-2005, 03:05 AM

Thanks!! That fixed the alignment issue and surely seems to have cleaned up the code. I'll go back and add the other classes I need for the boxes etc under the main banner.

One thing though, I need to get the active tabs to lay over the top of the top pixel of the nav bar so the nav bar's top border goes behind it... I tried z-index but to no avail....

EDIT: Also, what's the best method to use to get a few pixels of space between the inactive tabs? Thanks.

_Aerospace_Eng_

07-08-2005, 03:16 AM

Try this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

html,body {
margin:0;
padding:0;
text-align: center; /* IE5/Win fix */
height:100%;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#FFFFFF;
color:#FFFFFF;
}
#wrapper {
width:750px;
margin:auto;
}
#nav {
list-style:none;
width:416px;
float:right;
}
#nav li {
width:100px;
height:20px;
margin-left:4px;
float:left;
position:relative;
}
a.inactive, a.inactive:link, a.inactive:visited, a.inactive:active {
display:block;
height:15px;
background-image:url(inactive.gif);
background-repeat:no-repeat;
color:#999999;
text-align:center;
text-decoration:none;
padding-top:5px;
}
a.inactive:hover {
color:#888888;
font-weight:bold;
}
a.active, a.active:link, a.active:visited, a.active:active {
display:block;
position:absolute;
width:100px;
height:16px;
top:0;
left:0;
z-index:1;
background-image:url(active.gif);
background-repeat:no-repeat;
color:#334C99;
text-align:center;
text-decoration:none;
padding-top:5px;
}
a.active:hover {
font-weight:bold;
}
#subnav {
list-style:none;
background-image:url(subnav_background.gif);
height:22px;
clear:both;
border:1px solid #CECECE;
border-bottom:0;
color:#999999;
}
#subnav li {
width:124px;
height:18px;
text-align:center;
float:left;
}
#subnav li a, #subnav li a:link, #subnav li a:visited, #subnav li a:active {
display:block;
height:14px;
padding-top:4px;
color:#999999;
text-decoration:none;
}
#subnav li a:hover {
color:#888888;
font-weight:bold;
}
#midbanner {
height:170px;
background-image:url(banner.gif);
text-align:left;
}
#bottomcontent {
text-align:left;
color:#000000;
}
</style>
</head>
<body>
<div id="wrapper">
<ul id="nav">
<li><a class="active" href="#">Home</a></li>
<li><a class="inactive" href="#">Link1</a></li>
<li><a class="inactive" href="#">Link2</a></li>
<li><a class="inactive" href="#">Link3</a></li>
</ul>
<ul id="subnav">
<li><a href="#">Subnav 1</a></li>
<li><a href="#">Subnav 2</a></li>
<li><a href="#">Subnav 3</a></li>
<li><a href="#">Subnav 4</a></li>
<li><a href="#">Subnav 5</a></li>
<li><a href="#">Subnav 6</a></li>
</ul>
<div id="midbanner">Mid Banner</div>
<div id="bottomcontent">Bottom Content</div>
</div>
</body>
</html>
I basically made the #nav li's position:relative; then made the active class links position:absolute; and gave them a z-index:1; and changed the height a little. To get a few pixels in between the tabs, add some margin-left or margin-right to the li's, if you do that you will need to adjust the width of the ul#nav to fit each li.

niemie

07-08-2005, 03:22 AM

So the Javascript changed it? That one is beyond me, still trying to understand why the Javascript.

Probably edited my last post to late as well so you didn't see it, but what is the best method to add a few pixels between each of the inactive tabs?

I am beginning to think my first effort was horrible.... thanks for your help!

_Aerospace_Eng_

07-08-2005, 03:23 AM

niemie

07-08-2005, 03:33 AM

Ok, will do - the reason I initially absolutely positioned the logo (which is above the sub nav on the opposite side of the tabs) was to get it to sit a little below the top of the tabs, which I could not get it to do with relative. I now realize that if the user shrinks the width of the screen that will throw everything off.

I attached a screen shot of what I am trying to do, as far as positioning the logo. The logo itself is 250W by 57H. Again, trying to get it to sit just below the tops of the tabs, and have been unsuccessful. You will also see in that picture the tiny pixel gaps between the active tab and the top border of the nav bar - still seems to hold true even after your successful recode...

Thanks so much for taking the time to help me out, I really appreciate your time. (I've got a long way to go!)

niemie

07-08-2005, 03:40 AM

I saw it, been editing my post to, I was experimenting with some other javascript. I edited my post reread my post think I answered your questions. Ignore the javascript it has nothing to do with your problem.

That one looks awesome in Firefox but IE messes it up... not sure where the changes occured...

_Aerospace_Eng_

07-08-2005, 03:40 AM

I see those spaces but I think they look fine, gives a little creative look. As far as your logo goes. Make the wrapper div position:relative; and then use absolute positioning to position the logo. Making an elements container position:relative; and then using absolute positioning for the element will go off the top of the container and not the browser. Yeah just noticed the mess up in IE, use this for the #nav css
#nav {
list-style:none;
width:416px;
float:right;
width:420px; !important
}
The !important tells IE to use that width instead, at the moment IE is the only browser that I believe understands the important rule. Though this might be the IE 3 pixel gap that peeps talk about. Read here (http://www.positioniseverything.net/explorer/threepxtest.html).

niemie

07-08-2005, 06:11 PM

It all turned out nicely - just one obsticle left. I'm trying to put in an arrow image next to the active sub nav list. I tried it out first on the global level (#subnav) to see how it lined up. The problem is (I think because they are floated left) that the arrows don't line up next to the list items - but I am unsure of what to change to not mess up the text spacing of the list items. I don't think list-position is relavant.... can't think of anything else. Changing their widths will just mess up the spacing.

Example attached.

_Aerospace_Eng_

07-08-2005, 08:16 PM

Might be better off putting them inside the link tags as image tags. I think that will work just fine.

niemie

07-08-2005, 08:37 PM

I think you're right - will do!