IE bug with floating <div>s

[=?iso-8859-1?Q?Kim_Andr=E9_Aker=F8?=]

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?

 

[=?iso-8859-1?Q?Kim_Andr=E9_Aker=F8?=]

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/

 

[Els]

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;}

 

[Guest]

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.
fix >> in pure CSS. In fact, that's exactly what I need; a pure
XHTML/CSS >> solution (no client-side scripting).

#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

 

[Els]

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.

 

[rf]

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.

 

[=?iso-8859-1?Q?Kim_Andr=E9_Aker=F8?=]

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.

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.

 

[rf]

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

No it does not. If you think it will then you have not considered my browser or my choice of font size or my viewport dimensions.

they're supposed to be layered on top of (read: used as background).

They won't be. Trying to fit text into a fixed size "background" simply does not work.

Personally, I would've gone for percentages, but that didn't appear to
be the case of the guy who actually designed this thing.

Then the "guy who actually designed this this thing" should be kicked in the arse and told that designing for the web bears no resemblance at all to designing for the print media.

In the print arena one can talk about absolutely positioned things and specific font sizes and line heights and so on.

In the web arena one can not.

That is it. Full stop. Not.

You (or your "designer") have no control whatsoever over my browser font size or viewport size. Design your site accordingly ;-)

Cheers
Richard.

 

[Norman L. DeForest]

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.

 

[Els]

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

[...]
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 [...]
And from what I could tell, the position of the center <div> is still
way down on the page.

That is because not all widths have gone.
To prove this, add this line:
#contents {width: 903px;}
If the total page would be 903-897=6pixels wider, the middle column
fits.

So you're looking for 6 pixels too much width in the middle column.
You haven't looked at http://here.locusmeus.com/kim.html, have you?
It should give you some clues as to where the width is coming from.
Look at the page in both IE and another browser, to see how different
browsers respond to your code.

Oh, and Richard and Norman are right, you could easily do this page
without pixel fonts and pixel heights. In fact, it would be easier.

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).

The background images that have text on them, are just coloured
blocks. You can repeat them when the font is enlarged.

Personally, I would've gone for percentages, but that didn't appear to
be the case of the guy who actually designed this thing.

Did he say 'make sure the font can't get enlarged' or are you assuming
that it shouldn't be cause otherwise the design wouldn't work?

 

[Toby Inkster]

<META content="MSHTML 6.00.2800.1476" name=GENERATOR>

Dude. :-(

 

[James Pickering]

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 ..........

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

Visit http://www.w3.org/2002/03/csslayout-howto

 

[rf]

Dude. :-(

Er... What?

Cheers
Richard.

 

[William Tasso]

Writing in
news:alt.html,alt.www.webmaster,comp.infosystems.www.authoring.html
From the safety of the LocusMeus.com cafeteria

...
Oh, and Richard and Norman are right, you could easily do this page
without pixel fonts and pixel heights.

vote = +1

In fact, it would be easier.

Bingo.

 

[Alan J. Flavell]

Seen on comp.infosystems.www.authoring.html, rf had said:

[/url]

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.

"Precision placement" doesn't happen via HTML and CSS, in a WWW
context.

Based solely on what you are saying, without looking at any URLs, I'm
inclined to support the previous contributor, rf, and advise you
("you" collectively) that better results can be expected by discarding
ideas of "precision placement" in a WWW context. Designing for
flexibility is only logical - since flexibility is what the WWW
browsing situation does anyway. So either capitalise on it and
exploit its benefits - or condemn yourselves to endless frustration.

The actual page works better on Lynx, than it does with text zoomed
on Mozilla. I can't help feeling that there's a message in that
observation.

(I don't suppose I'll get any thanks for this answer, but it's
the way things are on the WWW anyway, deezyners or no deezyners.)

 

[Toby Inkster]

Er... What?

Er... this:

Content-Type: multipart/alternative

 

[rf]

Toby Inkster wrote

Er... this:

Ah I see now. You are complaining about my post.

I have no idea why this is hapenning. It appears to be localised to this
single thread. Plosts in other threads are plain text, just like my settings
say.

Blame on outlook express I suppose.

Cheers
Richard.