SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member mikeywil's Avatar
    Join Date
    Sep 2003
    Location
    Faversham, UK
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help: floating left block adding padding to next block in IE5.5 and IE6?

    I've been round the houses on this one, and searched in vain for an answer in here... it's an easy one, I just know it is... please help!

    I want to have titles and subtitles in a thin column down the left hand side and the blocks of content that they relate to in a main column on the right. I arrange the code so that titles precede text and apply styles to make the titles float left. I give the main content a nice wide left margin and this is the result:

    http://www.wilcox.net/csstest.php

    Look closely in IE5.5 or IE6 (I'm on Win2K) and you'll see that the main text blocks (with green outlines for ease of viewing) occasionally have a slight indent of a couple of pixels on the left hand side (inside the green border).

    Looks OK in Opera and mozilla too (on PC).

    All help appreciated!

  2. #2
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It happens in IE, meaning, it's a bug.
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

  3. #3
    SitePoint Member mikeywil's Avatar
    Join Date
    Sep 2003
    Location
    Faversham, UK
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Jeff... at least I know I'm not going mad!

    Anyone got a workaround for this one or do I have to resort back to tables!
    Last edited by mikeywil; Sep 10, 2003 at 06:11.

  4. #4
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just live with it, it really is hardly noticable.
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

  5. #5
    SitePoint Member mikeywil's Avatar
    Join Date
    Sep 2003
    Location
    Faversham, UK
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree that on the sample I gave it isn't that noticeable. I amended the CSS to make it easier to read what I'd done.

    What about this one?
    http://www.wilcox.net/csstestnoborders.php

    This has type settings that are closer to what I was trying to achieve.

    I think the effect is much stronger (partly because the main blocks of text each start with a capital letter that has a straight left edge). Or am I still being picky?

  6. #6
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm... I guess I can see that being a problem... i'm not sure what to recommend.

    i mean i can live with it, it's fine, but if it doesn't fit with your vision for how it should look, i guess you should probably change it.
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

  7. #7
    SitePoint Member mikeywil's Avatar
    Join Date
    Sep 2003
    Location
    Faversham, UK
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorted... I think. This one works OK on IE5.5, IE6, Opera, and Mozila on PC for starters.

    http://www.wilcox.net/csstest2.php

    I removed the float and added a negative bottom margin to the title and subtitles. Probably not a 'proper' use of CSS, but good enough for me.

    Now, just got to see what it looks like on a Mac!

  8. #8
    SitePoint Addict
    Join Date
    Sep 2003
    Location
    Europe
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you are experiencing the 3px text jog IE bug:
    http://positioniseverything.net/expl...reepxtest.html

  9. #9
    SitePoint Member mikeywil's Avatar
    Join Date
    Sep 2003
    Location
    Faversham, UK
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Spot on yngwin. I did search for info on this bug before posting. I wonder if my fix is a reasonable one?

  10. #10
    SitePoint Addict
    Join Date
    Sep 2003
    Location
    Europe
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have no idea what is the best fix (apart from getting your visitors to use a better browser). It is something I do not worry about. I usually do not design for pixel perfection and as long as things are still readable/viewable and don't look too bad in IE I'm happy. I'm all for accessability, but I tend to agree with http://golem.ph.utexas.edu/~distler/...es/000215.html

  11. #11
    SitePoint Member mikeywil's Avatar
    Join Date
    Sep 2003
    Location
    Faversham, UK
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry - disagree there, but probably 'cos I'm coming at it from a different point of view.

    The design was for my CV (as a web designer). The page will be seen by prospective clients and agencies. I could tell them that it's their browser's fault... but they could tell me that they have no work at the moment!

    Whilst IE still has 80-90% of the browsers, I think there's nothing worng with getting it right for them, within reason. My fix is quite simple, just adding a negative margin and removing the float property, so why not?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •