Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Funky Funky FireFox? (CSS/floats/margins)

L

lind0834

macrumors regular
Original poster
Oct 21, 2003
197
0
Never had a big problem with Firefox and thier CSS implementation until now.

the code on this page:
http://www.jimandkristene.com/snip1.html

is very similar to:
http://www.jimandkristene.com/snip2.html

The only difference is that I set it so the text will go in a scroll box, so I set the height and set overflow. There is a left margin on the text box so that it is next to the picture box without underneath it. Most browsers it looks ok.. or at least consistant. I don't have my Mac with me right now, but here's the way it goes in the browsers I have here.

IE4 - Margin is extra big, starting after the float.
IE5
IE5.5
IE6 - Renders the way I think it should.
Konquerer - Correct, but scrolling isn't impletment.
Firefox - looks fine in snip1.html, but snip2.html starts its margin after the float like IE4.

Attached it what it looks like for me in Firefox.
Top of the image is snip1, and the bottom is snip2.

Anybody know what's going on here? Is this officially a Firefox bug? I can't find any reference to it anywhere online. Or maybe I'm doing this whole thing backwards.
 

Attachments

  • csswierdness.gif
    csswierdness.gif
    7.8 KB · Views: 167
Haven't looked at the page (yet), but if you're using IE as the marker of "correct" when it comes to CSS you're in for a surprise. :D Konqueror is even worse, or was about 6 months ago (last time I checked it) - it doesn't even do some of the simpler CSS1 stuff correctly.

Now if you said Safari rendered it correctly... Safari's CSS support is pretty darn good. But Safari's CSS support didn't really come from Konq, even though it's based on it.

But generally the Gecko engine is closest to the standard. There are some OS X specific bugs in bugzilla though.

Edit: I just checked it with Safari; it displays the same "off" behavior. If Safari displays it like that, and Gecko displays it like that... probably the CSS is broken.
 
I never meant that I was using IE as any kind of marker for correct CSS display.. I just meant IE seemed to be doing, what made sense to me.

If I change the CSS of snip1 so the overflow is set to 'hidden' it acts just like snip2 in (what I think is) strange spacing. As long as I tell the height to be 'auto' it won't actually hide anything.

Now that I know how to get it to work consistant.. I can start figuring a solution.

http://www.jimandkristene.com/snip3.html

Does this mean the official standard for CSS holds that a float will go outside the margin of the next div instead of sitting on top of it?.. now that I think of it that way.. it makes more sense. :p

http://www.jimandkristene.com/snip4.html

I just made snip4.. now it looks good in IE and Gecko, but aweful in Konq. To Summarize what seems to be happening with a float and a standard div text box:
  • IE likes to put floats on top of all margins of other divs
  • Gecko puts floats on top of other margins, but not when overflow of the other div is visible.
So I put the margin on the float instead. Works good for these 2 browsers. But Konq likes to put the float on top of my other div.. Anybody know what's going on?
 

Attachments

  • csswierdnessK.gif
    csswierdnessK.gif
    4.3 KB · Views: 618
Huh, I'm puzzled (not that I still don't have tons to learn about CSS admittedly). It seems to hinge on the presence of a scrollbar - I tried it with "overflow: scrolling" and saw the exact same issue.

I may have spoken too soon in my first response; but it is odd that both Safari and Gecko do exactly the same thing.
 
A couple things, right off the bat...

Without a doctype, or with an invalid one, browsers default into quirks mode to handle the page. To give your designs the best chance possible to be displayed correctly by standards-compliant browsers, specify a valid doctype and then validate your HTML and CSS.

http://validator.w3.org/ - HTML
http://jigsaw.w3.org/css-validator/validator-uri.html - CSS

I'm not saying this will magically solve your problem, but it makes it a lot easier to troubleshoot.
 
Gave it a nice Doctype and Everything is valid.
It still looks bad in Konq. Is Konq's CSS Implementation just bad enough to keep it looking completely different than every other browser, or is it all my fault.

:(
 
http://www.jimandkristene.com/snip5.html

Alright, I think this one will work the best for me.
This particular bounding box method will work for what I need, but I wonder if there is a better way. Right now, it's set up so there is a left float box, a right float box and a small div to sit at the bottom with the clear set to all... that way the bounding box is around all the text.

Can anybody come up with problems using this method? It's working with IE, Gecko and Konq. Does it look bad in anybody else's browsers?

I'll take care of the black box later.. but for now just making sure it works in all browsers.
 
Rower_CPU said:
A couple things, right off the bat...

Without a doctype, or with an invalid one, browsers default into quirks mode to handle the page. To give your designs the best chance possible to be displayed correctly by standards-compliant browsers, specify a valid doctype and then validate your HTML and CSS.
Click to expand...

Guess I should've mentioned that was the first thing I tried when I was playing with his code. :D
 
you're missing one vital browser off the list you checked with!

opera is by far the best web browser (it reminds me of Macs; far better than the compition, small market share, and once you start using it you feel the need to 'convert' everyone you meet), and in this case may come in handy, as it is about the most standards-compliant browser out there, particually with CSS, as the guy who invented CSS works for opera now aparantly...

it works like you say it should in opera. I really don't like firefox, it seems to have quite a few problmes with CSS
 
Crud Crud Crud.

I forgot about the floats I used in the navigation on the right and left side of my site that this is for. So when I use "clear: both" it clears to where my navs on the side end.

I've been able to come up with quite a few awful hacks that would probably work, but I don't want to have to try to deal with that later. Should I just decide that Konq's implementation is flawed and go ahead and use "snip4" or can anybody come up with a good alternative?
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back