Hi all. I've been dealing with this issue since day 1 but since previous versions of the site have used more border it hasn't been so obvious.
The issue is with the top menu:
http://www.suffernfamily.com/jobs/nokia1.php
The translucent underlay image is specified to a height of 3em. The overlay text has a height of 1em, with 1em padding top and bottom. 1em + 1em + 1em = 3em, right? Then why is the white box in the hover protruding?
When I would like this (Photoshopped):
I will not do pixel heights because I want this to be scalable. Thanks!
HTML:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<title>ImageWorks Display | Nokia</title>
<link href="main.css" rel="stylesheet" type="text/css"/>
<!--[if IE 6]>
<link href="ie6.css" rel="stylesheet" type="text/css"/>
<![endif]-->
<!--[if IE]>
<link href="ie.css" rel="stylesheet" type="text/css"/>
<![endif]-->
<script type="text/javascript" src="justify.js"></script>
</head>
<body>
<div id="container">
<img class="underlay" src="nokia1.jpg" alt="image" title="" />
<!-- Corners Start -->
<div id="corners">
<div id="consoletopleft">
<img src="topleft.gif" alt="corner" title="" />
</div>
<div id="consoletopright">
<img src="topright.gif" alt="corner" title="" />
</div>
<div id="consolebottomleft">
<img src="bottomleft.gif" alt="corner" title="" />
</div>
<div id="consolebottomright">
<img src="bottomright.gif" alt="corner" title="" />
</div>
<div id="imagetopleft">
<img src="topleft.gif" alt="corner" title="" />
</div>
<div id="imagetopright">
<img src="topright.gif" alt="corner" title="" />
</div>
<div id="imagebottomleft">
<img src="bottomleft.gif" alt="corner" title="" />
</div>
<div id="imagebottomright">
<img src="bottomright.gif" alt="corner" title="" />
</div> </div>
<!-- Corners End -->
<div id="topnavunderlay">
<img src="grey1.png" alt="nav underlay" title="" />
</div>
<!-- Common Menu Start -->
<div id="pulldown1">
<ul>
<li><a href="home.php">home</a></li>
</ul>
<ul>
<li><a class="notactive">overview</a>
<ul>
<li><a class="topli" href="whatwedo.php">What We Do</a></li>
<li><a href="whoweare.php">Who We Are</a></li>
<li><a href="whatsetsusapart.php">What Sets Us Apart</a></li>
<li><a href="ourprocess.php">Our Process</a></li>
</ul>
</li>
</ul>
<ul>
<li><a class="notactive">case studies</a>
<ul>
<li><a class="topli" href="rjrsnus1.php">RJR SNUS</a></li>
<li><a href="nokia1.php">Nokia</a></li>
<li><a href="timbercreek1.php">Timber Creek</a></li>
<li><a href="hersheys1.php">Hershey's</a></li>
<li><a href="hotwheels1.php">Mattel Hot Wheels</a></li>
</ul>
</li>
</ul>
<ul>
<li><a class="notactive">portfolio</a>
<ul>
<li><a class="topli" href="temporary.php">Temporary</a></li>
<li><a href="semipermanent.php">Semi-Permanent</a></li>
<li><a href="permanent.php">Permanent</a></li>
<li><a href="lighting.php">Lighting</a></li>
<li><a href="tobacco.php">Tobacco Fixturing</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="contact.php">contact</a></li>
</ul>
</div>
<!-- Common Menu End -->
<div id="topline">
</div>
<div id="textline">
</div>
<div id="sideline">
</div>
<div id="logo">
<img src="iw3.gif" alt="imageworks logo" title="" />
</div>
<div id="text">
<h3>Nokia Counter Display</h3><br/>
<p>For their Nseries counter display, Nokia wanted a look and feel that echoed the design
of their New York City boutique. Nokia was looking for a unique display
design that was as high-tech as the product it represented. Stopping
power and shoppability were must-haves.</p>
</div>
<div id="gallerynav">
<ul id="gallerynavlist">
<li><a><img src="nokiathumb1.gif" alt="thumb1" title="" /></a></li>
<li><a href="nokia2.php"><img class="linkbutton" src="nokiathumb2.gif" alt="thumb2" title="" /></a></li>
<li><a href="nokia3.php"><img class="linkbutton" src="nokiathumb3.gif" alt="thumb3" title="" /></a></li>
<li><a href="nokia4.php"><img class="linkbutton" src="nokiathumb4.gif" alt="thumb4" title="" /></a></li>
</ul>
</div>
<div id="bottomline">
</div>
<div id="leftarrow">
<a href="rjrsnus1.php"><img src="leftarrow.gif" alt="left arrow" title="" /><span id="previoustext">RJR SNUS</span></a>
</div>
<div id="rightarrow">
<a href="timbercreek1.php"><img src="rightarrow.gif" alt="right arrow" title="" /><span id="nexttext">Timber Creek</span></a>
</div>
</div>
</body>
</html>
CSS:
Code:
* {
margin:0px;
padding:0px;
border:0px;
}
body{
background-color:#333;
font-family:arial, verdana, sans-serif;
width:100%;
height:100%;
position:absolute;
}
#container{
position:absolute;
width:1000px;
height:700px;
top:50%;
left:50%;
margin-top:-350px;
margin-left:-500px;
background-color:#fff;
}
#container img.underlay{
position:absolute;
right:0px;
top:0px;
z-index:0;
}
#imagecaption{
position:absolute;
right:20px;
top:670px;
text-align:right;
font-size: 0.8em;
color:#000;
}
/* ---- Logo ---- */
#logo{
position:absolute;
top:20px;
left:25px;
z-index: 2;
}
#logo img{
width:200px;
height:82px;
}
/* ---- Top Navigation Bar ---- */
#topnavunderlay img{
position:absolute;
right:0px;
width:749px;
height:3em;
filter: alpha(opacity=70);
moz-opacity: 0.70;
opacity: 0.70;
z-index:1;
}
#pulldown1 {
position:absolute;
top:1em;
left:380px;
display:block;
text-align:left;
z-index:2;
}
#pulldown1 ul {
list-style: none;
float:left;
}
#pulldown1 ul li a {
color: #000;
font-size: 1em;
padding: 1em 20px 1em 20px;
text-decoration:none;
}
#pulldown1 ul li a.notactive {
cursor: default;
}
#pulldown1 ul li a:hover {
background: #fff;
color: #f30;
}
#pulldown1 ul ul li a {
color: #000;
font-size: 0.8em;
padding:0.5em;
display:block;
background: #efefef;
width:160px;
}
#pulldown1 ul ul li a:hover {
color: #cfc;
background: #f30;
}
#pulldown1 ul li {
position: relative;
}
#pulldown1 ul ul {
position: absolute;
top: 2em;
left: 0px;
z-index: 500;
}
div#pulldown1 ul ul,
div#pulldown1 ul li:hover ul ul,
div#pulldown1 ul ul li:hover ul ul
{display: none;}
div#pulldown1 ul li:hover ul,
div#pulldown1 ul ul li:hover ul,
div#pulldown1 ul ul ul li:hover ul
{display: block;}
/* ---- Text/Content ---- */
#textheader{
position:absolute;
width:200px;
height:450px;
top:126px;
left:25px;
}
h3 {
letter-spacing: -1px;
font-size: 1.4em;
color:#ff3300;
text-align:left;
font-weight:900;
text-align:center;
}
#text{
position:absolute;
width:200px;
height:479px;
top:200px;
left:25px;
font-size: 0.8em;
color:#000;
text-align:left;
overflow: auto;
}
/* ---- Bottom Gallery ---- */
#gallerynav{
position:absolute;
width:250px;
height:50px;
top:132px;
left:25px;
}
#gallerynavportfolio{
position:absolute;
width:250px;
height:50px;
top:210px;
left:25px;
}
#semipermgallerynavportfolio{
position:absolute;
width:250px;
height:50px;
top:230px;
left:25px;
}
#gallerynavlist li{
list-style:none;
float:left;
}
#gallerynavlist a{
display:block;
margin-right: 15px;
margin-bottom: 15px;
}
#gallerynavlist img.linkbutton{
filter: alpha(opacity=70);
moz-opacity: 0.70;
opacity: 0.70;
}
#gallerynavlist img:hover{
filter: alpha(opacity=100);
moz-opacity: 1.0;
opacity: 1.0;
}
/* ---- Structural Lines ---- */
/* #topline{
position:absolute;
width:749px;
border-top:0.07em #000 solid;
right:0px;
top:3.07em;
z-index:50;
}
#textline{
position:absolute;
width:250px;
border-top:0.07em #000 solid;
left:0px;
top:118px;
z-index:1;
} */
#sideline{
position:absolute;
height:700px;
border-right:5px #333 solid;
left:250px;
top:0px;
z-index:1;
}
/* #bottomline{
position:absolute;
width:250px;
border-top:0.07em #000 solid;
left:0px;
top:670px;
} */
/* ---- Corners ---- */
#corners {
position:absolute;
top:0px;
left:0px;
z-index:50;
}
#consoletopleft {
position:absolute;
left:0px;
top:0px;
}
#consoletopright {
position:absolute;
left:240px;
top:0px;
}
#consolebottomleft {
position:absolute;
left:0px;
top:690px;
}
#consolebottomright {
position:absolute;
left:240px;
top:690px;
}
#imagetopleft {
position:absolute;
left:255px;
top:0px;
}
#imagetopright {
position:absolute;
left:990px;
top:0px;
}
#imagebottomleft {
position:absolute;
left:255px;
top:690px;
}
#imagebottomright {
position:absolute;
left:990px;
top:690px;
}
}
Before you post, read our: 
