Forum Moderators: not2easy
I've been moving all my sites into PHP and figured i might as well go the extra mile or so and do them DocType strict compliant, to be future proof, but i wasnt ready for what happened.
Even when requesting a strict rendering and checking that all my HTML/CSS/Javascript is 100% valid i still get different rendering across browsers...
What bothers me the most is the cross browser text handling. Every browser renders text as it sees fit. Even between NS7/Opera7 wich are AFAIK the most compliant, text gets rendered diferently...
I think its a bit funky that "quirks mode" is a bit more "standard" across browsers than "real" standard...
Its just not worth the extra bother to have strict code when the browser will still do as it well pleases...
So, i think the real question is, how standard are browsers ATM, and can we hope for a "unified" rendering in the future?
No, we cannot hope for a uniform standard. It's just not going to happen. You will always run into the problem with browsers rendering elements differently, text in particular.
You're saying that you feel "quirks mode" is more standards compliant than a strict mode. Well, that may well be the case for certain layout. However, you will also notice that more complex layouts will hopelessly break in quirks mode.
So, is it worth the hassle to go for a stricter rendering? Yes, I believe it is!
• Strict rendering makes it easier for you to predict how a browser will render your page. This is especially true about the better browsers, like Mozilla/Opera, but even IE starts behaving in strict mode.
• Quirks mode is exactly what it sounds like. Each browser is free to handle the code any way it pleases. Unfortunately this only benefits IE (which by default handles the code as it pleases). Truly standards compliant browsers haven't been around for too long, so you will still see some minor differences between two browsers. Most likely some of those differences will always be there, but at least the overall rendering of your page is based on a uniform standard, and that is quite comforting.
• The key to 'cross-browser compatibility' is giving the browser some freedom. The less you try to force a browser into a specific way of rendering, the more will it listen to your suggestions (just like kids). The 'control thinking' comes from the time when that was our only way of getting a page to behave. "Well, darn you browser! Since you can't render the page correctly, I guess I will have to tell you exactly what it is supposed to look like!" Does 'table based layout' sound familiar? How about 'at least one font tag per paragraph'? Now, what about 'explicitly specified height and width on every element'? So much for fluid layouts! The problem with the old-school way of designing pages is that you designed a page according to what looks good to YOU, on YOUR system. It could still break hopelessly on someone else's machine. And now, when all browsers have built-in accessibility features which allows you to change the font size no matter what you've done to force a fixed size... do you see the problem? Not to mention all the different screen sizes!
Standards compliant code in strict mode, with CSS 'suggesting' a layout instead of 'forcing' one - that brings less headache for both you and the visitor!
And tough i must agree w/ you on some things, i cant agree on the "control" subject.
Control is a GoodThingTM. What good would it be if you placed an absolute positioned DIV at 320px and it ended up at 640px? Or if your JS/PHP code had already determined the user screen res and adapted the page stylesheet accordingly, but then the UA decided to do his own "thinking"? What good would PDF be if it used what font it was best instead of using the font the designer meant to be used?
You talk about fluid design. Point taken, and i think its a good thing, but ATM most ppl i know are doing fluid designs because they CANT really control what happens.
In the end im starting to think that its undoable with HTML. It was never meant to "give out" control over presentation, and at its present state CSS doesnt go too far either...
Oh and btw, "table layouts" arent much differnt from stacking absolute positioned DIVs ,) Though DIVs are somewhat "cleaner". And they actually end up where u told them to go ,)
The only problem is - 320px from the top of what? "Oooh... so this browser has this default margin, but this other browser has a different!" ...which is the part that sucks today.
What I mean about not controlling the layout is more a difference between 'control' and 'absolute, all-powerful, control'. Unfortunately many people are looking for the latter, when that's never going to happen. Can we just say 'pixel perfection'?
And true... stacking divs is just as ugly as using a bunch of tables. Well, except the fact that the page with divs will render faster. But, CSS purists usually don't stack a ton of divs. If they do, then it's because they're still in the transitional stage where they think everything has to be wrapped in its individual div, which is wrapped in another div, etc. They have only replaced the table cells with divs - and yes, that is not much better than a table based layout.
The problem with CSS is not doing things differently - it is thinking in a different way. Don't replace the tables with divs, replace your way of thinking, and the way you approach the problem. Be more content oriented.
Not meant for you to take personally... Just general thoughts ;)
But, CSS purists usually don't stack a ton of divs. If they do, then it's because they're still in the transitional stage where they think everything has to be wrapped in its individual div, which is wrapped in another div, etc. They have only replaced the table cells with divs - and yes, that is not much better than a table based layout.
Let's look at a practical example...
I have an XSL stylesheet I created to transform RSS feeds into XHTML.
Here is the relevant CSS...
hr.clear {
position: relative;
content: " ";
border: none;
height: 0px!important;
line-height: 0px!important;
margin: 0px;
padding 0px;
display: block;
clear: both;
content: "";
visibility: hidden;
}
div.itemwrap {
margin-top: -17px;
margin-left: -6px;
position: relative;
}
div.item-shadow {
margin-top: 10px;
margin-left: 6px;
background: #B3B3B3;
border: 2px groove gray;
}
div.item {
margin-top: 5px;
margin-bottom: 5px;
background: #F6F6F7;
border: 1px solid gray;
z-index: 101;
}
div.title {
background: #E6E6E7;
border: 1px solid gray;
z-index: 104;
}
span.titletext {
font-weight: bold;
float: left;
position: relative;
}
span.pubdate {
font-size: 0.84em;
padding: 0px;
font-style: italic;
float: right;
position: relative;
}
div.description {
font-size: 0.96em;
position: relative;
}
Here is what the transformed feed looks like...
<div class="itemwrap">
<div class="item-shadow">
<div class="item">
<div class="title">
<span class="titletext">
Fake title
</span>
<span class="pubdate">
00/00/0000
</span>
<hr class="clear" />
</div>
<div class="description">
Fake item description.
<hr class="clear" />
</div>
<hr class="clear" />
</div>
<div class="item">
...
</div>
</div>
</div>
How would I 'change my thinking' and leave this 'transitional stage'? As I understand things I have used the arbitrary dividers exactly as they are intended to be used--what am I missing?
Jordan
Isn't that what you're doing anyway, listing different items in a table?
I don't know, lol -- it depends on who you ask...to me "tabular data" is anything that displays properly in a table, but 'CSS purists' usually don't agree with that (though I've yet to see a clear and distinct definition of "tabular data" from them), and they tell me I should be using the arbitrary dividers with CSS rules instead.
My layout looks roughly like this...
..styled space...
+---------------+
¦ Title....date ¦
+---------------+
¦ Description ¦
+---------------+
..styled space...
+---------------+
¦ Title....date ¦
+---------------+
¦ Description ¦
+---------------+
..styled space...
...
Each item stretches the entire width of the screen and they are stacked on top of each other (over a styled backdop) with a gap between each to allow the backdrop to show through (i.e., they look like they are 'inset' into the backdrop).
I was just wondering if I was missing something in using the arbitrary dividers and spans like this, because it seems like somewhat of a catch 22...can't use tables, can't use dividers...so what the heck am I supposed to use to acheive this layout?
Jordan
arbitrary dividers and spans like this, because it seems like somewhat of a catch 22...can't use tables, can't use dividers...so what the heck am I supposed to use to acheive this layout?
why arbitray dividers.. why not, as Doc suggests, think content and use the appropriate elements ..
Take your example, why not use <h2> and <p> ;) why does a space have to be created using a <hr> that you're hiding anyway? why not just use margins on your <p> element.
Here's a suggestion that may help to see the problem a different way:
div.section {
margin: 10px 0 0 0;
padding: 2px;
background: #B3B3B3;
border: 2px groove gray;
}
.section h2 {
background: #E6E6E7;
border: 1px solid gray;
text-align: right;
font-size: 14px;
font-style: italic;
font-weight: normal;
padding: 0 0 10px 0; margin: 0;
}
.section h2 span {
float: left;
font-size: 16px;
font-style: normal; font-weight: bold;
}
.section p {
margin: 0 0 5px 0;
padding: 5px 0 30px 0;
background: #F6F6F7;
border-bottom: 1px solid gray;
}
with this:
<div class="section">
<h2><span>Fake title</span> 00/00/0000</h2>
<p>Fake item description.</p>
<h2><span>Fake title</span>00/00/0000</h2>
<p>Fake item description.</p>
</div>
only one div so the rest of the elements can be targetted with no extra mark up! This is a minimalist (purist ;)) approach only intended as an example though..
Suzy
[btw]using your code, the design looks different cross browser so this may not be identical to yours in IE, I tested in NN7[/btw]
I'm too used to thinking in terms of XUL (a form of XML) -- anonymous elements that are almost completely user styled (e.g., <box>); I didn't even think about the fact that I'm using XHTML for a reason...to have a set of pre-formatted elements! I can see what DrDoc was saying and how people used to the (basically anonymous) <td> could fall into the same mode of thought, forgetting about other elements that would be perfectly suited to the particular layout they are after.
Thank you for taking the time to give me an example (I learn best by example), it really helped alot. It is near exactly what I was aiming for, is much more economic and looks the same in all the browsers I tried! God save the Queen (of CSS)!
I had to add one more divider to get the exact layout I was wanting, but still the (transform & css) stylesheets and output are half the size they were before! Here is what I ended up with....
div.itemwrap {
margin: 10px 0 0 0;
padding: 2px;
background: #B3B3B3;
border: 2px groove gray;
}
.itemwrap .item {
background: #F6F6F7;
border: 1px solid gray;
margin-bottom: 4px;
}
.itemwrap .item h2 {
background: #E6E6E7;
border: 1px solid gray;
text-align: right;
font-size: 13px;
font-style: italic;
font-weight: normal;
padding: 3px 4px 3px 6px;
margin: 3px;
}
.itemwrap .item h2 span {
float: left;
font-size: 15px;
font-style: normal;
font-weight: bold;
margin-top: -1px;
}
.itemwrap .item p {
clear: left;
margin: 0 0 5px 0;
padding: 2px 4px 3px 8px;
background: #F6F6F7;
}
<div class="itemwrap">
<div class="item">
<h2><span>Fake title</span> 00/00/0000</h2>
<p>Fake item description.</p>
</div>
<div class="item">
<h2><span>Fake title</span> 00/00/0000</h2>
<p>Fake item description.</p>
</div>
...
</div>
If you see an even cleaner way of doing it, don't hesitate to point it out! Thanks again for you help.
Jordan
Ps. Thank you as well, DrDoc, for getting me thinking about what I could be doing better! WW rules. :)
