SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast bumblebeezus's Avatar
    Join Date
    Aug 2004
    Location
    seattle
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css roll-over navs work in everything but IE

    ok...i'm stumped. my css roll-over navs work in everything but IE. i've checked opera, NS, mozilla, and FF which all display the navs fine...they just don't show up in IE. i've looked at my code over and over again and i just can't seem to find anything that would make it behave like this. here's the url to the page in question. click here.

    here's the page's code...with the css in the head.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Welcome to Hardy Remodeling &amp; Design</title>
    <style type="text/css">
    <!--
    * {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	}
    body {
    	font: 12px/1.4em 'Palatino Linotype', Times, serif;
    	color: #666;
    	background-color: #eee;
    	text-align: center;
    	}
    ul,li {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	}
    p {
    	text-align: justify;
    	}
    a:link, a:visited {
    	text-decoration: none;
    	}
    a:hover, a:active {
    	text-decoration: none;
    	}
    #container {
    	margin: 30px auto;
    	border: 1px solid #ddd;
    	background: transparent url(images/container.gif) 50% 50% repeat-y;
    	text-align: left;
    	width: 600px;
    	}
    #container, #header, #navs {
    	position: relative;
    	}
    #header {
    	background: transparent url(images/header.jpg) 0 0 no-repeat;
    	height: 214px;
    	margin-bottom: 14px;
    	}
    #welcome {
    	width: 580px;
    	padding: 0 10px;
    	background: transparent url(images/text_bg.gif) 50% 50% repeat-y;
    	}
    #welcome h3 {
    	height: 46px;
    	background: transparent url(images/welcome_header.gif) no-repeat;
    	}
    #welcome h3 span {
    	display: none;
    	}
    .p1 {
    	padding: 7px 11px 0;
    	}
    .p2 {
    	padding: 9px 11px 0;
    	}
    .end {
    	display: block;
    	height: 14px;
    	background: transparent url(images/text_foot.gif) 0 100% no-repeat;
    	}
    #footer {
    	margin-top: 14px;
    	width: 600px;
    	height: 74px;
    	background: transparent url(images/footer.gif) no-repeat;
    	}
    #navs {
    	top: 179px;
    	left: 0;
    	}
    .aboutnav, .renovationsnav, .additionsnav, .testimonialsnav, .contactnav {
    	float: left;
    	position: relative;
    	width: 120px;
    	height: 35px;
    	}
    .aboutnav {background-image: url(images/about_on.gif);}
    .renovationsnav {background-image: url(images/renovations_on.gif);}
    .additionsnav {background-image: url(images/additions_on.gif);}
    .testimonialsnav {background-image: url(images/testimonials_on.gif);}
    .contactnav {background-image: url(images/contact_on.gif);}
    
    .aboutnav a, .renovationsnav a, .additionsnav a, .testimonialsnav a, .contactnav a {
    	display: block;
    	width: 120px;
    	height: 35px;
    	position: absolute;
    	cursor: hand;
    	}
    .aboutnav a {background-image: url(images/about_off.gif);}
    .renovationsnav a {background-image: url(images/renovations_off.gif);}
    .additionsnav a {background-image: url(images/additions_off.gif);}
    .testimonialsnav a {background-image: url(images/testimonials_off.gif);}
    .contactnav a {background-image: url(images/contact_off.gif);}
    
    .aboutnav a:hover, .renovationsnav a:hover, .additionsnav a:hover, .testimonialsnav a:hover, .contactnav a:hover {background: transparent;}
    .aboutnav span, .renovationsnav span, .additionsnav span, .testimonialsnav span, .contactnav span {display: none;}
    -->
    </style>
    </head>
    
    <body>
    	<div id="container">
    		<div id="header">
    			<div id="navs">
    				<ul>
    					<li class="aboutnav"><a href="/"><span>About Us</span></a></li>
    					<li class="renovationsnav"><a href="/"><span>Renovations</span></a></li>
    					<li class="additionsnav"><a href="/"><span>Additions</span></a></li>
    					<li class="testimonialsnav"><a href="/"><span>Testimonials</span></a></li>
    					<li class="contactnav"><a href="/"><span>Contact</span></a></li>
    				</ul>
    			</div>
    		</div>
    		
    		<div id="welcome">
    			<h3><span>Welcome</span></h3>
    			<p class="p1">Velit esse cillum dolore sed do eiusmod tempor incididunt eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, ut enim ad minim veniam, sunt in culpa. Quis nostrud exercitation mollit anim id est laborum.</p>
    		    <p class="p2">Eu fugiat nulla pariatur. Qui officia deserunt velit esse cillum dolore duis aute irure dolor. Lorem ipsum dolor sit amet, ut aliquip ex ea commodo consequat. Eu fugiat nulla pariatur. Qui officia deserunt consectetur adipisicing elit.</p>
    			<p class="p1">Velit esse cillum dolore sed do eiusmod tempor incididunt eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, ut enim ad minim veniam, sunt in culpa. Quis nostrud exercitation mollit anim id est laborum.</p>
    			<p class="end">&nbsp;</p>
    		</div>
    		
    		<div id="footer"></div>
    	</div>
    	<div id="spacer"></div>
    </body>
    </html>
    any help with this would be awesome...thanks in advance to all the css jedi out there.

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    haslayout IE

    * html #navs{height:1%;}

    see FAQ CSS
    http://www.sitepoint.com/forums/show...9&postcount=24

  3. #3
    Non-Member
    Join Date
    Dec 2005
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I used it to great affect on a site for a tatto artist. Im not really sure what you may be missing, but if you want to poke around at what I wrote, here's the link...

    http://www.lokincrook.net/showcase/vicky/index.html

  4. #4
    SitePoint Enthusiast bumblebeezus's Avatar
    Join Date
    Aug 2004
    Location
    seattle
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow...that haslayout hack worked beautifully...thank you for that tip and thank you for pointing me in the direction of paulob's article.


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
  •