Posted by arnemaine on December 7, 2011 at 7:22pm
When I place a background color in the zone-branding-wrapper such as this:
#zone-branding-wrapper {
background-color: blue;
height: 170px;
}I don't get the results I would expect, which is a full width wrapper with the bg color that fills the browser window without a scroll bar.
Instead I get a horiz scroll bar. When I scroll to see the right side of the window, there is a gap in the bg color, which varies depending on how I zoom in/out in the browser.
I've tried setting the width to auto or 100%, but doesn't help.
Isn't the normal behavior of the zone-branding-wrapper to be full width of the browser window?
Comments
I might be totally off and I
I might be totally off and I am doing this from my phone without a computer in front of me, but what about adding overflow: visible maybe?
Something to do with positioning blocks
I've trouble-shot a bit. Seems to have something to do with trying to position more than one block in the branding region. I can position one block, but if I try to position another I get this behavior.
What are the blocks?
What are the blocks? Is the issue block specific? Add some empty or text blocks to see if they are rendering differently.
Do the blocks have any prefix/ suffix or omega grid classes?
I quickly tested Boxes module's 'add custom block' (a form) & 'switch user' in the branding region & it doesn't overflow. (In an Omega 3.0 subtheme viewed in Safari 5.1.2).
Perhaps there are other rules from modules taking precedent & adding padding or margins?
absolute positioning works
It seems to be something to do with using relative positioning. When I use absolute positioning there isn't any problems. I don't usually use absolute positioning, but it seems to be working here. I need to set up different positioning for each responsive layout anyway.
I'll investigate why blocks are being effected with relative positioning further. Thanks for the tips.