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

    Problems with browser compatibility

    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

    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;

    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>
    <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;

    Code:
    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;
    }

  • #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
    Code:
    /*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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

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

  • #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
    Yeah you do but what I was getting at is others will say to use conditional comments because they seem cleaner.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    Jan 2006
    Posts
    80
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    New Coder
    Join Date
    Jan 2006
    Posts
    80
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vinny388 View Post
    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

    Thanks again for your help.

  • #7
    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
    What was the solution?
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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