3 column layout madness

squaredeye · 2006-04-11 13:32:33

No excuses here. I am tired of trying to find these bugs and I just need help.
IE problems here.

The columns aren’t floating properly.
The footer should be clearing them, but doesn’t.

I have column widths set by percentage, and thought that would keep the width’s friendly, but I guess not?

Also, what’s the frickin deal with the spacing on the menu? I can’t figure that one out.
Must be an ancestor in there I can’t find?

One of these days the DOM inspector is gonna make more sense to me, until then, let me know what you find.
Thank you o great community of peeps,

Matthew

maniqui · 2006-04-11 15:32:49

Hi ma_smith.

First, validate your CSS! there is an error somewhere with a non-closed bracket “}” (at the very beginning)

I’m far away to be a CSS gurú, but in my experience, I have lernt this axioms:

never apply (or try to avoid) margins and paddings in main layout elements (in your html: #main, #sidebar, and #sidebar_left). I have seen that #main has some big margins.
in that case, it wil be better to apply margin to inside elements. Example: inside #main, you have an div class="article" and you apply margins and paddings to it.
if you use a fixed width layout (you have a #wrap fixed to 825px) you would like also to fix the inner elements (main, sidebar, sidebar_left in this case).

Some of this tips can be read here (excellent article): CSS is not hard to learn – if you recognize it for what it is

Finally, for a three column layout, I recommend this one: Site in an hour by Andrew Krespanis

Last edited by maniqui (2006-04-11 15:33:33)

squaredeye · 2006-04-11 16:15:57

Manaqui,
Ha. In my exhaustion, I forgot some of the main tenants I have learned! Thank you for reminding me. I’ll have another go at it today. I’ve been reading Dan Cedarholm’s book on “Bulletproof Web Design” and it is proving to be an excellent resource. I think I just needed a good butt kicking! Thanks a ton.

Matthew

whatbrick · 2006-04-11 16:21:56

ma_smith wrote:

<blockquote>
Also, what’s the frickin deal with the spacing on the menu? I can’t figure that one out.
Must be an ancestor in there I can’t find?

<p>One of these days the DOM inspector is gonna make more sense to me, until then, let me know what you find.
Thank you o great community of peeps,</p>

Matthew
</blockquote>

The IE spacing in the menu is caused by having the a elements set as a block element (display: block;) while they are inside another block element (li). A cheap, but utterly ridiculous, fix is to get rid of all white-space between every element. So when you look at the source, the entire menu appears on one line (if you have word-wrap turned off). Or you could float the li elements…I think that would work.

What about the DOM inspector do you not understand? A better tool to use for markup/CSS issues is the web-developers extension (for FF obviously). I’ve solved lots of problems with that little gem.

Last edited by whatbrick (2006-04-11 16:22:25)

soulship · 2006-04-11 16:47:08

I use web developer all of the time BUT,

A better one than that for hand coding a live site with a ie pane and a ff pane at the same time…… Still a little buggy at times but once you are down to isolating ie problems it is a life saver.

CSSVista

And it’s FREE too :-)

What could be better?

Last edited by soulship (2006-04-11 16:49:39)

marios · 2006-04-11 18:25:53

ma_smith, nice design, lovely, don't get desparated, even with all the tools at hands, this CSS stuff is hard anyway, I allso have Dans book, but I prefer "this":http://www.amazon.com/gp/product/0764588338/103-3621653-9656645?v=glance&n=283155maniqui, nice tutorial , hadn’t seen that before, the script implementation for the input focus is quite usefull.
I believe rob sable had implemented it in his live search plugin, but I can’t remember.

Good luck with the layout,

regards, marios

Last edited by marios (2006-04-11 18:28:15)

squaredeye · 2006-04-11 19:06:59

Marios,
thanks for the encouragement man.

Matthew

hakjoon · 2006-04-11 19:15:23

In my experience percent based widths in IE always add up to more the 100%. Maybe it’s the 3 pixel jog bugs or something but I find I always have to have it add up to less the 100% to work.

One thing I do a lot when I’m trying to troubleshoot is to through background colors on everything. That way I can see exactly where everything is going and it makes it easier to find the troublemakers. Oh and Firebug for Firefox is awesome. It lets you inspect any element on the page and then it will show you which styles in which stylesheets apply to it. Makes it great to figure out what in the cascade is giving you grief.

Also remember that sometimes all that causes the differences is the default browser interpretations. So if you get more padding in IE try just specifying teh padding all around stuff like that. I can’t see any padding rules for you LI’s so maybe just applying a padding :0 to them to fix it.

Last edited by hakjoon (2006-04-11 19:24:12)

wet · 2006-04-11 19:15:44

ma_smith wrote:

Also, what’s the frickin deal with the spacing on the menu? I can’t figure that one out.

Add a trailing space to all <li>item</li> like that <li>item </li>. Then start laughing madly and shake your fists, direction Redmond.

squaredeye · 2006-04-11 19:19:38

Hak,
Thanks for the tip. I’ll check that stuff out.

Wet, you’re crazy. I’ll tyr that one too. Weird. This really is like language: i before e except after c… neighbor, weigh, …. …. …

:)

Matthew

wet · 2006-04-11 19:34:03

ma_smith wrote:

Wet, you’re crazy.

Thanks, I’m doing my best…

Alas, it looks like excess white space wasn’t the real cause. I’ve tried this now and succeeded:

.menu ul li {
	list-style-type: none;
	display: block; /* !!! */
	}

HTH,

Robert

Last edited by wet (2006-04-11 19:35:14)

Textpattern CMS

Textpattern CMS support forum

#1 2006-04-11 13:32:33

3 column layout madness

#2 2006-04-11 15:32:49

Re: 3 column layout madness

#3 2006-04-11 16:15:57

Re: 3 column layout madness

#4 2006-04-11 16:21:56

Re: 3 column layout madness

#5 2006-04-11 16:47:08

Re: 3 column layout madness

#6 2006-04-11 18:25:53

Re: 3 column layout madness

#7 2006-04-11 19:06:59

Re: 3 column layout madness

#8 2006-04-11 19:15:23

Re: 3 column layout madness

#9 2006-04-11 19:15:44

Re: 3 column layout madness

#10 2006-04-11 19:19:38

Re: 3 column layout madness

#11 2006-04-11 19:34:03

Re: 3 column layout madness

Board footer