Help Pls. Line Height, Rollover Img, DIV Border go Wrong in FireFox but fine in IE6

Discussion in 'CSS' started by eadkung, Oct 10, 2007.

0
  1. #1
    I'm very new with CSS and now i've coded a website with CSS and XHTML.

    Here is my site >> http://thailand.siamfreestyle.com/test_layout.php

    Everything works fine in IE6 but comes different in FireFox.

    I used Rollover image without Preloading Technique from this site >> wellstyled.com/css-nopreload-rollovers.html

    [​IMG]
    The background image should:
    • show only upper-half-part for a:hover, a:active and
    • show lower-half-part for a:link, a:visit

    you'll see this code in CSS code I'll post below.

    Now what my problem is:
    • Everything works fine in IE6 but
    • "#container" div doesn't show DARKER gray box (#CCCCCC)
    • FireFox doesn't show yellow border for #container (#FFFAB7)
    • Little texts in menu is always lie bottom I want them moving up near bigger text like in IE6
    • The rollover technique doesn't work in FireFox but work OK in IE6

    Here's my HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Layout</title>
<link href="CSS/layout-style.css" rel="stylesheet" type="text/css" />
<link href="CSS/look-style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!-- START: container -->
<div id="container">
	<!-- START: left-content -->
	<div id="left-content">

		<!-- START: head-logo -->
		<div class="head-logo">
			<a href="http://en.siamfreestyle.com/" title="Thailand's Best Travel Information and Hotel Booking">
				<img src="images/web_images/logo.jpg" alt="Thailand's Best Travel Information and Hotel Booking" />
			</a>
		</div>
		<!-- END: left-content -->
		
		<!-- START: left-nav -->
		<div class="left-nav">

			<ul>
				<li><a href="#" class="home">Home<br /><span>SiamFreestyle.com</span></a></li>
				<li><a href="#" class="travel">Travel<br /><span>Beautiful Places</span></a></li>
				<li><a href="#" class="hotel">Hotel&amp;Resort<br /><span>Hotel Info Booking</span></a></li>
				<li><a href="#" class="gallery">Photo Gallery<br /><span>Stock Album</span></a></li>

				<li><a href="#" class="contact">Contact Us<br /><span>Help and Support</span></a></li>
			</ul>
		</div>
		<!-- END: left-nav -->
	</div>
	<!-- END: head-logo -->
</div>
<!-- END: container --> 
</body>

</html>
    HTML:
    And here's my CSS code:
    * {
	margin: 0px;
	padding: 0px;}
body {
	background-color:#EEEEEE;
	font:85%/130% Arial, Helvetica, sans-serif, Tahoma;
}
/* ----- CONTAINER FOR ALL WEB CONTENT ----*/
#container{
	position: relative;
	float: none;
	width: 900px;
	height: auto;
	margin: 0 auto;
	margin-top: 10px;
	background-color: #cccccc;
	border: 5px solid #FFFAB7;
}
/* ----------------------------------------*/

/* ----- LEFT CONTENT -----*/
#left-content{
	position:relative;
	float:left;
	width: 155px;
	height: 400px;
	background-color:#FFFFFF;
}

.head-logo{
	height: 84px;
}

.left-nav{
	position: relative;
	margin-top:15px;
	background:#FFFFFF ;
}

.left-nav ul{
	width: 155px;
	padding: 0;
	margin: 0;
	list-style-type: none;
	background:#FFF;
}

.left-nav li{ 
	margin: 0;
	width: 155px;
	text-align:left;
}

.left-nav li a{
	position:relative; 
	display:block; 
	background-position: 0 -49px;
	background-color: #CCC;
	color:#666; 
	font-weight: bold;
	font-size: 90%;
	height: 35px;
	padding-left:15px; 
	padding-bottom: 10px; 
	text-decoration:none;
}

.left-nav li a:hover, .left-nav li a:active{
	position:relative; 
	display:block; 
	background-position: 0 -4px;
	color:#CC0000; 
	font-weight: bold;
	font-size: 90%;
	height: 35px;
	padding-left:15px; 
	padding-bottom: 10px; 
	text-decoration:none;
}

.left-nav li a.home{
	background:url(../images/web_images/home_logo_duo.gif) bottom no-repeat;
}
.left-nav li a.travel{
	background:url(../images/web_images/travel_logo_duo.gif) bottom no-repeat;
}
.left-nav li a.hotel{
	background:url(../images/web_images/hotel_logo_duo.gif) bottom no-repeat;
}
.left-nav li a.gallery{
	background:url(../images/web_images/gallery_logo_duo.gif) bottom no-repeat;
}
.left-nav li a.contact{
	background:url(../images/web_images/contact_logo_duo.gif) bottom no-repeat;
}
.left-nav li span{
	position:relative;
	background-color: #EEE;
	font-size: 62%;
	letter-spacing: 0.1em;
	line-height: 10px;
	margin-top: -1px;
}
/*------------------------*/
    HTML:
    Can anyone tell me what I'm doing wrong and how to Fix it to make it displays the same thing in both IE and FireFox.

    Thank you for every posts and help...
    Ekkasit
     
    eadkung, Oct 10, 2007 IP
  2. le_gber

    le_gber Peon

    Messages:
    28
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #2
    try adding a clearing paragraph in:

    </div><!-- END: head-logo -->
    <p style="clear:both;"></p>
    </div><!-- END: container -->

    this should fix the #container background and border problem.

    For your links:

    .left-nav li a:hover, .left-nav li a:active{
    background-position: 0 -4px;
    color:#CC0000;
    }

    you don't need to re specify everything on the hover as yoou've already done so on the a. But this won't fix the pb though. Try removing the position:relative; and check what happens.
     
    le_gber, Oct 11, 2007 IP
    eadkung likes this.
  3. eadkung

    eadkung Active Member

    Messages:
    148
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    58
    #3
    Thanks for comment. Now I can fix this problem. It looks fine in both IE and FireFox.
     
    eadkung, Oct 12, 2007 IP