CSS border and Firefox 2

[Hondy]

Hi

I have an odd problem with my borders in css in firefox.
I have a DIV with the border properties that contains the whole page:

#mainPage {
border: black 5px solid;
color: black;
background-color: white;
height: auto; <---this works in IE but not firefox
width: 720px;
}

In IE the DIV will stretch as the child containers grow, but in Firefox I have to set a fixed height for the page or the border will hang around at the top as if it's an empty DIV

What's going on? How do I fix this?

Thanks

 

[BillyRayPreachersSon]

You are probably floating the contents of the DIV, or absolutely positioning them (although which will have to remain a guess unless you tell us more).

Both of these alter the way elements interact with other content.

If you are using floats, put a cleared element after them. If absolute positioning, there's nothing you cn do, short of specifying a height (or min-height).

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Hondy]

They are indeed floats, I have a container div and all the divs inside are floats - how do I clear the floats without screwing it all up?

Thanks

 

[Hondy]

Here's the code, works fine in IE but not in FF - can you give me an example of "putting a cleared element in"?

Thanks

HTML

<div id="mainPage">
<div id="spacer">
</div>

<div id="topRow">
<img src="images/logo.gif" alt="logo" />
</div>

</div>

CSS
#mainPage {
border: black 5px solid;
color: black;
background-color: yellow;
height: auto;
width: 720px;
margin-right: auto;
margin-left: auto;
}

#topRow {
color: black;
background-color: white;
width: 619px;
float:left;
}

#spacer {
color: black;
background-color: white;
width: 99px;
height: 123px;
float: left;
}

 

[Vragabond]

I hope your #spacer element has more function than just holding that space for other elements. Because there are better ways to achieve something like that, without putting empty elements everywhere.

I would first try adding [tt]overflow: auto;[/tt] to your #mainPage. This sometimes solves the problem with floats but at other times introduces new problems such as spurious scrollbars. If that does not work, add a block element that has a style of [tt]clear: both;[/tt] and put it after both floated elements but still inside the container. This element should be empty then. FF will then extend the container to be of appropriate length.

 

[Foamcow]

<hr> is a good element to use for clearing in the way Vragabond described. Mainly because it keeps the semantic structure of your document. If you don't want the rules to appear try:

hr {
    clear:both;
    visibility:hidden;
}

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2

 

[Hondy]

Thanks Vragabond and Foamcow - I'm just learning CSS at the mo, the spacer was an attempt to fix my problem, it's not there now.

Can you please use my code above to show me what you mean? I'm sure it's quite obvious but I have only been doing it a few weeks.

Cheers

 

[BillyRayPreachersSon]

<div id="mainPage">
    <div id="spacer">
    </div>

    <div id="topRow">
        <img src="images/logo.gif" alt="logo"  />  
    </div>    

    [!]<div style="clear:left;"></div>[/!]
</div>

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Hondy]

Thanks Billy - so easy when you know!

Would you mind telling me why that fixes it in firefox? Why does IE handle it differently to FF?

 

[Vragabond]

I suggest you educate yourself on clearing floats here:

http://www.positioniseverything.net/easyclearing.html

 

[Hondy]

perfect Vragabond, thanks for your help

 

[BillyRayPreachersSon]

That fix works in Firefox because Firefox behaves itself better when it comes to floats. IE does not, and so doesn't always need these things.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Hondy]

hmm ok, the way IE does it make more sense to me but I'll read up as above, cheers all