SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2007
    Location
    New London, CT
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE problem -- pushes down the nav

    Unfortunately I am having a problem with everyone's favorite browser, IE. The problem is that the #nav which I have as part of the #header is being pushed down about 10-15 px. I have tried everything short of conditional comments, which I truly don't want to have to use. The CSS in question is this:

    Code CSS:
    #headerContainer {
    	background:url(images/grill.png) right no-repeat;
    	position: relative;
    	}
     
     
    #header {
    	height: 200px;
    	width: 625px;
    	position: relative;
    	}
     
    #header h1{
    	width: 625px;
    	position: relative;
    	font-size: 0.8em;
    	}
     
    #header h1 span {
    	background: transparent url(images/header.png) no-repeat left top;
    	position:absolute;
    	left:0;
    	top:0;
    	display:block;
    	height: 200px;
    	width: 625px;
    	}
     
    /*Begin Nav*/	
     
    #nav {
    	height: 100px;
    	position: relative;
    	top: 76px;
    	width: 625px;
    	color:#666;
    	float: left;
    	}	
     
    #navlist
    {
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 625px;
    }
     
    #navlist li, #navlist li a {
    margin: 0;
    padding: 0;
    width: 125px;
    height: 100px;
    display: inline;
    position: relative;
    float: left;
    }
     
    /* mac hide \*/
    #navlist li,#navlist li a {	overflow:hidden;}
    /* end hide*/
     
    li em{
    	position:absolute;
    	left:0;
    	top:0;
    	display:inline;
    	height: 100px;
    	width: 125px;
    	}
     
    li#about em{
    	background: url(images/about1.png) no-repeat 0 0;
    	}
     
    li#services em{
    	background: url(images/services1.png) no-repeat 0 0;
    	}	
     
    li#menus em{
    	background: url(images/menus1.png) no-repeat 0 0;
    	}
     
    li#order em{
    	background: url(images/order1.png) no-repeat 0 0;
    	}
     
    li#contact em{
    	background: url(images/contact1.png) no-repeat 0 0;
    	}
     
    ul#navlist li a:hover{visibility:visible}
    ul#navlist li a:hover em{background-position:0 -100px}

    The XHTML is transitional and here it is:

    HTML Code:
    	<div id="headerContainer">
    		<div id="header">
    			<h1>For The Grill Of It<span title="For The Grill Of It"></span></h1>
    			<div id="nav">
    				<div id="navcontainer">
    					<ul id="navlist">
    						<li id="about"><a href="index.php">About Us<em title="Who We Are"></em></a></li>
    						<li id="services"><a href="services/index.php">Services<em title="What We Can Do"></em></a></li>
    						<li id="menus"><a href="menu/index.php">Menus<em title="What We Offer"></em></a></li>
    						<li id="order"><a href="order/index.php">Ordering<em title="Place Your Order Here"></em></a></li>
    						<li id="contact"><a href="contact/index.php">Contact<em title="How You Can Get In Touch"></em></a></li>
    					</ul>
    				</div>
    			</div>
    		</div>
    	</div>
    Here is a direct link to the site in question as well: http://www.forthegrillofit.com

    Thanks in advance,

    Terrell

  2. #2
    SitePoint Zealot
    Join Date
    Apr 2007
    Location
    New London, CT
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I fixed the problem. It was a margin issue.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Glad you fixed it quite quickly

  4. #4
    SitePoint Zealot
    Join Date
    Apr 2007
    Location
    New London, CT
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm glad I saw your tutorial for image replacement. Thanks!


Bookmarks

Posting Permissions

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