Are you a Google Analytics enthusiast?
More SEO Content
Firefox And Safari Send Tableless Design Backwards
Posted 02 September 2006 - 09:15 PM
Min-height didn't work at all for me, I don't think this is supported by browsers yet (I have never got min-height or min-width to work be interested to know if anyone else is getting this to work and on which browser and version).
How did I resolve. Well perhaps I can start a "firefox hacks". If you have a two or three columns in css and want them to appear equal.
Float 1 (or 1+ 2) left and float 3 right. End each column in footer div. To avoid firefox displaying the content of footer under shortest column float the footer to either left or right depending on largest column. You could define what would always be the largest column by adding a height in css to that div (I didn't need to do that as had a 1+2).
Thanks for everyone who contributed to this question.
Posted 03 September 2006 - 01:20 AM
LOL. I quoted my ownself.
Here's a simple way to get apparent equal heights with a header, main div with two nested divs, and a footer.
all floated left except for the menu div which is floated right
The content div and menu div have two different background-colors. The content div must always be longer than the menu div.
To make the menu div appear to be the same height and appear to stretch along with the content div:
1. Put a border-right on the content div.
2. Make the main div and the menu div background-colors the same.
3. The content div background-color is different.
When the content div gets longer, the menu div appears to stretch with it.
Something I've been messing with:
Use margins for spacings on all outter elements such as body and div. Don't use padding until you get to the innermost element in the block. And use padding only when necessary.
Using this method seems to make the cross-browser thing less PITA.
Posted 03 September 2006 - 01:43 AM
What is the problem with a table when it's the logical thing to use?
Posted 03 September 2006 - 09:38 AM
What is the problem with a table when it's the logical thing to use?
None at all! Hybrid layout code is the best! I've never been much of a purist, and if something works well for what I want it to do, I'll use it.
Posted 03 September 2006 - 11:52 AM
I (re)created my site a while ago using pure CSS and XHTML Strict just to see what I could do with it. And I did a lot.
But the column layout gave me the most headaches and least satisfaction.
IMO, it's one of the major issues with CSS. Since one main idea behind CSS is to stop using tables for layout, you'd think the W3C would, you know, maybe offer table-style layout for CSS from the get go? Just a thought...
I won't consider CSS to be fully "ready" until it can do natively what tables have been able to do (even though it wasn't really their job) for 11 years now without kludges and tutorials.
If someone with design experience feels a need to create a thread to ask how to do something like this, and other people feel a need to create tutorials about it, then the fault is with the specification, not the user.
Its not like this is some obscure design wierdness - it's been a standard layout feature for publishing infomation for what, a couple hundred years now?
For now, I'm using tables again. I still use CSS for most other style functions, but I refuse to run into the "kludge to make it work for that browser, another one for this one, and a nod to standards over here just in case" design methodology - I stopped doing that in 1998 or so and have no intention on going down that path anymore.
Posted 03 September 2006 - 12:06 PM
I submit for your consideration and review the following:
1. tables are not obsolete - you are just supposed to use them for data organization, not layout, correct?
2. CSS should be used for layout.
3. CSS can control Table layout just fine.
4. Therefore, the proper method for organizing columns is to place the data (text)into a table and to use CSS to control the layout and design.
Posted 03 September 2006 - 01:32 PM
If you're going to say that text is data, then you have to accept that all of the code is data, including the code used for layout and formatting, and when you do that, you kind of lose the idea of a table serving the purpose of displaying data. The purpose of a table is to display data on a grid. You can use a table to layout text on a page, but doing so is a compromise. It's not what the element is really for, but if it works, it works.
Moreover, using a table in order to make a page display in a particular way really only requires a table of two cells. You can use CSS to create three divs: header, footer and content. You can then use a table within the content div to break it into 2 cells: one for the menu, one for the text. If you want, you can even stick an ID into each of those cells: <td id="menu"> and <td id="text">.
Posted 03 September 2006 - 04:52 PM
Posted 03 September 2006 - 05:56 PM
Tho, I think I'm with Bob, saying that using tables for layout because the text is data is kinda stretching things a bit
I still think a 3rd page langauge would be good.... k, I'll shut up about that now.
Posted 03 September 2006 - 07:59 PM
I think the things I have learnt here are:
1: Design your css for Firefox and Safari first and IE will almost certainly work.
2: Tables still have a use in content and a tableless design may be more incorrect and contain more hacks than a css layout that uses tables for some content.
3: To persevere with css compliant browsers and just because IE does what you want it does not mean its the correct interpretation of your css code.
Posted 03 September 2006 - 09:06 PM
Divs are block-level elements such as h and p are block-level elements.
Each div is a stand-alone object. There's no way to force one of the divs to stretch to the same length as the other using pure CSS or HTML.
Put two <h> tags or two <p> side by side and try to get one to follow the other in height. It won't happen.
You can set the height in pixels and get them equal and looking good and that is fine if the page content isn't going to change. And you don't have to monkey around with background tricks.
I don't see what the big deal is with setting the height in pixels. I've done it with tables, why not do it with divs?
Width is almost always defined, why not define the height too.
The bummer with height for me is I can't get it to work right in %, whereas % works great for width.
That scheme I showed a few posts up will work fine and you don't have to set any heights. It's also good for a stretch layout for different screen widths.
What I like about a CSS layout is the way it loads into the browser. It snaps right in lickety-split. A table takes longer to load.
One more thing: Tables aint exactly cross-browser-perfect either. You can sometimes spend a while getting a table to line up. One trick to get a table to center is to put <table style="margin: 0 auto;"> If you ever tried to center a set-width table in IE, you know that can be a PITA.
Edited by maleman, 03 September 2006 - 09:24 PM.
Posted 04 September 2006 - 01:33 PM
Of course, neither do those pages where I have nested some tables. Once you understand linearization, the coexistence of tables and accessibility is not that hard to pull off, really.
FWIW, it's not all that difficult to come up with a totally inaccessible page that uses no tables for layout. Tables per se are not the problem, and "pure CSS" is not the cure for bad accessibility.
As to semantics, I'm sorry, but you've really left me scratching my head over that one. I guess I must be terribly behind the times, as I have no idea how one would "attempt semantics" to start with. Even if I could figure that one out, I can't see where tables versus CSS has anything to do with semantics as I understand the meaning of the word.
Man, do I wish the browser makers would universally support max/min height and width. That would make my life soooo much easier all the way around. Not holding my breath on that one, though...
Posted 04 September 2006 - 05:15 PM
At least in width it's tamed. height can't be fully controlled.
It boils down to the way you use width, margin, padding and border:
The following describes setting up the left content area of a two column layout.
Get all of your divs in place starting with the body before adding content. Use backgrounds and borders so you can see the blocks.
1. Set your body width to 96% for example, use margin only on top and bottom such as margin: 1% auto; Set padding to 0.
2. Set your main container div to 100%, float: left; margin and padding to 0.
3. Set your left contanier div to float left, width 74%, margin and padding to 0. If you need vertical spacing, use margin only. In nesting situations, always keep left and right margins at 0 and padding at 0 on outter divs. If you need whitespace, get it with width.
4. Nest a main content div inside the left container and float right, width 97%. margin only on top and bottom, padding 0. If you want a border put it on this div. The border won't affect the left container div's width and break the display unless you set the border to a huge value.
5. You can set padding inside the main content div for whitespace, use %. Then when you add <p> tags , you can keep left and right margins and paddings at 0 on the <p> tags.
5a. Or you can set padding inside the main content div to 0 and use padding on the inner elements tags with margin set at 0.
6. Just remember to not use padding until you get to the innermost element inside a div or nested div. Set your width and position on outter elements using "margin and width" only. The innermost element doesn't require a width setting.
7. When you add the right column, use the same procedure . Allow a liitle breathing room between your main left and right columns. For example: left column width 74% and right column width 24%.
If you're interested, I hope you can decipher this because it works great. I'm beginning to think it may be easier to control a div layout than it is to control a table layout in many cases. And it takes less code.
Edited by maleman, 04 September 2006 - 05:32 PM.
Posted 04 September 2006 - 07:34 PM
Learning how to out-hack the browser quirks doesn't create lasting value.
Posted 04 September 2006 - 07:43 PM
There's no hacks in this method. It's just that I figured out how to work cross-browser with out using hacks.
0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users