...

View Full Version : IE is driving me nuts!!!



R3N3GADE
05-15-2007, 02:59 AM
Hello everyone.

I'm a web developer and I'm working on a new css layout for my cms. I'm normally a tables guy. I really want to move to css but I'm finding it difficult to make my code cross-browser compatible. I've been pulling my hair out trying to get this layout to display in IE in someway that resembles that of Firefox.

Anyhow I got the layout looking exactly how I want it in FireFox and am seeking help to make it look the same in IE.

Please bear in mind I have used hacks from websites I have come across (I don't really understand what they do) only to get the layout looking like I want. Feel free to remove anything you think is unnecessary, and thank you in advance.

Here is the code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>Header, Footer and Scrollbar</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
/* Reset margins and paddings */
* { margin: 0; padding: 0; }

/* All browsers */
#message, #footer {
left : 218px;
right : 8px;
}
#message {
top : 8px;
right : 8px;
position : absolute;
height : 25px;
border : thin solid #549FE3;
}
#footer {
height : 20px;
left : 218px;
border : thin solid #549FE3;
}
#grid {
left : 218px;
height : 200px;
border : thin solid #549FE3;
}


/* Non-IE and IE 7 */ /* could be done better using fixed positioning */
html>body #box {
overflow : auto;
position : absolute;
top : 253px;
bottom : 38px;
left : 218px;
right : 8px;
border : thin solid #549FE3;
}
html>body #grid {
overflow : auto;
position : absolute;
top : 43px;
left : 218px;
right : 8px;
height : 200px;
}

html>body #menu {
position : absolute;
top : 8px;
bottom : 8px;
left : 8px;
width : 200px;
border : thin solid #549FE3;
}

html>body #footer {
position : absolute;
left : 218px;
bottom : 8px;
right : 8px;
}

/* IE 5.5 and IE 6 */

* html { padding: 0px; height: 100%; overflow: hidden; }
* html body { height: 100%; }
* html #box {
height: 100%;
overflow: auto;
background: yellow;
}

/* IE 5.5 */
@media tty {
i{content:"\";/*" "*/}}@m; * html body { padding: 100px 0; height: 100%; overflow: hidden; } * html #box { height: 100%; overflow: auto; background: lime;} /*";}
}/* */
</style>

</head>

<body>
<div id="menu">
<p><strong>Navigation</strong></p>
<p>&nbsp;</p>
<p>This area will hold a menu tree for the different areas of the cms</p>
<p>&nbsp;</p>
<p>(fixed width, fluid height)</p>
</div>
<div id="message"><strong>Status messages appear here</strong> (fixed height, fluid width)</div>
<div id="grid"><strong>This is a scrollable area that will typically hold a master grid, linked to the details form below</strong> (fixed height, fluid width)</div>

<div id="box">
<p><strong>This area will display the form/details of the item selected in the grib above.</strong> (fluid height, fluid width, scrollable)</p>
<p>&nbsp;</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac odio. Vivamus venenatis. Mauris vel est. In nisi lorem, vehicula quis, gravida et, placerat et, nisi. Donec blandit interdum nisi. Integer volutpat, sapien ut ultrices rhoncus, ante elit scelerisque arcu, a egestas nulla augue ac risus. Ut ut mauris eget nibh lacinia fringilla. Vestibulum ligula diam, mattis vitae, pretium quis, lacinia eget, quam. Morbi ut sapien quis metus consectetuer ultrices. Suspendisse potenti. Nulla nonummy fringilla metus. Quisque ultrices ante ultricies tortor. Aliquam urna dui, lobortis ac, nonummy quis, fringilla non, est. Mauris vel neque nec justo commodo rutrum. Proin placerat pulvinar magna. Mauris ultricies pellentesque dui. Integer tincidunt metus scelerisque orci. In hac habitasse platea dictumst. Praesent semper quam porta mauris imperdiet vulputate.</p>
<p>Suspendisse viverra pede vel est. Aenean tempus bibendum mi. Ut elit eros, fermentum nec, interdum ut, blandit quis, lectus. Nullam tempor. Integer quis velit vel tortor fermentum cursus. Aenean id nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam ut eros. Proin ac lacus vel nisi rhoncus lobortis. Vivamus laoreet adipiscing orci. In leo urna, mollis sed, mattis ut, vestibulum ultricies, nibh. Aliquam suscipit consequat dolor. Sed vitae nisl. Nullam vehicula porta nisl. Donec porttitor, felis a mollis vestibulum, erat dui imperdiet turpis, nec imperdiet elit turpis id enim. Aenean adipiscing sollicitudin massa. Aenean tempus sem vel mi. Pellentesque vel erat quis turpis venenatis consequat.</p>
<p>Donec at nisi id nibh tempor vulputate. Sed lobortis mauris ac erat. Curabitur vel metus. Duis quis leo quis enim scelerisque ornare. Aenean porttitor dignissim nibh. Ut quis erat in nibh sagittis pharetra. Sed id turpis. Morbi sed risus sed tellus hendrerit bibendum. Aliquam lobortis pulvinar erat. Nam sed tellus. Etiam eleifend justo et arcu. Integer dapibus tellus et quam. Aenean et metus et sapien pretium volutpat. Suspendisse fermentum, ipsum lacinia lobortis scelerisque, elit purus fringilla nunc, id posuere erat orci et nibh. Donec ut nunc vitae mi hendrerit hendrerit. Ut facilisis fermentum pede.</p>
<p>Nam tristique. Praesent pulvinar eros ut pede. Suspendisse molestie odio in justo. Mauris molestie elementum turpis. Donec tempor adipiscing urna. Phasellus est. Praesent in velit. Quisque scelerisque neque at ante. Phasellus ultricies. Donec est libero, euismod ultrices, adipiscing in, lacinia nec, eros. Mauris iaculis, magna vel varius blandit, arcu lacus sollicitudin sem, ullamcorper porttitor tellus nibh non sem. Phasellus non justo quis felis sagittis sodales. Nam ipsum risus, scelerisque nec, venenatis ut, feugiat ut, dui. Nunc tempus nisl ut neque. Aenean lacus. Quisque imperdiet condimentum nisi. Vivamus interdum, neque id mollis tincidunt, lacus arcu fringilla ipsum, id lobortis dui nibh vitae ligula.</p>
<p>Maecenas molestie nunc in lacus. Morbi ligula. Nulla facilisi. Aliquam erat volutpat. Suspendisse lacinia accumsan nisi. Duis felis. Maecenas mattis adipiscing arcu. Aenean quis augue. Nunc dolor lacus, iaculis id, iaculis in, vestibulum id, leo. Etiam sagittis.</p>
</div>

<div id="footer"><strong>This is the footer area </strong>(fixed height, fluid width)</div>
</body>
</html>

twodayslate
05-15-2007, 12:41 PM
First off I would wrap your div within a div.
Second why do you use <p>&nbsp;</p>? use <br />
Why are you using position: absolute. Float (http://www.quirksmode.org/css/clearing.html) your divs.

Do you have this uploaded where we can see it?


BTW: you have a very different way of arranging your CSS, I like it.

ahallicks
05-15-2007, 01:42 PM
^ By that he means you should wrap your whole page within a div called something like container. That way you can position the whole page where you like more easily.

We really do need something more substantial to look at than just code. Post a link to your page if at all possible.

Excavator
05-15-2007, 04:22 PM
Goodmorning R3N3GADE,
I much prefer to do a layout without hacks. It certainly saves a lot of problems.
Try this for your CSS instead:

body {
text-align: left;
}
/* Reset margins and paddings */
* { margin: 0; padding: 0; }

/* All browsers */
#menu {
width: 200px;
float: left;
margin: 8px;
}
#message {
height: 25px;
margin: 8px 8px 8px 228px;
}
#grid {
height: 200px;
margin: 8px 8px 8px 228px;
}
#box {
margin: 8px 8px 8px 228px;
overflow: auto;

}
#footer {
height : 20px;
margin: 8px 8px 8px 228px;
}

#menu,
#message,
#grid,
#box,
#footer {
border: thin solid #549FE3;
padding: 0 5px;
}

koyama
05-15-2007, 11:08 PM
Anyhow I got the layout looking exactly how I want it in FireFox and am seeking help to make it look the same in IE.
It may turn out to be quite difficult to get it working in IE6 using pure CSS.

The main problem is that your code relies on browser support for simultaneous specification of opposing offsets for absolutely positioned elements. This is not supported in IE6.

For example, when you simultaneously specify top and bottom offset for an absolutely positioned element, the bottom offset is ignored in IE6.

Similarly, when you simultaneously specify the left and right offset, the right offset is ignored in the ltr writing direction. (The opposite holds for the rtl writing direction).

You will need to find an entirely different method for IE6. Maybe you could try using a dynamic expressions. Effectively, that would mean JavaScript.

You have really many CSS hacks. I suggest that you concentrate on one browser at a time. Create one style sheet per browser you need support for. Then, when you are finished, figure out how to deliver the correct styles to each browser. Exploiting CSS parsing bugs is not the only method. Conditional comments may be a better option.

Finally, you may want to re-think your layout. Do you really need the page to follow the height of the viewport? This is what is giving you the trouble. But still, it is an interesting problem.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum