CSS float issue in IE

Discussion in 'CSS' started by jsadwith, Jan 27, 2008.

0
  1. #1
    Hey - I'm not too CSS savvy, more of a PHP expert, so I'm experiencing this problem with a dynamic list of message board topics.

    Inside of a table, I've got the following DIV to create each topic with rounded borders for the buttons.

    <div id="topic">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
&nbsp;&nbsp;<a href="?action=message_board&topic_id={ID}" class="green11">{name}</a>&nbsp;&nbsp;
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
    HTML:
    The CSS is...
    
div#topic{ margin: 2 2px; background: #D8EEE7; float: left;  font-weight:bold;}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
    overflow: hidden; background: #D8EEE7}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
    Code (markup):
    Here's my problem...in Firefox/Safari/Camino, it does exactly what I want. Each button is dynamically sized perfectly, and they display (left floated) one after the other, but in IE, it displays them as a vertical (rather than horizontal) list. I'd imagine this has something to do with the FLOAT tag, but I have no idea how to solve the problem.

    Here's the link...I'm referring to the list of topics under "BOARD TOPICS": http://www.2ndfloor.org/message_board_updates/index.php?action=message_board

    Any help or suggestions would be greatly appreciated!

    Thanks,
    Jeremy
     
    jsadwith, Jan 27, 2008 IP
  2. jsadwith

    jsadwith Guest

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Ok, so I've tooled around and figured out that the problem doesn't stem from the float declaration. Instead, it occurs because of the two "display:block" declarations. I've tried other display options (none, inline, compact, etc), but each one causes the boxes to lose their rounded corners.

    Any ideas?
     
    jsadwith, Jan 27, 2008 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    Some of your problem stems from IE refusing to size your sections shorter than the font-size and line-height... and your nesting makes no sense - you have the outermost div set to a shorter height than it's content... AND you've got them kin when nested might work smoother (with less classes, it's a bit class heavy)

    The big problem though is that the only reason this type of rounded corner technique works is that the 'display:block' bold tags auto-expand to the width of the container - if you don't state a width on a float, that calculation is zero in IE - and there's not a lot you can do about that apart from setting the width on #topic to a fixed value.

    set a fixed width on #topic, and boom, they'll work. Not a great solution though if you want them shrunk to their content.

    If you want to see another technique for doing imageless rounded corners, have a look at this page of mine:
    http://battletech.hopto.org/html_tutorials/rounded_css_borders/
     
    deathshadow, Jan 27, 2008 IP