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 4 of 4
  1. #1
    New Coder
    Join Date
    Jan 2005
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Strange Padding/Center issues

    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/de...slayout/2-col/
    Vertical Centering in CSS --
    http://www.jakpsatweb.cz/css/css-ver...-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,

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try this for your nav CSS
    Code:
    #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
    Code:
    <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">

  • #3
    New Coder
    Join Date
    Jan 2005
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You're welcome and thanks.


  •  

    LinkBacks (?)

    1. 06-27-2014, 05:18 PM

    Posting Permissions

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