-
Posts
-
Hi
To create a header image on each page, I have a blank first section with image background and a top-margin of -220px. This works fine for Firefox but doesn’t work for Safari. I’ve got around it by adding a Gap element to the section with a 230px gap. However, this now makes the header too tall in Firefox as it is using both the negative margin and the gap. Is there a reliable way to do this which would work across browsers?
Take this page as an example to view in both Firefox and Safari:- http://bammakeup.com/makeup-course-tutors/
Many thanks for your help
Tristan
Hi Tristan,
It is not advisable to use negative margins and thus causes conflicts on some browsers. What you are trying to achieve could be possible with some deep CSS and JS customization but would fall beyond the scope of support we can provide. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.
In the meantime, you could try removing your top negative margin and using this inline CSS code under Style field of the element settings (see: http://prntscr.com/7qeof1), but we can’t guarantee if it will work on all browsers:
position: relative; top: -220px; margin-bottom: -220px;Thanks for understanding.
