CSS Positioning
Permalink Browser Info Environment
I have a block that is has absolute positioning within a relative positioning block.
Main div
#fdive .headerlogoarea {
position:relative;
top: 49px;
height: 400px;
}
Block located within this div
#fdive .header_image {
width:961px;
position: absolute;
top: 90px;
left: 0px;
}
When I set this as an image block it works great. However, when I change over to the slider block, the CSS causes havoc and the positioning of the div tag doesn't work (basically it seems to ignore the setting)
I am guessing it has to do with the CSS in this image slide block, but I didn't want to mess with it too much before getting some advice.
The attached file shows how it appears with the current CSS - if it was an image block it would appear more where the arrow points
Main div
#fdive .headerlogoarea {
position:relative;
top: 49px;
height: 400px;
}
Block located within this div
#fdive .header_image {
width:961px;
position: absolute;
top: 90px;
left: 0px;
}
When I set this as an image block it works great. However, when I change over to the slider block, the CSS causes havoc and the positioning of the div tag doesn't work (basically it seems to ignore the setting)
I am guessing it has to do with the CSS in this image slide block, but I didn't want to mess with it too much before getting some advice.
The attached file shows how it appears with the current CSS - if it was an image block it would appear more where the arrow points
| Type: | Discussion |
|---|---|
| Status: | New |
Here is the snapshot
It's hard to say without seeing the actual html that this relates to, but I'd suggest a couple things:
assign a fixed height to the containing element:
#fdive .header_image {}
As the image slider moves the images it may be positioning them absolutely, so that position would be related to the next container that's positioned relatively which would explain why it's not 90px lower.
In any case try those suggestions, if you're still having trouble post back the url of a page that this is happening on.
assign a fixed height to the containing element:
#fdive .header_image {}
As the image slider moves the images it may be positioning them absolutely, so that position would be related to the next container that's positioned relatively which would explain why it's not 90px lower.
In any case try those suggestions, if you're still having trouble post back the url of a page that this is happening on.
Hi Ryan,
Thanks for replying. I tried that and it didn't seem to have an effect.
This is a page with the slide on it:
http://studio5d.com/fantaseadive/index.php/diving/...
This is a page with the slide not on it (just an image) where it is working properly
http://studio5d.com/fantaseadive/...
Thanks!
Thanks for replying. I tried that and it didn't seem to have an effect.
This is a page with the slide on it:
http://studio5d.com/fantaseadive/index.php/diving/...
This is a page with the slide not on it (just an image) where it is working properly
http://studio5d.com/fantaseadive/...
Thanks!
Try adding
#fdive .header_image { padding-top: 90px; }
#fdive .header_image { padding-top: 90px; }