CSS in firefox not lining up

Arrrrrrrrrrrrrrrgh!

[one_mind]

Hi,

I just finished my home page and was using IE to view it as i went. Just when everything was right i thought i would check it out in firefox. It looks good but 3 images are about 10-20px to far up which makes it look gay.

Is there a work around for this or should i go back to tables? I am using divs and relative positioning by the way :)

Cheers

[one_mind]

One last thing, I wanted some people here to see my site to let them know exactly what is wrong with it but remember the no links rule. Is there any other way?

Can i PM someone if they ask for the link?

Cheers

[adb64]

In situations like this I remove all non-relevant stuff from the HTML file so only the part having the problem remains. Then I remove all non-relevant stuff from the CSS file. In most cases that should point you in the right direction.
If you are still not able to locate the problem, then post the remaining HTML and CSS in this thread.

[4css]

Hi One_mind,

If you read the
Charter [webmasterworld.com] for the css forum, it will explain to you how to post your code for viewing.

also, it is best not to use IE first when doing your work. Its always best to use FF etc.. instead, then tweak for IE.

Make sure before you post code that all validates first.

[one_mind]

Thanks :)

Some guy in another forum gave me this code but i dont know what it does :)

* html img#bar
{
top:20px;
}

It works. It somehow lets me position for firefox in my css and enter different values for ie.

Any one know what the * does in css?

Thanks

[Setek]

It's the IE star html hack - a css hack that will only work for IE - there are many out there, usually I'd say not to resort to hacking until you've exhausted your options (after all, if you end up wanting to move it somewhere else, you've got to deal with moving it twice, once with standards-compliant, another with your hacks.)

Of course, when the time comes that it's necessary to hack, just curse IE and hack away :)

P.S.: as an aside, the * in CSS does something different, and is an allowable selector - it sets -all- selectors (all elements.) Its usual use is to reset margin and padding differences between browsers.

[one_mind]

Cheers Setek :)

I think i'll just use it, its only for 1 image :p

[4css]

It is also used for global styling. You can style out browser defaults with your margins, paddings, and borders with it as each browser has different defaults within it for how something appears.

So if you went like this:
* {margin: 0px;
padding: 0px;
border: 0px;
}

It would set all of those to 0px's through the whole page. Then as you go forward wtih your styles you can add them as you wish and where you wish.