CSS - A little help required!

[DJames]

Hi, I've been trying to add an additional row of images to my header but it's throwing the main content of the site out of alignment.

It's driving me up the wall as I can't figure out where I'm going wrong!

Would any kind soul be up for having a quick look and putting me on the right track?

Many Thanks

 

[FireFleur]

Use a table is the quick answer, the table box model is more consistent across browsers.

If you want to use CSS, floats and positioning, then turn on the borders, and check for any gaping. Choose a border colour that is not used in the design.

For a good book on CSS there is CSS the Definitive Guide from the O'Reilly stable.

You can use CSS to define the table as well, but remember that the width defined is not total width, it is width without the paddings or margins.

Another type is a the use of clear: all often on a line break or the proceeding element where you want to break from the floats, a containing element can be used, but then you are getting closer to a table anyhow.

 

[tbomedia]

Hi there,

I'd be happy to take a look for you - can you send me the link?

 

[woodss]

Use a table is the quick answer, the table box model is more consistent across browsers.

If you want to use CSS, floats and positioning, then turn on the borders, and check for any gaping. Choose a border colour that is not used in the design.

For a good book on CSS there is CSS the Definitive Guide from the O'Reilly stable.

You can use CSS to define the table as well, but remember that the width defined is not total width, it is width without the paddings or margins.

Another type is a the use of clear: all often on a line break or the proceeding element where you want to break from the floats, a containing element can be used, but then you are getting closer to a table anyhow.

Using a table for anything other than tabular data is considered bad practice.

The correct approach is to use an unordered list (ul) and the CSS should be:

ul {
margin: 0 !important;
padding: 0 !important;
}

li {
 list-style-type: none;
display: inline;
padding: 5px; // or whatever you want
//and obviously other properties like font-size: font-family: etc ...
}

The HTML would be:

<ul>
<li><a href='link1.htm'>Link1</a></li>
<li><a href='link2.htm'>Link2</a></li>
...
<li><a href='link5.htm'>Link5</a></li>
</ul>

Hope this helps

 

[FireFleur]

It is not bad practice to use a table for layout, there are things you can do with a table that you cannot do without, and using CSS to change the display type to a tabular one is probably more confusing.

Using IIS as your web server is bad practice

 

[cmcp]

FF is normally on the ball, but I'd strongly disagree about using tables for layout in any situation. What you should be doing as mentioned is floating your elements together then apply a clear when you're done.

I tend to keep my areas together with a div (eg containerBox). If you have a list (as woodss assumes) you can use a ul. I'd avoid using !important declarations unless you understand the cascading concepts.

Another handy trick from FF, take advantage of your border colours when developing. I use this on my main areas (but the bg colour). I use a hint picked up from a colleague, to colour my divs as they're ordered in the source the colours of the rainbow (RYPGOPB).

Put your code up so we can have a gander

 

[woodss]

It is not bad practice to use a table for layout, there are things you can do with a table that you cannot do without, and using CSS to change the display type to a tabular one is probably more confusing.

Perhaps - a navigation bar isn't one of those times though and the fact that you're debating the issue speaks volumes. He's not even changing anything to a tabular format. YOU, by advocating the use of a table, were making his non-tabular data into a tabular display .. why?

Using IIS as your web server is bad practice

It depends - my codebase is written in ASP.NET MVC, so what do you suggest I use instead? Or are you just trolling because you have nothing else to add. Thought so.

 

[FireFleur]

You started trolling Woodss

My advice stands, if he wants to get it sorted quickly then a table is the fast way to do it. If he wants to use something else other than a table then CSS with the tips I gave will help him.

What I find objectionable Woodss is you trying to claim something is bad practice without having full knowledge of the problem sphere. I don't care if you think something is bad practice for you, but to quote me and claim just bad practice means you think it is an objective truth and I disagree.

 

[woodss]

Well to be honest, if you're going to do something then why not do it properly!

Of course he could half-arse it by using tables which is all well and good - yes it'll work, but a) it is best practice and b) using CSS is far simpler in terms of the amount of code and maintainability.

What I find objectionable is you trying to claim something is bad practice without having full knowledge of the problem sphere. I don't care if you think something is bad practice for you, but to quote me and claim just bad practice means you think it is an objective truth and I disagree.

It's not just bad practice for me, it's bad coding practice full stop and has been documented many times over as to why. Feel free to search AListApart and other prominent developer websites to see for yourself. It doesn't matter what the "problem sphere" (what?) is, the solution needn't be half-baked just because you /can/ do it that way. IMO, for all the effort it'll take to do properly, he might as well do it.

You, however, can continue to do it any way you see fit. That's the beauty of it

 

[FireFleur]

There are times when I use table-less, layouts when it makes sense to do so, and sure, for semantics then it is better to use a tag that more accurately describes the content.

But, div crazy is not the answer you are not adding semantic value, and the problem with tables is the embedding of elements, which often happens with the table-less div crazy lot anyhow.

Neither is switching the CSS for browser makes or versions that clever either, it costs in performance to do that switching and it is more of a render than a semantic problem with tables (which most browsers have now solved), and it wasn't too bad anyhow in the old days unless you did go table crazy.

And, I will still stand by you cannot get some designs consistently across browsers without the use of a table display type.

 

[woodss]

You need to do some reading.

So what if websites don't look consistent on multiple browsers? The goal is to make them accessible to all browsers, but you're kidding yourself if you think you're ever going to get an IE6 visitor to have the same on-site experience as the IE8, or Chrome visitor, or even someone visiting on a Blackberry.

What SHOULD happen however is that the experience degrades gracefully depending on the [lack of] capabilities of the browser in question.

You should NEVER alienate visitors just because their browser doesn't support a specific feature. Your content should be accessible across devices or platforms.

Using a table for navigation for instance, will not make much sense in a screen reader (if a blind person uses the site). The TABLE markup does not make semantic sense. A list of navigation options does because that is what it is -a list of navigational options.

In fact, I'd like to see you display a big table on a Blackberry. It'll no doubt fall over - whereas a list of items will display as... a simple list.

Do some reading on progressive enhancement, then some on graceful degradation, then some more on why tables for layout are a very bad idea if you're at all serious about your web presence.

Here's a sample URL to get you started: http://kmp.co.uk/2009/07/do-websites-need-to-look-the-same-in-every-browser/

Honestly, there is so much information about this (and has been for many, many years) that if you're still advocating using tables for your layouts for anything other than tabular data (which is why the table tag was developed, it was just abused for creating layouts in the bad old days of IE2 and Netscape - people kept on doing so) then frankly your head is buried in the sand.

There are better, easier, PROVEN methods - the thing that you're either incapable of, or unwilling to use them is something you should probably look at before you start giving web development advice.

I will no longer reply to this thread. Quite frankly this discussion has been had on many other forums across the internet, more times than I'd like to count so if you still disagree then that's your choice but... you're going against the tide.

 

[FireFleur]

Oh you are back to: Woodss think it is bad practice, so it is an objective bad practice in your full stop head

You do know what bad practice means? And the difference between bad practice, and people trying to dissuade the overuse of something.

Misuse of tables was rife, which was more in part to do with the WYSIWYG tools, and render was a problem for many sites because of it.

So, the call went out to use less tables, some people thought that erroneously meant no tables, and sure a lot of designs can be done without the use of tables, but not all.

It is not bad practice to use a table, instead it is bad practice to claim table use in layout is bad practice. A table by definition is a particular gridded layout, instead you should see it as a guideline and understand the ramification for the use of tables in a layout context.

I would prefer to see a grid element introduced, with similar characteristics to a table, but with less embedding, tbody should be in a table so the DOM parses correctly, which is an element that could be removed. And, the rows could be replaced with opening cells (perhaps closing as well) to indicate where a row should be.

You're an extremists Woodss, sort of missing the Woods for the trees

 

[cmcp]

Swallow your pride mate, you're clearly on the wind up!

 

[FireFleur]

I don't know if that comment is for me or Woodssy, CMCP.

But I am not on a wind up, I have researched this matter quite deeply in the past.

A table is a layout by definition, and table data is just an element in a cell in a table.

Try and describe a table without making use of something related to layout, I don't think it is possible.

And I don't think Woodss is on the wind up either, a lot of people will go to great lengths to avoid using the obvious table when a layout and design calls for it. And to them I say good luck, but using tables doesn't allow someone else to say it is bad practice

 

[DJames]

Thanks for all the replies, sorry to have caused a ruck I've taken TBO's offer and he's having a look for me.

Cheers.

 

[PrismTechWales]

Seriously, you need to look at more than just cross browser compatibility and consistent appearance. You need to understand web accessibility and the impact of tables.

To paraphrase the guidlines: Table use for layout is OK until browsers support css positioning as long as the content within makes sense when linearised. This is a priority 1 guideline from WCAG. Seeing as css positioning support is pretty commonplace nowadays and its much easier to degrade gracefully when using css and still remain accessible, I have to fall on the side of tables are bad!!

5.3 Do not use tables for layout unless the table makes sense when linearized. Otherwise, if the table does not make sense, provide an alternative equivalent (which may be a linearized version). [Priority 2]
Note. Once user agents support style sheet positioning, tables should not be used for layout. Refer also to checkpoint 3.3.

Prism Technology Wales Ltd | We're on Twitter PrismTechWales
IT Support Cardiff | Web Design & Development Cardiff | SEO, PPC, Online Marketing Cardiff | Software Development Cardiff

 

[liams7]

It is not bad practice to use a table for layout, there are things you can do with a table that you cannot do without, and using CSS to change the display type to a tabular one is probably more confusing.

Using IIS as your web server is bad practice

DO NOT USE TABLES.

My word.

Its not 1996

It is bad pracitce, To put any sort of visual styling in is bad. With a table you would need to put in the width, Cellpadding, Cellspacing. THIS IS BAD PRACTICE.

If i gave any of my clients tables they would flip out.

Keep styling and layout sepperate this is why all good agencies use DIV's

Look at floats and how to use them as well as looking at how you are embeding them with in themselves.

 

[PrismTechWales]

Tables are designed for displaying tabular data and when used correctly are accessible. Admittedly there are still some things that are difficult to do with css and divs that are easy with tables.

 

[fisicx]

In addition, the W3C Says:

"Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables."

http://www.w3.org/TR/html4/struct/tables.html

 

[PrismTechWales]

Using IIS as your web server is bad practice

Uh, IIS is a damn good, stable and fast web hosting platform. With native support for things like page caching and even support for scripted languages like php.

Prism Technology Wales Ltd | We're on Twitter PrismTechWales
IT Support Cardiff | Web Design & Development Cardiff | SEO, PPC, Online Marketing Cardiff | Software Development Cardiff

 

[liams7]

Tables are designed for displaying tabular data and when used correctly are accessible. Admittedly there are still some things that are difficult to do with css and divs that are easy with tables.

This does not make using tables OK.

Forms and small amounts of content are the only use.

There is no need for layout EVER.

Im sorry but this is bad advice and to give some one bad advice on something you (with all due respect) obviously no nothing about is not fair on the OP.

Please realise that using tables for this is with out doubt, Unarguably the wrong thing to do.

Sorry if this offends anyone but come on people, This is business and people's lively hoods we are talking about so can we stick to what we know and give good advice.

And this is not about opinion its simply a case of right and wrong.

 

[PrismTechWales]

This does not make using tables OK.

Forms and small amounts of content are the only use.

There is no need for layout EVER.

Im sorry but this is bad advice and to give some one bad advice on something you (with all due respect) obviously no nothing about is not fair on the OP.

Please realise that using tables for this is with out doubt, Unarguably the wrong thing to do.

Sorry if this offends anyone but come on people, This is business and people's lively hoods we are talking about so can we stick to what we know and give good advice.

And this is not about opinion its simply a case of right and wrong.

Sorry my friend but I didn't say tables for layout were ok. I said that they were ok for displaying tabular data (i.e statistics tables etc)

I also said that some things are difficult to do with css and divs that were easy with tables, but also didn't say it was right to fallback to tables. I just didn't want to insult those that use tables for layout because they cant understand css.

 

[liams7]

Sorry that wasnt aimed at you to be hoenst. i shouldnt have copied in your message i do appologize.

 

[PrismTechWales]

Tables are designed for displaying tabular data and when used correctly are accessible. Admittedly there are still some things that are difficult to do with css and divs that are easy with tables.

Just to clarify, I am not saying you should use table for layout!!

I am just saying that you can achieve the same result visually with tables but in terms of degrading gracefully and accessibility you are doing yourself damage.

So, to sum up. Tables for layout are bad bad bad.

 

[Gord]

All bit heated & a good example of an issue taken out of context.

Assuming the OP is not an experienced developer and simply wants to solve a problem ,which I think is a reasonable assumption , the 'quick fix' use of a table rather than spending quite some time understanding the intricacies of css may well be the easiest route to solve his business presentation problem.
I doubt that he wants to be a developer per se.

 

[PrismTechWales]

I think the issue arose because a forum member decided to take the stance that tables are perfect for layout purposes and a lot of professional web developers disagreed.

hopefully someone has actually helped the OP!!!!

Prism Technology Wales Ltd | We're on Twitter PrismTechWales
IT Support Cardiff | Web Design & Development Cardiff | SEO, PPC, Online Marketing Cardiff | Software Development Cardiff

 

[DJames]

TBO offered to have a look but I've not heard back yet.

I'm not a designer but I did the site initially in FP and eventually got someone to update and change it to CSS but it seems he's not trading anymore - or maybe just not answering my e-mails

I've managed to do most of the things I've wanted to by trial and error myself over the last couple of years but this I've been trying to do on and off for about a year! I hate to admit defeat but I have.

And I bet it's something so obvious that it's laughable!

 

[PrismTechWales]

Send me the link and I'll take a look for you later this afternoon

 

[FireFleur]

Right let's see if the people who think table-less layouts can actually do something that is, I think, near impossible to do without tables but is a common design technique especially for headers.

Centre an element in a document, then right align another to the right end of the centred element (above it).

The centred element can be variable in length, and the right aligned element can also be variable in length, such that the length of the lower can be greater than, equal to or less than the displayed length of the above, but the design still has to hold consistently i.e. the same element has to be centred each time the length relationship between the two elements is changed, it has to work consistently across the major browsers, the lengths can be constrained to a degree but not in how they relate to each other, and it has to be a template so you are not having to put in hard coded amounts for each instance.

Here is an example:

---AAA---
----BB---

----A----
-BBBB----

--AAAAA--
------B--

The reason I can show the above, is because it's using calculations and a monospace font.

I look forward to seeing actual code that does it without the use of tables or a display type switch to a table display type.

I am very happy to be proved wrong though, and there is a way to do it using JavaScript and the DOM, but let's just leave it to markup without tables, and CSS without the table display types.

 

[fisicx]

Iv'e gone a bit mind boggled here. Do you have an example of a site that uses tables to do this as I can't even work out how to do it with tables!

What's wrong with using display:table-cell? It's valid CSS and is purely a styling technigue rather than a structural element.

 

[FireFleur]

Personally I use the full spectrum of techniques, my point is that tables are not bad practice, I use CSS combined with tables all the time.

The problem with changing display type is one of confusion, if you want to make something inline use a span, if you want to use a table display type use a table. By reassigning display types you are changing the semantic slightly.

But, again I don't see it as bad practice, for example the unordered list, for navigation I do use, but I am also aware that in some instances a containing div or paragraph and spans for each element is more semantical, if you want to indicate navigation on the horizontal.

If you are really into separation of information and layout, then you should be using XML with your own doctypes or schemas and transforming using XSLT. The whole thing about table-less zealots is they are missing the real solutions and problems, instead trying to operate with a set of rules that aren't meant to be so draconian.

See, information involves layout, glyphs follow each other in an order (that order is layout) to produce words, and the direction of the words also is layout to form a sentence, you cannot separate the two completely as information has a degree of layout in it to make it information.

And you will often see, div's contained in div's that create a table layout which is about the same overhead, and it is better expressed as a table if you are going to be doing that, so there are more visual clues in the markup, which is the same argument for ul navs, over a div and spans nav, because it tends to make it clearer in the markup.

 

[PrismTechWales]

Can you show me a real world example of where this layout would be used. And also a table example of what you mean

 

[FireFleur]

Let me give an example to make it a little clearer.

If you produce a document, and you write in a paragraph that the second column on the left has a link to a story or a photograph of something, then there has to be a way to indicate that column in the markup. Layout is part of the information, and you are not meant to be restricted in the way you indicate that information.

The problem of tables, was the overuse of them, now that problem is on the overuse of divs.

Containing divs are not part of the document they are part of the layout aren't they, and the real problem was trying to separate style and information. It is not Cascading Layout Sheets, it is Cascading Style Sheets.

Is layout information, or is layout just style? I think it can be both.

 

[PrismTechWales]

Sorry, i was referring to your layout example in the previous post. Its hard to visualise it in use as html markup. I was hoping you could post a link to an online example of the layout in table layout.

 

[fisicx]

You said:

Right let's see if the people who think table-less layouts can actually do something that is, I think, near impossible to do without tables but is a common design technique especially for headers.

Do have an example of a site that uses this technique?

 

[CarmaCreative]

If you want to get into CSS deeply may I recommend you check out the online training library lynda(dot)com

 

[liams7]

Yeah its easy

<div id = "main">
<div id = "leftAlign">
Test this<br>
And<br>
This one
</div>
</div>

<style>
#main{
width:100%;
}

#leftAlign{
margin:auto 0;
width:600px;
}
</style>

Easy you just need to know what you are doing.

 

[FireFleur]

I have given the example of the layout. It is awkward to do with tables as well, but I am just putting together an example.

This is an exercise in showing what happens when tables are taken out of the equation for layout. It is interesting to see you want it to see it described in tables, then try to translate.

Might be able to translate it without tables, but at the moment I have a colspan in there.

That is not what was described liams7 First line should be centre to the page, and the next line right aligned to the first.

 

[FireFleur]

Here it is done with tables.

<html
><head
>
<title
>Center Aligned Right Aligned To</title>
<style
>

body {
    text-align : center;
}

div.measure {
    margin     : 0px 0px 8px 0px;
    text-align : center;
}

table.centered {
    margin : 0px auto 12px auto;
}

table.centered td,
table.centered tr,
table.centered tbody {
    margin  : 0px;
    padding : 0px;
}

td.upper_line {
    text-align : center;
}

td.lower_line {
    text-align : right;
}

td.left,
td.right {
    width : 40%;
}
</style>
</head><body
><div
class = "measure"
>A</div>
<table
class       = "centered"
cellspacing = "0"
><tbody
><tr
><td
class = "left"
></td><td
class   = "upper_line"
colspan = "3"
>AAA</td><td
class = "right"
></td></tr><tr
><td
class   = "lower_line"
colspan = "4"
>AA</td><td
class = "right"
></td></tr></tbody></table>

<table
class       = "centered"
cellspacing = "0"
><tbody
><tr
><td
class = "left"
></td><td
class   = "upper_line"
colspan = "3"
>AAA</td><td
class = "right"
></td></tr><tr
><td
class   = "lower_line"
colspan = "4"
>AAAAA</td><td
class = "right"
></td></tr></tbody></table>

<table
class       = "centered"
cellspacing = "0"
><tbody
><tr
><td
class = "left"
></td><td
class   = "upper_line"
colspan = "3"
>AAAAA</td><td
class = "right"
></td></tr><tr
><td
class   = "lower_line"
colspan = "4"
>A</td><td
class = "right"
></td></tr></tbody></table>

</body></html>

It is not perfect, and there would be some balancing to do, but it would generally allow for the different length relationships and have a tolerance for overall width. Playing with the colspans might also improve the tolerance.

If you cannot do that without tables, trying doing something simpler, which is centre to the longest width, and still right align the lower element to the upper element without a table. That is generally acceptable for that effect, you will still find that hard to do without tables.

 

[FireFleur]

The extra elements that tables bring to the table, forgive the pun, are colspan, rowspan, and the ability to have a block like type that expands to the content it contains.

You might be able to do the later, using a span or switching display type to inline, but then again you might not, and even if you can, the inline box model is different across browsers with the margin and paddings breaking out and not being consistent.