By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
446,153 Members | 990 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 446,153 IT Pros & Developers. It's quick & easy.

Does DOCTYPE affects CSS display

P: n/a
Hello,

I noticed something strange when I was composing a XHTML document with
CSS

The following DOCTYPE causes the page to display differently on
Fireflox 1.0.6 and Internet Explorer 6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

The page is not very complicated, I am positioning an image with some
text
I get different results.

May 30 '07 #1
Share this Question
Share on Google+
17 Replies


P: n/a
seajay wrote:
Hello,

I noticed something strange when I was composing a XHTML document with
CSS

The following DOCTYPE causes the page to display differently on
Fireflox 1.0.6 and Internet Explorer 6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

The page is not very complicated, I am positioning an image with some
text
I get different results.
I could say it has something to do with differences in the way the two
browsers handle tables, except that I have no idea whether you even have
tables in your page. I could say it has something to do with differences
in the treatment of floats, except that I have no idea whether you even
have floats in your page. I could say it has something to do with how
the two browsers handle absolute positioning, except that I have no idea
whether you even have absolute positioning in your page.

How was it that you expected someone to help you solve your problem with
virtually no information?

Besides that--on one large US government website, 99.75% of
Firefox-using visitors are on version 1.5 or higher; 59% are on version
2 or higher. If those figures are representative of Firefox users in
general, it seems pointless to test on 1.0.6.
May 30 '07 #2

P: n/a
On May 30, 10:02 pm, Harlan Messinger
<hmessinger.removet...@comcast.netwrote:
seajay wrote:
Hello,
I noticed something strange when I was composing a XHTML document with
CSS
The following DOCTYPE causes the page to display differently on
Fireflox 1.0.6 and Internet Explorer 6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
The page is not very complicated, I am positioning an image with some
text
I get different results.

I could say it has something to do with differences in the way the two
browsers handle tables, except that I have no idea whether you even have
tables in your page. I could say it has something to do with differences
in the treatment of floats, except that I have no idea whether you even
have floats in your page. I could say it has something to do with how
the two browsers handle absolute positioning, except that I have no idea
whether you even have absolute positioning in your page.

How was it that you expected someone to help you solve your problem with
virtually no information?

Besides that--on one large US government website, 99.75% of
Firefox-using visitors are on version 1.5 or higher; 59% are on version
2 or higher. If those figures are representative of Firefox users in
general, it seems pointless to test on 1.0.6.
Sorry for not being precise
Good Stats :)
I am still running Firefox 1.0.6 this is why I am testing on it.

I am using absolute postionning however I didn't post the code because
it's a little bit long

Anyway here's the code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tabbed Navigation</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
<style type="text/css">
<!--
body {
/*padding:0;
margin-left: 0;
margin-top: 0;
font: 90% arial, sans-serif;
*/
background: #c0c0c0 url("bg.jpg");
background-repeat: repeat;
}
pre {text-indent: 30px}

#tabmenu {
color: #000;
border-bottom: 1px solid #c0c0c0;
margin: 12px 0px 0px 0px;
padding: 0px;
z-index: 1;
padding-left: 10px
}

#tabmenu li {
display: inline;
overflow: hidden;
list-style-type: none; }

#tabmenu a, a.active {
color: #ffffff;
background: #c0c0c0;
font: bold 1em "Trebuchet MS", Arial, sans-serif;
border: 1px solid #c0c0c0;
padding: 2px 5px 0px 5px;
margin: 0;
text-decoration: none;
}

#tabmenu a.active {
background: #ffffff;
border-bottom: 1px solid #c0c0c0;
color: #000000;
}

#tabmenu a:hover {
color: #fff;
background: #c0c0c0;
}

#tabmenu a:visited {
color: #000000; }

#tabmenu a.active:hover {
background: #c0c0c0;
color: #ffffff; }

#content {
font: 0.8em/1.3em "bitstream vera sans", verdana, sans-serif;
text-align: justify;
background: #ffffff;
padding: 20px;
border: 1px solid #c0c0c0;
border-top: none;
z-index: 2;
height: 30em; /*added by seajay*/
}

#content a {
text-decoration: none;
color: #E8E9BE; }

#content a:hover { background: #898B5E; }
#mainnavigation {
position: absolute;
top: 0px;
left: 200px;
font-size: 80%;
}

#container {
position: absolute;
width: 775px;
border-style: solid;
}

#logocontainer {
position: absolute;
top: 0px;
left: 0px;
width: 165px;
height: 42px;
}

//-->

</style>
</head>

<body>
<div id="container">

<div id="mainnavigation">
Home | Contact us | Help
</div>

<div id="logocontainer">
image goes here
</div>

<div align="right">
<ul id="tabmenu">
<li><a class="active" href="#">Link 1</a></li>
<li><a class="" href="#">Link 2</a></li>
</ul>
</div>

<div id="content">
some data
</div>

</div>


</body>
</html>
May 30 '07 #3

P: n/a
seajay wrote:
Sorry for not being precise
Good Stats :)
I am still running Firefox 1.0.6 this is why I am testing on it.
Why, do you have some aversion to clicking the "update" button?

I am using absolute postionning however
^^^^^^^^
Most likely your first mistake
I didn't post the code because
it's a little bit long
Well DON'T. This is definitely your second mistake.

Post a URL. Post a URL. Post a URL. Post a URL. Post a URL. Post a
URL. Post a URL. Post a URL. Post a URL. Post a URL.
>
Anyway here's the code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
And this most likely your third mistake.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tabbed Navigation</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
<style type="text/css">
<!--
body {
/*padding:0;
margin-left: 0;
margin-top: 0;
font: 90% arial, sans-serif;
*/
background: #c0c0c0 url("bg.jpg");
How are we to make sense of this, I don't have bg.jpg on my machine....

Post a URL. Post a URL. Post a URL. Post a URL. Post a URL. Post a
URL. Post a URL. Post a URL. Post a URL. Post a URL.

<snip useless code>

Post a URL. Post a URL. Post a URL. Post a URL. Post a URL. Post a
URL. Post a URL. Post a URL. Post a URL. Post a URL.

*Got the hint?*

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
May 30 '07 #4

P: n/a
seajay wrote :
On May 30, 10:02 pm, Harlan Messinger
<hmessinger.removet...@comcast.netwrote:
>seajay wrote:
Seajay, examine thoroughly your own code and then try to figure out what
this will do for readers of your post in a discussion forum:
body {
/*padding:0;
margin-left: 0;
margin-top: 0;
font: 90% arial, sans-serif;
*/
background: #c0c0c0 url("bg.jpg");
background-repeat: repeat;
}
You said
>The page is not very complicated,
That's not true. You over-use positioning and z-index. In fact, you set
z-index in declarations when you're not setting position in the same
selector or class definition.. that's contradictory. And you have
validation errors, like an extra quote on the xmlns attribute.

I am positioning an image with some
>text
I get different results.
The url of the image is bg.jpg. I do not have that image of yours, so I
can not help you. If only you had just posted an url. Just an url.

Gérard
--
Using Web Standards in your Web Pages (Updated Apr. 2007)
http://developer.mozilla.org/en/docs...your_Web_Pages
Jun 2 '07 #5

P: n/a
seajay wrote:
Hello,

I noticed something strange when I was composing a XHTML document with
CSS

The following DOCTYPE causes the page to display differently on
Fireflox 1.0.6 and Internet Explorer 6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

The page is not very complicated, I am positioning an image with some
text
I get different results.
Don't use XHTML strict doctype. It means things that you don't want it
to mean.

For example, in XHTML, the fact that you have commented out your stylesheet:

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

means that there is no style information because it's all commented out.

I would switch it to XHTML transitional if I were you. I'm not positive
this is your problem, but it will help in any case. There is no reason
to declare XHTML strict unless you are serving your document as XHTML
(which I would bet money you aren't).

Jeremy
Jun 13 '07 #6

P: n/a
Jeremy wrote:
Don't use XHTML strict doctype. It means things that you don't want it
to mean.
Such as?

<snip>
I would switch it to XHTML transitional if I were you.
I would not. New documents should be Strict, not Transitional. You
aren't 'transitioning' any legacy code, are you?
I'm not positive this is your problem, but it will help in any case.
There is no reason to declare XHTML strict unless you are serving
your document as XHTML (which I would bet money you aren't).
You're confusing XHTML and HTML...

OP, use this doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

...and remove all those "/" at the end of some tags. Do type tags in
lower case, though, should you ever really need to update to XHTML.

--
-bts
-Motorcycles defy gravity; cars just suck
Jun 13 '07 #7

P: n/a
Beauregard T. Shagnasty wrote:
Jeremy wrote:
>Don't use XHTML strict doctype. It means things that you don't want it
to mean.

Such as?

<snip>
>I would switch it to XHTML transitional if I were you.

I would not. New documents should be Strict, not Transitional. You
aren't 'transitioning' any legacy code, are you?
Depends on your point of view. Maybe *ALL* non-XHTML documents are
"legacy code." In which case I *AM* transitioning them until I feel
XHTML is well supported enough to use it exclusively.

I suggested the switch because OP clearly wasn't targeting strict XHTML,
but the switch from transitional XHTML to strict HTML is non-trivial.

Jeremy
Jun 13 '07 #8

P: n/a
Jeremy wrote:
Beauregard T. Shagnasty wrote:
>Jeremy wrote:
>>Don't use XHTML strict doctype. It means things that you don't want
it to mean.

Such as?
[this space was blank. <g>]
><snip>
>>I would switch it to XHTML transitional if I were you.

I would not. New documents should be Strict, not Transitional. You
aren't 'transitioning' any legacy code, are you?

Depends on your point of view. Maybe *ALL* non-XHTML documents are
"legacy code."
*ALL* ? What about the brand new HTML 4.01 Strict documents I wrote
yesterday?
In which case I *AM* transitioning them until I feel
XHTML is well supported enough to use it exclusively.
and it isn't, by the most common browser-like object.
I suggested the switch because OP clearly wasn't targeting strict
XHTML,
We don't know that, as he hasn't posted a URL, only some incomplete
snippets in a post.
but the switch from transitional XHTML to strict HTML is
non-trivial.
Of course. But not germane to the OP's question.

Transitional XHTML (or HTML) could contain old 3.2 code and pass muster.
But why would you want to do that? The OP did say he "was composing a
XHTML document with CSS". That assumes a new document, I suppose.

--
-bts
-Motorcycles defy gravity; cars just suck
Jun 13 '07 #9

P: n/a
On 13 Jun, 20:50, Jeremy <jer...@pinacol.comwrote:
Don't use XHTML strict doctype. It means things that you don't want it
to mean.
[...]
I would switch it to XHTML transitional if I were you.
And you were doing so well up to that point 8-(

The OP should use HTML 4.01 Strict, and a doctype declaration that
causes standards-mode rendering, not quirks (Henri Sivonen's page may
be useful here)

Under IE at least, "quirks" rendering will fix-up CSS syntax errors
that cause the CSS rule to be ignored totally under "standards" mode.

As always, the sequence is this:

* Don't use XHTML
* Validate your HTML
* Validate your CSS
* Use a standards rendering mode, not quirks.

Don't even think about XHTML until you're expert and you've already
done the above. Then think again about it.

Jun 14 '07 #10

P: n/a
Andy Dingley wrote:
As always, the sequence is this:

* Don't use XHTML
* Validate your HTML
* Validate your CSS
* Use a standards rendering mode, not quirks.

Don't even think about XHTML until you're expert and you've already
done the above. Then think again about it.
So WHO uses (or should use) xHTML anyway?
Jun 14 '07 #11

P: n/a
On Thu, 14 Jun 2007, Harris Kosmidhs wrote:
So WHO uses (or should use) xHTML anyway?
One example is ruby markup, which is officially included in
XHTML 1.1 only:
http://www.unics.uni-hannover.de/nht...notation.xhtml

If you don't care about formal validation, you could do with
(unspecified) HTML for Internet Explorer 6:
http://www.unics.uni-hannover.de/nht...nnotation.html

--
In memoriam Alan J. Flavell
http://groups.google.com/groups/sear...Alan.J.Flavell
Jun 14 '07 #12

P: n/a
On 14 Jun, 12:08, Harris Kosmidhs <hkosm...@remove.me.softnet.tuc.gr>
wrote:
Don't even think about XHTML until you're expert and you've already
done the above. Then think again about it.

So WHO uses (or should use) xHTML anyway?
People who:

* Really understand it.

* Are using XHTML absolutely correctly (if it's going to have errors,
stick with HTML).

* Are working on projects where it's going to _continue_ to be done
correctly. This excludes contractors on projects where as soon as
you're out of the door, someone starts hacking away with DreamWeevil.

* Can cope with the fact that XHTML is simply unusable for the
majority of the web, and so requires some non-XML XHTML fallback
solution for that portion of the users (including the massed hordes
with IE).

* Have some concrete benefit to gain from using it, compared to HTML.
If you don't know why, then don't.

As to _possible_ advantages you might see from it, then they might
includes some of these:

* Internal processing with XML tools

* External publishing to XML user agents

* External publishing with embedded namespaces

Jun 14 '07 #13

P: n/a
On 14 Jun, 15:18, Andreas Prilop <AndreasPrilop2...@trashmail.net>
wrote:
On Thu, 14 Jun 2007, Harris Kosmidhs wrote:
So WHO uses (or should use) xHTML anyway?

One example is ruby markup, which is officially included in
XHTML 1.1 only
What's the current state of ruby in HTML, compared to the fairly poor
support for ruby in XHTML ? It was certainly never intended to be an
XHTML-only technique.

http://www.w3.org/TR/1999/WD-ruby-19990322/

Jun 14 '07 #14

P: n/a
Scripsit Andy Dingley:
What's the current state of ruby in HTML, compared to the fairly poor
support for ruby in XHTML ?
Why would it matter? Either a browser supports Ruby, or it doesn't, or it
supports part thereof. As far as I know, IE 6+ is the only significant
browser that has even partial support to Ruby. It doesn't care the least
what document type you specify or whether you announce HTML or XHTML, apart
from caring about the document type declaration strong ("doctype sniffing")
and about HTTP headers, where you need to specify text/html to make IE
behave.
It was certainly never intended to be an
XHTML-only technique.
Wasn't it? When Ruby was designed, "everyone" believed in XHTML.
http://www.w3.org/TR/1999/WD-ruby-19990322/
If you follow the link "latest version", you'll find the W3C recommendation
that constitutes the Ruby module in XHTML. Yet another indication of the W3C
_not_ being a standardization organization. They play fast and loose with
their "standards".

ObCSS: IE lets you style Ruby elements in useful ways, e.g. making the font
size readable (as opposite to "ruby size" 5.5pt).

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Jun 14 '07 #15

P: n/a
On Thu, 14 Jun 2007, Jukka K. Korpela wrote:
ObCSS: IE lets you style Ruby elements in useful ways,
Internet Explorer 6 ignores styles for <rb>.

--
In memoriam Alan J. Flavell
http://groups.google.com/groups/sear...Alan.J.Flavell
Jun 14 '07 #16

P: n/a
Andreas Prilop wrote:
In memoriam Alan J. Flavell
http://groups.google.com/groups/sear...Alan.J.Flavell

Just noticed your sig. I was extremely busy over the last 6 months and
I never heard the news. Very sad. I liked Alan and valued his
comments. Thanks for your sig and letting me know.

BTW, his pages seem to be still available at:

http://web.archive.org/web/200604260...c.uk/~flavell/

--
Ed Mullen
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net
Jun 14 '07 #17

P: n/a
Scripsit Andreas Prilop:
On Thu, 14 Jun 2007, Jukka K. Korpela wrote:
>ObCSS: IE lets you style Ruby elements in useful ways,

Internet Explorer 6 ignores styles for <rb>.
There are many deficiencies in its Ruby support, but I was referring to
things like

rt { font-size: 70%; }

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Jun 14 '07 #18

This discussion thread is closed

Replies have been disabled for this discussion.