PDA

View Full Version : Firefox CSS Issues

shiftyroach
03-01-2005, 12:17 PM
G'day folks. Having 2 issues getting my site to look right in Firefox. Probably something I'm doing wrong as I'm just starting in the world of CSS. I'm revamping www.emmagine.com in it's 7th incarnation.

The url is http://v7.emmagine.com .

The first problem you'll notice is the 3rd box, maked site updates, doesn't line up with the others and has wierd spacing above and below it.

The second problem is the fixed position backgrounds in each of the boxes on the left side is missing completely, yet shows up in IE. I find it hard to believe that Firefox won't support backgrounds in <div>'s so I'm sure I messed something up.

Posted screenshots as well if you need of firefox (http://v7.emmagine.com/ff_view.png) and ie (http://v7.emmagine.com/ie_view.png)

If you feel like critiquing the design as well, feel free. Any help and info would be greatly appreciated. Thanks.

- Ish
Viper007Bond
03-01-2005, 07:01 PM
Are you using <p>'s? IE and FF handle them crazy different spacing wise.

And I'm not sure about the backgrounds. I suck at CSS. :(
shiftyroach
03-01-2005, 07:49 PM
Only using <p>'s nested within the <div>'s and between two seperate div's so in a sense we've got:

<div>
1st box
</div>

<div>
2nd box
</div>

<div>
3rd box
<p>some p's here</p>
<p>more p's</p>
</div>
RammsteinNicCag
03-02-2005, 05:12 PM
The first thing I would do is add a doctype to make sure IE goes into "standards" mode instead of quirks mode. From your code, I'd say you could use HTML 4.01 transitional. Add this before your html tag:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

After that, validate your html (http://validator.w3.org/) and fix any errors that are displayed (if you have a lot of errors, don't worry, many times they are not very bad errors or one fix will fix many of them). Then, validate your css (http://jigsaw.w3.org/css-validator/) and fix any errors displayed there (a little hint specific to you - you should have # before a hexadecimal color [color: #00FF00;]).

After that, check out the site in Firefox again and see if there are any changes. These won't fix all of your problems probably, but it could be a start.

As for the background images, I'm having trouble finding them outside of the page. I tried both http://www.emmagine.com/images/tourback.gif and http://v7.emmagine.com/images/tourback.gif and do not see the image on either of them.

Jennifer
shiftyroach
03-06-2005, 10:41 PM
Thanks for the pointers guys.

The problems have been solved. 2 main sources of reasoning. First with the background images Jennifer, they were there at http://v7.emmagine.com/images/tourback.gif etc. The reason you couldn't see them is because the image is white and transparent. Ooooh :)

The reason they didn't show up in firefox is because Dreamweaver MX is stupid. The cross browser CSS to use is:

background: url(/images/updatesback.gif) no-repeat bottom left;

and not

background-image: url(/images/updatesback.gif);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: left bottom;


Then as for the crazy spacing. Turns out <p> and <ul> tags come with default margins that throw off <div> spacing. Either get rid of them, or redefine them to have zero margins.

Done and done.
Whiteknight
03-06-2005, 11:07 PM
both of those snippets of CSS should be equally acceptable, since all of those statments are part of the CSS 1.0 standard, and CSS allows for multiple statements AND compound statements.

Also, the spacing of <p> and <ul> tags can be custom-defined using CSS, so if there are compatability problems arising from tag ambiguity, you can rigidly define them using your stylesheet.