CSS presentation in FF and IE

**ikonia** · 30-01-2005, 01:46 AM

guys,

take a look at this link

http://www.projecthugo.co.uk/css_differences.html

I was playing around with some layouts and then using CSS to control the layouts.

Look at the differences in how Firefox and IE display them

allthough th ebase layout is the same, look at how the div in firefox goes under another div, yet doesn't in IE and how IE doesn't align the main page to the center yet firefox does

there must be a better way to make css for compatible in both ??

anyone else having this problem

**Kezzer** · 30-01-2005, 02:17 AM

http://www.inknoise.com/experimental/layoutomatic.php

Use that

**Iain** · 30-01-2005, 10:24 AM

See the div that has "ooh Content" in it ? If it was called #content in your style sheet then try adding the following line underneath that style rule so you would have

Code:

#content {
all your style rules;}
html>body #content{
overflow: auto;}

This wll only work if the grey box on the right is a float. Best bet to get help is post a link to the actual page so we can see the HTML

**ikonia** · 30-01-2005, 11:22 AM

kezzer - funny enough I was playing with that and thats how I came to this unusual problem.

Az, the test pages are up on projecthugo.co.uk there are only play things so feel free to poke around.

I find it strange that IE is aware of the right side div - but firefox isn't

**ikonia** · 30-01-2005, 12:00 PM

sorry - forgot to post the URL

http://www.projecthugo.co.uk/test

have a look, have a play

its interesting how both browsers present different things yet the css is %100 valid.

**Zathras** · 30-01-2005, 01:05 PM

It's to do with the box models. Firefox uses the W3C box model, whereas IE uses its own.
In the W3C box model, the width of an element gives the width of the content of the box, excluding padding and border, hence the padding adds to the 100%, rather than being included in it, so your box's border extends out of the containing div. Change the width to auto in the content div.

For the centre alignment, set text-align: center in your body, and text-align: left in the container div.

Set your right margin on the container div to the width of the float, so it won't interfere with it.

**Iain** · 30-01-2005, 02:20 PM

The issue you are having is not related to the box model problems in IE. It's down to the way IE handles floats, in other words it doesn't do it properly. In your case the solution is easy as you have a fixed width container so you can just specify the width of the content div to make sure it never overlaps the menu. Try the following code

Code:

<html>
	<head>
		<title>Untitled Document</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    	<style type="text/css">
			body {
				margin: 0;
				font: normal 12 px Arial, Helvetica, sans-serif;
				text-align: center;}
			#container {
				width: 800px;
				border: 1px solid gray;
				margin: auto;
				padding: 10px;
				text-align: left;}
			#banner {
				padding: 5px;
				margin-bottom: 5px;
				background-color: rgb(213, 219, 225);}
			#content {
				padding: 10px;
				border: 1px solid gray;
				width: 560px;}
			*html #content {
				width: 570px;}
			#sidebar-a {
				float: right;
				width: 200px;
				margin: 0 0 5px 5px;
				padding: 5px;
				background-color: rgb(235, 235, 235);}
			#footer {
				clear: both;
				padding: 5px;
				margin-top: 5px;
				background-color: rgb(213, 219, 225);}
		</style>
	</head>
  	<body>
		<div id="container">
			<div id="banner">Project Hugo</div>
			<div id="sidebar-a">Put a list here <br> that <br> looks <br> like <br> this <br> </div>
			<div id="content">ooh Content jslhdakjhd ajda aslkjd kjsadhlad dkjahs hjsdkadh test this word size cut aksdhlaskdha ajsdas dhasks asdlasd askjdhs dalkjhd askjdhd dhdjs dkjahsdlkjsahdlkjsd dhsdja</div>		
			<div id="footer">footer</div>
		</div>
	</body>
</html>

**ikonia** · 30-01-2005, 02:42 PM

have another look, after some major advice from Zathras I've made some changes which seems to work MUCH better

**Zathras** · 30-01-2005, 04:29 PM

Originally Posted by Az

The issue you are having is not related to the box model problems in IE.

I'm sorry, I should have been clearer. The border of the content div overlapping the right side of the containing div's border has everything to do with the box model. This was one of the inconsistencies between IE and Firefox.

I mentioned how to solve the other inconsistency - the float issue - further down in the post.

Ikonia, the updated CSS file I sent you doesn't seem to be up on the server?

**Zathras** · 30-01-2005, 04:39 PM

Okay, the code I knocked up over msn with ikonia is below. Please feel free to make suggestions/bugfixes

Difference here is ikonia wanted a fluid rather than fixed-width main content container. I've put in a min-width to ensure the float doesn't foul the content div in Gecko browsers. However I don't think IE supports min-width, so if you make the window really narrow it messes up.

Code:

body {
                background: #ffffff;
		border: 0;
		margin: 10px;
		padding: 10px;
		font-family: Arial, Helvetica, sans-serif;
}

#container {
			border: 1px solid gray;
			margin-left: 20px;
			margin-right: 20px;
			padding: 10px;
			min-width: 400px
}

#banner {
			padding: 5px;
			margin-bottom: 5px;
			background-color: rgb(213, 219, 225);
}

#content {
			padding: 10px;
			background-color: white;
			border: 1px solid gray;
			margin: 10px;
			width: auto;
			margin-right: 220px;
}

#sidebar-a {
			float: right;
			width: 200px;
			margin: 0;
			margin-left: 5px;
			padding: 5px;
			background-color: rgb(235, 235, 235);
}

#footer {
			clear: both;
			padding: 5px;
			margin-top: 5px;
			background-color: rgb(213, 219, 225);
}

**ikonia** · 30-01-2005, 06:41 PM

Zathras - you did a great job

Thread: CSS presentation in FF and IE

LinkBack

Thread Tools

CSS presentation in FF and IE

Thread Information

Users Browsing this Thread

Posting Permissions