hi guys
can someone take a look at the following site and let me know where we have
gone wrong..
http://test.lightbox.ie/Athena/index2.htm
it seems to look ok in Mozilla but the boxes at the bottom look completely
mad in IE...
Anyone got any thoughts?
Thanks a lot!

Tom wrote:

I think XHTML was a bad idea.

--
Philip Ronan
phil.ronanzzz@virgin.net
(Please remove the "z"s if replying by email)

Tom wrote:

I can view your page with just about any apart from IE so I can't see what
goes wrong. It looks great to me even under Konqueror.

What I _do_ know is that IE does not render boxes properly. For example in:

http://www.schestowitz.com/sitemap.htm

I can't get rid of that bloody vertical line besides the quarter circle on
the right. It only appears wrong under IE. I spent hours trying to solve
this. If anyone knows a solution, please let me know. Or maybe let
Micro$oft know so that they fix it. *sigh*

--
Roy Schestowitz
http://schestowitz.com

On Fri, 29 Oct 2004 12:32:46 +0100, Tom <tom@digital-haze.com> wrote:

You trigger standards mode so IE6 will get the box model correct.

Your problem is caused by another IE bug. When you add a margin-left to a
left floated element (or a margin-right to a right floated element) IE
doubles the margin.

You either need to avoid margins and floats on the same element, or feed
different margin values to IE.

Oh, and have a look at the site with no CSS. You're structure is like this:

heading 1
heading 2
heading 3
content 1
content 2
content 3

First, the headings should be marked up with <Hx> not with <div> and
secondly the relevant content should follow the heading so that the page
still makes sense to speech browsers, etc.

I would therefor do something like this:
<div>
<h2>heading 1</h2>
<div>content 1</div>
</div>

You can apply the floats to the outer divs and use padding on that div (or
margins on the inner elements) to create the spacing you want.

Steve

Philip Ronan wrote:
XHTML is fine. Using 'floats' in IE is a problem though... it tends to
go all funcky. Seeing as the posters' site is using a 'fixed sized'
console, I'd get rid of the floats and use absolute positions instead.

--


x theSpaceGirl (miranda)

# lead designer @ http://www.dhnewmedia.com #
# remove NO SPAM to email, or use form on website #

Tom
Hmmm. Another web page that is pretending to be a printed on paper page.
Will Not Happen.

--
Cheers
Richard.

On Fri, 29 Oct 2004 12:51:57 +0100, Steve Pugh <steve@pugh.net> wrote:

Tangentally, is there a good collected resource of all the various bugs
online anywhere? I currently have a swelling bookmark folder of scattered
pages, but no good one-stop-shopping place to check first.

On Fri, 29 Oct 2004 13:11:53 -0400, Neal <neal413@yahoo.com> wrote:

I was contacted via e-mail with a pointer to a fix for the bug I
mention above:
http://www.positioniseverything.net/...ed-margin.html

In general that site has quite a good collection of bugs,
http://www.positioniseverything.net/index.php
(links towards the bottom of the left hand column). I'd been there
before but not since they posted the fix to the double margin bug.

For older browsers (NN4, IE4, etc.) http://www.css.nu/ is a good
resource.

Although I don't really agree with the philiosophy espoused by the
author http://www.quirksmode.org/css/contents.html is good for
detailing support for the more cutting edge stuff.

Steve

I am not sure if that is quite the issue though... it could certainly be
done in tables but that's not what I am after.

Tom wrote:
Not sure where the problem is, it looks like a width issue, can the 3
divs including all padding and margins fit in the container div on one
line?

You might consider combining elements when you have identical css for
each one, it's easier to read and maintain, and reduces file size.

Just for a test I did the following, reducing your margins a little fits
both sets of 3 divs side by side:

..headleft1, .headcen1, .headright1, .headleft2, .headcen2, .headright2 {
BORDER-RIGHT: #ccc 1px solid;
PADDING-RIGHT: 3px;
BORDER-TOP: #ccc 1px solid;
PADDING-LEFT: 3px;
BACKGROUND: #f2f2f2;
FLOAT: left;
PADDING-BOTTOM: 3px;
BORDER-LEFT: #ccc 1px solid;
WIDTH: 190px;
COLOR: #303330;
PADDING-TOP: 3px;
BORDER-BOTTOM: #ccc 1px solid;
MARGIN: 10px 17px 20px 17px;
}

For testing I made all of the margins the same (see above) and deleted
these:
..headleft1 { MARGIN...
..headleft2 { MARGIN...
..headcen1 { MARGIN...
..headcen2 { MARGIN...
..headright1 { MARGIN...
..headright2 { MARGIN...

Mike