Compatibility Problem

Discussion in 'CSS' started by Xeoro, Mar 17, 2007.

0
  1. #1
    My friend owns this website and has recently got this layout coded in divs/css:

    http://www.xeoro.net/_skyhabv51fix/

    As you can see; it works a dream in FireFox but messes up in IE6 & 7 and Safari so I've been told.

    Any ideas on how to fix this?

    HTML:
    




<!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>SkyHabbo.net » Your #1 source for Habbo Entertainment</title>

	<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<div align="center">

	<!-- start container -->

	<div id="conttop">

	</div>

		<div id="container">

			<div id="boxcont">

				<!-- start banner -->

				<div id="banner">
	
				</div>

				<!-- end banner -->

				<!-- start radio stats -->

				<div id="rstatstop">

				</div>

				<div id="rstats">

				<!-- radio stats here -->
			
				</div>
	
				<div id="rstatsbot">

				</div>	
			
				<!-- end radio stats -->

				<!-- start left column -->
			
				<div id="leftcolumn">

					<!-- start navigation -->

					<div id="navtop">

					</div>

					<div class="leftboxes">

					<!-- navigation here -->
				
					</div>

					<div class="leftbottom">

					</div>	

					<!-- end navigation -->

					<!-- start latest updates -->

					<div id="lupdates">

					</div>

					<div class="leftboxes">
	
					<!-- latest updates here -->
				
					</div>

					<div class="leftbottom">

					</div>

					<!-- end latest updates -->

					<!-- start radio player -->

					<div id="rplayer">

					</div>
	
					<div class="leftboxes">
				
					<!-- radio player here -->

					</div>

					<div class="leftbottom">

					</div>

					<!-- end radio player -->

					<!-- start site stats -->

					<div id="sstats">

					</div>

					<div class="leftboxes">
				
					<!-- site stats here -->

					</div>

					<div class="leftbottom">

					</div>

					<!-- end site stats -->

				</div>

			<!-- start content column -->
			
			<div id="contentcolumn">

				<!-- start main content -->

				<div id="ctop">

				</div>

								                               
				<div id="maincontent">

					<div class="ctop">

					</div>		
		
					<!-- content here -->

				</div>
	
				<div id="contentbot">

				</div>

				<!-- end main content -->

			</div>
																											
		</div>			
						
	</div>

	<div id="contbot">

	</div>

	<!-- end container -->

</div>

</body>
</html>
    Code (markup):
    CSS:
    body {
background-color: #2c708f;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
margin-top: 25px;
}

#conttop {
width: 769px;
height: 7px;
background-image: url(images/conttop.gif);
overflow: hidden;
}

#container {
width: 769px;
overflow: hidden;
padding-bottom: 10px;
background-image: url(images/contbg.gif);
}

#contbot {
width: 769px;
height: 7px;
overflow: hidden;
background-image: url(images/contbot.gif);
}

#banner {
width: 513px;
height: 121px;
float: left;
background-image: url(images/banner.gif);
}

#rstatstop {
width: 205px;
height: 17px;
float: right;
background-image: url(images/rstatstop.gif);
}

#rstats {
width: 197px;
padding-left: 4px;
padding-right: 4px;
text-align: left;
background-image: url(images/rstatsbg.gif);
height: 97px;
float: right;
clear: right;
}

#rstatsbot {
width: 205px;
height: 8px;
float: right;
overflow: hidden;
clear: right;
background-image: url(images/rstatsbot.gif);
}

#navtop {
width: 205px;
height: 17px;
float: left;
clear: left;
margin-top: 10px;
background-image: url(images/navtop.gif);
}

.leftboxes {
width: 197px;
padding-left: 4px;
padding-right: 4px;
text-align: left;
background-image: url(images/rstatsbg.gif);
padding-bottom: 2px;
float: left;
clear: left;
}

.leftbottom {
width: 205px;
height: 8px;
float: left;
overflow: hidden;
clear: left;
background-image: url(images/rstatsbot.gif);
margin-bottom: 10px;
}

#ctop {
width: 513px;
height: 17px;
background-image: url(images/ctop.gif);
margin-top: 10px;
float: right;
}

#maincontent {
width: 505px;
padding-left: 4px;
padding-right: 4px;
padding-bottom: 2px;
text-align: left;
float: right;
clear: right;
background-image: url(images/contentbg.gif);
}

#contentbot {
width: 513px;
height: 9px;
overflow: hidden;
float: right;
clear: right;
background-image: url(images/cbottom.gif);
}

#lupdates {
width: 205px;
height: 17px;
float: left;
clear: left;
background-image: url(images/lupdates.gif);
}

#mccont {
width: 517px;
margin-right: 17px;
float: right;
}

#rplayer {
width: 205px;
height: 17px;
float: left;
clear: left;
background-image: url(images/rplayer.gif);
}

#sstats {
width: 205px;
height: 17px;
float: left;
clear: left;
background-image: url(images/sstats.gif);
}

#boxcont {
width: 735px;
}

#leftcolumn {
width:205px;
float:left;
}

#contentcolumn {
width:513px;
margin-left:17px;
float:left;
}
    Code (markup):
     
    Xeoro, Mar 17, 2007 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    It is my experience that the {overflow: hidden;} is not an effective hack for IE's growing container bug. Instead, in all those containers with heights less than the line height of the default font size for the container, set the font size to 0 or 1px.

    Further, for IE, you must remove any and all text from before the DTD. Even comments, as here, kick IE into quirks mode where it is even worse than normal.

    I don't have Safari available to me right now.

    cheers,

    gary
     
    kk5st, Mar 17, 2007 IP
  3. Xeoro

    Xeoro Peon

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Now I'm no CSS expert or anything but I've done as you said and;

    It's gone all weird in FireFox now but works fine in IE7 and I'm unsure about IE6 & Safari.
     
    Xeoro, Mar 17, 2007 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    Add some content, let's see what that does. You'll need to remove that font-size hack from containers that actually hold content. i.e., 
    
#container {
width: 769px;
font-size: 1px;
padding-bottom: 10px;
background-image: url(images/contbg.gif);
}
    Code (markup):
    cheers,

    gary
     
    kk5st, Mar 17, 2007 IP
  5. Xeoro

    Xeoro Peon

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    now it's going even weirder.

    http://www.need2upload.com/uploads/f11ca45ffb.png

    that's how it looks in ie6.

    in ie7 & ff2 it looks great.
     
    Xeoro, Mar 17, 2007 IP
  6. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #6
    kk5st, Mar 18, 2007 IP
  7. Xeoro

    Xeoro Peon

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Done that, doesn't seem to have done anything I don't think.

    Back where we started?
     
    Xeoro, Mar 18, 2007 IP
  8. Dan_A

    Dan_A Peon

    Messages:
    65
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Sorry, you didn't.
    Remove all the comments and the display will be fine.
     
    Dan_A, Mar 18, 2007 IP
  9. Xeoro

    Xeoro Peon

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Ok thanks you guys - means alot.

    There's just a 'double box' now where the container starts and ends.

    Issue has been resolved - thankyou.
     
    Xeoro, Mar 19, 2007 IP