This (my) page appears different in different browsers

**novice-designer** · Aug 21, 2004 04:48

ok ill make this short. You just need FireFox and Explorer to see what im talking about (because i only tested the page under those two browsers).

my question is as simple as this ... why the hell isn't the page looking the same in both broswers?? here's the basic layout in HTML along with the CSS code to see it by your-self , with comments on the HTML page :

CSS source file :

Code:

#container {
	width: 760px;
	position:absolute;
	left:50%;
	margin-left:-380px;
}

#banner {
	border : 1px solid black;
	padding: 5px;
	margin-bottom: 20px;
	margin-top : 20px;
	height : 95px
}



#content {
	padding: 5px;
	margin-left: 150px;
	margin-right: 110px;
	background-color: white;
	width : 485px;
	height : 800px
}

#content div.box {
	padding : 10px;
	border : 1px solid black;
	margin : 15px 0px 20px 0px;
	height : 735px;
	}

#content ul {
	margin-top : 0px;
	list-style-type : square;
	}

#content p.announce {
	text-align : center;
	font-family : arial;
	font-size : 15;
	font-weight : bold;
	border : ridge black;
	color : red;
	margin : 0;
	padding : 0;
	}


#sidebar-a {
	position : relative;
	float: left;
	width: 140px;
	border-right : 1px solid;
	margin: 0;
	margin-right: 5px;
	padding: 0px;
	background-color: beige;
	height : 800px;
	text-align : center;
}


#sidebar-a p {
	font-family : sans-serif;
	color:black;
	border : 1px solid black;
	width : 50%;
	padding : 3;
	font-size : 10px;
	font-weight : bold;
	margin-top : 20px;
	margin-bottom : 15px
}

#sidebar-a ul{
	margin : 0px;
	padding : 0;
}

#sidebar-a li{
	list-style-type: none;
	background-position : center center;
	margin : 0;
	padding : 0;
	width : 120px;
	height : 30px;
	text-align : center;
}

#sidebar-a a {
	width:100%;
	height:25px;	
	border : 1px solid black;
	line-height:25px;
	display : block;
	text-decoration: none;
	background-color : white;
	margin : 0;
	padding : 0px;
	font-family : sans-serif;
	color : black;
	text-align: center
}

#sidebar-a a:hover {
	width:100%;
	height:25px;
	line-height:25px;
	display : block;
	text-align:center;
	text-decoration: none;
	background-color : beige;
	margin : 0;
	font-family : sans-serif;
	color : black;
}

#sidebar-b {
	position : relative;
	float: right;
	width: 100px;
	margin: 0;
	margin-left: 5px;
	padding: 5px;
	background-color: beige;
	height : 800px;
}


#footer {
	clear: both;
	padding: 5px;
	margin-top: 10px;
	border-top : 1px solid black;
	font-weight:bold;
	text-align:center;
	background-color: white;
}

HTML page :

Code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="source.css"
</head>

<body>
	<div id="container">
		<div id="banner">the top margin of this banner looks 

greater than 20px in explorer (or maybe less in firefox)
		</div>

		<div id="sidebar-a"><center>
		<p>Navigation</p>
		<ul>
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
		<br /><br />
		the space between links looks greater in Explorer , 

also the navigation border width looks greater in firefox.
		</ul>
		

		</center>
		</div>

		<div id="sidebar-b">
		this bar looks larger in FireFox than explorer	
		</div>

		<div id="content">
		
<p class="announce">See how this border differ in FireFox and 

explorer</p>

		<div class="box">
		this box looks shorter in explorer
		</div>

		</div>

		<div id="footer">
		<center><b>whatever</b></center>
		</div>
	</div>
</body>
</html>

pleaaaase i need your help , my site has been waiting for ages in my computer and i can't release it like this...

appreciate your help...

**Nick** · Aug 21, 2004 07:42

Is it possible to see the site?

**Restless** · Aug 21, 2004 07:59

Originally Posted by Possibility

Is it possible to see the site?

im bored so I did it for him:
html link

now im taking a look at the code, but I dont think "I" can figure it out.

**Paul O'B** · Aug 21, 2004 10:50

The first thing you should do is read the faq sticky thread about the broken box model in ie.

That should fix most of your problems.

Once you've done that and made the changes and updated your page then we can take another look to see what else needs to be done

paul

**novice-designer** · Aug 22, 2004 03:18

Thanks restless for uploading my page. I thought you guys wanted the code only.

Paul :
are you saying that the IE isn't displaying the page as it should?? like the whole problem from IE only??

**Mikeymoo** · Aug 22, 2004 05:24

Take a look at the sticky threads. All browsers display the html you create slightly differently. And in the case of iE5.5 it all went very odd for a while.

**Paul O'B** · Aug 22, 2004 06:06

are you saying that the IE isn't displaying the page as it should

Thats an understatement lol

The FAQ should explain it but heres a quick example.

This bit of your code:

Code:

#content {
	padding: 5px;
	margin-left: 150px;
	margin-right: 110px;
	background-color: white;
	width : 485px;
	height : 800px
}

In IE the padding is added on the inside of the width thus reducing the content area available for display. In the correct box model padding and borders are added to the elements dimensions thus preserving the stated width/height of the content area.

So Ie makes the element 485px x 800px
All other browsers make it 495px x 810px

Therefore you need to either add the padding on an inner element that has no width specified or use one of the methods mentioned in the sticky thread. The method used for ie6 depends on whether you are working in standards or quirks mode so read the faq as it explains it all.

Also note that all browsers render elements default margins and padding differently so you also need to control these explicitly. e.g. p {margin:5px 0} h1 {margin:0} etc.

Hope that explains it a bit more.

Paul

**novice-designer** · Aug 22, 2004 06:44

yup .. explains alot. thanks for the help

User Tag List

Thread: This (my) page appears different in different browsers

Thread Tools

Display

This (my) page appears different in different browsers

Bookmarks

Bookmarks

Posting Permissions