These forums are currently read-only due to receiving more spam than actual discussion. Sorry.

It is currently Sat Dec 02, 2017 4:11 pm Advanced search

<!DOCTYPE html> ignores external styles

Here you can discuss things related to HTML and the Web in general that do not fit in to other categories.

<!DOCTYPE html> ignores external styles

Postby bluegospel » Mon Jan 24, 2011 9:42 pm

Hi. I'm exploring html5 but when I use this doctype in my html, browsers ignore my link to external stylesheets. I've searched everywhere but haven't seen this come up.

Here's my html:

Code: Select all
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<link rel="stylesheet" href="standards1.css" />   <!--the "type" attribute can be dropped in html5-->

<title>Harvest Home</title>

</head>

<body>

<div ID="backDropStandard"> <!--ignored by browsers-->

<span style="float:left">

<span class="fontLtBlue" style="font-size:125px; font-family:stencil; font-weight:bold"> <!--format for .fontBlue is ignored-->
His
</span>

<span style="color:maroon; font-family:Comic Sans MS; font-style:italic; font-weight:bold; font-size:24px">
Harvest Worship Center
</span>

</span>

</div>

</body>

</html>


And here's my style sheet (.fontLtBlue and #backDropStandard are ignored):

Code: Select all
.bgBlueCream{background:6699cc}
.bgLightBlue{background:99ccff}
.bgMaroon{background:maroon}

.fontLtBlue{color:99ccff}

.heading{font-size:18px; text-align:center; font-style:italic; font-weight:bold; padding:10px; width:100%}

.menuLinks a:link, .menuLinks a:active, .menuLinks a:visited{text-align:left; padding:10px}

.menuLinks a:hover{font-style:italic; font-weight:bold}

#backDropStandard{width:980px; height:480px; background:6699cc}


When I remove the <!DOCTYPE html> tag from the top everything works as expected. Your help will be appreciated.
bluegospel
<h6>
 
Posts: 2
Joined: Mon Jan 24, 2011 9:19 pm
Location: Coatesville, PA

Postby bluegospel » Tue Jan 25, 2011 2:32 am

Nevermind. I figured out in html5 requires "#" before your color codes.
bluegospel
<h6>
 
Posts: 2
Joined: Mon Jan 24, 2011 9:19 pm
Location: Coatesville, PA

Postby zcorpan » Wed Jan 26, 2011 11:23 pm

The reason for this isn't new with HTML5 but just that without a doctype you get quirks mode where CSS parsing is more lax like in very old browsers (e.g. allows colors without #), while with a strict doctype or with <!doctype html> you get standards mode where CSS parsing rules are according to spec. See http://hsivonen.iki.fi/doctype/ for details.
zcorpan
<article>
 
Posts: 807
Joined: Tue Feb 06, 2007 8:29 pm
Location: Sweden


Return to General Discussion

Who is online

Users browsing this forum: No registered users and 2 guests