...

View Full Version : Strange Padding/Center issues



the_jamester
07-13-2005, 11:21 PM
Working on a site re-design and, per usual, all is well in Firefox but I am seeing some strange padding bugs in IE.

Site: http://www.keystonehomestx.com/nustone
CSS: http://www.keystonehomestx.com/nustone/screen.css

Special Techniques used:
Simple 2 column layout -- http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
Vertical Centering in CSS --
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

If anyone can help me in fixing the problem in IE, I would be greatly appreciative! Hopefully I (and maybe some of you) can learn something out of this one.

Thanks,

_Aerospace_Eng_
07-14-2005, 12:52 AM
Try this for your nav CSS

#nav {
background-color: #fff;
padding: 0;
display: table;
height: 115px;
overflow: hidden;
width: 100%
}

#nav ul{
margin: 0;
padding: 0;
text-align: center;
position:relative;
top:40px;
}

#nav li{
display: inline;
list-style: none;
margin: 0;
padding: 0;
}

#nav ul li a, #nav ul li a:link {
padding: 20px;
font-variant: small-caps;
font-weight: bold;
}

#nav ul li a:hover {
background-color: #F5F2E2;
}
and this for your nav html

<div id="wrap">
<div id="header"><h1 id="banner">Keystone Homes of Caldwell, Texas and Affiliates</h1></div>

<div id="nav">

<ul>
<li><a href="#">Homes</a></li>
<li><a href="#">Omega Marble</a></li>
<li><a href="#">Interiors</a></li>
<li><a href="#">Pressure Wash</a></li>
<li><a href="#">Copper Gate</a></li>

</ul>
</div>
<div id="main">

the_jamester
07-15-2005, 05:35 PM
Whoa dude, thanks a ton.

The solution seems to come out perfect in both Firefox and IE.

Much thanks! You're the kind of person that makes this a great forum :)

_Aerospace_Eng_
07-15-2005, 11:03 PM
You're welcome and thanks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum