CODEWITHSUNDEEP
cssgoogle-chromefirefoxpositioncss-position
Jonas Olaussen
Jonas Olaussen

Reputation: 79

Firefox displays position relative different than Chrome

I have a webite where i position some events in a calendar with position relative. But the problem is that in Chrome the layout it pixel perfect, but in firefox and IE it does not work at all.

The events get positon about 10px wrong downwards. And my tooltip that also uses relative positoning gets stuck at its "orginial" position.

I have a live demo at: http://jonasolaussen.se/dev3/?page_id=6

You can see the black box positions different in Chrome and Firefox. And when you click on a tooltip it turns up at the date in Chrome but in the bottom left corner in Firefox.

I cannot understand why!?

Please! Help Me!

Upvotes: 1

Views: 4873

Answers (2)

Sander-Martijn
Sander-Martijn

Reputation: 11

I know this is an old post and because of your lack of detail I can't be sure, but quite often the reason for this is that different browsers will render their box models differently when widths, padding, margins etc are not explicitly set. setting widths for the elements you wish to position around will usually solve this problem.

Upvotes: 1

Hive7
Hive7

Reputation: 3675

One way of doing this would be to use css hack so that you can style it dependant on the browser.

Here is a demo:

@media screen and (min--moz-device-pixel-ratio:0) {
    .firefox {
        background: red;
    }
}

Fiddle example:

http://jsfiddle.net/Hive7/3HYmZ/1/

Here are my references:

http://browserhacks.com/

http://css-tricks.com/snippets/css/browser-specific-hacks/

Upvotes: 3

Related Questions