CODEWITHSUNDEEP
htmlcssfirefox
Natasha
Natasha

Reputation: 103

negative margin-top is not working in firefox

I am working on a project and I have an issue with Firefox, I cant figure out what the problem is. I am new to HTML and CSS.

The link to the website is http://parapentemontanita.com/

In all browsers except IE and Firefox it works perfectly. My problem is the section that says "VUELOS DE PARAPENTE TANDEM" who's class is tandem. The margin-top: -350px is not working.

.tandem
{
    position: relative;
    margin-top: -350px !important;

}

Thanks in advance

Upvotes: 0

Views: 1231

Answers (2)

Andréle
Andréle

Reputation: 336

Your margin-top:-350px positioning works without !important, so please don't use the important. Only if you have to overwrite an automaticaly generated inline style you're not able to delete. Otherwise you get more and more and more ... problems and work with the !important in your CSS.

In your cases:

You have a mess of negativ positionings in your layout... It's ok, but you have the wrong positioning type. You use relative, but you have to use an absolute positioning.

absolute: the elements height and width isn't in the normal content flow

relative: the elements height and width is in the normal content flow and takes it dimensions

Let us take the element id="tandem", give them an outline like the bottom, so you see the real height of the element:

#tandem { 
  outline: 1px solid red;
}

outlineing the container of #tandem:
.col-md-4.col-xs-12 {
   outline: 1px solid yellow;
}

and the header
#tandem header {
   outline: 1px solid black;
}

On the picture you can see the real height of the element in Firefox:

enter image description here

I have done a lot of repositioning in Firebug to get the result below. I have set every realtive positioned element in #tandem etc. to absolute. Changed some nagative top positionings. You have to play a bit with it, but the keyword is absolute ;-)

enter image description here

At least a small hint, please optimize your images. At the moment you have a page-weight from over 12MB in desktop and mobile, the pictures of the small sliders are fullhd, scale them down and save as .jpg.

Every person with a slow mobile connection will be thankfull ;-)

enter image description here

Upvotes: 0

Sergiy T.
Sergiy T.

Reputation: 1453

I think that is because of styling of above blocks. You have three blocks with classes col-md-4 col-xs-12 and block with class box_index within each of them. These col-md-4 col-xs-12 are floats and there is clear:both; in ::after pseudo-element.

box_index block inside col-md-4 col-xs-12 has declaration of top:-290px;. So content is moving up 290px but the container col-md-4 col-xs-12 holds its calculated height. And because of clear, next content starts after they ended. You forcibly move next container upwards, but inner elements of the container are floats and obey the clear:both; rule. So you need to move them also.

But it would be better to change top to margin-top:-290px;.

And you do not need margin-top:-350px for section.tandem any more.

P.S. Tested in firefox 44 but I think will work in Chrome also.

Upvotes: 1

Related Questions