Topic: CSS Cross browser issues

For the life of me, I can't figure out why I'm getting these gaps between rows of images.

http://dev.runningwolf.com/inprogress/geardetroit.com/index2.htm is the preview. In IE, it looks as intended. In Firefox 0.9.3 and Opera 7.54, there are sizeable gaps between the three rows of images.

I've removed all of the white space between the <img> tags. I've double checked my calculations for the size of #content (3 rows @ 150px height, 10px margin-bottom, 100px flash div, and 2px of border). But I can't figure out why it's happening. I realize that those two probably adhere to some standard better than IE, but I'm at a loss as to what I need to change.

Ideas?

Simply add a the following rule : #splash img{ float:left; }

I've only check in Firefox though
Hope that helps.

It is in Opera as well, go for poi's answer it'll should do the trick.

-----------------------------------------------------------------------------
Templar654's signature below... then again you already knew that!
-----------------------------------------------------------------------------
Still using IE? Please don't say yes! >>
Why Opera? Because it's the only one!

Online Portfolio | Journal | Community | Paintings | Cell #23041

That breaks everything. In all three browsers, the border gets mangled. It DOES fix the gap issue, but creates the border problem. http://dev.runningwolf.com/inprogress/geardetroit.com/index3.htm for the updated version.

If the content of that array of images that's filling your border is constantly the same size, regardless of resolution and window size, then make the div that forms your border a fixed pixel size, 2 pixels wider and 2 pixels higher than your images.

Also you might find that removing line breaks in the code may help, for some reason when IE loads in images it sometimes adds in whitespace between images if there's a linebreak.

Pugzly, initial problem: Images are by default inline elements. Inline elements are aligned with the baseline of the text, just like characters (this in order to allow characters such as 'g', 'j', 'q', 'p' or 'y' to "hang down"). If you set the vertical-align property to either top or bottom it should work.

Pugzly, new problem: Floats are removed from the document flow, which means that their parent element no longer streches to contain them. A trick is to either float the parent element as well, or to insert an empty dummy element at the end of the parent, and giving it's clear properrty a value of both.

Blaise: No mystery there. In HTML, all consequtive whitespace is normalised to a single whitespace, but those single whitespaces are significant. The img elements are inline, meaning they are handled as were they characters in running text, and similarly to what you would expect with textual characters the whitespace between them is rendered.

Block elements are not subject to this since they are not handled as characters in running text.
--
var Liorean = {
prototype: XHTMLGuru.prototype,
abode: "http://web-graphics.com/",
profile: "http://codingforums.com/member.php?u=5798"};

(Edited by liorean on 09-08-2004 11:56)

(Edited by liorean on 09-08-2004 11:58)

Skaarjj - The div is already a fixed size. I've double-checked the math, and I believe I've calculated correctly.


Blaise - As mentioned initially, that's one of the things I've done. I removed the white space, and all of the image tags are on one line, with no space between them.

liorean - I'll try your suggestions. Thanks.

Okay - vertical-align: top; fixed the problem. http://dev.runningwolf.com/inprogress/geardetroit.com/index5.htm is the final. It validates, and looks the same in Opera and Firefox as it does in IE (although Firefox doesn't show the Flash, that's another story).

Thanks for the help.

Am I supposed to be able to read the text? I know I'm gettin' old, but that text is murder to read.

Otherwise: cool! Flash shows in Safari (tho not Firefox as you mentioned).

Actually, the text is more of a space holder than anything else. I admit it's a little small.

NEW PROBLEM! (of course, also a cross browser issue) but probably easier to fix than pugzly's cause i'm newer at this whole CSS thing ..

this (unfinished) page http://www.samoana.org.nz/index2.html looks perfect in ie but just all over the place in firefox ...

it's something to do with the browser not recognizing css rules for elements that are embedded in the 'main frame'. i'm still scrolling through tutes, which are just getting me more and more confused ...

help..?

--------------
no. damn it.

That looks pretty all over the place in my IE AND Firefox.