IE not showing as good as FF

saboi · Joined: 22 Mar 2007 Posts: 9

Hi guys,

I am new to CSS and i have noticed that IE does not follow the DIV heights one may set to them. Why is this so and how can one go round this.

Please try out my code below in FF and IE to get what i am saying...

<html>

<head>

<title>CSS Practice</title>

<style type="text/css">

#container{width:80%; height:100%; psotion:relative;}

#header{width:100%; height:25%; background-image:url(image.jpg); background-color:blue; border-bottom:double thin blue; position:relative;}

#menu{width:20%; height:100%; background-color:pink; border-right:double thin blue; border-left:double thin blue; float:left;}

#center{width:75%; height:auto; min-height:100%; background-color:white; float:left; position:relative;}

#right{width:4%; height:100%; background-color:yellow; float:right; border-right:double thin blue; position:relative;}

#footer{width:100%; height:5%; background-color:blue; clear:both;}

.menu a{display:block; background-color:blue; text-decoration:none;}

.menu a:hover{display:block; background-color:white; text-decoration:none;}

.menu a:visited{display:block; text-decoration:underline;}

body{background-color:gray;}

h2{text-align:right;}

span{background-color:#3BB9FF;}

</style>

</head>

<body>

<center>

<DIV id="container">

<DIV id="header"></DIV>

<DIV id="menu">

<p class="menu"><a href="css.html">Menu1</a>

<p class="menu"><a href="#">Menu2</a>

<p class="menu"><a href="#">Menu3</a>

<p class="menu"><a href="#">Menu4</a>

</DIV>

<DIV id="center">

<p><h2>Title Name</h2>

<p>Text will be here in the center division....

<p>Below is our course menu. We are however, not limited to it. If you have not found what you are looking for, please feel free to contact us.

</DIV>

<DIV id="right">Right</DIV>

<DIV id="footer">Footer</DIV>

</DIV>

</center>

</body>

</html>

sticks464 · Joined: 31 Dec 2006 Posts: 1173

It does if you use a valid doctype and remove the defaults for margins, padding and set a font and font size. Otherwise no two browsers will display the same.

saboi · Joined: 22 Mar 2007 Posts: 9

Hello sticks464,

I tried as you did but there is still no result. The DIV height is not been recognised in IE.

The initial code is still as i sent it with a correction of the word position.

In FF, it looks just as i want it, but not so in IE. How cab i work round this?

PLEASE advice, this main barrier i have right now...

Thanks.

Saboi

sticks464 · Joined: 31 Dec 2006 Posts: 1173

The only way you can achieve the look you want is with a faux layout http://www.pmob.co.uk/temp/3colcentred_2a.htm. The colors you give each column will only extend as high as the content in the column. You will need a background image and give each element in each column a different background color.

saboi · Joined: 22 Mar 2007 Posts: 9

Hello Sticks464,

Thank you.

Yes, i would like a layout like the one you pointed to, the same principle.

I have come close to something like it and at least it is now well aligned in IE. However, it is not so with FF. It is a little extended to the right.

Any idea how i can avoid that?

My code...

CSS

<style type="text/css">

#container{width:80%; height:100% auto; margin:0 auto; border:0;}

#header{width:80%; background-color:pink;height:30%; background-image:url(image.jpg); padding:4px;}

#menu{width:15%; background-color:blue; height:100%; float:left; border-left:double blue; border-right:double blue; padding:4px;}

#content{width:65%; background-color:white; height:100%; float:left; padding:4px;}

#footer{width:80%; background-color:green; height:5%; float:left; clear:both; padding:4px;}

.menu a{display:block; background-color:white; text-decoration:none; text-align:center;}

.menu a:hover{display:block; background-color:yellow; text-decoration:none;}

.menu a:visited{display:block; text-decoration:none;}

body{background-color:gray;}

</style>

HTML

<body>

<DIV id="header"></DIV>

<DIV id="menu">

<br>

<p class="menu"><a href="#">menu1</a>

<p class="menu"><a href="#">menu2</a>

<p class="menu"><a href="#">menu3</a>

</DIV>

<DIV id="content">

<center>

<p>Bla bla bla bla...

</center>

</DIV>

<DIV id="footer"></DIV>

</body>

</html>