No replies
kingk1974
Offline
Enthusiast
Orange
Last seen: 11 years 4 weeks ago
Orange
Joined: 2005-02-14
Posts: 66
Points: 0

Okay this maybe a hard one... Let me try to explain but first here is and example of what the page should look like http://www.ormco.com. The header is created using tables and javascript my goal is to position everything will CSS and use CSS drop-downs.

I can get everything positioned without a problem but when trying to position the main navigation on the second line from the bottom in different browser the text is sized differently therefore my bottom line doesn't match.

So here's what I did... I added a backround graphic to simulate where the box around the text should be position but when you rollover the navigation it doesn't match up with my graphic.

I hope that makes some sense... Most of the markup that I'm using came from Eric Meyers' book - more CSS.

If you need more info let me know and THANK YOU ALL FOR YOUR HELP!

Here is my new code:[/b]

<style type="text/css">
<!--
div#header {
width: 770px;
margin: auto;
padding: 0;
}

div#header img.Logo {
width: 346px;
height: 50px
}

div#header form {
text-align: right;
margin: 5px 0 5px 0;
padding: 0;
}

/* ----- DISCIPLINES NAVIGATION ----- */
div#disciplines {
position: absolute;
top: 3px;
margin: 0;
padding: 0;
display: inline;
}

div#disciplines ul {
margin: 0;
padding: 0;
}

div#disciplines li {
position: relative;
list-style: none;
float: left;
}

div#disciplines li a {
float: left;
display: block;
margin: 0;
padding: 0 3px 0 3px;
}

div#disciplines li.style {
font-family: Univers, Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: normal;
}
/* ----- DISCIPLINES NAVIGATION ----- */

/* ----- MAIN NAVIGATION ----- */

div#navBox {
position: absolute;
top: 23px;
width: 424px;
height: 27px;
background-image: url(http://172.18.27.156:8101/cfusion/ITDev/innova/images/commonSiteImages/navigation/header/navigationBoxes.gif);
background-repeat: repeat;
display: inline;
}

div#nav {
position: absolute;
top: 5px;
width: 424px;
margin: 0;
padding: 0;
}

div#nav ul {
margin: 0;
padding: 0;
background: white;
border: 1px solid #000;
border-width: 0 1px;
text-align: center;
}

div#nav li {
position: relative;
list-style: none;
margin: 0;
float: left;
width: 105px;
}

div#nav li:hover {
background: #CCC;
}

div#nav li.submenu:hover {
background-color: #CCC;
}

div#nav li a {
display: block;
margin: 0;
padding: 1px 0 3px 5px;
text-decoration: none;
voice-family: "\"}\"";
voice-family: inherit;
}

div#nav ul a {
width: auto;
}

div#nav ul ul {
position: absolute;
display: none;
}

div#nav ul ul li {
border-bottom: 1px solid #000;
}

div#nav ul.level1 li.submenu:hover ul.level2 {
display: block;
}

div#nav ul.level1 {
font-family: Univers, Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
font-weight: bold;
}

div#nav ul.level1 a:link {
color: #000000;
}

div#nav ul.level2 {
font-family: Univers, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
font-weight: normal;
text-align: left;
}

/* ----- MAIN NAVIGATION ----- */

-->
</style>
<div id="header">
<img class="Logo" src="http://172.18.27.156:8101/cfusion/ITDev/innova/images/commonSiteImages/navigation/header/innovaLogo.jpg" width="346" height="50">

<div id="disciplines">
<ul>
<li class="style"><a href="http:www.sybrondental.com">SDS</a></li>
<li class="style"><a href="http:www.kerrdental.com">Dentistry</a></li>
<li class="style"><a href="http:www.ormco.com">Orthodontics</a></li>
<li class="style"><a href="http:www.kerrtotalcare.com">Prevention</a></li>
<li class="style"><a href="http:www.sybronendo.com">Endodontics</a></li>
<li class="style"><a href="http:www.orascoptic.com">Magnification</a></li>
<li class="style"><a href="http:www.orascoptic.com">Ergonomics</a></li>
</ul>
</div>

<div id="navBox">
<div id="nav">
<ul class="level1">
<li class="submenu"><a href="#">Company</a>
<ul class="level2">
<li><a href="#">Home</a></li>
<li><a href="#">About Innova</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Employment</a></li>
<li><a href="#">Art Library</a></li>
</ul>
</li>
<li class="submenu"><a href="#">Products</a>
<ul class="level2">
<li><a href="#">A to Z List</a></li>
<li><a href="#">Implants</a></li>
<li><a href="#">Surgical Motors</a></li>
<li><a href="#">Regeneration Products</a></li>
<li><a href="#">Art Library</a></li>
</ul>
</li>
<li class="submenu"><a href="/learning/">Learning</a>
<ul class="level2">
<li><a href="#">Video</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Published Articles</a></li>
</ul>
</li>
<li class="submenu"><a href="/">Help</a>
<ul class="level2">
<li><a href="#">Web Site Help</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Site Map</a></li>
</ul>
</li>
</ul>
</div>
</div>
<form method="post" action="/search/searchAction.cfm">
<input type="text" class="formFieldText" name="Criteria" size="30" maxlength="50" />
<input type="submit" class ="formSubmitButton" value="Search" />
</form>
</div>