View Full Version : Strange Padding/Center issues

07-14-2005, 12:21 AM
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 --

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.


07-14-2005, 01: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;

#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">

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

<div id="main">

07-15-2005, 06: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 :)

07-16-2005, 12:03 AM
You're welcome and thanks.