Margin in IE, not in Firefox.

`Karl · November 11, 2009

Here's my HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Pure Warfare</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body class="pw" background="./images/back.png">

<div id="header">

<div id="sidebar1"> </div>

<div id="sidebar2"> </div>

<div id="middle"> </div>

</div>


<div class="content">

<div id="sidebar3"> </div>

<div id="sidebar4"> </div>

<div class="main">
<div id="center">
<div id="menutop"><ul><li>Pure Warfare</li></ul></div>
<div id="menu">
	<ul>
		<li><a href="#1" title="Home">Home</a></li>
		<li><a href="#2" title="About">Forums</a></li>
		<li><a href="#3" title="Services">SwiftIRC Chat</a></li>
		<li><a href="#4" title="Portfolio">Links & Affiliates</a></li>
		<li><a href="#5" title="Store">Clan Directory</a></li>
		<li><a href="#6" title="Download">Contact the staff</a></li>	
	</ul>
</div>
<div id="menutop"><ul><li>RuneScape Help</li></ul></div>
<div id="menu">
	<ul>
		<li><a href="#1" title="Home">Quest Collection</a></li>
		<li><a href="#2" title="About">Skilling Guides</a></li>
		<li><a href="#3" title="Services">Maps & Dungeons</a></li>
		<li><a href="#4" title="Portfolio">Cities & Towns</a></li>
		<li><a href="#5" title="Store">Achievement Diaries</a></li>
		<li><a href="#6" title="Download">Miscellaneous Guides</a></li>	
	</ul>
</div>
<div id="menutop"><ul><li>RuneScape Tools</li></ul></div>
<div id="menu">
	<ul>
		<li><a href="#1" title="Home">Combat Calculator</a></li>
		<li><a href="#2" title="About">Skills Calculator</a></li>
		<li><a href="#3" title="Services">Max Hit  Calculator</a></li>
		<li><a href="#4" title="Portfolio">Item Database</a></li>
		<li><a href="#5" title="Store">Monster Database</a></li>
		<li><a href="#6" title="Download">NPC Database</a></li>	
	</ul>
</div>
</div>

</div>

</body>
</html>

Here's my CSS:

body  {
font: 100% Verdana, Arial, Helvetica, sans-serif;
margin: 0; 
padding: 0; 
color: #000000;
}
.pw #sidebar1 {
float: left; 
width: 153px;
height: 121px;
background: #232323;
background-image:url('./images/left.gif');
}
.pw #sidebar2 {
float: right; 
width: 151px; 
height: 121px;
background: #232323; 
background-image:url('./images/right.gif');
}
.pw #middle {
float: center; 
padding: 0px 153px 0px 151px;
height: 121px; 
background: #232323; 
background-image:url('./images/header.gif');
} 
.content {

}
.content #sidebar3 {
float: left; 
width: 153px;
height: 550px;
background: #232323 url('./images/leftcontent.gif');
background-repeat: repeat-y;
}
.content #sidebar4 {
float: right; 
width: 152px; 
height: 550px;
background: #232323 url('./images/rightcontent.gif');
background-repeat: repeat-y;
}
.main { 

}
.main #center {
height: 550px;
padding: 0px 153px 0px 153px;
background-color: #2c2821;
margin: 0;
} 


*{
list-style:none;
margin:0px;
padding:0px;
}

.main #menutop {
width: 175px;
margin-left: 1px;
}

.main #menutop li {	
border-right: #000000 1px solid;
margin-bottom -2px;
width: 175px;
height: 22px;
text-indent: 5px;
color: #715d42;
font-size: 13px;
line-height: 20px;
display: block;
background: url(images/menutop.gif);
background-repeat:no-repeat;
padding: 0px 0 0 0px;
}

.main #menu {
width: 175px;
margin-left: 1px;
}

.main #menu li a {	
border-right: #000000 1px solid;
width: 175px;
height: 25px;
text-indent: 25px;
line-height: 23px;
color: #715d42;
font-size: 11px;
text-decoration: none;
}	

.main #menu li a:link, #menu li a:visited {
width: 175px;
display: block;
background: url(images/v3.gif);
background-repeat:no-repeat;
padding: 0px 0 0 0px;
}

.main #menu li a:hover {
width: 175px;
background: url(images/v3.gif) 0 -25px;
background-repeat:no-repeat;
padding: 0px 0 0 0px;
}

.main #menu li a:active {
width: 175px;
background: url(images/v3.gif) 0 -50px;
background-repeat:no-repeat;
padding: 0px 0 0 0px;
}

The problem is, I can't get it to look right in IE, it looks perfect in Firefox.

Here's a screenshot, first is firefox, second is IE.

Also, the side bars sidebar3 and sidebar4, I have had to set heights for them rather than them change according to the length of each web page, how could I fix this?

Hybride · November 12, 2009

First, every CSS file you make, there should be a

*{margin:0;padding:0}

at the top. I see you have in the middle, but it's just easier (so they say) to have it the first thing, so rather than rendering all the code and *then* hitting *, it's the first piece the browser sees.

Are those borders on the images and going down, or is it just for the li you have? If IE is recognizing the images with a border, try setting the images with a border:0; .

You can also change your

<body class="pw" background="./images/back.png">

by putting the background image into your CSS body tag.

For the heights, you can try a min-height, or just set height to 100%.

Do you have a link to the site? Might be easier to edit the code live with firebug. If not, post up new results if you have any.

jcombs_31 · November 12, 2009

First, every CSS file you make, there should be a
*{margin:0;padding:0}
at the top. I see you have in the middle, but it's just easier (so they say) to have it the first thing, so rather than rendering all the code and *then* hitting *, it's the first piece the browser sees.

Actually, no, you are wrong, this can create some serious problems especially with forms. Please don't provide information that is incorrect. There are reasons that people have created reset stylesheets rather than that simple one liner.

@Karl: For whatever reason i can't see the screenshots and you didn't describe the problem. The second problem sounds like a faux columns issue. Do a good search for Faux Columns

Sign In

Margin in IE, not in Firefox.

Recommended Posts

`Karl

Link to comment

Share on other sites

Hybride

Link to comment

Share on other sites

jcombs_31

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information