Doctype messes up CSS - Dev Articles

Dev Articles Community Forums Sponsor:

Ajax Application Generator Generate database and reporting .NET Web apps in minutes. Quickly create visually stunning, feature-rich apps that are easy to customize and ready to deploy. Download Now!

July 28th, 2007, 12:10 PM

athanasiusrc

Registered User

Join Date: Jul 2007

Posts: 6

Time spent in forums: 47 m
Reputation Power: 0

Doctype messes up CSS

I am building a new site that uses css instead of tables. When I add a doctype to the site, most of the css file gets ignored. If I leave off the doctype, the page displays (mostly) correctly. I can't figure out why.

Specifically, shoppingcartbox, sectionbar, topbar are some of the ignored bits from the css file while it does catch searchbox and newsletterbox.

Here is the code at the top of the page:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<base href="http://www.catholicchurchsupply.com/">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="STYLESHEET" href="layout.css" type="text/css" />

Here is the style sheet:

Code:

body {
	margin-left: 0px;
	margin-top: 0px;
	max-width: 1000px;
	min-width: 640px;
	padding: 0px 0px 0px 0px;
}

img {
	border: 0px;
	padding-bottom: 3px;
}

.bl {
	background: url(images/newsletterboxbl.jpg) 0 100% no-repeat;
	width: 20em;
}

.boxtext {
	padding-left: 2px;
}

.br {
	background: url(images/newsletterboxbr.jpg) 100% 100% no-repeat;
}

.cartbutton {
	background: url(images/cartButton.gif) no-repeat;
	height: 58px;
	margin-left: 5px;
	margin-top: -24px;
	width: 58px;
}

.infocell {
	background: #E0E8ED;
}

.newslettertitle {
	color: #4866AC;
}

.searchbutton {
	margin-top: 5px;
}

.sectionheader {
	color: #BD0000;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: medium;
	font-weight: bold;
	text-align: left;
}

.tl {
	background: url(images/newsletterboxtl.jpg) 0 0 no-repeat;
}

.tr {
	background: url(images/newsletterboxtr.jpg) 100% 0 no-repeat;
	padding: 10px;
}

.spacerCell {
	background: #154B66;
}

.submitbutton {
	background: green;
	color: white;
	font-size: medium;
	font-weight: bold;
}

.tableBackground {
	background: #E0E8ED;
}
	
.tableHeader {
	background: #C7D3DA;
}

#adspace {
	float: right;
	width: 50%;
}

#articlesectionright {
	background-color: #FFFFFF;
	border-bottom: solid 1px #9EB3CC;
	border-left: solid 1px #9EB3CC;
	border-right: solid 1px #9EB3CC;
	color: #000000;
	float: right;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	height: 190px;
	width: 49.7%;
}

#availabilitytext {
	color: #000000;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: x-small;
	margin-left: 10px;
	margin-top: 0px;
	text-align: center;
}

#cartitems a {
	background-color: White;
	color: Black;
	float: right;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: x-small;
	margin-right: 5px;
	margin-top: 1px;
}

#carttext {
	color: #000000;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: x-small;
	margin-left: 65px;
	margin-top: -54px;
	text-align: center;
}

#carttotal {
	color: #008000;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: x-small;
	font-weight: bold;
	margin-left: 6px;
	margin-top: 2px;
}

#categorycrumb {
	background: #E5E6D0;
	border-bottom: 1px #CCCC9E solid;
	border-right: 1px #CCCC9E solid;
	border-top: 1px #CCCC9E solid;
	float: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11pt;
	font-weight: bold;
	height: 29px;
	margin-left: -7px;
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 6px;
	text-decoration: none;
}

#categorycrumbcurrent {
	color: #FF0000;
	font-weight: bold;
}

#content {
	margin: 4px;
	width: 60%;
}

#featuresectionleft {
	background-color: #FFFFFF;
	border-bottom: solid 1px #9EB3CC;
	border-left: solid 1px #9EB3CC;
	color: #000000;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	height: 190px;
	width: 49.7%;
}

#footer {
	width: 100%;
}

#footer {
	clear: left;
	color: #000000;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-align: center;
}

/* safari and opera need this */
#header {
	max-height: 120px;
	width: 49%;
}

#header,#adspace,#menu,#menu2,#content,#sub-section,#footer {
	overflow: hidden;
}

#itemarea {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: small;
	text-align: center;
	width: 600px;
}

#itemcontent {
	margin: 4px;
	min-height: 350px;
	width: 600px;
}

#itemdetailtitle {
	font-weight: bold;
}

#itemoptions {
	float: right;
}

#itemsectiontext {
	color: #DB4104;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 14pt;
}

.itemspacer {
	background-color: #D8CAA8;
	height: 2px;
	margin-bottom: 6px;
	margin-top: 6px;
	width: 700px;
	float: left;
}

#itemtitle {
	color: #000000;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 14pt;
	font-weight: bold;
}

#itemvendor {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 8pt;
}

#menu {
	background-color: #9EB3CC;
	border-top: 2px solid #81817D;
	height: 40px;
	padding-top: 3px;
}

#menu2 {
	background-color: #E5E6D0;
	width: 20%;
	min-height: 600px;
}

#menu2,#itemcontent,#content,#sub-section,#searchbox,#itemarea {
	float: left;
}

#minimalcontent {
	margin: 4px;
	width: 997px;
}

#navigation {
  float: none;
  width:100%;
  line-height:normal;
  margin-left: 200px;
  	color: #FFFFFF;
  }
#navigation ul {
  margin:0;
  padding:10px 10px 0;
  list-style:none;
  }
#navigation li {
  float:left;
  background:url("images/leftUnFocusedTab.gif") #938DA5 no-repeat left top;
  margin:0;
	color: #FFFFFF;
  padding:0 0 0 9px;
  }
#navigation a {
  float:left;
  display:block;
  background:url("images/rightUnFocusedTab.gif") #938DA5 no-repeat right top;
  	color: #FFFFFF;
  padding:5px 15px 4px 6px;
  text-decoration:none;
  font-weight:bold;
  }
/* Commented Backslash Hack
   hides rule from IE5-Mac \*/
#navigation a {float:none;}
/* End IE5-Mac hack */
#navigation a:hover {
  color:#FFFFFF;
	background: url("images/leftFocusedTab.gif") #4B4659 left top no-repeat;
	padding-left: 10px;
  }
  
 #navigation a:hover span {
	background: url("images/rightFocusedTab.gif") #4B4659 right top no-repeat;
	color: #FFFFFF;
	font-weight: bold;
	height: 40px;
	padding-right: 10px;
}

#navigation #current {
  background-image:url("images/leftFocusedTab.gif") #4B4659 left top no-repeat;
	text-decoration: none;
  }
#navigation #current a {
  background-image:url("images/rightFocusedTab.gif") #4B4659 right top no-repeat;
  color:#FFFFFF;
  padding-bottom:5px;
	text-decoration: none;
  }

#orderingbox{
	border-bottom: 1px solid #9EB3CC;
	border-left: 1px solid #9EB3CC;
	border-right: 1px solid #9EB3CC;
	height: 150px;
	margin-bottom: 8px;
	margin-left: 6px;
	margin-right: 0px;
	text-align: center;
}

#searchbox {
	margin-left: 4px;
	margin-top: 5px;
	width:200px;
}


#newsletterbox {
	border: 1px solid #006699;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: xx-small;
	font-weight: bold;
	height: 55px;
	margin-bottom: 20px;
	margin-left: 10px;
	margin-right: 0px;
	margin-top: 20px;
	padding: 3px;
	text-align: center;
	width: 170px;
}
.sectionbar {
	background-color: #4B4659;
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: smaller;
	font-weight: bold;
	height: 18px;
	margin-bottom: 2px;
	padding-left: 4px;
	padding-top: 2px;
}

.shoppingcartbox{
	border-bottom: 1px solid #9EB3CC;
	border-left: 1px solid #9EB3CC;
	border-right: 1px solid #9EB3CC;
	margin-bottom: 8px;
	margin-left: 6px;
	margin-right: 0px;
	min-height: 94px;
}

#spacer {
	background-color: #D8CAA8;
	height: 2px;
	margin-bottom: 6px;
	margin-top: 6px;
	width: 430px;
}

#sub-section {
	float: right;
	width: 190px;
}

#topbar {
	background-color: #4B4659;
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: smaller;
	font-weight: bold;
	height: 18px;
	margin-bottom: 6px;
	padding-top: 2px;
	text-align: right;
	width: 1000px;
}

#topbar a{
	color: White;
}


	#TJK_SlideMenu * {margin:0;padding:0}
	#TJK_SlideMenu {width:200px;background:#fff;padding:1px;margin-left:0;margin-top:6px;font:12px Verdana,sans-serif;background: #fff;}
	#TJK_SlideMenu a {display:block;text-decoration:none}
	#TJK_SlideMenu dt a {
	position:relative /* IE bug */;
	padding:.4em 0 .4em 1.8em;
	border: 1px solid;
	border-color: #FFF #AAA #AAA #FFF;
	color:#ffffff;
	font-weight: bold;
	}
	#TJK_SlideMenu ul {background:#666}
	#TJK_SlideMenu li {list-style-type:none;background:#E5E6D0;color:#999;border: 1px solid;border-color: #FFF #AAA #AAA #FFF;}
	#TJK_SlideMenu li a {padding:.4em 0 .4em .9em;color:#666;line-height:1.2em/* for FF */}
	#TJK_SlideMenu li a:hover,
	#TJK_SlideMenu li a:active,
	#TJK_SlideMenu li a:focus {color:#fff;background:#4B4659;}
<!--[if lt IE 7]>
#TJK_SlideMenu a.TJK_Skipper,
#TJK_SlideMenu dd a {zoom:1;}
#TJK_SlideMenu .TJK_SlideMenu_ShowDD {display:block;}
<![endif]-->
<!--[if IE 5]>
#TJK_SlideMenu * {height:0;}
<![endif]-->

July 29th, 2007, 10:32 AM

Mittineague

Contributing User

Join Date: Jul 2005

Location: West Springfield, Massachusetts

Posts: 530

Time spent in forums: 1 Week 21 h 4 m 40 sec
Reputation Power: 3

doctype

Hi athanasiusrc, welcome to the forums,
A doctype is needed so that browsers will render the page as it is coded, otherwise they "do the best they can" (eg. use quirks mode).
Did you submit the page to the W3C validator? Once the page is valid, then you can adjust the CSS and should see the effects of any changes without worrying about whether the browser is ignoring the CSS or not.

July 29th, 2007, 08:54 PM

athanasiusrc

Registered User

Join Date: Jul 2007

Posts: 6

Time spent in forums: 47 m
Reputation Power: 0

The validator seems to have a problem (or I'm not clear on proper form coding).

This is a frequent error the validator shows:

Code:

Line 54, Column 86: document type does not allow element "INPUT" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS" start-tag.

…="keywords" size="20" maxlength="100"> <input type="image" name="search" valu

✉

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

Here is the code it doesn't like:

Code:

<form action="index.cfm/index.htm" method="post">
					<input type="image" src="/images/addbutton.gif" alt="Add To Order" align="middle" onclick="form.submit()">
					<input type="hidden" name="Category" value="0">
					<input type="hidden" name="ItemNotes" value="">
					<input type="hidden" name="FuseAction" value="cart.AddToOrder">
					<input type="hidden" name="SKU" value="876">

					<input type="hidden" name="Qty" value="1">
				</form>

It gives an error for every input tag.

July 31st, 2007, 03:16 PM

Mittineague

Contributing User

Join Date: Jul 2005

Location: West Springfield, Massachusetts

Posts: 530

Time spent in forums: 1 Week 21 h 4 m 40 sec
Reputation Power: 3

input elements

I not a CSS guru by any means, but I've always put my input tags inside either table or fieldset tags, inside the form tags.
I imagine you could try something like
<form><div><input>....
or
<form><p><input>....
and then style it if the default margins mess up the layout.

July 31st, 2007, 03:55 PM

athanasiusrc

Registered User

Join Date: Jul 2007

Posts: 6

Time spent in forums: 47 m
Reputation Power: 0

The fieldset tag? I know I heard of that somewhere. That fixed the form errors and the page is fine except for a couple align attributes to fix. The site still is ignoring parts of my style sheet when I have a doctype on.

Any other suggestions on what to do here?

I would post images of the site broken and not but I'm not allowed to yet.

July 31st, 2007, 09:24 PM

athanasiusrc

Registered User

Join Date: Jul 2007

Posts: 6

Time spent in forums: 47 m
Reputation Power: 0

So I uploaded the site to our server to do some testing there and lo-and-behold, Firefox now displays properly and IE displays mostly properly. I guess there is some kind of incompatibility with XP IIS and doctypes!

I've still got some work to do as the site layout is still rough, but the one thing that I can't figure out is why IE is ignoring a css body property max-width: 1000px;.

Any thoughts? The site is at www[dot]catholicchurchsupply[dot]com

August 1st, 2007, 06:25 AM

Mittineague

Contributing User

Join Date: Jul 2005

Location: West Springfield, Massachusetts

Posts: 530

Time spent in forums: 1 Week 21 h 4 m 40 sec
Reputation Power: 3

valid CSS

Unfortunately, having valid mark-up and CSS is only the best "starting point" when it comes to coding pages. Different browsers, even different versions of the same browser, interpret things differently. Depending on what you are trying to do, you may have to use "tricks" like using conditional comments for IE specific CSS and various "hacks".
If you Google for -
IE max-width CSS
- you should find some solutions in the results that will help

August 1st, 2007, 09:24 AM

athanasiusrc

Registered User

Join Date: Jul 2007

Posts: 6

Time spent in forums: 47 m
Reputation Power: 0

Thanks. I found a solution to the width problem but now IE and Firefox are both ignoring the same portions of the stylesheet again. Removing the IE hack didn't fix the style sheet ignoring.

August 1st, 2007, 09:45 AM

athanasiusrc

Registered User

Join Date: Jul 2007

Posts: 6

Time spent in forums: 47 m
Reputation Power: 0

I got it! When using a non-transitional doctype, class and id names are case-sensitive.

Found the answer here: codingforums[dot]com/archive/index.php?t-99780.html

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: