Hi everybody and a very Happy Newyear.
I want to change something on my web site and created a page with the following header:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
in my stylesheet I have devined parameter for the body like this:
BODY {
font-family:Arial,Verdana,Helvetica,sans-serif;
background-image : url(<!-- m --><a class="postlink" href="http://www.thinksmart4u.com/img/bg/main_bg.gif">http://www.thinksmart4u.com/img/bg/main_bg.gif</a><!-- m -->);
margin : 0;
margin-top: 0;
margin-left: 0;
margin-right: 0;
padding-top: 0;
padding-left: 0;
scrollbar-arrow-color: #73798C;
scrollbar-track-color: #CECFCE;
scrollbar-shadow-color: #5A657B;
scrollbar-face-color: #AFC6DB;
scrollbar-highlight-color: #DEE7EF;
scrollbar-darkshadow-color: #AFC6DB;
scrollbar-3dlight-color: #FFFFFF;
font-size:12px;
color : #ffffff;
background-color : #425163;
}
Various settings will not work as it did if you change the header to this:
<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">
Anyone any ideas and how you get around this?
Thanks
JanWhat do you mean by 'various settings'? your css or your html?Sorry for this unclearness or unproper english;
I meand the settings within the style sheet are not working with using the first page header.
e.g. you can not change the colors from the scroll bars.
Those setiings are working fine if using the second header.
May be there are more limitations but I have only tested the settings in the Body section sofar.
Also if you change the second header the complete way W3W recommend not everything in the stylesheet is supported.
I like to understand this because sofar I understood that the settings in the style sheet are not depend on the page header but on different browser.becuase one is XHTML and one is HTML
check them using the W3 validaters.
checks CSS
<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator-uri.html">http://jigsaw.w3.org/css-validator/validator-uri.html</a><!-- m -->
checks HTML and XHTML (depending on the header you have)
<!-- m --><a class="postlink" href="http://validator.w3.org/You">http://validator.w3.org/You</a><!-- m --> may know this already, but just in case you don't:
with xhtml you should have a "/" at the end of any tag that doesn't have a matching end tag:
e.g.
<h1>hello</h1> is fine
<link rel="stylesheet" src=http://www.webdeveloper.com/forum/archive/index.php/"hello.css"> is not fine - it should be:
<link rel="stylesheet" src=http://www.webdeveloper.com/forum/archive/index.php/"hello.css" />
then validate your stylesheet using the link chris provided.Thank you both,
I did as you suggested and found as I aspected because the following entrees are MSIE related and that;
scrollbar-arrow-color: #73798C;
scrollbar-track-color: #CECFCE;
scrollbar-shadow-color: #5A657B;
scrollbar-face-color: #AFC6DB;
scrollbar-highlight-color: #DEE7EF;
scrollbar-darkshadow-color: #AFC6DB;
scrollbar-3dlight-color: #FFFFFF;
are not standard CSS formatations BUT here is what confusing me.
I created two sites using the same CSS
1 is: XHTML
2 is HTML
I validated the two successfully
The HTML version in MSIE shows the site correct
The XHTML version in MSIE is not display the colors in the scroll bars.
But why? I thought CSS is depend on browser?Originally posted by JanKok
But why?Because your first DOCTYPE is a full, complete DOCTYPE, telling IE to (try) to render the page in standards compliant mode. Thus, IE's proprietary CSS will not work. The reason it works with the HTML DOCTYPE is because you are not using a full doctype, thus, the page is rendered in quirks mode, and the proprietary CSS works. If you change your HTML DOCTYPE to a valid HTML 4.01 DOCTYPE, it will fail to work with that, as well. Take a look at <!-- m --><a class="postlink" href="http://www.alistapart.com/articles/doctype/">http://www.alistapart.com/articles/doctype/</a><!-- m --> for more information and a list of valid HTML 4.01 DOCTYPES.The scrollbar properties are applied to the html tag in xhtml.
In html you can apply them to the body or the html tag.
Do it like this:
body, html {
/* declarations */
}Thanks,
What I have learned from you now and by reading the articles you suggested I was afraid that I have to drop a few browser specifique css defenitions who are not working together with fully complete doctypes. At least if I want to support those standards.
However, if I then browse the web I have to convest that there are only a few sites who are designed that way.
Thanks to you Fang, may be I can do both this way. following the W3C standards with still some browser specifique elements.
Jan
I want to change something on my web site and created a page with the following header:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
in my stylesheet I have devined parameter for the body like this:
BODY {
font-family:Arial,Verdana,Helvetica,sans-serif;
background-image : url(<!-- m --><a class="postlink" href="http://www.thinksmart4u.com/img/bg/main_bg.gif">http://www.thinksmart4u.com/img/bg/main_bg.gif</a><!-- m -->);
margin : 0;
margin-top: 0;
margin-left: 0;
margin-right: 0;
padding-top: 0;
padding-left: 0;
scrollbar-arrow-color: #73798C;
scrollbar-track-color: #CECFCE;
scrollbar-shadow-color: #5A657B;
scrollbar-face-color: #AFC6DB;
scrollbar-highlight-color: #DEE7EF;
scrollbar-darkshadow-color: #AFC6DB;
scrollbar-3dlight-color: #FFFFFF;
font-size:12px;
color : #ffffff;
background-color : #425163;
}
Various settings will not work as it did if you change the header to this:
<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">
Anyone any ideas and how you get around this?
Thanks
JanWhat do you mean by 'various settings'? your css or your html?Sorry for this unclearness or unproper english;
I meand the settings within the style sheet are not working with using the first page header.
e.g. you can not change the colors from the scroll bars.
Those setiings are working fine if using the second header.
May be there are more limitations but I have only tested the settings in the Body section sofar.
Also if you change the second header the complete way W3W recommend not everything in the stylesheet is supported.
I like to understand this because sofar I understood that the settings in the style sheet are not depend on the page header but on different browser.becuase one is XHTML and one is HTML
check them using the W3 validaters.
checks CSS
<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator-uri.html">http://jigsaw.w3.org/css-validator/validator-uri.html</a><!-- m -->
checks HTML and XHTML (depending on the header you have)
<!-- m --><a class="postlink" href="http://validator.w3.org/You">http://validator.w3.org/You</a><!-- m --> may know this already, but just in case you don't:
with xhtml you should have a "/" at the end of any tag that doesn't have a matching end tag:
e.g.
<h1>hello</h1> is fine
<link rel="stylesheet" src=http://www.webdeveloper.com/forum/archive/index.php/"hello.css"> is not fine - it should be:
<link rel="stylesheet" src=http://www.webdeveloper.com/forum/archive/index.php/"hello.css" />
then validate your stylesheet using the link chris provided.Thank you both,
I did as you suggested and found as I aspected because the following entrees are MSIE related and that;
scrollbar-arrow-color: #73798C;
scrollbar-track-color: #CECFCE;
scrollbar-shadow-color: #5A657B;
scrollbar-face-color: #AFC6DB;
scrollbar-highlight-color: #DEE7EF;
scrollbar-darkshadow-color: #AFC6DB;
scrollbar-3dlight-color: #FFFFFF;
are not standard CSS formatations BUT here is what confusing me.
I created two sites using the same CSS
1 is: XHTML
2 is HTML
I validated the two successfully
The HTML version in MSIE shows the site correct
The XHTML version in MSIE is not display the colors in the scroll bars.
But why? I thought CSS is depend on browser?Originally posted by JanKok
But why?Because your first DOCTYPE is a full, complete DOCTYPE, telling IE to (try) to render the page in standards compliant mode. Thus, IE's proprietary CSS will not work. The reason it works with the HTML DOCTYPE is because you are not using a full doctype, thus, the page is rendered in quirks mode, and the proprietary CSS works. If you change your HTML DOCTYPE to a valid HTML 4.01 DOCTYPE, it will fail to work with that, as well. Take a look at <!-- m --><a class="postlink" href="http://www.alistapart.com/articles/doctype/">http://www.alistapart.com/articles/doctype/</a><!-- m --> for more information and a list of valid HTML 4.01 DOCTYPES.The scrollbar properties are applied to the html tag in xhtml.
In html you can apply them to the body or the html tag.
Do it like this:
body, html {
/* declarations */
}Thanks,
What I have learned from you now and by reading the articles you suggested I was afraid that I have to drop a few browser specifique css defenitions who are not working together with fully complete doctypes. At least if I want to support those standards.
However, if I then browse the web I have to convest that there are only a few sites who are designed that way.
Thanks to you Fang, may be I can do both this way. following the W3C standards with still some browser specifique elements.
Jan