Learn VBA & Macros in 1 Week!

CSS - Absolute Middle, Crossbrowser, Doctype

Full Excel VBA Course - Beginner to Expert

Absolute Middle, Crossbrowser, Doctype	View Content

Full Excel VBA Course - Beginner to Expert

Absolute Middle & Other Positions Using Css2

Similar Tutorials

View Content

Greetings,

I posted this question in the HTML forum, too, but I realize that maybe the answer to this question would better be provided by CSS2, rather than using HTML tables, as the latter may be deprecated in the future--it seems--as a layout tool.

I used to be able to position an image, or anything basically, in a table cell that is in the "absolute middle" of a web page, i.e. centered horizontally and vertically, using Dreamweaver MX. But, for some weird reason, I cannot do it anymore using Dreamweaver MX 2004. No matter what I try, the image or contents of the cell or table are always at the top of the page, centered horizontally, yes, but not vertically.

I tried nesting a table within a table, and I tried using a percentage-based 3x3 table, but nothing works. I noticed that the "height" attribute of a table is deprecated now, thus, you should not give a table a "height" of 100%. Is that the reason? And if so, then what is another way to do this now? I mean putting an image or so in the absolute middle or center of a page? Better yet...

What I really want to do is to place an image in the vertical center of a page, yet a bit to the side, but within proportion to the page of the visitor. Meaning, I'd like the center of the image, for example, to always have 50% of the page over it and 50% below it, exactly; and I'd like it to have 33% of the page to its right side, for instance, and 66% to its left side, always, regardless to the visitor's resolution. Now how can I do this, especially using Dreamweaver MX 2004?

Thanks for anyone taking the time to help. I'll try to attach an image to demonstrate what I mean visually.

http://forums.devshed.com/attachmen...tachmentid=4599

Css Crossbrowser Problem

Similar Tutorials

View Content

hi,

can anybody tell me that how can i will make following css styles to be viewed same in both internet explorer and mozilla explorer(cross browser compatibility).
here is my code

thanks
mrjameer

<style type="text/css">
html, body { margin: 0px; padding: 0px; border: 0px;background: url(bg1.gif)repeat-x;
background-color:#66CCFF;
}
#navcontainer ul
{
padding-left : 0;
margin-left : 80px;
margin-top:20px;
background-color : #036;
color : #FFFFFF;
float : left;
width : 73.2%;
font: 100% tahoma;line-height: 1.7;
}

#navcontainer ul li
{
display : inline;
}
#navcontainer ul li a
{
padding : 0.2em 1em;
background-color : #036;
color : #ffffff;
text-decoration : none;
float : right;
border-right : 1px solid #fff;
}

#navcontainer ul li a:hover
{
background-color : #369;
color : #fff;
}

#header
{
margin-left : 80px;
margin-top : 0;
float:left;
}

#right
{
position : relative;
height : 779px;
width : 267px;
float : right;
margin-right:72.3px;
background-color : #ffffff;
margin-top : -8px;
color:#000000;
font: 100% tahoma;
background-image: url(h2.jpg);
background-repeat: repeat-x;}

#left1
{
position : absolute;
/*right : 155px; */
margin-right:400px;
margin-top : -8px;
margin-left:160px;
height : 230px;
width : 564px;
float : left;
font: 100% tahoma;
/*background-color : #FFFFFF; */
color:#23238e;
background-image: url(a1.jpg);
background-repeat: repeat-x;}

#left2
{
position : absolute;
/*right : 155px; */
margin-right:400px;
margin-top :221px;
margin-left:160px;
height : 296px;
width : 564px;
float : left;
font: 100% tahoma;
background-color : #e6e6e6;
color:#000000;
background-image: url(a2.jpg); background-repeat: repeat-x;}

#about_imgtable
{
width:218px;
margin-left:50px;
margin-top:8px;
position:relative;
/*margin:auto;*/
/*border:1px dotted navy;*/
border-style:groove;
padding:1px;
border-color:#006400;
clear:right;
border-width:2px;
color:#ffffff;
background-image: url(hostingbg.jpg);
background-repeat: repeat-x;
}

#about_img
{
float:left;
padding:0 10px;
margin-top:5px;
}
#about_right_text
{
display:table-cell;
}
#product_imgtable
{
width:220px;
margin-left:300px;
margin-top:-158px;
position:relative;
/*margin:auto;*/
/*border:1px dotted navy;*/
border-style:groove;
padding:1px;
border-width:2px;
border-color:#006400;
background-image: url(tutorialsbg.jpg);
background-repeat: repeat-x;
color:#ffffff;
}

#product_img
{
float:left;
padding:0 10px;
margin-top:5px;
}
#product_right_text
{
display:table-cell;
}

#community_imgtable
{
width:470px;
margin-left:50px;
margin-top:14px;
position:relative;
/*margin:auto;*/
/*border:1px dotted navy;*/
padding:1px;
border-style:groove;
clear:right;
border-color:#006400;
border-width:2px;
background-image: url(toolsbg.jpg);
background-repeat: repeat-x;
color:#ffffff;
}

#community_img
{
float:left;
padding:0 10px;
margin-top:5px;
}
#community_right_text
{
display:table-cell;
margin-top:10px;
}
#left3
{
position : absolute;
/*right : 155px; */
/*margin-right:500px;*/
margin-top :517px;
margin-left:160px;
height : 291px;
width : 285px;
float : left;
font: 100% tahoma;
background-color : #ffffff;
color:#000000;
background-image: url(a3.jpg);
background-repeat: repeat-x;
}

#lo
{
width:260px;
height:200px;
margin-left:10px;
margin-top:40px;
position:relative;
/*margin:auto;*/
/*border:1px dotted navy;*/
padding:1px;
background-image: url(greens.gif);
background-repeat: repeat-y;
color:#ffffff;
border-styleutset;
border-color:#ff69b4;
}

#login
{
margin-left:100px;
margin-top:30px;
}
#offline
{

margin-left:40px;
margin-top:30px;

}
#left4
{
position : absolute;
/*right : 155px; */
/*margin-right:500px;*/
margin-top :517px;
margin-left:445px;
height : 291px;
font: 100% tahoma;
width : 279px;
float : left;
background-color : #ffffff;
color:#000000;
background-image: url(a4.jpg);
background-repeat: repeat-x;
}

#shamroc_imgtable
{
width:260px;
height:190px;
margin-left:10px;
margin-top:5px;
position:relative;
/*margin:auto;*/
/*border:1px dotted navy;*/
padding:1px;
background-image: url(scriptsbg.jpg);
background-repeat: repeat-x;
color:#ffffff;
border-styleutset;
border-color:#FF69B4;
}
#shamroc_img
{
float:left;
padding:0 20px;
margin-top:5px;
}
#shamroc_right_text
{
display:table-cell;
word-spacing:5px;
}

#blank_footer
{
width : 831px;
clear : both;
height : 150px;
background-color : #6f636b;
font: 100% tahoma;
color : #000066;
text-align : center;
position : absolute;
margin-left : 160px;
background-image: url(a5.jpg);
background-repeat: repeat-x;
color:#ffffff;
}

#footer
{
width : 831px;
clear : both;
height : 150px;
background-color :#ffffff;
color : #000000;
text-align : center;
position : absolute;
margin-left : 160px;
margin-top:150px;
font: 100% tahoma;
background-image: url(g.jpg);
background-repeat: repeat-x;
}

</style>

Crossbrowser Strangeness

Similar Tutorials

View Content

I'm currently working on a rather challenging development (at least for me) and trying to resolve some CSS strangeness that I can't track down the root of.

The basic design is working out... or was until I started checking for cross-browser compatibility.

Currently:

It looks good/works in Safari/Gekko and IE5Mac.

The top of the page draws correctly in Firefox/Netscape/Mozilla, but the content areas are white rather than showing through to the Faux-columns below (I even tried setting redunant background: transparent on the divs to see if it was a parenting bug)

Opera 7+ looks pretty much right, except it is adding a 15px margin to the top of the body of the page (before the viewport) that no other browser is adding.

I haven't even seen it in IE5/6 Win, but I'm pretty sure it's screwed there.

If anyone is particular familiar with one of these issues, I'd greatly appreciate it if you could point me in the right direction of an article or point out a chunk of my code that doesn't make sense or is causing the error.

The template page is here.

The CSS document can be seen here.

Thanks in advance to anyone who has time to assist.

--
Aiden

About Crossbrowser Scrollbar Colors

Similar Tutorials

View Content

Hi guys
I've this code, it looks fine in IE (damn..) but it does not look in Firefox

Code:

body {
scrollbar-track-color: #D8AFAF; 
scrollbar-face-color: #660000; 
scrollbar-highlight-color: #927373; 
scrollbar-3dlight-color: #663333; 
scrollbar-shadow-color: #660000; 
scrollbar-darkshadow-color: #660000; 
scrollbar-arrow-color: #FF0000;  
}

What's wrong ?
- my Firefox version (1.0.1)
- the css code ?

thanks

Crossbrowser Width Problem

Similar Tutorials

View Content

I am currently workin on a new design for my site and have decided to go tabless (the way it should be). I have gotten pretty much as far as I can apart from adding the content. I have been testing my design in both IE6 and FireFox 1.0.4. I have noticed some problems in width in both browsers.

Here is the link to my site:
Panik Design's New Layout

In IE6 the main div does not stretch out to 700px, It only lines up with the header div when i change the width to 704px. But when I do that , Firefox is then out of line because Firefox measured it correctly the first time.

As for Firefox problem. FF is not measuring the module widths correctly. They are set to 150px and would like them to display like they do in IE6. I will now post my code:

Code:

<html>
<head>
<title>Panik Designs</title>
<style type="text/css">
body {
	margin: 0px;
	background: #fff;
	color: #000;
	font-size: 10pt;
	font-family: verdana;
}
h1 {
	font-family: verdana;
	color: #000;
	font-weight: bold;
	font-size: 24pt;
}
#header {
	border-left: 2px solid #000;
	border-right: 2px solid #000;
	background: #FBF2D9;
	width: 700px;
	margin: 0;
}
#main {
	position: relative;
	width: 700px;
	border-left: 2px solid #000;
	border-right: 2px solid #000;
	height: 100%;
	background: #FBF2D9;
}
#leftcontent {
	position: absolute;
	padding-top: 10px;
	left: 0px;
	background: #FBF2D9;
	width: 150px;
	text-align: center;
}
#rightcontent {
	position: absolute;
	padding-top: 10px;
	right: 0px;
	background: #FBF2D9;
	width: 150px;
}
#centercontent {
	position: absolute;
	left: 150px;
	padding: 10px;
	background: #FBF2D9;
	width: 400px;
	text-align: left;
}
#moduletop {
	position: relative;
	width: 140px;
	padding: 5px;
	color: #fff;
	font-weight: bold;
	text-align: center;
	border: 1px solid #000;
	background: #26476C;
}
#modulebottom {
	position: relative;
	width: 140px;
	padding: 5px;
	color: #fff;
	font-weight: bold;
	text-align: left;
	font-size: 10pt;
	border: 1px solid #000;
	border-top: 0px;
	background: #4184B4;
	background-image: url("images/modulefill.jpg");
	background-position: 0% 100%;
	background-repeat: repeat-x;
}
</style>
</head>
<body>
<center>
<div id="header"><img src='images/header.jpg'></div>

<div id="main">

<div id="leftcontent">
<div id="moduletop">: Navigation :</div>
<div id="modulebottom">
Item one<br>
Item two<br>
Item 3<br>
</div>
This is the left content
</div>

<div id="centercontent"><h1>Heello</h1><br>Thisis where the center content will go. blah blah blabh blah all of this is fun fun fun i like cheese.</div><div id="rightcontent"><div id="moduletop">: Statistics :</div>This is the right Content</div>
</div>
</body>
</html>

I have not added a doctype because it adds even more problems to the page. As shown on this page:

Doctype problems:
Doctype problems

Absolute Div Below Absolute Div (spacing / Different Font Sizes?)

Similar Tutorials

View Content

on my page http://tampabay-online.org/cetr/news/

the left side :

Code:

.content {
	position:relative;
	width:300px;
	margin-left: 155px;
	margin-top: 20px;
	border:1px solid black;
	background-color:white;
	padding:10px;
	z-index:3;
}

and the two on the right are :

Code:

#right {

	position:absolute;
	width:200px;
	top:20px;
	left:500px;
	border:1px solid black;
	background-color:white;
	padding:10px;
	z-index:1;

}

#sidebar {

	position:absolute;
	width:200px;
	top:400px;
	left:500px;
	border:1px solid black;
	background-color:white;
	padding:10px;
	z-index:1;

}

If someone has a their font bigger on the artists section then the div will grow and go under the sidebar div.

Any way to make these relative or fix that problem?

Thanks!

Doctype

Similar Tutorials

View Content

Hello,

I am trying to make my webpage, www.jwwebdesign.info, W3 Valid. However, when I insert:

Code:

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

at the top of the page, and try to vaildate, it does not like my <table height="100%"> What is a CSS alternative I can use so that I can validate my page (height: 100% won't work).

Thanks,
Jeff

What Does Css Has To Do With The Doctype?

Similar Tutorials

View Content

I know this may sound a stupid question. However I have been reading about XHTML and CSS for these last few weeks.

From what I understand a DocType is there to determine if an XHTML document is well-formed.

Therefore from my understanding the DocType should have not be related with CSS.

However today I wrote the following peace of code: Code:

<html>
 <head>
  <title>Test</title>
  <style>
   div > span { color: red; }


  </style>
 </head>
 <body>
  <div><p>
    <span>hello</span>
   </p><span>World!!</span>
  </div>


 </body>
</html>

On Internet Explorer 7 it did not work since 'Hello World!!' was writen all in black. However on Firefox it worked fine since 'World!!' was correctly displayed in red. Then I added the Strict DocType to the page: Code:

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

... and it started working on Internet Explorer 7 as well!

Now I am glad that it worked on Internet Explorer 7 when using the DocType (Strict). However isn't this wrong? I mean shouldn't this just work without the DocType since it is CSS related and not XHTML?

I am very new to all this and I understand that I may be missin something here! However I would be very greatfull if someone could explain me if this behavior from Internet Explorer 7 is correct or not!

Thanks and Regards,
Sim085

Yes Doctype, No Backgrounds!

Similar Tutorials

View Content

I've just installed a HTML Doctype declaration after having issues making my webpage work on Firefox and IE. After installing the declaration, the colour of my top nav-bar refuses to change... it stays white, and the text, unreadable. This happens on IE and Opera, but works fine with Firefox.

I've also been recieving complaints that my page is non-functioning with the font appearing "way too small".

If anyone can give me any ideas, and also point out a simple explanation of the difference between the box model and the W3 layout model, I'd be grateful...

Thanks for the advice people gave me last time; I at least managed to get the page working with Firefox...

Link to page

Css Doctype Problem

Similar Tutorials

View Content

hi, I am trying to do DIV 100% height to match the browser height. as I read only way is to make body tag set to 100% and then whatevers is defined 100% within body will readjust at 100% height.

problem i found, it doesnt work with any Doctype I set for the page, not xmlns transitional, strict, 4.01 strict , transitional, you name it.

BUT as soon as I remove Doctype and start page with just <html> tage this CSS works.
I ve tried to link css and embed, same results.

W3C validation checks out with no errors.
hers 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>CSS</title>


<style type="text/css">
<!--
body {
    margin: 0px;
    padding: 0px;
    background-color:#333333;
    height: 100%;
}

.centerwrapper {
width: 1000px;
height: 100%;
background-color:#0099FF;
margin-left: auto;
margin-right: auto;

}

-->
</style>
</head>
<body>

<div class="centerwrapper"></div>

</body>
</html>

if someone has an idea what doctype would work or if theres another problem with this.

Doctype Interfering With Css?

Similar Tutorials

View Content

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...

Css Specific To Doctype?

Similar Tutorials

View Content

I just realized tonight that CSS I have been using with my XHTML 1.1 documents does NOT work with HTML 4 documents. Is this common? I never knew there was a difference in CSS functionality between doctypes.

Is This A Strict Doctype?

Similar Tutorials

View Content

Is this a strict (or even valid) doctype?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

what should I expect the UA to behave like?

Css Problem Without Doctype Declaration

Similar Tutorials

View Content

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 Dont Think A Doctype Can Fix This Mess...

Similar Tutorials

View Content

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?

Border:none And Doctype Conflict

Similar Tutorials

View Content

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?

Doctype Not Working? And Charset= Either?

Similar Tutorials

View Content

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

Vb3 Rc3 Generated Doctype Screws Up My Css

Similar Tutorials

View Content

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?

Box Model / Doctype Drama

Similar Tutorials

View Content

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!)

Page With Doctype Not Loading Css

Similar Tutorials

View Content

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; }