SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Float layout: Dup Chars, Double margin... bugs? Need help :(

    Hello,

    I am working on this layout... (Note: example is watered down version of the "real" layout... the real layout is much more complex in terms of content and other elements.)

    IE 6 (and I am sure the versions below 6... Although, at this point, I am not concerned about IE5/PC or IE 5.2/Mac) is doing weird things (please view page with IE6, or see screen grab below.)



    I soon found A solution (-3px margin, view source or see code sample below), but it seems kinda hackish.

    Code:
    /* Fix infamous IE duplicate character bug (only IE needs to see): */
    /* Ref: http://www.positioniseverything.net/explorer/dup-characters.html */
    /* Move to IE-specific stylesheet later. */
    * html #tertiaryContent { margin-right: -3px; }
    Any suggestions for accomplishing/fixing same layout (3-col, fixed-width, with inner two columns) without using the -3px margin hack?

    Is the problem with the "contentWrap" class? I wanted to avoid funky box model problems by using an inner div to apply my padding and borders to...

    Heck, even the fix is doing weird things (just now noticing) with #secondaryContent div... notice the right border is gone (please view page with IE6, or see screen grab below.)



    Jeez. I do not remember having so many probs with other similar layouts and IE in the past, why this one???

    The "real" layout does even weirder things, esp. if I have an image that just touches the padding of the "contentWrap" class... both the inner-two (#a1, #a2) columns and the third outter column (#tertiaryContent) do the weird dup-char/double-margin thing... It is a bit frustrating.

    Can anyone help me on this?

    Also, I do not really like how I am adding space between the inner-two (#a1 and #a2) columns (giving #a2 10px left magin and floating both left) but it is the best solution I could come-up with... I guess I could remove the margin on #a2 and float it right, but that seems kinda hackish too... What do you suggest?

    I would really appreciate any help. I think I have been looking at the code for too long.

    Many TIA's,
    Cheers,
    Micky

  2. #2
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just realized what might be causing the right border problem on #secondaryContent:

    Code:
    #secondaryContent {
    	/* Width + Margin = 150px */
    	width: 140px;
    	margin: 0 10px 0 0;
    	overflow: hidden; /* Stops IE from breaking when font is enlarged. */
    }
    I set the overflow to hidden so the layout would not break when enlarged in IE... In the "real" layout, I have a long menu UL that has a few long links that mess-up the layout after a couple of text zooms... Best fix I could find was hiding the overflow.

    This might explain why the right border is getting cropped... but why would the border go outside of the floated parent??? I have no width set on the .contentWrap class. I was under assumption that borders and padding would stay inside the floated parent if the child had no set width? I guess this could explain why I am having problems with the rest of my layout.

    Hmmm, need to perculate on this one for a few. I may be back!

    TIA,
    Cheers,
    Micky

  3. #3
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I found part of my layout problems...

    First, I removed the "overflow: hidden" on the left col... going to apply that to the menu parent UL... this gave me back my right border...

    Second was the comments in my HTML code causing the dup char bug... Using condtional comments I was able to squash that bug.

    Next I discovered that the ".contentWrap" class was expanding outside of my floats... I am not sure why though... The ".contentWrap" class only had padding and border applied - no widht. Not sure why it would push itself out of my floated cols.

    Anyway, I ended up removing the ".contentWrap" class which fixed all problems... but now I needed to add padding inside the main blocks, so I went with this:

    Code:
    /* Used for horizontal padding: */
    #a1 *, #a2 * { padding: 0 10px; }
    #a1 **, #a2 ** { padding: 0; }
    That seems to work pretty good...

    I also removed the -3px margin fix I talked about before.

    Anyway,
    here is new layout

    Any thoughts?

    One area I am trying to get better at is hasLayout... can anyone tell me if I am missing a spot where I should be applying hasLayout? I find the documentation confusing...

    Sorry if long-winded posts... I am sure most of you are too busy to read it all.

    Have a good night,
    Cheers,
    Micky

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mhulse
    Sorry if long-winded posts.
    Not so much the length but you've been asking and answering yourself so much I'm not sure what the actual question is now.

  5. #5
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tyssen
    Not so much the length but you've been asking and answering yourself so much I'm not sure what the actual question is now.
    Lol, I know... sorry about that. I think I have had too much coffee.

    Let me reformulate my questions (feel free to ignore question 3):

    (Here is the latest version of my layout.)

    1. Any areas that I am missing a hasLayout fix? The documentation for hasLayout I find a bit confusing - I learn best via trial and error.
    2. It is really important that I get this layout solid. If anyone sees a spot that could be improved or changed for the better I would really appreciate the pointers. FYI: For some pages, I will be removing inner two cols (#a1, #a2) and using the layout as a 3 col layout. Also, I do not need to worry about support IE 5.0/pc or 5.2/mac.
    3. Why did the .contentWrap div class expand wider than the fixed-width floated parent? See code below.


    Code:
    #a1 { float: left; display: inline; width: 260px; }
    /* Used for horizontal padding: */
    .contentWrap { padding: 0 10px; }
    /* Background class: */
    .giveBackground { background-color: #ff9; }
    /* Border class: */
    .giveBorders {
    	border-width: 1px;
    	border-style: dotted;
    	border-color: #ccc;
    }
    /* (IE5/Mac hide) \*/ * html .giveBorders { border-style: solid; } /**/
    Above applied like so:
    HTML Code:
    <div id="a1">
    <div class="contentWrap giveBorders giveBackground">
    <p>a1 inner col</p>
    <p>a1 inner col</p>
    <p>a1 inner col</p>
    </div>
    </div>
    In the latest version of my layout, I removed the .contentWrap class and used the below css instead, used for left/right padding only, which does the trick but seems hackish:

    Code:
    /* Used for horizontal padding: */
    #a1 *, #a2 * { padding: 0 10px; }
    #a1 **, #a2 ** { padding: 0; }
    Hehe, please let me know if I am still confusing... I blame the caffeine!

    Have a good night, thanks for the response Tyssen, much appreciated.

    Cheers,
    Micky

  6. #6
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure why you're not just applying padding to the containers themselves rather than to every element in the containers. Also, do you really need those IE comments between the divs?

  7. #7
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tyssen
    Not sure why you're not just applying padding to the containers themselves rather than to every element in the containers.
    This could be an area where my knowledge of CSS-layout gets a bit foggy... I assume that if I apply padding/borders to parent containers I will have to account for IE5x boken box model. I guess that would make the most sense... I do not mind feeding IE5x different widths via conditional comments or inline filters.

    Is that what you would do?

    Re-reading:
    Why doesn't this work in ie5 / broken box model?

    Quote Originally Posted by Tyssen
    Also, do you really need those IE comments between the divs?
    Ah, well, I guess I could do without the comments. Using conditional comments fixed the dup char bug I was having.

    Thanks for feedback Tyssen, your help is always top notch!

    Cheers,
    Micky

  8. #8
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mhulse
    I do not mind feeding IE5x different widths via conditional comments or inline filters.
    Is that what you would do?
    Yep.

    Quote Originally Posted by mhulse
    Thanks for feedback Tyssen, your help is always top notch!
    I don't feel like I did very much, but thanks anyway.

  9. #9
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tyssen
    Yep.
    I don't feel like I did very much, but thanks anyway.
    No, you definitely helped.

    I think I needed a kick-in-the-butt... I usually try to avoid using SMBH like the plague, but it really simplified my html this time around.

    Here is an updated version of the layout

    I guess my other question still stands... should I be worrying about hasLayout anywhere in my layout (i.e. height: 0.1%; )? IE6 seems to be fine... I do not have older versions to test on atm.

    Many thanks Tyssen, your input is always appreciated.

    Cheers,
    Micky

  10. #10
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think older versions of IE suffer from any more hasLayout problems than IE6 does. If everything's OK in IE6, then I think you'd be OK. Of course, IE<6 might have broken box model problems, but that's a different issue and as mentioned above can be corrected with conditional comments.

  11. #11
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tyssen
    I don't think older versions of IE suffer from any more hasLayout problems than IE6 does. If everything's OK in IE6, then I think you'd be OK. Of course, IE<6 might have broken box model problems, but that's a different issue and as mentioned above can be corrected with conditional comments.
    Sounds good!

    Many thanks for letting me bounce my ideas and examples off you.

    Have a great day!
    Cheers,
    Micky


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
  •