CSS problems with my redesign

Logoleptic · 2007-05-06 02:25:53

I recently launched a redesign of my business site, and there are two remaining CSS issues that I can’t seem to resolve. I’d appreciate any help that my fellow forumites could offer.

1. Sidebar Bullying My Images Around

This problem shows up across all major browsers, but only on this page. It’s most noticeable with a wide browser window.

If an image or other element within div#content_area is floated to the left, and if its position within #content_area is such that it’s higher on the page than the bottom of div#sub_nav, then the floated element will drop to a new position within #content_area that’s below #sub_nav.

This is fixable by floating the content area, but this introduces other problems. I’m researching a fix, and wondered if anyone here might have some suggestions. I’d also be interested in finding out what’s at work here. It’s too consistent to be a browser bug, so I’m probably running up against some quirk of the CSS box model.

I’ll be trying a different float method on #content_area when I get some free time. If it works, I’ll post a reply with details.

2. Extra Space Below Footer in IE6

This one is much more minor — In IE6 and IE7, the footer has about 1em of extra space beneath it. The weird thing is that this only shows up in the weblog and portfolio sections of the site.

I was able to fix the problem for IE7 by adding the following in a stylesheet targeted only to that browser:

#footer { margin-bottom: -1.2em; }

Unfortunately, this doesn’t work for IE6. Instead it cuts the footer in half horizontally.

I’m tempted to give this a pass, since it’s a very minor problem. If anyone knows how to fix it, however, I’d be interested in your ideas. Thanks!

Note: Due to a known server-side issue, the site will sometimes fail to load in IE. If anyone visits to check this out and gets an empty page, just reload a few times.

maniqui · 2007-05-06 05:35:34

Hi Logoleptic.

About the first issue: I have been looking at your CSS. I think it can get more solidified by applying a rule that, for me, it’s a golden rule: never apply margins or padding to main layout elements. If you do, you are asking for troubles.

Looking at your HTML, I notice you are trying to get the most minimal mark-up possible. In the theory, that’s the good way of doing things! But in practice, things become more complicated and we have to make trades-off between minimal mark-up and being sick of divitis.

So, by mixing the golden rule and my comment, if I were you, I would add some divs to solidify the main layout.
It’s like when building a, well, building: minimal foundations could be a temptation but some few more foundations here and there will make a solid foundation.

So, I suggest you to add a div id="sidebar" wrapping your #subnav". That will let you have more widgets (I mean, more divs with its own ids, like #ads or #feeds or #share)r in your sidebar and keep the #subnav as its own widget.

Also, in the #content_area, I suggest you to wrap each blog post in it’s own <div id="post">.
You may say: “extra mark-up”.
I would say: “solid HTML (solid foundations), more flexibility (and solidity) in the CSS and you still keep totally semantic”.

That said, and going back to the golden rule, I would float #sidebar to the left and float #content_area to the left/right (subtle differences in each method).
Right now, you are “giving shape” (sorry for my english) to your layout by floating #subnav and appling a margin: 230px.
My opinion (by my experience) is that this method isn’t as solid as just having a #sidebar and a #content_area both floating and with a explicit width applied. Then, the golden rule: don’t apply margins nor paddings to those two main layouts elements.

Then, you can fearlessly apply margins/paddings to the inners elements of those two main floating divs and achieve the same result and stay away from cross-browser inconsistencies, box models, troubles and pain.

What? “extra mark-up” did I hear?
Some clean CSS trickery could help you:

#sidebar * {
    margin: 0 15px;
}

#sidebar * * {
    margin: 0;
}

Using the universal selectory, courtesy of Bite Size Standards

Last edited by maniqui (2007-05-06 05:39:59)

Logoleptic · 2007-05-06 08:38:05

Thanks for your response, Julián. Your suggestion of additional container divs is actually something I’m experimenting with on my locally-hosted copy of the site. I’d gotten the idea from Dan Cederholm’s book Bulletproof Web Design. The problem I keep running into is that I can’t seem to get a stable gutter (the space between the columns) using this method. The gutter always grows and shrinks when the window is resized. I need to look over the resources you’ve linked to, as well as finish reading that chapter of Cederholm’s book. Hopefully between your advice and the book, I’ll find my solution. :-)

I’m going to play with this a bit more the next time I get a chance, but it looks like that may not be until Tuesday. I’ll report back when I know more. Meanwhile, I’m interested in any other helpful input on these problems. Thanks again!

Textpattern CMS

Textpattern CMS support forum

#1 2007-05-06 02:25:53

CSS problems with my redesign

#2 2007-05-06 05:35:34

Re: CSS problems with my redesign

#3 2007-05-06 08:38:05

Re: CSS problems with my redesign

Board footer