CSS - What Does Css Has To Do With The Doctype?

I'm having a CSS problem. Everythign i desinged worded fine until i included a <!DOCTYPE> I'm using XHTML 1.0 Strict and everything validates fine, as well as the CSS (according to w3c)


Alink to the site:
The "E" Proposition
here is teh CSS code I am Using (the navigation links)
Code:

.Nav1 a:hover{color: #666666;}

.Nav1Td{border-right: 1px solid #999999;background-color: #000000;}

.Nav1{padding: 2px 0 10px 0px;font-family: MS Tahoma, Arial;}

.Nav1 .line{border-top: solid 1px #000000;margin: 5px 0 5px 0;}

.Nav1>.line{margin: 6px 0 4px 0;}

.Nav1 h4{margin: 4px 0px 5px 5px;font-size: 10pt;font-family: MS Tahoma, Arial;}

.Nav1>h4{margin: 4px 0px 4px 5px;}

.Nav1 h3{margin: 4px 0px 5px 5px;font-size: 8pt;font-family: MS Tahoma, Arial;}

.Nav1>h3{margin: 8px 0px 4px 5px;}

.Nav1 ul{list-style: none;margin: 0;padding: 0;}

.Nav1 li{margin: -4px 2px;width: 90%;}

.Nav1>ul>li{margin: -3px 2px;}

.Nav1 a{position: relative;background-image: url(images/off.gif);width: 115px;cursor: pointer;display: block;color: #000000;font-family: MS Tahoma, Arial; font-size: 9pt;padding: 2px 4px 4px 8px;margin: 1px 0px; text-align: justify;text-decoration: none;}

.Nav1>ul>li>a{border: 1px solid transparent;padding: 2px 4px 4px 8px;}

.Nav1 a:visited{color: #000000;}

.Nav1 a:hover{border: 1px solid #cccccc;margin: 0px;padding: 2px 4px 4px 8px;background-image: url(images/over.gif);text-decoration: none;}

.Nav1>ul>li>a:hover{margin: 1px 0px;} 

might i have made a careless error that CSS validator is not picking up on??

If I take out the doctype tag, everything works fine. But of course, i dont want to do that...heh

any help would be greatly appreciated...

Standards newbie here. I've used CSS plenty before, but always in combination with awful inelegant table madness. I'm trying to do right by the W3C this time.

Except that the doctype declaration is out to kill me.

I've written code that clearly isn't HTML 3.2 (as the current doctype declaration says), but if I bump up the doctype declaration to something standards-happy, like, say, 4, the document instantly goes haywire, and no amount of fiddling with my EditCSS plugin in Firefox will fix it.

Except for the whole non-validating thing, this wouldn't be a problem, except that IE is having box-model problems. When I give my main div (#blogmain) the right width (837 px), IE stacks the two floated divs inside it, instead of putting them next to each other. You may notice the futile box model hack I tried to throw at it, but I guess that really doesn't work in IE 6.0.

Please, someone, help me fix my doctype.

Here's the style sheet, for you CSS wizards that don't even need to look at the thing to detect the problem:
Code:

<style type="text/css">
body { margin: 0; padding: 0; font-size: 75%; background-color: #2E3E4C; font-family: Verdana, Arial, Helvetica, sans serif; font-size: 1em; }

div {  voice-family: "\"}\""; voice-family: inherit; }

* html #content { width: 839; w\idth: 837; }

#blogmain { position: absolute; left: 0; padding: 0; width: 837; background-color: #83776E; border: 1px solid #000000; }

#content { float: left; width: 678; background-color: #FFF}

#content h3 { margin: 0; font-size: .7em; text-align: center; }

#content h1 { margin: 0; }

#content h2 { margin: 10 5 5 10; }

div.entry { border: 1px solid #83776E; width: 658; margin: 10; }

.entry h1 { font-size: .9em; padding: 2px; border-bottom: 1px solid #83776E; background-color: #E0DDDB; }

.entry p { margin: 0; padding: 5; font-size: .7em; line-height: 1.5em; }

div.entrybottom { border-top: 1px solid #83776E; color: #FFF; background-color: #83776E; }

#sidebar { float: left; padding: 0; margin: 0; width: 159; background-color: #83776E; }

#entries { margin: 0; font-size: .6em; padding: 5; color: #FFF; }

#entries p { margin: 10; }
</style>

Here's the page again. And here's what it looks like with a 4.01 doctype declaration.

(Also, bonus points for anyone who can tell me why Firefox adds an extra 1px line at the bottom my second .entrybottom div!)

Hi,

I made an html document, and a css file, works allright, but when i delete the doctype declaration, it's not working correctly anymore -> the body width is gone, and my content is stretched, losing my left and right margins.

Code:

body {
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #666666;
	width: 710px;
	margin-left: auto;
	margin-right: auto;
	font-size: 0.9em;
	margin-bottom: 3em;

The problem is, that i will use this css file for an xml file, transformed by xslt, and the resulting html file doesn't have a doctype specification, that means i can't seem to add a doc spec and still keep my xslt file valid.

any suggestions to solve this problem..?

thanks a lot,

jarra

I'm using IE7 (becuase my company demands it) and I have the following code
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<body>
<form>
<input name='reason' type='text' size='75' value='' style='border:none;'/>
</form>
</body>
</html>

and it shows a border in my input even though there's a 'border:none;'
but when I remove the
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The border dissapears! Is there a different doctype that I'm supposed to be using here?

I have a page that will not load external CSS. Tested in Firefox and Opera. If I remove the doctype then the CSS loads and affects the page. This is the HTML:
Code:

<!DOCTYPE HTML PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<title>Insert Notes</title>
<meta http-equiv='content-type' content='text/html; charset=utf-8' />
<meta http-equiv='cache-control' content='no-cache' />
<meta http-equiv='pragma' content='no-cache' />
<meta http-equiv='expires' content='0' />

<link rel='stylesheet' type='text/css' href='/test.css' />

</head><body>

<h1>Beer</h1>

<p>test</p>

</body></html>

And this is the CSS:
Code:

body{ background-color: gray;} 
p { color: blue; } 
h1{ color: white; }

Ok, some trouble with Fire Fox and IE.

I am creating a site for Ernies Inn and for right now I am hosting it here until I am done and the owner is willing to have it.

http://ernies.bombinaid.com

Problems

IE:
The main box areas in each page keeps going over the menu!

FireFox:
In the menu page it seems every time the mouse goes over a h3 tag it has a mouse over effect. I am using <a name="something"> for the page jumping.

Here is the css code:

Code:

body      {background-color: black}
.header   {width: 100%; margin-left: -1px; margin-top: -4px;}
.links    {width: 100%; text-align: center; background-image: url('defult.gif'); background-repeat: repeat-x;}
.main     {background-color: #cc3333; height: auto; width: 700px; margin-top: -34px; margin-left: 7cm;}
.main2    {background: url(corner1.gif) 0 100% no-repeat}
.main3    {background: url(corner2.gif) 100% 100% no-repeat}
h3        {color: #ffffff; font-family: Arial; font-size: 30px;}
a:link    {text-decoration: underline; color: black;}
a:hover   {text-decoration: underline; color: black;}
a:visited {text-decoration: underline; color: black;}
hr        {color: white}
img.ajm113 {margin-left: 30cm;}

Can someone help me out here?

Hello, this is an ego crasher, just when I was getting to master CSS, I hit botton with html / CSS.

I wanted to add stuff on this page, but the way frontpage 2006 sees hebrew, and spanish is just wrong.

This page happens to be spanish with hebrew, the letters go weird. I have work in many spanish / hebrew sites, and tried without success to see why my hebrew goes wild, then, the spanish does the same. I tried to put the doctype, and the title lowers it self? then the charset, not matter what lenguages I stipulate, including do not work

<meta http-equiv="Content-Language" content="es">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

Which worked for me in other sites! Below is my link I am having hell with. If any one can share light in to the problem. PLEASE!!!

(URL address blocked: See forum rules)

Thanks,

Karl

I am trying to develope http://www.hotlinkforums.com/, but why does the doctype that is generated by the forums screwup my styles. When I take it out of my homepage it makes my stylesheet work correctly, but when I use it it doesn't. Does it matter if I don't use the doctype? Will that screw up search engine ranking or anything?

Also what the heck is all of this in my homepage?:
<html dir="ltr" lang="en">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Cache-Control" content="no-cache" />
<title>HotLink Forums - powered by vBulletin</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="generator" content="vBulletin 3.0.0 Release Candidate 3" />
<meta name="keywords" content="vbulletin,forum,discussion,bulletin board,hotlink,hosting,linux,vb,domains,reseller,affordable,cheap" />
<meta name="description" content="Message Boards for HotLink Hosting" />

Does the direction and lagnuage statements in the html tag matter towards anythign important?
What do all these weird meta tags such as pragma, expires, cache-control, generator do and do I need them there?
Do the meta tags below the title need to be below the title because I know I can put them above it with the others.
Also, why is there a blank white space at the top of the forums?
And why does the background to my td at the bottom not work?

First, the site is,
http://www.silver-dawn.net

Now, my problem is that when I do not have an XHTML 1.0 Transitional doctype in, the page stretches perfectly to the bottom, as it should. But when I add this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

It doesn't stretch the way it should.

Now, I'm assuming there's something messed up with my CSS, but I'm still new at it, so I can't figure out what is causing this.

Here is my CSS:

Code:

	html body
	{
	 margin:0px;
	 background: url(http://www.silver-dawn.net/images/sdr/bgbig.jpg) repeat-x;
	 background-color:#222239;
	 width:100%;
	 height:auto!important;
	 height:100%;
	 text-align:center;
	}
	
	#expand
	{
	 width:764px;
	 height:auto!important;
	 height:100%;
	 min-height:100%;
	 color: #FFF;
	 background: url(http://www.silver-dawn.net/images/sdr/centertile2.jpg);
	 margin-left:auto;
	 margin-right:auto;

	 text-align:left;
	}
	
	html>body #menubuttons li{padding-top:6px;}
	
	#content
	{
	 width:750px;
	 padding:0px;
	 margin-left:7px;
	 margin-top:0px;
	 margin-bottom:0px;
	}
	
	#menu
	{
	 width:752px;
	 height:25px;
	 background: #242449;
	 margin-left:7px;
	 margin-top:0px;
	 padding-top:0px;
	 font-size:70%;
	}
	
	#content p
	{
	 padding-left:20px;
	 padding-right:10px;
	 padding-top:10px;
	 font-family:arial;
	 font-size:70%;
	 margin:0px;
	 
	}
	
	#step
	{
	 font-size:110%;
	 font-family:arial;
	 margin-bottom:0px;
	 padding-bottom:5px;
	 padding-left:10px;
	 margin-top:0px;
	}
	
    #expandbottom
	{
	 width:764px;
	 color: #FFF;
	 background: url(http://www.silver-dawn.net/images/sdr/bottombg2.jpg);
	 margin-top:0px;
	 margin-left:auto;
	 margin-right:auto;
	 margin-bottom:0px;
	 text-align:center;
	 font-size:70%;
	 font-family:arial;
	}
	
    #menuButtons ul
	{
	  margin:0;
	  margin-left:7px;
      padding: 0;
      list-style-type: none;
    }
	
    #menuButtons li
	{
	  height:15px;
      width: 107.4px;
      /*margin-right: 1em;*/
	  font-family: verdana;
	  font-size:8pt;
      background: #222239;
      text-align: center;
	  margin:0px;
	  margin-left:0%;
	  padding-top:0px;
      float: Left;
	  border-right: 0px solid #000;
	  border-bottom: 2px solid #222239;
    }
	
    #menuButtons li:hover
	{
      background: #222c4a;
	  border-bottom: 2px solid #FFF;
    }

If anyone can help me with this problem, I would greatly appreciate it.

I need to validate an xhtml frameset but I dont want borders on my frames and dont want them movable. I'm lost as to how to accomplish this with CSS.

Thanks
Dave

I am building a site using CSS for the layout instead of tables and I have run into kind of a brick wall on the very last layout issue. Before I explain the issue I want to link you to the current version of the page

IE Doctype
Doctype Style
IE NoDoctype
NoDoctype Style

The problem I am running into is related to the way Firefox and IE handle margins and padding for a div container. Firefox takes the width (in this case for the #content_body_left div) of the div and adds the margins and padding to achieve the total width of the item. In IE, the margins and padding are built into the defined width. That results in a horizontal alignment problem. You can correct that behaviour in IE by defining a valid doctype at the start of the document. Doing that results in my div columns no longer stretching 100% vertically to meet the limit of the container.

Defining the doctype doesnt screw things up in Firefox, just IE. Any hacks or suggestions for fixing this?

Below an input text field I want to diplay a div with the same width. Both refer to the same class

Code:

.fieldWidth{width:250px;}

However, once I add the XHTML 1.0 Doctype the input field becomes about 10 pixes wider in IE, Forefox, Opera and Safari (probably in all others too).

Is this waht I have to expect when using xhtml (I hate it anyway :-(


Thanks for your info

I wanted to validate my site and started running the validator. SO i got one doctype and placed in my page(<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">)

But now, some of my css "tags" are not working. For and example:

Code:

#contact {

border:1px solid #666;
background:#FDF5E6;
width:500px;
margin-left:200px;
margin-top:20px;
padding:20px;
padding-top:5px;
font-size:15;
text-align:left;
}

The border, padding, width, background work. But font-size isnt working.

Any ideas?

Hi, I have added the following doctype to my XHTML document:
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">

This fixes several design problems, but my rollovers don't work anymore.
Am I using the right doctype?
here's the site, if you'd like to have a look: http://www.caillouette.com/Utilitrek/eight/services.php

How should I trouble shoot this?

thanks
-S