Replying to Quick Tips On Html And Css

I've not come across any problems with the XHTML 1.1 with application/xhtml+xml MIM type, it works perfectly in my IE6, IE5.5, Opera 9x and FF2.x can you please provide a link to the article proving this please?

The advanced selectors (also known as attribute selectors) are quite handy if you're willing to make styles that are solely based on a specific element (or elements). Thank you for pointing it out that you've never seen such, as I have now added to it.

Thanks for all the feedback guys (and gals?).

Yes please provide a link to the article proving this because i don't have also any problems with the application/xhtml+xml MIME type with IE6 and FF2.x.

BTW, i read a couple of articles related with this but when i test it i don't have any problems as i say, in both ways i get the same result:

• Serving XHTML As HTML
• Serving XHTML As XML

Now, i have a little problem when i use big images and try to load the webpage containing it more faster, so, I remember a technique that do it and works perfectly with HTML 4.x, it consists to split this big image into a group of several smaller images and then assembly this group of images with a table to show the big image, but when i try to use this technique with XHTML 1.1 i dont get the same result, does anybody knows how to do this????

Best regards,

First of all, XHTML 1.1 MUST be served with application/xhtml+xml MIME type, which can be tricky. Internet Explorer doesn't support this MIME type (it requests a File Download ) so you will miss many visitors. If you serve XHTML 1.1 over text/html (usually), the document is TRULY XHTML 1.1. I recommend using XHTML 1.0 Strict (almost same) instead, otherwise deal with some server-side content negotiation scripts!

Those CSS tips are great! I have never even seen such an advanced selector The part explaining browsers was really helpful.

Thanks for the great info!

I've not come across any problems with the XHTML 1.1 with application/xhtml+xml MIM type, it works perfectly in my IE6, IE5.5, Opera 9x and FF2.x can you please provide a link to the article proving this please?

The advanced selectors (also known as attribute selectors) are quite handy if you're willing to make styles that are solely based on a specific element (or elements). Thank you for pointing it out that you've never seen such, as I have now added to it.

Thanks for all the feedback guys (and gals?).

If you use <div> or <span>, make sure you have a good use for them and that you probably use heavy CSS coding on them. <div> with an id attribute is not very useful because it is a one-time use thing, use it only if you are covering a large area.
I love using <fieldset> as well as <legend>, not to forget <label>. They are part of the Section 508/Web Accessibility Initiative guidelines so that my audience is larger for disabled people and/or screen readers. I don't know how you can make the forms look "spectacular" though.

Those CSS tips are great! I have never even seen such an advanced selector The part explaining browsers was really helpful.

You can get "spectacular" results for your forms if you apply the advanced selectors :hover and :focus in your fieldset, input and textarea tags, but, as usual, you don't see it in IE -¿IE7+?- only in FF.

I'm just redesigning a client's website -it's almost done - in which i use these selectors with my forms, take a look to these pages:

• Contact Us Form
• Reccomend Us Form
• Stu Nicholls | CSSplay | CSS styling of forms

BTW, from the last website is where i found the use of these selectors.

Best regards,

HTML
Ideally, you should be working under the XHTML 1.1 doctype specification. Some reasons:

* Improved semanticism - make use of the elements available appropriately to convey the information as it was intended.
* Improved understanding - because of an increase in semanticism, it's easier for your audience to understand what your trying to convey.
* Cleaner code - due to the deprecation of some elements and the strict requirements of nesting, closing and structure, your code becomes much cleaner and hopefully more readable.
* Faster - cleaner code = faster generation; the browser doesn't have to do as much work to render your site.

First of all, XHTML 1.1 MUST be served with application/xhtml+xml MIME type, which can be tricky. Internet Explorer doesn't support this MIME type (it requests a File Download ) so you will miss many visitors. If you serve XHTML 1.1 over text/html (usually), the document is TRULY XHTML 1.1. I recommend using XHTML 1.0 Strict (almost same) instead, otherwise deal with some server-side content negotiation scripts!

You'll often find people saying "I want a CSS, not a table site". This is an inaccurate conception. HTML and CSS are two different modules connected by a rule or link. HTML is used to present the data where as CSS is used to style the data. Tables are part of HTML and should be used when tabular data is being displayed. CSS should be used to style your site, from structure to typography and forms to colour. The use of tables to create layouts are long-gone.

I agree, CSS is the way to go. However I still use tables for 1 of my sites because I want to retain utmost compatibility with all browsers and IE positions things funny (tried many, many tips). In my XHTML tutorial, I have informed that Tables for layout is NOT the way to go.

You shouldn't depend on divisions (<div>) or span (<span>) neither. Only use the div and span elements when you are absolutely sure that your need them and your site layout will suffer without them. It is possible to create layouts without using divs or spans.

If you use <div> or <span>, make sure you have a good use for them and that you probably use heavy CSS coding on them. <div> with an id attribute is not very useful because it is a one-time use thing, use it only if you are covering a large area.

When creating forms, leave nothing out - fieldset, legends and labels are all part of a form (and inputs) so use them. They'll make your form look better when the styles are off (and can make your form spectacular when the styles are on).

I love using <fieldset> as well as <legend>, not to forget <label>. They are part of the Section 508/Web Accessibility Initiative guidelines so that my audience is larger for disabled people and/or screen readers. I don't know how you can make the forms look "spectacular" though.

Those CSS tips are great! I have never even seen such an advanced selector The part explaining browsers was really helpful.

Thanks for the great info!

If a browser doesn't support the standard then it will fall back into quirks mode, therefore displaying the site in it's basic form anyway. So support for doctypes is not enitrely necessary. Additionally, XHTML 1.1 does not come in any flavours other than itself, so unlike 1.0, there are no Frames, Traditional, Loose, Strict, etc.

In addition, it is a bad practice to not declare a doctype for your site or any site and only use html head /head body /body /html due to some things by the browser may be displayed differently, for example when you don't declare a doctype, on IE7 browser, the css :hover only works with anchor links and not on other elements.

...
Is totally wasteful as your using the divs for no reason other than to say in the code that this is a section. The following makes more semantic sense:

<h1>Website Title</h1>
<p>Some text some text some text</p>
<p id="footer">Copyright me 2007.</p>

See, it is much nicer and won't take as much styling. I know it's not very common to come across, but it does happen (well variations of the above).
...

the advantages of your approach is that the code is cleaner and neater, more points in semantic web, it seems that your are focused on the contents rather than the design which means good web site *cheer*

btw for the hobbyist like me, and for the sake of my heavy gfx and design styling an additional divs make sense, like drop shadow here, gradient their, rounded on that corner, marker to the side and soon... and i don't hesitate to use more divs if needed.

it seems that different people/designer have different approach in coding xhtml. love your approach

While I agree that ideally one should be working with XHTML 1.1 Strict, I still believe that it's best to adapt to the situation. Not every one of your visitors have browsers that support the XHTML standards (say strict). Therefore, it's better to figure out what the majority of the visitors want and do that instead.

If a browser doesn't support the standard then it will fall back into quirks mode, therefore displaying the site in it's basic form anyway. So support for doctypes is not enitrely necessary. Additionally, XHTML 1.1 does not come in any flavours other than itself, so unlike 1.0, there are no Frames, Traditional, Loose, Strict, etc.

And there are some changes to XHTML that I just don't get. Like how does changing the bold tag from <b></b> to <strong></strong> make the code "cleaner" or "faster"? It seems to me that <strong></strong> is obviously longer than <b></b>, so how could it possibly be faster? Although I believe sticking to the standard is a good thing, I fail to see how the current coding methods are improvements from before.

As Quatrux quite rightly said, the <b> and <i> are style formatting - something HTML wasn't developed to do. <strong> and <em> however tell it to make it a point which needs consideration from the rest of the information. It doesn't make it faster or cleaner, but it does give your site greater semanticism.

Nonetheless, I don't see what's wrong with using <div>'s or <span>'s in a site. Many well-coded CSS-heavy sites that I've seen almost always use them. There really aren't that many other tags to latch a style onto besides <div>, <p> etc. So use what you have when you want. Neither of those two tags are "bad".

The W3C and many other webmasters don't find anything wrong with using divs or spans, and neither do I. The point I was trying to make is don't rely on them heavily. For example:

<div id="heade"><p>Website Title</p></div>
<div id="body"><p>Some text some text some text</p></div>
<div id="footer"><p>Copyright me 2007.</p></div>

Is totally wasteful as your using the divs for no reason other than to say in the code that this is a section. The following makes more semantic sense:

<h1>Website Title</h1>
<p>Some text some text some text</p>
<p id="footer">Copyright me 2007.</p>

See, it is much nicer and won't take as much styling. I know it's not very common to come across, but it does happen (well variations of the above).

But if they use IE6, forget it. They won't see anything and you should depend on something else to highlight sections of your forms. (Say <div>'s or something)

Actually, IE5+ is fine with forms and the fieldset / legends / labels. I've just being designing on IE6 and also tested on an older machine's IE5.5 and it appears to be fine.

Ahhh...the horrors of cross-browser compliance. Ugh. I hate how there's so many different browsers; it makes it insanely difficult to cater to everyone's tastes. Why can't everyone just be a bit more...compliant and change their browser as needed?

And where would the fun be in that?

Thanks for your comments Arbitrary, Quatrux, TavoxPeru and closed.

and also used <em></em> instead of <i></i>, additional points in semantic as stated above.

Well, I read about it some time ago and I think I found the same explanation, that the <b></b> tag is a style, which needs to be done with CSS, font-weight: bold; When I think of it, I don't use b tag, only sometimes ;D But strong tag was there long before xhtml and the effect was almost the same as with b tag.

A quick explanation, but hopefully understandable. "Bold" is a style. HTML
was never meant to be about styles. Do some searches for "Tim Berners Lee"
and "the semantic web". <strong> is semantic - it describes the text it
surrounds ("this text should be stronger than the rest of the text you've
displayed") as opposed to describing HOW the text it surrounds SHOULD BE
DISPLAYED ("this text should be bold").

Wow, thanks for the tips, some of them i already knew but the related with images with gap dont .

Arbitrary i think that the benefits of changing the bold tag from <b></b> to <strong></strong> is more related with the Accesibilty fact and not with make the code "cleaner" or "faster".

Best regards,