FireFox --> HR's and aligning

[u01jmg3]

Hi, basically I have 2 horizontal rules on my web page. One of them is aligned to the left and the other is aligned to the right to give my page some style - now this is easy enough to do and it works fine in IE7 and FF2:

 

<hr align="left" />
<hr align="right" />

 

Now I validate my code against XHTML 1.1 and it complains so I change my code to this:

 

<hr style="text-align: left;" />
<hr style="text-align: right;" />

 

Now it no longer works in FF2 but still works in IE7 so something must be wrong - instead it is aligning to the center which is what the body is set to do. How can I fix this so it's both compliant and works in IE7/FF2? Thanks!!

[bronzemonkey]

Don't really know what appearance you are going for but rarely do I see anyone use the hr tag because it causes cross-browser problems.

 

What you are trying to do would require the float property and not text-align. But you should see if you can not just add a border to an element that already exists in your code.

 

Two suggestions: Put your style declarations in the head of the document or in a stylesheet rather than inline. And xhtml 1.1 should not be served as text/html, which I suspect is what you are doing, so you'd be better off changing the doctype to html 4.01.

[dbrimlow]

bronzemonkey touched on important points ...

 

1. the horizontal-rule tag is NOT cross-browser friendly at all.

 

2. xhtml 1.1 is (in essence) a very strict doctype. It is unforgiving and does not allow deprecated tags or improper syntax. It should never have been allowed to be served as text/html, but it was, so you have to be extremely tight and proper in your coding.

 

The reason it is working for you in IE, is because IE does not render xhtml 1.1 properly. So, IE is defaulting the page into quirks mode (which IE lives for). In quirks mode, IE will render it as if it was a strange form of basic html.

 

3. change the doctype to HTML 4.1 strict - (this way you can keep the code almost as you did with xhtml  - just lose the single tag closing slashes for imgs, hr, etc).

 

You can emulate the hr tags using borders and properly floated ids or classes (divs).

 

 

[u01jmg3]

Hi guys, sorry for the late reply but I was expecting to be notified by email of your replies but I've fixed that now.

--------------------------------

Here is the link to the page in question:

http://www.jonathangoode.co.uk/realize-scotland.co.uk/

--------------------------------

Viewing in either IE or FF will show what I mean by one understanding but as they say if IE gets it right and FF doesn't then something must be wrong. Ok I now intend to use a border on one side of a div to emulate a line in my page - thanks.

--------------------------------

@bronzemonkey how is the page being served as text/html?

 

The rest of the site has a doctype of xhtml 1.1 - is this correct to do so?

[dbrimlow]

Actually I know see that you are properly using a correct mime-type meta tag for XHTML 1.1 and serving it correctly as:

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8;" />

BUT, using the meta tag doesn't automatically make the content-type application/xhtml+xml. Make sure that your server is set to render this mime-type as such (I assume it is).

 

With THAT said, know that IE doesn't render xhtml 1.1 when properly served. This is the whole reason why xhtml 1.1 and above are not a good doctype choice.

 

Either change it to xhtml 1.0 Strict - and change the meta tag to

<meta http-equiv="Content-Type" content="text/html; charset=utf-8;" />

 

Or better still, change it to html 4.1 Strict and convert the xhtml closing tags back to html.

 

Here is a link that very simply explains this - Doctype Declarations and Content-Type Headers

 

Good luck,

Dave

[bronzemonkey]

Yeah, you're serving the document as application/xhtml+xml, which is what you're meant to do with xhtml 1.1. However, as dbrimlow already said, IE doesn't known what is going on with this mime-type and you don't even appear to need to use xhtml. Even though you should change your doctype and serve it as text/html, when using xhtml 1.1 it is recommended that you include an xml declaration:

 

<?xml version="1.0" encoding="UTF-8"?>

 

It also seems a bit much to show me a warning message asking me to enable javascript just so that you can do some fancy gradual opacity shifting over images!

[dbrimlow]

 

Even though you should change your doctype and serve it as text/html, when using xhtml 1.1 it is recommended that you include an xml declaration:

 

Sorry, bronzemonkey, that could confuse an important issue and should actually be TWO sentences with two completely unrelated recommendations.

 

1. "You should change your doctype to XHTML 1.0 Strict (or html 4.1 Strict) and serve it as text/html".

 

2. Whenever using XHTML 1.1 you should NOT serve it as text/html and should include the XML declaration.

 

Here is the "ABSTRACT" from the w3c XHTML Summary on August 2002:

 

This document summarizes the best current practice for using various Internet media types for serving various XHTML Family documents.

In summary, 'application/xhtml+xml' SHOULD be used for XHTML Family documents, and the use of 'text/html' SHOULD be limited to HTML-compatible XHTML 1.0 documents. 'application/xml' and 'text/xml' MAY also be used, but whenever appropriate, 'application/xhtml+xml' SHOULD be used rather than those generic XML media types.

[u01jmg3]

@ bronzemonkey:

 

1. When are you supposed to use XHTML as your doctype?

 

2. And javascript isn't just there do fancy gradual opacity shifting over images, there are other bits and pieces of scripts that help to enhance the viewing of the site if javascript was enabled - is it still too much to let users know that their viewing of the site could be improved if javascript was turned on?

 

Thanks for all your replies bronzemonkey and dbrimlow!

[bronzemonkey]

1. When are you supposed to use XHTML as your doctype?

 

Apparently, when you want to use other markup languages like XML, MathML and mix them together. But since IE doesn't support the correct mime-type it means that, in theory, none of us will need to use XHTML. In practice, if I want to use a javascript play-thing like Slimbox, I have to use an XHTML doctype for some reason. Some CMS also generate XHTML but normally this isn't a problem in an HTML document unless it inserts incorrect closing tags in the head of the document.

 

Dbrimlow might be able to give you some more info about when you're supposed to use XHTML.

 

2. And javascript isn't just there do fancy gradual opacity shifting over images, there are other bits and pieces of scripts that help to enhance the viewing of the site if javascript was enabled

 

The problem is that some sections of your site "break" when javascript is disabled - http://www.jonathangoode.co.uk/realize-scotland.co.uk/complementary_therapies. It's one thing to enhance the experience with JS (in which case you don't need to tell visitors to enable it because they can browse perfectly well without it) and another to require javascript for content to be displayed properly.

 

is it still too much to let users know that their viewing of the site could be improved if javascript was turned on?

 

People don't like to be told how they should be browsing ("please use Firefox, please enable JS, please view this site at a resolution of 1200*800, etc") and your prompt is actually pretty in-your-face and looks more like a warning. For the display of simple text and image content JS shouldn't be required. If something, like a video, requires js then normally the replacement content contains a prompt.

 

It's up to you. You can just keep it as it is, I'm just passing on what happened when I browsed your site with js disabled. If you're interested in playing around with how your site looks to people with js disabled, images disabled, css disabled, etc then I'd recommend you install the Firefox extension "Web Developer" if you haven't already. Very useful tool!

 

[u01jmg3]

@ bronzemonkey:

 

Thanks very much for your input. I will revert to a doctype of HTML 4.01 Strict as suggested and with regards to the javascript issue I definitely value your opinion as a viewing user so I will be changing the code to cater for javascript being disabled. I haven't yet finished coding so I haven't actually got onto testing with different things being disabled etc but thanks for pointing out the issues you have come across. Already ahead of you on that one - got that extension plus Firebug which I also find very useful! Cheers.

[bronzemonkey]

What Firebug like? I haven't got that one. Is it useful to have if I've already got the web developer extension? Thanks

[u01jmg3]

Hey, yep I think I probably use Firebug more than the Web Developer extension. Extremely useful at pointing you to any code the browser is having difficultly understanding i.e. a mistake in your coding. Highly recommend it as well as the Web developer extension:

 

https://addons.mozilla.org/en-US/firefox/addon/1843

[bronzemonkey]

Already proving to be very useful.

 

Rather than having to constantly comment out bits of css (I use background images to show the grid and leading that I am working to) I can just disable/enable it instantly in Firebug. Also more useful for finding specific bits of related html/css in other websites and playing around with them directly in the browser.

 

Thanks for the tip!

[u01jmg3]

No problem, glad I could help you this time.