IE bug with floating <div>s

For some reason, I can't get the middle column of this setup to work
properly in IE (go figure). It looks like it's supposed to in Opera and
Firefox, but now I only need it to work in IE as well.

I've checked around Google for possible clues, some having a JavaScript
solution to something I believe should be possible to fix in pure CSS.
In fact, that's exactly what I need; a pure XHTML/CSS solution (no
client-side scripting).

Can anyone clue me in on the right path to the solution?

--
Kim André Akerø
- kimandre@NOSPAMbetadome.com
(remove NOSPAM to contact me directly)

Kim André Akerø wrote:

> For some reason, I can't get the middle column of this setup to work
> properly in IE (go figure). It looks like it's supposed to in Opera
> and Firefox, but now I only need it to work in IE as well.
>
> I've checked around Google for possible clues, some having a
> JavaScript solution to something I believe should be possible to fix
> in pure CSS. In fact, that's exactly what I need; a pure XHTML/CSS
> solution (no client-side scripting).
>
> Can anyone clue me in on the right path to the solution?

It's late, I'm tired, so that probably explains why I managed to skip
out on an URL. Anyway, this is the page that needs some fixing:
http://x4team.kommersnart.net/

--
Kim André Akerø
- kimandre@NOSPAMbetadome.com
(remove NOSPAM to contact me directly)

Kim André Akerø wrote:

> Kim André Akerø wrote:
>
>> For some reason, I can't get the middle column of this setup to work
>> properly in IE (go figure). It looks like it's supposed to in Opera
>> and Firefox, but now I only need it to work in IE as well.
>>
>> I've checked around Google for possible clues, some having a
>> JavaScript solution to something I believe should be possible to fix
>> in pure CSS. In fact, that's exactly what I need; a pure XHTML/CSS
>> solution (no client-side scripting).
>>
>> Can anyone clue me in on the right path to the solution?
>
> It's late, I'm tired, so that probably explains why I managed to skip
> out on an URL. Anyway, this is the page that needs some fixing:
> http://x4team.kommersnart.net/

#main_top { margin: 0 0px;}
#main_top_container { margin: 0 0 0 0;}
div.news_header{padding:0 0 0 0;}

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Els wrote:

> Kim André Akerø wrote:
>
> > Kim André Akerø wrote:
> >
> >> For some reason, I can't get the middle column of this setup to
> work >> properly in IE (go figure). It looks like it's supposed to in
> Opera >> and Firefox, but now I only need it to work in IE as well.
> >>
> >> I've checked around Google for possible clues, some having a
> >> JavaScript solution to something I believe should be possible to
> fix >> in pure CSS. In fact, that's exactly what I need; a pure
> XHTML/CSS >> solution (no client-side scripting).
> >>
> >> Can anyone clue me in on the right path to the solution?
> >
> > It's late, I'm tired, so that probably explains why I managed to
> > skip out on an URL. Anyway, this is the page that needs some fixing:
> > http://x4team.kommersnart.net/
>
> #main_top { margin: 0 0px;}
> #main_top_container { margin: 0 0 0 0;}
> div.news_header{padding:0 0 0 0;}

Which only makes the design go offset to what the designer had in mind.
Here's what the designer made (warning: big graphics), I'm just in
charge of translating the PhotoShop image slicing to actual HTML code
and developing the back-end PHP code:
http://www.design-eye.com/israel/x4team/main.php

--
Kim André Akerø
- kimandre@NOSPAMbetadome.com
(remove NOSPAM to contact me directly)

Kim Andr�ker� wrote:

> Els wrote:
>
>> Kim André Akerø wrote:
>>
>>> Kim André Akerø wrote:
>>>
>>>> For some reason, I can't get the middle column of this setup to
>> work >> properly in IE (go figure). It looks like it's supposed to in
>> Opera >> and Firefox, but now I only need it to work in IE as well.
>>>>
>>>> I've checked around Google for possible clues, some having a
>>>> JavaScript solution to something I believe should be possible to
>> fix >> in pure CSS. In fact, that's exactly what I need; a pure
>> XHTML/CSS >> solution (no client-side scripting).
>>>>
>>>> Can anyone clue me in on the right path to the solution?
>>>
>>> It's late, I'm tired, so that probably explains why I managed to
>>> skip out on an URL. Anyway, this is the page that needs some fixing:
>>> http://x4team.kommersnart.net/
>>
>> #main_top { margin: 0 0px;}
>> #main_top_container { margin: 0 0 0 0;}
>> div.news_header{padding:0 0 0 0;}
>
> Which only makes the design go offset to what the designer had in mind.

Yup, I know.

> Here's what the designer made (warning: big graphics), I'm just in
> charge of translating the PhotoShop image slicing to actual HTML code
> and developing the back-end PHP code:
> http://www.design-eye.com/israel/x4team/main.php

Looks better than what you get when you take out paddings and margins.
I could of course do this job for you, but... ;-)

IE expands widths when the element's contents require that.
See this example:
http://here.locusmeus.com/kim.html

That's why if I were to do this page, I wouldn't set any width on the
middle column. Divs naturally expand as far as they can. I'd only put
margins on it to match the sidebars.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Kim André Akerø wrote:

> For some reason, I can't get the middle column of this setup to work
> properly in IE (go figure).

That is not your only problem.

Those pictures of text are, for me, unreadable. I almost have to fire up
magnifier to see what is in the buttons and the headings on the right hand
side.

And this:
http://users.bigpond.net.au/rf/screenshot/x4.jpg

I suspect you are trying to control too many things. Simply leave out most
of your css (line-height, the width of that center div) and let the browser
figure things out. It's quite capable of doing so.

Cheers
Richard.

On 29 Aug 2005, [iso-8859-1] Kim André Akerø wrote:

> rf wrote:
>
> > Kim André Akerø wrote:
> >
> > > For some reason, I can't get the middle column of this setup to work
> > > properly in IE (go figure).
> >
> > That is not your only problem.
> >
> > Those pictures of text are, for me, unreadable. I almost have to fire
> > up magnifier to see what is in the buttons and the headings on the
> > right hand side.
> >
> > And this:
> > http://users.bigpond.net.au/rf/screenshot/x4.jpg
> >
> > I suspect you are trying to control too many things. Simply leave out
> > most of your css (line-height, the width of that center div) and let
> > the browser figure things out. It's quite capable of doing so.
>
> I've removed the width for the center div and the line-heights from
> elsewhere now, but the text size in the images themselves aren't
> exactly my problem. That's how I received the material from the layout
> designer. I just puzzle the pieces together (and that's one heckuva
> jigsaw puzzle, I tell ya). Precision placement is what it is.

Since the menus on the right don't currently go to the bottom of the page,
is there any reason you cant specify the height of the divs in em instead
of pixels? (perhaps "height: 1.2em" instead of "height: 15px") That way,
if a Firefox user presses Ctrl-+ (Control-plus) to enlarge the text
because of vision problems, the menus would enlarge vertically and reduce
the horizontal overlap of the menu items. (There is still vertical
overlap at very large font sizes but I don't know of a complete cure that
wouldn't mess up your current design. I'm just learning CSS as it's only
recently that I got graphical access and a graphical browser I feel safe
with.)

> And from what I could tell, the position of the center <div> is still
> way down on the page.
>
> I know, the text sizes suck, and I'm more or less forced to outfit a
> lot of the font-size in pixels, since it needs to fit within the images
> they're supposed to be layered on top of (read: used as background).
> Personally, I would've gone for percentages, but that didn't appear to
> be the case of the guy who actually designed this thing.

Another small problem is with the world map image at the top right
corner of the page. Until I noticed the red dot and took a closer look
to see why it was there, I thought that that corner of the page was just
a blank black rectangle. The map is so dark it's almost impossible to
see. On my previous dimmer monitor it *would* have been impossible to
see.

Perhaps if you bumped up the brightness and contrast of that image
slightly then more people would notice that there's a map there.

--
``Why don't you find a more appropiate newsgroup to post this tripe into?
This is a meeting place for a totally differnt kind of "vision impairment".
Catch my drift?'' -- "jim" in alt.disability.blind.social regarding an
off-topic religious/political post, March 28, 2005