1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

IE issue - Max-width (tough one)

Discussion in 'CSS' started by robert_neville, Jul 7, 2005.

  1. #1
    Internet Explorer always presents me with challenge. The current issue involves emulating max-width in IE using the technique described by Svend Tofte.

    http://www.svendtofte.com/code/max_width_in_ie/

    The CSS code uses JavaScript expressions and feeds the browser's width to the style. The CSS code follows.

    * html #Content {
    height: 1%;
    width:expression(
    document.body.clientWidth > (500/12) *
    parseInt(document.body.currentStyle.fontSize)?
    "30em":
    "auto" );
    }

    My implementation does resize and display the fluid width. The hang up in this scenario involves a definition list, which does not extend the full width of the #Content container. The dd tag extends to the adjacent float (#ArticleID) and no further. The second issue relates to how the container expands beyond the parent when the width becomes minuscule. Ideally, a min-width would solve this problem; unfortunately IE has not included support for min-width.

    Please load the page and shrink you browser window to around 288 pixels. Notice the round corner following the fluid width. The id, #bgWh, with content expands the beyond #container. I need to discover how to constraint this expansion. If you remove the content, the problem goes away. Overflow: hidden has worked for me in the past, but did not provide the magic bullet this time around. Let me know if you have good ideas on dealing with these scenarios. Fortunately, Firefox does not have these issues.

    http://neville.f2o.org/nifty_TEMP1.html

    (Long version)
    http://neville.f2o.org/nifty_Sample.html

    Elements in the equation:
    #Content
    dd
    #ArticleID
     
    robert_neville, Jul 7, 2005 IP
  2. CompressedAir

    CompressedAir Peon

    Messages:
    56
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    
    *DL DD {
    width: 75%;
    }
    
    Code (markup):
    * will make only IE interpret the rule.
    Will give you I think the effect you want as far as the definitions going to the other side.
    As for the corners, you might want to check out Sitepoint's tutorial on them.
     
    CompressedAir, Jul 7, 2005 IP
  3. robert_neville

    robert_neville Peon

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Wow, your suggestions did resolve the scenario. I don't understand why it affected the page; or what attributed to the problem in the first place. But I am glad someone finally had some useful advice.
     
    robert_neville, Jul 12, 2005 IP