Topic: CSS Cross browser issues Pages that link to <a href="https://ozoneasylum.com/backlink?for=23220" title="Pages that link to Topic: CSS Cross browser issues" rel="nofollow" >Topic: CSS Cross browser issues\

 
Author Thread
Pugzly
Paranoid (IV) Inmate

From: 127.0.0.1
Insane since: Apr 2000

IP logged posted posted 09-08-2004 04:44 Edit Quote

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?

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

IP logged posted posted 09-08-2004 04:58 Edit Quote

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

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

templar654
Bipolar (III) Inmate

From: The Belly of a Fire Breathing Dragon
Insane since: Apr 2004

IP logged posted posted 09-08-2004 05:06 Edit Quote

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

Pugzly
Paranoid (IV) Inmate

From: 127.0.0.1
Insane since: Apr 2000

IP logged posted posted 09-08-2004 05:53 Edit Quote

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.

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

IP logged posted posted 09-08-2004 06:03 Edit Quote

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.

Blaise
Nervous Wreck (II) Inmate

From: London
Insane since: Jun 2003

IP logged posted posted 09-08-2004 10:57 Edit Quote

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.

liorean
Nervous Wreck (II) Inmate

From: Umeå, Sweden
Insane since: Sep 2004

IP logged posted posted 09-08-2004 11:19 Edit Quote

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)

Pugzly
Paranoid (IV) Inmate

From: 127.0.0.1
Insane since: Apr 2000

IP logged posted posted 09-08-2004 18:34 Edit Quote

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.

Pugzly
Paranoid (IV) Inmate

From: 127.0.0.1
Insane since: Apr 2000

IP logged posted posted 09-09-2004 04:09 Edit Quote

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.

Steve
Maniac (V) Inmate

From: Boston, MA, USA
Insane since: Apr 2000

IP logged posted posted 09-09-2004 05:17 Edit Quote

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).

Pugzly
Paranoid (IV) Inmate

From: 127.0.0.1
Insane since: Apr 2000

IP logged posted posted 09-09-2004 13:33 Edit Quote

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

LaSun
Bipolar (III) Inmate

From: the dark one with no windows
Insane since: Sep 2001

IP logged posted posted 09-15-2004 09:21 Edit Quote

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.

Hebedee
Paranoid (IV) Inmate

From: Maryland, USA
Insane since: Jan 2001

IP logged posted posted 10-08-2004 22:18 Edit Quote

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



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu