Push in the right direction

Yonder · 23-12-2008, 05:02 PM

Basically i decided to be funny and try and code the layout myself so it was going perfect untill i open it up in firefox, any ideas on what im doing wrong?

Thank you in advance!

IE - Fine
http://uploadpicz.com/images/WDIGRJA.png

FireFox - Not Fine
http://uploadpicz.com/images/VB4KGBB.png

HTML

HTML Code:

<html>

<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>New Page 1</title>


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


</head>

<body background="images/bg.png">
<div id="container">
<div id="header">
<div id="updates">
	<img border="0" src="images/latested.png" width="112" height="17" align="middle"></div>
<div id="logo">
	<p align="center">
	<img border="0" src="images/hhub6990.gif" width="267" height="61"></div>
<div id="rotator">&nbsp;</div></div>

<div id="subheader">
	<img border="0" src="images/top-bg.png"></div>
<div id="parent">
<div id="subcontainer">  
  <div id="left">

      

<div class="text">
<div class="orange">Radio Stats</div>
<div class="sidesleft">test</div>
<div class="bottom"><img border="0" src="images/bottom.png"></div>
</div>

		
			     

<div class="text">
<div class="blue">Radio Stats</div>
<div class="sidesleft">test</div>
<div class="bottom"><img border="0" src="images/bottom.png"></div>
</div>

<div class="text">
<div class="green">Radio Stats</div>
<div class="sidesleft">test</div>
<div class="bottom"><img border="0" src="images/bottom.png"></div>
</div>


    </div>
	<div id="center">
	
	
			<div id="content_top"></div>
		<div id="content">
		<div class="menu"></div></div>
		
		<div id="content_top"></div>
		<div id="content">
		<div class="login"></div></div>

	
		<div id="content_top2"></div>
		<div id="content">
		
		<div class="red">Content</div>
<div class="sidescontent">test</div>
<div class="bottom_content">
	<img border="0" src="images/bottom-main.png" width="571" height="5"></div></div></div>

		
	<div id="right">
		<div class="text-right">
			<div class="register"></div></div>
	
		<div class="text-right">
			<div class="news-today"></div></div>
				
			<div class="news-today2">&nbsp;</div>
			
			<div class="bottom-right"><img border="0" src="images/bottom-right.png"></div>
			</div>
			
				
		</div><div class="spacer"></div>
	

<div class="footer">
<div class="footer-text">© Copyright, HabboHub.com. All Rights Reserved.</div>
</div></div>

</div>
</body>

</html>

CSS

Code:

body
{
  margin: 0;
  padding: 0;
  font-size: 10px;
  font-family: Verdana, Tahoma;
  text-align: center;
}

div#container
{
  width: 100%;
  margin: 10px auto;
  margin: 0;
  padding: 0;
}

div#header
{ 
  width: 100%;
  height: 162px;
  background-image: url("../images/header-bg.png");
}



.ul
{
  text-align: center;
  colour: #FFFFFF;
  text-decoration: none;
} 

div#subheader
{
  width: 100%;
  height: 3px;
  background-image: url("../images/top-bg2.png");

}

div#rotator
{
  float: right;
  width: 30%;
  height: 100px;
  margin: 20px 20% 0px 0px;
  border: 1px solid #000000;
  background-color: #FFFFFF;
}
div#updates
{
  float: left;
  width: 100%;
  height: 24px;
  margin: 0px;
  padding: 0px;
  padding-top: 1px;
  text-align: left;
}

div#logo
{
  float: left;

  height: 50px;
  margin: 43px 0px 0px 20%;

}

div#news
{
  float: left;
  padding: 5px;
  width: 295px;
  height: 103px;
  margin: 17px 0px 0px 17px;
  background-image: url("../images/news_bg.gif");
}

div#zesty
{
  float: left;
  width: 154px;
  height: 113px;
  margin: 17px 0px 0px 17px;
  background-image: url("../images/zesty_bg.gif");
}

div#subcontainer
{
  align: center;
  width: 1023px;
  background-image: url("../images/main-bg.png");
  margin: 0;
  padding: 0;
}

div#left
{
  float: left;
  width: 173px;
  margin: 0px;
  padding: 0px;
  padding-left: 15px;
  padding-right: 0px;
}

div#right
{
  float: left;
  width: 80px;
  margin: 0px;
  padding: 0px;

}

div#center
{
  float: left;
  width: 571px;
  padding: 0px;
  margin: 0px;
}

div.top
{
  height: 7px;
  width: 173px;
  background-image: url("../images/top_bg.gif");
}

div.register
{
  height: 138px;
  width: 170px;
  background-image: url("../images/register.png");
}

div.text 
{
  width: 193px;
  padding: 0px;
  padding-top: 10px;
  margin: 0;
}

div.text-right
{
  width: 100px;
  padding: 0px;
  padding-top: 10px;
  margin: 0;
}

div.sidesleft {
  text-align: left;
  width: 234px;
  padding: 5px;
  margin: 0px;
  background-image: url("../images/sides-left.png");
}

div.sidescontent {
  text-align: left;
  width: 571px;
  padding: 5px;
  margin: 0px;
  background-image: url("../images/sides-content.png");
}

div.bottom {
  margin: 0;
  width: 173px;
}

div.bottom-right {
  margin: 0;
  width: 170px;
}

div#clear
{
  clear: both;
}

div.spacer
{
  width: 1023px;
  height: 10px;
  background-image: url("../images/main-bg.png");
}

div#content_top
{
height: 7px;
width: 543px;

}

div#content_top2
{
height: 3px;
width: 543px;

}

div#content
{
  height: auto;
  width: 571px;
  padding: 0px;
  margin: 0px;
  padding-left: 10px;
  padding-right: 10px;
}

div.menu
{
  width: 571px;
  height: 27px;
  padding: 0px;
  padding-top: 5px;
  margin: 0px;
  background-image: url("../images/menu.png");
}

div.login
{
  width: 568px;
  height: 62px;
  padding: 0px;
  margin: 0px;
  background-image: url("../images/login.png");
}

div.bottom_content {
 height: 5px;
 width: 571px;
 padding: 0px;
 margin: 0px;
}

 div#content_top {
 
}

div#mainbottom
{ 
  width: 955px;
  height: 22px;
  background-image: url("../images/bottom.png");
}

div.footer
{ 
  width: 1023px;
  height: 41px;
  background-image: url("../images/bottom-content.png");
}

div.footer-text
{ 
  width: 100%;
  height: 41px;
  margin: 0;
  padding: 0;
  padding-top: 4px;
  font-size: 10px;
  font-family: Verdana, Tahoma;
  text-align: center;
  color: #FFFFFF;
}

div.news-today {
  height: 142px;
  width: 170px;
  background-image: url("../images/dummy1.png");
}

div.news-today2 {
  height: 142px;
  width: 170px;
  background-image: url("../images/news-today-sides.png");
}

#close {
	float: right;
}

Anzrew · 28-12-2008, 06:56 PM

Yeah I get this problem a lot. Basically IE acts differently to widths and heights when you use padding to how Firefox does. You need a different CSS for Firefox than you do with IE, so include your IE one and save it as something like ie.css then code the exact same layout but view it in Firefox and save the CSS file as firefox.css.

So you should now have:
ie.css
firefox.css

Overall include them both on the same layout in the header tag via:
<link rel="stylesheet" type="text/css" href="ie.css" />
<style type="text/css"> @import "firefox.css" screen; </style>

IE will read the normal CSS but it wont understand @import in the style underneath so will ignore it, firefox will read ie.css but will also read the @import bit and as firfox.css comes last firefox will take that over ie and it should then look good with both IE and Firefox.

Hope that works and solves the problem

. Its a shame IE and Firefox render pages differently, makes a web desingers life hard. Then theres Safari too! But I wouldn't worry to much, Safri renders almost like Firefox but only 1 or 2 things maybe strange, if at all

Yonder · 30-12-2008, 12:18 PM

Ye i tried that before i even posted here but i gave up and paid jack now it works in opera, chrome, safari, firefox and ie

Iszak · 30-12-2008, 12:24 PM

You paid Jack, but I coded it. But anyhow the reason why it messes up because you don't have a doctype and that triggers quirks mode in Internet Explorer hence Anzrew talking about how padding works different in both Firefox and Internet Explorer - this is because of quirks mode. Always make sure your document is validated via the HTML validator to ensure that it's more likely to work.

Editor: Anyone wants to know the name, it's the box model bug.

Thread: Push in the right direction

Thread Tools

Push in the right direction

Posting Permissions