IE bug with floating <div>s

Discussion in 'HTML' started by =?iso-8859-1?Q?Kim_Andr=E9_Aker=F8?=, Aug 28, 2005.

  1. 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ø
    -
    (remove NOSPAM to contact me directly)
    =?iso-8859-1?Q?Kim_Andr=E9_Aker=F8?=, Aug 28, 2005
    #1
    1. Advertising

  2. 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ø
    -
    (remove NOSPAM to contact me directly)
    =?iso-8859-1?Q?Kim_Andr=E9_Aker=F8?=, Aug 28, 2005
    #2
    1. Advertising

  3. =?iso-8859-1?Q?Kim_Andr=E9_Aker=F8?=

    Els Guest

    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, Aug 28, 2005
    #3
  4. 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ø
    -
    (remove NOSPAM to contact me directly)
    =?utf-8?Q?Kim_Andr=E9_Aker=F8?=, Aug 29, 2005
    #4
  5. =?iso-8859-1?Q?Kim_Andr=E9_Aker=F8?=

    Els Guest

    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 -
    Els, Aug 29, 2005
    #5
  6. =?iso-8859-1?Q?Kim_Andr=E9_Aker=F8?=

    rf Guest

    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.
    rf, Aug 29, 2005
    #6
  7. 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.

    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.

    --
    Kim André Akerø
    -
    (remove NOSPAM to contact me directly)
    =?iso-8859-1?Q?Kim_Andr=E9_Aker=F8?=, Aug 29, 2005
    #7
  8. =?iso-8859-1?Q?Kim_Andr=E9_Aker=F8?=

    rf Guest

    Kim André Akerø wrote:

    > 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.
    rf, Aug 29, 2005
    #8
  9. 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
    Norman L. DeForest, Aug 29, 2005
    #9
  10. =?iso-8859-1?Q?Kim_Andr=E9_Aker=F8?=

    Els Guest

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

    [...]
    >> 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?

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Els, Aug 29, 2005
    #10
  11. =?iso-8859-1?Q?Kim_Andr=E9_Aker=F8?=

    Toby Inkster Guest

    Toby Inkster, Aug 29, 2005
    #11
  12. 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 ..........


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


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

    --
    James Pickering
    http://jp29.org/
    (Table-free layout)
    James Pickering, Aug 29, 2005
    #12
  13. =?iso-8859-1?Q?Kim_Andr=E9_Aker=F8?=

    rf Guest

    Toby Inkster wrote:
    > rf wrote:
    >
    > > <META content="MSHTML 6.00.2800.1476" name=GENERATOR>

    >
    > Dude. :-(


    Er... What?

    Cheers
    Richard.
    rf, Aug 29, 2005
    #13
  14. Writing in
    news:alt.html,alt.www.webmaster,comp.infosystems.www.authoring.html
    From the safety of the LocusMeus.com cafeteria
    Els <> said:

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

    --
    William Tasso

    ** Business as usual
    William Tasso, Aug 30, 2005
    #14
  15. Seen on comp.infosystems.www.authoring.html, rf had said:

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


    On Mon, 29 Aug 2005, Kim André Akerø wrote, seen on
    comp.infosystems.www.authoring.html:

    > 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.)
    Alan J. Flavell, Aug 30, 2005
    #15
  16. =?iso-8859-1?Q?Kim_Andr=E9_Aker=F8?=

    Toby Inkster Guest

    rf wrote:
    > Toby Inkster wrote:
    >> rf wrote:
    >>
    >> > <META content="MSHTML 6.00.2800.1476" name=GENERATOR>

    >>
    >> Dude. :-(

    >
    > Er... What?


    Er... this:

    > Content-Type: multipart/alternative


    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Aug 30, 2005
    #16
  17. =?iso-8859-1?Q?Kim_Andr=E9_Aker=F8?=

    rf Guest

    Toby Inkster wrote

    > Er... this:
    >
    > > Content-Type: multipart/alternative


    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.
    rf, Aug 30, 2005
    #17
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Tamlyn Rhodes
    Replies:
    3
    Views:
    969
    Andy Dingley
    Feb 26, 2004
  2. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    737
  3. teeshift
    Replies:
    2
    Views:
    248
    Chris Pearl
    Dec 1, 2006
  4. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    182
    David Dorward
    Jun 1, 2005
  5. mscir
    Replies:
    3
    Views:
    302
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page