Newb: Apparently basic css causes strange stacking issue [#1715408]

Hi,

This is my first time using the Omega system... I'm struggling a bit I confess...

I'm using D7, Omega Core 3.1, Omega Alpha 3.1 with Delta 7-3.beta10.

Firstly: I'm under the impression that it's best to add your own declarations in the global.css sheet and mirror them in the various zones etc to do the styling, rather than attempt to style the existing markup. Yes?

Please see the three attachments to see what I'm doing.

I'm just trying to create a very simple Content > Sidebar Second layout. In 'settings.jpg' you will see the settings I have applied within Omega. The grid is set to 'Fluid'.

With no css added I get what you see in 'withoutcss.jpg'. This layout is fine.

When I add

 .mycontent {
padding: 0px 10px 10px 10px;
    border:double 10px #ffee00;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

to global.css I get what you see in 'withcss.jpg'.

Nothing I do can persuade 'sidebar second' to line up again beside the content zone.

Why would that tiny bit of css wreck the layout?

I'm obviously not understanding something... :-)

Can anyone help me past this?

Thanks :-)

Comment	File	Size	Author
#3	gridsettings.jpg	121.9 KB	SMartin
#3	fixedgrid.jpg	236.09 KB	SMartin
	withcss.jpg	243.09 KB	SMartin
	withoutcss.jpg	205.61 KB	SMartin
	settings.jpg	157.98 KB	SMartin

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

SMartin CreditAttribution: SMartin commented 8 August 2012 at 11:42

No-one with any thoughts on this?

Disabling debugging mode does nothing...

Comment #2

dhalbert CreditAttribution: dhalbert commented 8 August 2012 at 12:04

I used Firebug to add a style="...your-css..." to my production site <div class="content clearfix">. I could not duplicate your problem. However, I am not using a fluid layout. Unfortunately, I don't have a test site to fiddle with at the moment.

Have you tried to narrow this down? Do you have the same problem if you use a fixed width instead of fluid?

Comment #3

SMartin CreditAttribution: SMartin commented 8 August 2012 at 12:34

File	Size
fixedgrid.jpg	236.09 KB
gridsettings.jpg	121.9 KB

dhalbert,

I *really* appreciate your time... This whole thing is driving me crazy...

If I switch to the fixed grid I get offered the various settings for the order in which the grids should be applied.

See gridsettings.jpg attached for the settings I used.

Logically, to me at least, my settings would indicate that the wide layout would be used first, then the normal layout, then the fluid layout and lastly the narrow layout. The responsive grid is always used.

What do I get on my wide screen? See fixedgrid.jpg attached. Fluid layout? Normal layout? Not sure but it's not very wide... *and* the text is spilling out of 'sidebarsecond'! :-)

My brain just works in a weird way. I *cannot* logically see what I'm doing wrong. Incredibly frustrating...

If I then go back to the fluid layout and remove *all* styling for mycontent and mysidebarsecond I get my proper layout back again but the text is *right* up against the boundaries of sidebarsecond. As soon as I add *1px* of padding, sidebarsecond slips below the content zone as before.

Nothing can persuade it to line back up again.

Is it always as hard as this? :-)

Comment #4

drew reece CreditAttribution: drew reece commented 8 August 2012 at 14:38

As soon as I add *1px* of padding, sidebarsecond slips below the content zone as before.

That is the issue, adding padding will break the layout depending on where you add it. Even adding borders can break the layout.

Omega uses the 960-grid, so it expects that you use various rules that have been setup to keep things on the grid.
I thought the info was in the Omega handbook, but this looks incomplete…
http://drupal.org/node/819176 I think there was an Omega tutorial or example, but I really can't remember where I saw it, sorry.

Have a look for a 960 gs guide or tutorial. I suspect you need to avoid adding padding directly & use a classes of prefix_XX or suffix_XX to add some extra column space to the sidebar or content.

Comment #5

SMartin CreditAttribution: SMartin commented 8 August 2012 at 15:29

Drew,

Thanks for your comment. I think I'm getting there now...

I had added my own .mysidebarsecond declaration (?) in the stylesheet.

As you say, adding *any* padding or borders to this will break the layout.

The answer seems to be to use .region-sidebar-second-inner. Here I can add padding and borders without breaking the layout. (This pfd is invaluable btw... http://www.redinterna.com/sites/default/files/drupal/Omega3.pdf)

It brings with it other issues, mainly that it doesn't seem to expand to fit the whole sidebarsecond region but perhaps I can find a solution to that eventually...

I must say it seems counter-intuitive to a newb that adding padding, which is surely to force content *inwards* can apparently cause a region to expand *outwards* and thus break the layout.

Anyway... Thanks! :-)

The battle resumes... ;-)

Comment #6

drew reece CreditAttribution: drew reece commented 8 August 2012 at 15:46

I don't think that 'all padding' is a problem, only when it is part of something that is intrinsic to the grid.
You have to be careful where you add it with 960gs.

Comment #7

LizD CreditAttribution: LizD commented 8 August 2012 at 18:37

You are trying to add padding to a grid that already has every pixel accounted for. So when you add more pixels, it wraps. Rather than add your own classes to do the styling, override the default CSS in your CSS. I.e. if you want to add padding to #zone-content then put #zone-content{padding: 0 10 px;} in your style sheet. Because global.css loads last it will override the default CSS without altering it and without breaking the layout.