Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts

    Padding must match underlay height!

    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;
    }
    }

  • #2
    Banned
    Join Date
    Feb 2008
    Location
    Winnipeg, Canada
    Posts
    396
    Thanks
    0
    Thanked 29 Times in 29 Posts
    It looks like theres a possibility that your font size is too big...

  • #3
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    How can that be? I set it to 1em:

    Code:
    #pulldown1 ul li a {
    	color: #000;
    	font-size: 1em;
    	padding: 1em 20px 1em 20px;
    	text-decoration:none;
    }
    Is there no way to match the font + padding height and the underlay height exactly? Surely there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •