On this page, I’m trying to use a negative margin to push up the slider behind the menu using the following code:
#slider {
position: relative;
margin-top: -123px;
}
In doing so, the result looks like this:
I want it to look like this:
So where am I going wrong in using a negative margin? I’m assuming that it’s causing the #slider element to float left.
Recommendation? Thank you.
Could we get a live site? Or at least some sort of demo which shows this in action? All we would really be doing right now, is guessing 
.
In FF it looks wacked out. In Chrome, it looks great!
Ok and I’m on the page but I’m still not exactly sure what the issue is. The negative top marghin is pulling it up to the menu (but behind).
Spell this out as if I’m 5. I often have trouble understanding issues over the Internet .
Ah - well I’m on Chrome (chromebook) so this might be the problem. I won’t have access to FF until Monday 
.
Need a new computer …
oooooooooo…Sorry to hear that. Hopefully I’ll be able to figure it out over the weekend.
If there is a problem with different browser rendering then try validating the page:
Hi,
Try this:
#slider{display:inline-block;width:100%;}
Float would also work but then you’d need to clear the elements aftewrards.
Be careful with negative margins because if they encounter floats on the way up then the element may no longer be 100% wide as it is squashed to the side of a float it meets on the way up (not to mention the side effect of collapsing margins).
Also beware of magic numbers (they seem to be on the loose this week) as your margin-top:-123px is a magic number. What this means is that your slider depends wholly on the top nav being 123px high in all browsers and this is unlikely to be the case unless you have fixed that height exactly and of course if you do that then the menu cannot wrap or be zoomed.
You should find another way of placing the slider that doesn’t use magic numbers and works if the header size changes. If the slider is a fixed height then you could place the slider absolutely as you have a known fixed height to work with. If the slider is fluid then you may need to absolutely place the header on top instead.
Try to avoid numbers that only work because an element is a certain size.
Thank you, PaulOB.
The ‘inline-block’ with the ‘100%’ width seems to be working to overcome that.
Reading the article you provided a link to, I’ve also seen (and experienced) such results. A real pain to deal with, especially when you don’t think you can find any alternative. The alternative I WAS tossing regarding my issue was to use absolute positioning, on the ‘#slider’ container; but then I would have to deal with the rest of the other issues: modifying the height of my slider object during responsive transition, then the elements below it would have to be modified to shift upwards, etc. (at least that was my experience).
My goal is to do better at coding so I wouldn’t encounter such hiatus issues. Using this method is one step forward for coding similar designs.
Thank you.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.