DMS 2 Negative Margin Not Working In Internet Explorer

[dreamsight 8]

http://1071785999.n588565.test.prositehosting.co.uk/services/mot-welding/

 

I usually get around this issue but on this website i need to use 'Boxed Column' with a negative margin to bring the form up over the image.

 

im currently using this:

.column-boxed {

border-style: solid;

border-width: 0px;

box-sizing: border-box;

margin-bottom: 5px;

margin-top: -20em;

}

 

and it does the job on all browsers but Internet Explorer, and possibly Safari - i tried using:

top: -20em;
position: relative;
 

but it leaves a large white space where the form has been moved up from
 

 

[Danny+ 1,327]

Hi,

 

IE doesn't like negative margins and doesn't render them properly, just another awesome feature of Internet Explorer. However, you shouldn't really use negative margins to position you content/elements. You should use relative or absolute and use top: -20px instead.

 

Please not that if you do use positions like these, you will likely need to use media queries for any issues you encounter when viewing on mobile devices.

[dreamsight 8]

Hey Danny, thanks for your reply - gotta love IE.

 

I tried using absolute - but the form overlapped the content below it.

now i'm trying this:

.column-boxed {

border-style: solid;

border-width: 0px;

box-sizing: border-box;

margin-bottom: 5px;

top: -20em;

position: relative;

}

BUT there's now a large white space where the form has been moved up from, head is officially being scratched

[Danny+ 1,327]

Try using absolute instead of relative and right: 0;

[dreamsight 8]

i've tried this, perfect on a few pages - it overlaps content at the bottom of smaller pages - http://1071785999.n588565.test.prositehosting.co.uk/services/mobile-welding-service/

 

i'll keep playing around with this, may have to re-design though. thanks for your help this far danny

[Danny+ 1,327]

If it overlaps on certain pages,  you will want to use the page-id-X class and add multiple CSS rules for individual pages. Its a pain but it will resolve your issue.