Problems with HTML W3C Specifications

[dhtmlhelp]

Hi,

I am having the following 3 problems:

1) topmargin, leftmargin, marginheight, and marginwidth have been deprecated by the W3C, what is the current alternative?

2) Mozilla and IE/Netscape define nonfixed font sizes differently. For example x-small in IE/Netscape is equivalent to small in mozilla, and small in IE/Netscape is equivalent to medium in Mozilla. Do you know of a script that varied the font size in the css file depending on whether IE/Netscape or Mozilla are detected. Alternatively is there a simpler solution?

3) the tag <form> should always be inside <td></td>s. This however makes the <td> taller in IE. How can I get around this problem?

thanks,

DH

[brothercake]

1 - you can get rid of the margins like this:

body,html { margin:0; padding:0; }

2 - the simplest solution is to use a different unit - "em" or "%" are both consistent enough but still not completely; better to err on the size of too-large rather than too-small

3 - you can get around that problem by not using tables for layout

[dhtmlhelp]

HI brothercake,

thanks, working on it right now. Re 3), my whole site is based on tables (how can you not base a site on tables these days??). Is there no solution at all for my dispair N° 3?

thanks,

DH

[brothercake]

Originally posted by dhtmlhelp
(how can you not base a site on tables these days??). Is there no solution at all for my dispair N° 3?

If "these days" is the operative phrase, then the pertinent question is how can you? Using tables for layout makes a webpage semantic nonsense. A table means "I contain tabular data", so if it doesn't, then it's condtradicting the semantic meaning of the tag. It would be like using <strong> and styling it "font-weight:normal" - a contradiction.

Thankfully there's a much better solution - CSS; better for this reason, and that it's easier to make and maintain anyway. :thumbsup:

[dhtmlhelp]

Hi brothercake,

interesting. Where can I learn more about layout and css?

thanks,

DH

EDIT: Like your signature btw, for anyone wanting to read more about usability try also www.useit.com

EDIT2: brothercake can you specify what you mean by using css? Do you mean instead of tables or tables defined by css?

[brothercake]

search these forums I'd say - there's tons of posts about it, which themselves link to lots of good resources ...

[dhtmlhelp]

brothercake can you specify what you mean by using css? Do you mean instead of tables or tables defined by css?

[brothercake]

Check this post http://www.codingforums.com/showthread.php?s=&threadid=16799 for some debate

And this one http://www.codingforums.com/showthread.php?s=&threadid=13083 for many links to good references on the subject

[dhtmlhelp]

Hi Brothercake,

quite a debate. Can I ask you to take a look at the following page (3 columns design) and let me know if it is feasible to redesign it in css?

thanks,

DH

[brothercake]

Yeah it's well feasible. A site I like to point people to, as a good "best practise" example, is a UK charity called RSPB - http://www.rspb.org.uk/

Pure XHTML and CSS mate; great accessibility too :)

[Skyzyx]

I'd definitely check out www.zeldman.com and www.alistapart.com for starters...!

On Zeldman.com, check out the "externals" for links to really good sites for this stuff.

[dhtmlhelp]

Thanks guys,

in conclusion my last question is what is tabular data. When should data be displayed in a table?

thanks,

DH

[brothercake]

Tabular data is any data which is presented in a table structure; a database is tabular data, and so are football scores.

Here's an example of correct use of tables - http://af.brothercake.com/_template.php

[dhtmlhelp]

yes silly me, it's hard to depart from tables. I think I will finish it in table format first (at least the first page) and then switch to css, already doing some tutorials. Sorry to be ripetitive but is it hard to convert the whole page afterwards, it is not lazyness, it is just that I need to master css first and as I am only planning at the moment it is easier for me to stick to tables and then convert.

Wil it be a titanic work load?, end of worries :)

thanks,

DH

[brothercake]

Originally posted by dhtmlhelp
is it hard to convert the whole page afterwards
Yes it is; it's much harder and more time-consuming to convert from one to the other than it is to do it in CSS from the outset.

I would say - since you already have a layout, start by trying to make that in CSS, and then take it from there. Even if you end up not using that layout, you'll have a learned a lot from the excercise.

[ronaldb66]

Of course you can always ask for support here; I know for a fact that a whole bunch of regular forum visitors have mastered the "Art Of CSS Layouts".
If you can supply an example of what you want to accomplish layout-wise, we can give you pointers how to achieve that with pure CSS.

[dhtmlhelp]

Hi brothercake and ronald,

can you give me a hint on how to start with the page I showed you. I feel kind of lost. I have understood the positioning of tables but I am a bit unclear on the nesting. Can you take a look at the page again in tables:



I would start something like this (for example):

<style type="text/css">
<!--
@import "/css/basic.css";
@import "/css/home.css";

//-->
</style>

where home.css contains:

#header {
width: 100%
background-color: #000000;
}

and then in the .php page I use

<div id='header'>
<div id='logo'>image</div>
<div id='search' which would be aligned right (is this float: right; correct?>search options</div><div id='account' similar to id='search'>Account options</div>
</div>

Somehow it is not reading my css files, is the syntax correct. Can you put me on the right path for my layout.

thanks,

DH

[brothercake]

First off - style blocks must not be commented; parsers are not required to parse comments. But of course if you don't then the CSS shows up in legacy browsers. So don't use inline style blocks at all; do it this way:

<link rel="stylesheet" type="text/css" href="basic.css" media="screen" />
<link rel="stylesheet" type="text/css" href="import-advanced.css" media="screen" />

And then in import-advanced.css you go:

@import url("/css/home.css");

The separate import-advanced.css shouldn't be necessary; you should be able to @import from within basic.css - but don't do it - stylesheets which contain a mixture of @import and other style declarations are vulnerable to bugs in Netscape 7, Mac/IE5 and Safari/Konqueror - always use a separate stylesheet for importing others via the @import method.

[dhtmlhelp]

Hi Borthercake,

got that. I have made the changes. Let me get this right, media='screen' does it mean that the css is for a monitor, while if I wrote for example media='pda' a handheld would recognise that as being the css file to read?

The file is still not changing, I have put stuff within <div>s but with no luck. I will post the css (without tables) page on

Please take a look if you can.

thanks,

DH

EDIT: I have always used link rel. When I went to visit the birds site you recommended I noticed they imported the css files with @import. I thought it was quite convenient instead of using the link rel option, am I wrong?

EDIT 2: I have also noticed that some sites take some time before loading the css file. This results in the page being displayed first without css attributes, and then normally. Is there a way of telling the browser, Load the css file first before the content, to avoid this transitional glitch?

[brothercake]

@import is a method of importing CSS which is not supported in netscape 4 - it's an easy way to ensure ns4 doesn't read your styles.

It's not wrong to use @import inside an inline <style> block; what is wrong is this:

<style type="text/css">
<!--

-->
</style>

The comments are wrong, but legacy browsers demand them otherwise they print out the CSS as though it were text - but if you do use the comments, which a parser is not required to read, you can't assume that it will work in the future - in compliant browsers viewing XHTML as XML, it won't.

Therefore, never use inline <style> blocks - use <link> to link to a stylesheet, and use @import inside that.

The transition glitch is unfortunate, but afaik unavoidable.

As for media - yeah, media="screen" applies to graphical desktop browsers. The only other one you need be concerned about is media="print" for print-CSS. There are many others, but - and this is very important - never use a CSS media type unless you have experience with that medium - otherwise you run the risk of imposing formatting which is completely unsuitable for the target medium.

Even w3c.org use media="all" (or specify no media, and "all" is the default) but I consider that extremely bad practise - do not blanket-specify CSS media; be specific. The safest thing is to use media="screen" for everything except print - that way, other media types will get the plain, unformatted layout, which stands the best chance of being useable.

Anyway - don't try to do everything all at once; it's just too hard to get your head round it that way. So don't start with an existing table-based layout and expect to be able to "CSS it" - start with nothing - a blank page - and build your template from the ground up.

[ronaldb66]

DH,

take it step by step, indentify "block" structures in your layout, and envision each of those blocks as a block level element (div, p, etc.) with its accompanying styles.
You can either start with the top most level table (replacing rows / cells by divs), or at the lowest level (i.e. you don't need a table and javascript to make a text link on a black background with a white border with the underline appearing on mouseover; your can do it all with CSS!) and work your way up, c.q. down, c.q. in whatever direction seems logical.

[dhtmlhelp]

HI Guys,

thanks, I am working on it, panic is a bad thing. I will get back once I have something concrete. Regarding the link rel and @import I am now wondering what is the point of using link rel to a file that specifies @import something.css instead of simply using link rel something.css.

thanks,

DH

Edit: Is there no way of preloading a css file then to avoid the transitional problem? The birds site seems to do it, is it the @import that does the magic (whether the @import is in an external file or within <style>?

[brothercake]

Originally posted by dhtmlhelp
Regarding the link rel and @import I am now wondering what is the point of using link rel to a file that specifies @import something.css instead of simply using link rel something.css.
The point is to prevent netscape 4 from reading those styles - because it doesn't understand @import, netscape 4 gets only basic CSS (like link colours and font-family) provided by "basic.css". It's necessary to do this, because advanced CSS can make netscape 4 crash.

Originally posted by dhtmlhelp
Is there no way of preloading a css file then to avoid the transitional problem? The birds site seems to do it, is it the @import that does the magic (whether the @import is in an external file or within <style>?
I don't think so - I think it's the luck of the draw - server latency, network congestion, connection speed and latency ... so many factors; I suggest you not think about it; there's nothing you can do (afaik) and it doesn't really matter (imo)

[liorean]

@import can be used in any stylesheet, no matter how that stylesheet is declared. Ie has a limit of three levels of imports, though - after that it doesn't recognise the @import rule. Other browsers only have an infinite import loop prevention feature.

[brothercake]

Originally posted by liorean
@import can be used in any stylesheet
That's true in theory, but in practise I've had problems with Safari and mac/ie5 not importing the stylesheet if the @import command is inside a stylesheet which contains other CSS. Additionally (iirc) netscape 7 will not import unless the @import statement is literally the first line - not even whitespace can come before it.

So I don't do it - I always have a separate "import-something" stylesheet which only contains @import declarations.

[dhtmlhelp]

hey brothercake, it's looking better but still a mess. Could you take a look and see if you can spot the solution to the problems I have mentioned in my previous reply.

DH

[liorean]

Hmm - all moz's have accepted the @import rule so long as it's not preceded by any other type of rule as far as I know. (I've been using moz for my primary browser since 0.8). That must be a regression in the ns7 code alone...

As for using @import in stylesheets with content, I've never done it that way - either the stylesheet has been a two line highpass filter, or been the end-of-the-line stylesheet (with the exception of a testcase I write for bugzilla) - so I haven't had much chance of finding the bugs in ie5m and saf/konq out. (Come to think of it, last time I used @import for anything was before Safari arrived.)

[kansel]

Is there no way of preloading a css file then to avoid the transitional problem? The birds site seems to do it, is it the @import that does the magic (whether the @import is in an external file or within <style>?

This is a known browser bug and there is a workaround for it.

The following text taken from Cascading Style Sheets: Separating Content from Presentation , Copyright 2002 by glasshaus ( www.glasshaus.com )


Flash of Unstyled Content

This phenomenon gets its wonderful name from Rob Chandonais, who also supplied the solution.

Internet Explorer will briefly display some pages without styles. This has something to do with how IE loads an imported stylesheet. You may not notice it on a fast machine with a fast connection, but on a slow machine with a slow connection it's quite disconcerting. When a page is loaded, it first appears unstyled, very briefly, and then the styles load. The effect is a flash of light because for a moment the screen displays black text on white background.

Rob discovered that this does not occur if you have a linked stylesheet before the @import in the head of your document:
<link rel="stylesheet" href="css/empty.css" type="text/css" media="screen" />
<style type="text/css" media="all">@import "css/myStyle.css";</style>
So if you are already serving two stylesheets to deal with NN4, you needn't worry. However, if you're not, you can still solve this problem by linking to an empty stylesheet that you can use later as an alternate stylesheet, or for a media-dependent one such as print.

Now of course this goes against what brothercake has already said about using <style> blocks inside the html body, but if you look at the rspb.org.uk site (quite a nice looking site indeed!) you'll see the following code: (edited for size, but I left the invalid comment tags in)
<link href="#content" title="Skip to content" />

<style type="text/css">
<!--
@import "/css/basic.css";
@import "/css/home.css";
body {
background-image: url(/Images/5_18405.jpg);
background-repeat: no-repeat;
}
//-->
</style>

The IE bug described in the book may not depend on a <link> to a stylesheet per se, just to any link such as the #content link in the above code block. This may explain why the bird site doesn't suffer from the "Flash of Unstyled Content."

I just happened to have read the last two chapters of this excellent book last night so this was still fresh in my head. These two chapters deal with "CSS in the Real World" and issues such as NN4 hiding, browser incompatibilities and inconsistencies, and CSS troubleshooting techniques. The book as a whole is a great resource for CSS layout, whether you're mired in table layout or new to html/xhtml.

Another fine book is Eric Meyer on CSS, Copyright 2003 by New Riders Publishing. In it, Eric Meyer takes several design projects and CSSifies them. It's a very high quality book sporting full color on every page ($$) but it doesn't deal with the "why" as much as the glasshaus book does.

Both books of course are available at 30% discount at amazon.com.

[dhtmlhelp]

Super, thanks.

Can anyone tell me if it is possible to have a 100% layout woth css without the different elements being dropped when the window is resized?

I have 3 divs at the top and when I make the browser window smaller the last two divs are dropped down to fit inside the browser. Is there a way with css to say, after a certain width don't resize, use scroll. I do not want to fix the width to a definite pixel size.

DH

[Roy Sinclair]

Just for the record, the original problem #3 noted that using <form></form> made the <td> taller. That happens because someone who obviously wasn't thinking clearly at the time decided that <form> tags would have their own "space" on the page. You can remove that extra space simply by setting the margin for the form to 0 (<form style="margin: 0px;">....</form>.

[dhtmlhelp]

Hi Roy,

thanks, I had figured that out. I am stuck on this issue of relative width. having a 100% width may be a problem when substituting tables (especially because IE does not accept min-width, although it's a standard css attribute. Of course with my luck and IE7 they will accept it, but for now I am stuck on this dilemma, should I shrink my files to a minimum by using only css, or should I reduce them with css but using tables for layout.

If the 100% width is not a feasible option in css I have a brothercake to challenge.

hope someone has the grail.

DH

[ronaldb66]

DH,

with the current situation concerning browser support for CSS2 there's no hope for your Holy Grail.
Don't expect CSS to be able to do something impossible, which is to fit your crowded design in too small a window. Agreed, floating boxes suddenly sliding under eachother instead of staying next to eachother like they're supposed to isn't the most elegant behaviour, but the point is: they're still visible, and the page is still usable although not that pretty anymore.
I'd say use min-width for browsers that support it, and leave those that don't to their own devices.
The point about using CSS is not just reducing file size; it is the correct approach semantically speaking, it's much more flexible and eases maintenance as well.

[ronaldb66]

DH,

if I may make a few suggestions:

Place the whole header area (above the nav bars) in one block element, likely a div;
divide this block up into three areas, using block elements again: left float, mid centered with large left and right margins, and right float;
inside the first block (the left floated one), put the Ludos.com logo, and distribute the rest of the content of the header over the other two blocks according to their location in the table version.

Generally: inline elements can be put next to eachother any time, block elements can be put next to eachother using float.
You used span elements (an inline element with no specific semantic meaning, similar to div) to divide up your header; that's probably why you've encountered the alignment problems that you did. Try divs instead.

[dhtmlhelp]

Hi ronald,

thanks, I did use divs in the end but have not uploaded the file yet. I will work on it and use min width, hopefully IE will come to my rescue in a few months.

thanks for all the help, I will try to finish the conversion in the following days.

DH

[dhtmlhelp]

Due to a change in topic this thread continues at the following CF Post:

http://www.codingforums.com/showthread.php?s=&threadid=19295

:)

DH