SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)

    dl creative floating IE issue

    Hi,

    I have a definition list that I am marking up with a title, description and an image.
    http://www.yellowshoe.com.au/work/
    Code:
    <dl>
      <dt><a href="http://www.alistairwhyte.com/">Alistair Whyte</a></dt>
      <dd style="background: url(images/alistairwhyte.jpg) no-repeat top right">High quality Japanese style hand crafted porcelain pottery by talented artist/teacher Alistair Whyte.</dd>
      <dt><a href="http://www.finebynature.com.au/">fine by nature</a></dt>
      <dd style="background: url(images/finebynature.jpg) no-repeat top right">A shop with unique gift items and homewares from Finland, Scandanvia and other parts of Europe. </dd>
    </dl>
    Code:
    dl { padding: .5em 0; }
    dt {
    	float: left;
    	width: 10em;
    	padding: 8px 0 2px 0;
    	font-weight: bold;
    }
    dd {
    	display: block;
    	padding: 4px 200px 2px 10.1em;
    	border-bottom: 1px solid #7C6F63;
    	line-height: 1.8em;
    	min-height: 112px;
    }
    * html dd { height: 112px; }
    The problem came about when I added the highlighted hack for IE to register the 'min-height' - Although looking at it again - IE7 has the same issue so I will need to use a conditional to fix.

    Can a higher carbon life form shed some light on this mystery.
    Last edited by markbrown4; Dec 21, 2006 at 00:34.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    * to the top again *

  3. #3
    SitePoint Zealot marbly's Avatar
    Join Date
    Nov 2005
    Location
    Croatia
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what is it that youre trying to do, avoid the hack?

    do you only want to have min-height declared, and height adjusted to content, and that it works in IE but without the hack?

    try this:

    Code:
    dd {
    	display: block;
    	padding: 4px 200px 2px 10.1em;
    	border-bottom: 1px solid #7C6F63;
    	line-height: 1.8em;
    	height: 112px;
    	min-height: 112px;
    }
    html > body dd {height: auto;}
    for modern browsers height: 112px; is overridden by the html > body dd selector that IE ignores. IE only sees height: 112px; which in IE language actually means min-height: 112px;

    hope tis helps

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Hi marbly, thanks for the reply.
    what is it that youre trying to do, avoid the hack?
    Not exactly, it's better if I can do it without the hack but I don't really care about how it's achieved.
    The problem can be seen In IE here http://www.yellowshoe.com.au/work/

    I would like Internet explorer to register the 'min-height' but without breaking the layout

    Thanks,

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi Mark,

    This is an insurmountable bug (without using a hack) or a change of design.

    The problem is that as soon as you give static content "layout" in IE then it treats its margins and borders from the edge of the float and not sliding underneath as it should. (Mozilla exhibits the same behaviour if you add overflow:auto)

    To fix it with a hack you simply need to change the padding-left supplied to counteract this.

    e.g.

    Code:
    .works dd {    min-height: 112px; }
    * html .works dd { height: 112px;padding-left:0 }
    Of course ie7 also exhibits this behaviour so you will need to use conditional comments to target ie7 and reduce the padding for that browser also.

    Hope it helps

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    I hate insurmountable bugs , but your solution with removing the padding is ok for this simple design - It still looks ok, just less a little border.

    I'll read up on your FAQ about haslayout and what forces IE into it's 'quirky' different modes.
    Hope it helps
    Always

  7. #7
    SitePoint Zealot marbly's Avatar
    Join Date
    Nov 2005
    Location
    Croatia
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    its the left padding on the dd thats odd in IE as far as i can see, to make it look like in Firefox try this:

    Code:
    dd {
    	padding: 4px 200px 2px 0;
    	border-bottom: 1px solid #EDECDC;
    	line-height: 1.8em;
    	height: 112px;
    	min-height: 112px;
    }
    html > body dd {height: auto; padding-left: 10.1em;}
    nice looking page btw

    heh too slow... hi Paul

  8. #8
    SitePoint Zealot marbly's Avatar
    Join Date
    Nov 2005
    Location
    Croatia
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    It still looks ok, just less a little border.
    if its any consolation i can barely see the border

  9. #9
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    nice looking page btw
    Cheers,
    if its any consolation i can barely see the border
    Get another eye! - Agreed, it is pretty subtle..

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by marbly
    heh too slow... hi Paul
    Hi marbly

    While you're here just a quick mention about this bit.
    Code:
    height: 112px;
    	min-height: 112px;
    When you say them together in the same style and they are both the same dimension then all you are saying is height:112px as the min-height is redundant and not needed The height needs to be separated from the style block and just given to ie6- when used as the min-height hack.

    Hope that makes sense as its been wrongly used a couple of times now in the forum


    Quote Originally Posted by mark
    It still looks ok, just less a little border.
    To what border are you referring mark? You can still add some left padding if you need more space or did you mean something else?

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Ok - I see it now

  12. #12
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    To what border are you referring mark? You can still add some left padding if you need more space or did you mean something else?
    The dd has a bottom border that stretches the whole width of the list in Firefox and and in IE it is cut off by the floated dt.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    We could fix it in a a different way.

    remove the padding:0 hack and use this negative margin trick instead.
    Code:
    .works dd {    min-height: 112px; }
    * html .works dd { height: 112px; }
     dt{margin-right:-10em}
    You probably should give the dt {margin-right:-10em} only to ie (including ie7) but it shouldn't make much difference to other browsers unless you change something.

  14. #14
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Your just plain magical Paul.
    It would just be so much simpler if we didn't have to work around Internet explorer though wouldn't it.

    Thanks so much,

    surmounted insurmoutable bug! using a hack

  15. #15
    SitePoint Zealot marbly's Avatar
    Join Date
    Nov 2005
    Location
    Croatia
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Code:
    height: 112px;
    	min-height: 112px;
    When you say them together in the same style and they are both the same dimension then all you are saying is height:112px as the min-height is redundant and not needed The height needs to be separated from the style block and just given to ie6- when used as the min-height hack.
    im not sure i follow, i mean i can understand how it doesnt make sense to declare them both at the same time if youre looking from standards browser, but height: here is only meant for IE to pick up cos its overridden later for standard browsers. Is there some hidden danger in it? is it better to use * html?

    thanx for the heads up

    Get another eye!
    im cute

    love the negative margin solution, now you can make the border more visible if you like cos it looks the same in both browsers!
    Pauls the man

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    is it better to use * html?

    Sorry I must have been rushing yesterday as my train of thought wasn't very clear

    I don't like using the child selector as a hack when in fact its ie6 and under that should be the ones that are being hacked. Therefore, yes I thinks its much better to do the min-height hack like so.

    Code:
    #elementname {min-height:200px;}
    * html #elementname{height:200px;}
    Its one line less of code and it just targets the browser that has the problem (For some reason also ie7 seems to have problems when you overide the height with height auto although I haven''t tracked down the problem exactly but I know it doesn't work on in the old 100&#37; height layouts of mine.)

  17. #17
    SitePoint Zealot marbly's Avatar
    Join Date
    Nov 2005
    Location
    Croatia
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanx

  18. #18
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    This thread gets life again!

    Paul's solution to the design issue used a negative margin opposite to the float(float: left -- margin-right)so that the contents would flow over it as if it weren't there.
    Note: this was a fix just for IE because all other major browsers display this correctly.

    However, this solution seems to make nothing in the dt selectable or clickable - I've played around with z-index and I can't find a way around this..

    Does anyone out there have any ideas about making these links clickable?
    Last edited by markbrown4; Jan 17, 2007 at 05:48.

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi mark,
    I've played around with z-index and I can't find a way around this..
    Hmmm - took me .001 of a second to fix this.

    Code:
    .works dt{ margin-right:-10em;position:relative;z-index:2 }
    z-index has no effect on static elements as it only applies to positioned elements. Therefore you need to add position:relative before a z-index can be applied.

    When you use negative margins in IE you will quite often have to use position:relative anyway because IE either draws the negative portion under the background or makes it non-clickable as in your example.

    Most of the time the z-index won't be needed as the position:relative creates a new stacking context anyway and gives it priority over the static element. You don't actually need the z-index in the above example.

  20. #20
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Paul, that's why you're the master
    position: relative; has been the magic cure to a lot of my ie issues - Consider this one added to my IE debugging toolbag. from now on

    You have spent more time working out the bugs in IE than I have been willing to, I try and spend as little time using that browser as possible. Maybe I need to give it a day experimenting - but then again.. when I master it - it will become obsolete..

    Thanks again,
    a padawan


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
  •