RE: OT: Issue with CSS and doctype
Browsers have two rendering modes.
quirks mode, is where a browser attempts to render a page in the way it used
to (think "Best viewed with")
Standards mode is where a browser attempts to render a page according to web
standards mode (which basically is close to the same in each browser, tho
each browser does have bugs)
Browsers use DocTypes to "sniff" the rendering mode it will use.
No DocType will always a revert a browser to quirks mode.
Unfortunately, different browsers sniff different doctypes into different
modes.
The only doctypes that render standards mode across all browsers are:
HTML 4.x Strict
http://www.w3.org/TR/html4/strict.dtd";>
HTML 4.01 Transitional
http://www.w3.org/TR/html4/loose.dtd";>
XHTML 1.0 Strict (no xml Declaration)
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
XHTML 1.0 Transitional (no xml Declaration)
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
the XHTML 1.1 doctypes will also force Standards mode, but IE has problems
with it.
Using an xml declaration with the DocType will Force IE6 and opera into
Quirks Mode.
Avoid using
An example of what might be different is that IE 5.x and IE6 in quirks mode
use a broken box model. In standards mode, IE6 will use the CSS standards
box model. Its a
major difference.
The standard box model says that the width property is equal to the content
width and all padding, borders and margins are in addition to the width.
The broken box model that IE uses says the width property is equal to the
content width, plus all padding and borders.
so using that, if for example I had the following:
div{
width: 10em;
padding: 1em;
border: .1em;
}
IE would actually subtract 2.2em from the 10em leaving just 7.8em for your
content. Standards rendering would use 10em and the padding and border
would be on their own.
Hope that helps
Sandy Clark
-Original Message-
From: Mike Soultanian [mailto:[EMAIL PROTECTED]
Sent: Friday, February 03, 2006 3:26 PM
To: CF-Talk
Subject: Re: OT: Issue with CSS and doctype
You might want to try the css-discuss list:
http://www.css-discuss.org
They are *very* good at everything css...
mike
Robert Everland III wrote:
> Can anyone help me out. When i change the doctype it completely changes
how it looks. I have no idea why. Can anyone explain. Raw css is first.
~|
Message: http://www.houseoffusion.com/lists.cfm/link=i:4:231317
Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/4
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4
Unsubscribe:
http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=11502.10531.4
Donations & Support: http://www.houseoffusion.com/tiny.cfm/54
Re: OT: Issue with CSS and doctype
You might want to try the css-discuss list: http://www.css-discuss.org They are *very* good at everything css... mike Robert Everland III wrote: > Can anyone help me out. When i change the doctype it completely changes how > it looks. I have no idea why. Can anyone explain. Raw css is first. ~| Message: http://www.houseoffusion.com/lists.cfm/link=i:4:231291 Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/4 Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4 Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=11502.10531.4 Donations & Support: http://www.houseoffusion.com/tiny.cfm/54
OT: Issue with CSS and doctype
Can anyone help me out. When i change the doctype it completely changes how it
looks. I have no idea why. Can anyone explain. Raw css is first.
...container {
color: #00;
font-family:tahoma, verdana, helvetica;
font-size: 11px;
background-color: #f1f1ed;
width:170px;
height: 100%;
border-right: buttonshadow 1px solid;
border-top: #f5f5f5 1px solid;
border-left: #f5f5f5 1px solid;
border-bottom: buttonshadow 1px solid;
padding-right : 1px;
padding-top : 1px;
padding-bottom : 1px;
}
...leftMenu {
color:#006699;
text-decoration:none;
font-weight:bold;
}
...leftMenu:hover {
color:#00;
text-decoration:none;
font-weight:bold;
}
...leftMenu:active {
color:#00;
text-decoration:none;
font-weight:bold ;
}
...Menu {
height: 20px;
padding-top : 2px;
padding-right : 5px;
padding-bottom : 3px;
padding-left : 2px;
border-right: buttonshadow 1px solid;
border-top: #f5f5f5 1px solid;
border-left: #f5f5f5 1px solid;
border-bottom: buttonshadow 1px solid;
background-color: #D4D0C8;
cursor:pointer;
color:#00;
}
...Option {
height: 20px;
padding-top : 2px;
padding-right : 5px;
padding-bottom : 3px;
padding-left : 16px;
background-color: #f5f5f5;
border-top : 1px solid #ff;
border-bottom : 1px solid #ff;
border-left : 1px solid #ff;
border-right : 1px solid #ff;
cursor:pointer;
}
...Options {
padding-top : 1px;
padding-right : 1px;
padding-bottom : 1px;
padding-left : 1px;
}
...imgPosition {
vertical-align: middle;
}
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en-AU">
Transportation Scheduler [LOGIN]
Text Folders
http://www.yahoo.com');"
onmouseover="this.style.background='#D8E4F8'"
onmouseout="this.style.background='#f5f5f5'">
Text Links
Text Links
Text Links
~|
Message: http://www.houseoffusion.com/lists.cfm/link=i:4:231285
Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/4
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4
Donations & Support: http://www.houseoffusion.com/tiny.cfm/54
