...
PDA

Problems with browser compatibility

vinny388
02-06-2007, 01:38 PM
Hi, I am having a few issues with a site in that it works fine in Firefox, Opera and IE7 but kinda dies in IE6 :confused:

I am usually pretty good with browser compatibility but for some reason cannot get my head around it today.

The problem being the sidebar links, in IE6 they are too far apart and when hovered over, they then close up, try it and see what i mean http://www.simonvincent.co.uk

The HTML is this;

<!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>
<title>Untitled Document</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="assets/styles-1.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="assets/date.js"></script>
</head>

<body>

<div id="container">

<div id="header">header</div>

<div id="content">
<div id="content-sidebar">
<div id="date"><script type="text/javascript">printDate()</script></div>
<div class="section-header"><a href="#">LATEST NEWS &raquo;</a></div>
<br />

<div class="section-header">FORMULAS</div>
<ul>
<li><a href="#">Rookie Bangers</a></li>
<li><a href="#">National Bangers</a></li>
</ul>
<div class="section-header">FIXTURES</div>
<ul>
<li><a href="#">Arlington Raceway</a></li>
<li><a href="#">Bovingdon Raceway</a></li>
<li><a href="#">Wimbledon Stadium</a></li>
</ul>
<div class="section-header">PHOTOS</div>
<ul>
<li><a href="#">Rent A Rookie</a></li>
<li><a href="#">Fans &amp; Supporters</a></li>
<li><a href="#">TV/Promotional Work</a></li>
<li><a href="#">Cecils Racing Galleries</a></li>
</ul>
<div class="section-header">TV &amp; PRESS</div>
<ul>
<li><a href="#">Television Work</a></li>
<li><a href="#">Promotional Work</a></li>
<li><a href="#">Press Cuttings</a></li>
</ul>
<div class="section-header">COMPANY INFO</div>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Meet The Team</a></li>
<li><a href="#">Sponsorship Deals</a></li>
<li><a href="#">Price List</a></li>
<li><a href="#">Gift Vouchers</a></li>
<li><a href="#">FAQ's</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<div class="section-header">FUN &amp; GAMES</div>
<ul>
<li><a href="#">Online Banger Racing</a></li>
<li><a href="#">rFactor</a></li>
<li><a href="#">Batracer</a></li>
</ul>
<div class="section-header"><a href="/">RENT A ROOKIE HOME &raquo;</a></div>
</div>

<div id="content-main">main</div>

</div>

<div id="footer">
<ul>
<li><a href="#">Home</a> |</li>
<li><a href="#">Contact Us</a> |</li>
<li><a href="#">Help/FAQ</a> |</li>
<li><a href="#">Advertising/Sponsorship</a></li>
</ul>

<p>&copy; copyright 2004 - 2007. Cecils Rent A Rookie Ltd. All rights reserved.</p>
</div>

</div>

</body>
</html>


CSS is;

body {
font-size: 100%;
font-family: Tahoma, Verdana, Arial;
text-align: center;
background-color: #333333;
}

/************* #container styles **************/
#container {
text-align: left;
width: 750px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

/************* #header styles **************/
#header {
width: 750px;
background-color: #000000;
height: 100px;
margin: 0px;
padding: 0px;
}

/************* #content styles **************/
#content {
background-image: url(images/backgrounds/sidebar-1.jpg);
background-repeat: repeat-y;
background-position: left top;
width: 750px;
min-height: 550px;
}

/************* #content-sidebar styles **************/
#content-sidebar {
width: 140px;
float: left;
color: #000000;
padding-bottom: 5px;
}
#content-sidebar #date {
width: 135px;
color: #666666;
margin-left: 5px;
font-size: 0.7em;
font-weight: bold;
margin-bottom: 10px;
}


#content-sidebar ul {
list-style-type: none;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
}

#content-sidebar li {
font-size: 0.75em;
color: #868686;
margin: 0px;
padding: 0px;
}

#content-sidebar li a {
color: #868686;
text-decoration: none;
display: block;
padding-left: 5px;
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

#content-sidebar li a:hover {
color: #868686;
display: block;
width: 135px;
background-color: #ECECEC;
}

/************* .section-header styles **************/
.section-header {
font-weight: bold;
color: #000000;
font-size: 0.7em;
margin-left: 5px;
padding: 0px;
}

.section-header a {
color: #000000;
text-decoration: none;
}

.section-header a:hover {
color: #000000;
text-decoration: none;
}

/************* #content-main styles **************/
#content-main {
width: 605px;
background-color: #FFFFFF;
margin-left: 145px;
}

/************* #footer styles **************/
#footer {
text-align: center;
width: 750px;
color: #FFFFFF;
background-color: #000000;
margin-top: 5px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #666666;
padding-top: 2px;
padding-bottom: 2px;
clear: both;
}

#footer ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}

#footer li {
display: inline;
padding: 0px;
font-size: 0.75em;
}

#footer li a {
text-decoration: none;
color: #FFFFFF;
margin-left: 9px;
margin-right: 5px;
}

#footer li a:hover {
text-decoration: underline;
}

#footer p {
font-size: 0.75em;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
margin: 0px;
}

#footer a {
color: #FFFFFF;
text-decoration: none;
}

#footer a:hover {
text-decoration: underline;
}
_Aerospace_Eng_
02-06-2007, 04:35 PM
/*Hide from IE Mac\*/
* html #content-sidebar ul li, * html #content-sidebar ul li a {
height:1%;
}
/*End Hide*/
Add that to your CSS. Some people will say not to use the * html hack because it doesn't work in IE 7 well I see no reason not to since we aren't even trying to target IE 7.
vinny388
02-06-2007, 04:58 PM
Cheers bud will give it a go.

To be honest if I hae used the html hack on sites before, sometimes u just gotta do it :(
_Aerospace_Eng_
02-06-2007, 05:12 PM
Yeah you do but what I was getting at is others will say to use conditional comments (http://www.quirksmode.org/css/condcom.html) because they seem cleaner.
vinny388
02-07-2007, 09:51 AM
Thanks mate that worked a treat :)

Only thing I didnt notice first time round was the div (#content-main) should be positioned at the top alongside the sidebar. Again works fine in IE7, FF, Opera etc, but seems to appear at the bottom of the sidebar in IE6.
vinny388
02-07-2007, 09:55 AM
Thanks mate that worked a treat :)

Only thing I didnt notice first time round was the div (#content-main) should be positioned at the top alongside the sidebar. Again works fine in IE7, FF, Opera etc, but seems to appear at the bottom of the sidebar in IE6.

Dont panic, stupid brain here has sussed it:thumbsup:

Thanks again for your help.:D
_Aerospace_Eng_
02-07-2007, 04:48 PM
What was the solution?

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum