2 replies [Last post]
wallabee
Offline
newbie
Last seen: 16 years 10 weeks ago
Joined: 2004-08-13
Posts: 2
Points: 0

I'm currently building a webpage for a friend and am fairly new to CSS. I've done a couple of webpages, but none without spending a few hours working out simple problems with the way I was using CSS or fixing IE bugs. Bear with me ..

Anyway, today I decided to tackle the problem I was having with the current site and the way it was handling my columns I made using float: left. Basically, it was spilling out of it's parent div in IE, or in FireFox, it was acting as if the text wasn't there and was ending the parent's div on the picture above the text. After doing some research, I found it was a known issue in IE and played around with it for a while, but finally solved my problems in IE by just taking the "position: relative" out of the div's with the "float: left" in them, and it solved my issues in IE. Now I'm having problems in FireFox with the same site:

http://www.armcircles.com/ben/CSS/auto.htm

As you can see, in FireFox, the div isn't extending to cover the text, it's just holding the tab and the picture, and that's it. Anyone have any suggestions?

vibetuner
Offline
newbie
Melbourne, Australia
Last seen: 16 years 10 weeks ago
Melbourne, Australia
Joined: 2004-08-13
Posts: 4
Points: 0

FireFox problems for once

Firefox is actually following standards. Opera tries to mimick IE, so your problem doesn't occur in IE or Opera. For more background on this see the first section here:
http://www.positioniseverything.net/easyclearing.html

Solution:
In your stylesheet1.css, make the following class:

.spacer {
clear: both;
}

Now in the HTML, first thing in <div class="picturebox"> , put:
<div class="spacer">&nbsp;</div>

Put another:
<div class="spacer">&nbsp;</div>
...as the very last thing in the picturebox div. This will make the picturebox enclose the content properly.

It may help to comment the closing divs in ur HTML before you do it, so u know exactly where you're putting the spacer div - and don't mistakenly shove it in the wrong div container there).

Now your picturebox will wrap around the content. Firefox is following the w3c specs, nothing more, so it's always a good idea to do it the right way. I'm just starting out with CSS too, so all this info is slowly seeping in...

wallabee
Offline
newbie
Last seen: 16 years 10 weeks ago
Joined: 2004-08-13
Posts: 2
Points: 0

FireFox problems for once

Thanks, that works like a dream.