Any ideas on how to prevent IE screwing this up?

[AD.]

Hi all,

I'm just playing around with some ideas for cleaning up the HTML/CSS in a
web based app of ours. The intention is stop using table layouts, remove
all pixel based sizes and presentational markup from the HTML.

I've come up with what seems to me to be a fairly nice 3 column page that
can handle variable length columns and still allow a footer. I'm just
testing the structure, don't worry this isn't what it will actually look
like :)

http://webtest.astarte.co.nz/test07.html

It works great in Konq, Opera, and all Mozilla/Gecko based browsers.

IE 5.0 and 6.0 however end up losing most of the styles on the top item in
each column. The lower items render fine though.

The HTML (4.01 Strict) and CSS validates ok.

Does anybody have any ideas for solutions or workarounds?

Cheers
Anton

[Jeff North]

On Mon, 11 Aug 2003 19:57:05 +1200, in
comp.infosystems.www.authoring.stylesheets "AD." <[e-mail]>
wrote:

| Hi all,
|
| I'm just playing around with some ideas for cleaning up the HTML/CSS in a
| web based app of ours. The intention is stop using table layouts, remove
| all pixel based sizes and presentational markup from the HTML.
|
| I've come up with what seems to me to be a fairly nice 3 column page that
| can handle variable length columns and still allow a footer. I'm just
| testing the structure, don't worry this isn't what it will actually look
| like :)
|
| http://webtest.astarte.co.nz/test07.html
|
| It works great in Konq, Opera, and all Mozilla/Gecko based browsers.
|
| IE 5.0 and 6.0 however end up losing most of the styles on the top item in
| each column. The lower items render fine though.
|
| The HTML (4.01 Strict) and CSS validates ok.
|
| Does anybody have any ideas for solutions or workarounds?
|
| Cheers
| Anton

Change the CSS to:
..col33 {
position: relative;
width: 33%;
float: left;
overflow: visible;
top: 6px;
padding-right: .15em;
}

Help position the footer (in IE only)
..clear {
clear: left;
margin-top: 12px;
}

removed the <div class="item"></div> tags.
<div class="col33">
<div class="itemtitle">title</div>
<div class="itembody">apples pies are nice.</div>
<div class="itemtitle">title</div>
<div class="itembody">pineapples apricots peaches</div>
</div>
---------------------------------------------------------------
jn****@yourpantsbigpond.net.au : Remove your pants to reply
---------------------------------------------------------------

[AD.]

On Mon, 11 Aug 2003 11:55:48 +0000, Jeff North wrote:

Change the CSS to:
.col33 {
position: relative;
width: 33%;
float: left;
overflow: visible;
top: 6px;
padding-right: .15em;
}

Help position the footer (in IE only)
.clear {
clear: left;
margin-top: 12px;
}

removed the <div class="item"></div> tags.
<div class="col33">
<div class="itemtitle">title</div>
<div class="itembody">apples pies are nice.</div>
<div class="itemtitle">title</div>
<div class="itembody">pineapples apricots peaches</div>
</div>

Thanks Jeff, removing the item divs seems to have fixed it.

I'm not too worried about things having to line up consistently across
browsers - I'd rather design it to be 'tolerant' of browser box model bugs
(eg with some whitespace) than have to worry about getting it to look
exactly the same in Mozilla and IE 5.0.

Cheers
Anton