Code displaying different in IE and FF, could use some help

Discussion in 'CSS' started by Stefson, Sep 29, 2007.

0
  1. #1
    Hello,

    I'm having an issue with my site (blog).
    In IExplorer everything looks like it should, but in Firefox there is a problem.

    I've taken the liberty to put up some screenshots, they say so much more :). (Images are hosted on my Flickr account if you are wondering)
    If anyone could tell me what I'm doing wrong here, I'd very much appreciate it.

    http://farm2.static.flickr.com/1143/1456567085_267c9d174f_o.png = IExplorer screeny
    http://farm2.static.flickr.com/1394/1456566947_188a14d7c1_o.png = Firefox screeny

    The html to display the box is the following:

    <div>
<div>
<h2>Most Commented Posts</h2>
<php>
</div>
<div>
<a href="http://www.link.com/"><img src="http://www.link.com" width="120" height="60" alt="text"></a>
<br><br>
<a href="http://www.link.com"><img src="http://www.link.com" width="120" height="60" alt="text"></a>
</div>
</div>
    Code (markup):
    The CSS is the following:

    div.container-sidebar{
margin-left: 6px;
margin-bottom: 6px;
width: 500px;
text-align: left;
background-color: #F4F4F4;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 4px;
padding-right: 4px;
}
.sidebar {
padding: 0px;
margin: 0px;
list-style: none;
font-size: 1.0em;
line-height:150%;
color: #000000;
text-align: left;
font-family: Verdana, Helvetica, Geneva, sans-serif;
font-weight: normal;
font-style: normal;
margin: 4px;
float: left;
}
.sidebar2 {
padding: 0px;
margin: 0px;
list-style: none;
font-size: 1.0em;
line-height:50%;
color: #000000;
text-align: right;
font-family: Verdana, Helvetica, Geneva, sans-serif;
font-weight: normal;
font-style: normal;
margin: 8px;
float: right;
}
    Code (markup):
     
    Stefson, Sep 29, 2007 IP
  2. Stefson

    Stefson Peon

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Okay.
    Found out what was causing the problem.

    you need to add a clearing method to the box. The columns are both 'floated' so you need to clear them so that the container box wraps them both. A method might be to use the easy clearing method.

    Check out this article about - .positioniseverything.net/easyclearing.html - clearing a float container
     
    Stefson, Sep 30, 2007 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Yeah, floats can get longer and they will not affect the height of their container.

    There are two ways (that I know of) to clear-- one is a clearing div-- an empty <div> & nbsp ; </div> (spaces added to show) under the last float but within the container. But if there's something else under the float container, like a footer, it's better to put clear:whichever in the CSS of the footer-- it eliminates the need for an empty piece of code.

    I have a site where, even with a footer, I needed the emtpy, non-semantic clearing div because I'd used up all my background-image possibilities and need some side borders to extend on the container as the floats grew-- meaning the clear had to be within that container, not the footer.
     
    Stomme poes, Sep 30, 2007 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Another technique that does NOT require an extra DIV is to make the container obey the height of floats - the easiest of these is to set the container to either overflow:hidden or overflow:auto, though there are times IE6 chokes on that (and times it doesn't - really wierd), but you need to set haslayout usually in lte IE6 anyhow, and IE's default behavior is what we want, so a simple * html #container { overflow:visible; height:1%; } fixes that.

    The other way is to make the container itself float. Set the width, float it left and boom, it obeys the height of floats inside it.
     
    deathshadow, Sep 30, 2007 IP