PDA

View Full Version : Disjointed Rollover Image Padding

tylerlukey
22nd August 12, 01:22 PM
Hey, my site is at :http://migevents.com/5-About/MIG-Building-Layout.html

Basically as you can see, my menu items have a padding between them. I can not figure out why because there is no padding in my CSS.

Has anyone tried doing this before?

CSS:
#Relative {position: relative; margin:0 auto 14px auto; min-height:345px; _height:345px /**for IE6 Only**/ }

/**menu**/

#navlist li {
list-style: none;
display: inline;
padding: 0;
margin: 0;
text-align: left;
}

#navlist li a:hover, #navlist li a:active, #navlist li a:focus{
visibility: visible;
}

/**Default Image container**/

#defaultImage {
visibility:visible;
display:block;
position:absolute;
top:55px; /**adjust position in pixel or %**/
}

/**disjointed image rules**/

#navlist li a span {
visibility:hidden;
display:block;
position:absolute;
top:55px; /**position same as default image layer above**/
color:#666;
}

#navlist li a:hover span, #navlist li a:active span, #navlist li a:focus span {
visibility:visible;
}



HTML
<body>
<div id="Relative">
<div id="defaultImage"><img src="images/MIG-Building-Layout_01.png" width="800" height="345" alt=""></div>
<ul id="navlist">
<li><a href="#"><img src="images/MIG-Building-Layout_02.png" width="138" height="55" alt="Lighting"><span><img src="images/MIG-Building-Layout_Lighting_01.png" alt="#" /><br />Our Graphics department does all animations for sets</span></a></li>
<li><a href="#"><img src="images/MIG-Building-Layout_03.png" width="71" height="55" alt="Audio"><span><img src="images/MIG-Building-Layout_Recording_01.png" alt="#" /><br />Our Graphics department does all animations for sets</span></a></li>
<li><a href="#"><img src="images/MIG-Building-Layout_04.png" width="101" height="55" alt="Graphics"><span><img src="images/MIG-Building-Layout-Graphics_01.png" alt="#" /><br />Our Graphics department does all animations for sets</span></a></li>
<li><a href="#"><img src="images/MIG-Building-Layout_05.png" width="69" height="55" alt="Print"><span><img src="images/MIG-Building-Layout-Print_01.png" alt="#" /><br />We have the equipment to print any of your needs</span></a></li>
<li><a href="#"><img src="images/MIG-Building-Layout_06.png" width="84" height="55" alt="Studio"><span><img src="images/MIG-Building-Layout_Studio_01.png" alt="#" /><br />Our Graphics department does all animations for sets</span></a></li>
<li><a href="#"><img src="images/MIG-Building-Layout_07.png" width="70" height="55" alt="Video"><span><img src="images/MIG-Building-Layout_Video_01.png" alt="#" /><br />Our Graphics department does all animations for sets</span></a></li>
<li><a href="#"><img src="images/MIG-Building-Layout_08.png" width="126" height="55" alt="Productions"><span><img src="images/MIG-Building-Layout_Production_01.png" alt="#" /><br />Our Graphics department does all animations for sets</span></a></li>
<li><a href="#"><img src="images/MIG-Building-Layout_09.png" width="141" height="55" alt="Set Shop"><span><img src="images/MIG-Building-Layout_SetShop_01.png" alt="#" /><br />Our Graphics department does all animations for sets</span></a></li>
</ul>
</div>
</body>

Thanks!
tylerlukey
22nd August 12, 01:28 PM
Problem solved, haha
I got rid of the spacing between the </li> and <li> on each line in the HTML and it put it all together.

Hope this helps someone down the road.