CODEWITHSUNDEEP
cssfirefoxslider
Jeppe
Jeppe

Reputation: 2233

Slider background absolute position - Firefox error

Developing a small website for a restaurant i stumbled upon this weird issue with positioning in Firefox - IE & Chrome works flawlessly.

URL: Café website

The slider is positioned as:

#new-royalslider-1{
position: absolute;
top: 0;
left: 0;
z-index: -1

Its pretty simple, can anybody figure out why Firefox is behaving differently?

Upvotes: 0

Views: 248

Answers (5)

Frederik.L
Frederik.L

Reputation: 5610

There is apparently a confusion with the .header selector, I see it appearing twice in debug mode and it is not exactly the same that is used in firefox.

In firefox, the problem is solved when you uncheck this rule :

.header {
    ...
    ...
    border-bottom: medium none;
}

For some reasons, chrome doesn't get the medium mention. Hope this helps

Upvotes: 0

Francois Borgies
Francois Borgies

Reputation: 2408

All browsers do not display a website in the same way and even if the whole tends to unite, there are still some points of detail which are misinterpreted by one or the other.

The problem is that Firefox, Opera and Safari do not have a method to assign a separate style sheet, like Internet Explorer, with specific comments.

Perhaps by targeting the browser will solve your problem. Add this code:

@-moz-document url-prefix()
{
    #new-royalslider-1{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1
}

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32162

Now define your id #header-wrapper position absolute as like this 

#header-wrapper{position:absolute;top:0;}

and define your id #wrapper margin-top: 450px; as like this 

#wrapper {
    margin-top: 450px;
}

Upvotes: 0

Toon Casteele
Toon Casteele

Reputation: 2579

First of all I think you should position your slider relative and put the header wrapper inside. Positioned absolute.

If you don't want to do that you can do position: relative with the slider and the following with the header wrapper

position: absolute;
top: 0;

Upvotes: 1

baker
baker

Reputation: 73

Not sure why but it seems like html is truncated. So, I firebugged : html{float: left}. Hope it helps.

Upvotes: 0

Related Questions