Web Design Forums

campbell · 24-01-2008, 22:40

Hey,
I tried CSS. I am liking it. I have a few questions though. I was wondering, why is there a red bar at the top of this page?

CSS Code

Quote:

body {
font-family: arial, helvetica, sans-serif;
font-size: 80%;
color: black;
background-color: #ffffff;
margin: 1em;
padding: 0;
}

/* By the way, this is a comment */

p {
line-height: 1.5em;
}

h1 {
color: #ffc;
background-color: #900;
font-size: 2em;
margin: 0;
margin-bottom: 0.5em;
padding: 0.25em;
font-style: italic;
text-align: center;
letter-spacing: 0.5em;
border-bottom-style: solid;
border-bottom-width: 0.5em;
border-bottom-color: #c00;
}

h2 {
color: white;
background-color: #090;
font-size: 1.5em;
margin: 0;
padding: 0.1em;
padding-left: 1em;
}

h3 {
color: #999;
font-size: 1.25em;
}

img {
border-style: dashed;
border-width: 2px;
border-color: #ccc;
}

a {
text-decoration: none;
}

strong {
font-style: italic;
text-transform: uppercase;
}

li {
color: #900;
font-style: italic;
}

table {
background-color: #ccc;
}

HTML Code

Quote:

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

<html>

<head>
<title>My first web page</title>
<link rel="stylesheet" type="text/css" href="web.css" />
</head>

<h1></H1>Hello, I am Campbell</h1>

Picture of the HTML file.

haku · 24-01-2008, 22:57

Got a link?

pgo · 24-01-2008, 23:01

Gotta get your HTML right before you worry about CSS.

You're missing a <body>, </body>, and </html>. And you have an extra </H1>, which should also be lowercase if you're going to use XHTML.

Next, if that still happens, those are probably background colors. Track down what colors they are (the ColorZilla extension for Firefox works wonders for this purpose) and find where they exist in your stylesheet.

campbell · 24-01-2008, 23:21

Quote:

Gotta get your HTML right before you worry about CSS.

This is just a sample testing thing. It really isn't a real site. When I try new things out, I test them like the way your seeing it.

pgo · 24-01-2008, 23:41

Well, you can't be sure you're getting an accurate rendering with invalid code. Simple as that.

Testing invalid code is pointless.

rustybones · 25-01-2008, 00:08

Remove the first closed H1

Code:

</h1>

I was bored and tried your code. Your colours are coming from the h1 styling hence why the closing H1 before the text was causing the red lines across the top and then the text to fall below...

But seriously I would listen to pgo. Use valid code or at least have your bloody body and html tags in there... saves a shit load of headaches

campbell · 25-01-2008, 02:19

I tried it again, but I have the Red Bar under the writin now. :S
HTML

Quote:

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

<html>

<head>
<title>CSS Testing</title>
<link rel="stylesheet" type="text/css" href="web.css" />
</head>

<body>
<h1>Hello, I am Campbell</h1>
</body>

CSS

Quote:

body {
font-family: arial, helvetica, sans-serif;
font-size: 80%;
color: black;
background-color: #ffffff;
margin: 1em;
padding: 0;
}

/* By the way, this is a comment */

p {
line-height: 1.5em;
}

h1 {
color: #000000;
background-color: #ffffff;
font-size: 2em;
margin: 0;
margin-bottom: 0.5em;
padding: 0.25em;
font-style: italic;
text-align: center;
letter-spacing: 0.5em;
border-bottom-style: solid;
border-bottom-width: 0.5em;
border-bottom-color: #c00;
}

h2 {
color: white;
background-color: #ffffff;
font-size: 1.5em;
margin: 0;
padding: 0.1em;
padding-left: 1em;
}

h3 {
color: #ffffff;
font-size: 1.25em;
}

img {
border-style: dashed;
border-width: 2px;
border-color: #ccc;
}

a {
text-decoration: none;
}

strong {
font-style: italic;
text-transform: uppercase;
}

li {
color: #000000;
font-style: italic;
}

table {
background-color: #ccc;
}

dakota · 25-01-2008, 03:03

Red bar under the writing would be coming from this part:

Code:

border-bottom-style: solid;
border-bottom-width: 0.5em;
border-bottom-color: #c00;

in the h1 class. Basically, it's telling the browser to put a 0.5em wide red border around the whole heading. Odd that it's only the bottom though (unless there's something I missed)

haku · 25-01-2008, 06:02

Quote:

unless there's something I missed

There is, even though you quoted it!:

Code:

border-bottom-style: solid;
border-bottom-width: 0.5em;
border-bottom-color: #c00;

24-01-2008, 23:01	#3 (permalink)
pgo misanthrope Join Date: Jan 2005 Posts: 12,269	Gotta get your HTML right before you worry about CSS. You're missing a <body>, </body>, and </html>. And you have an extra </H1>, which should also be lowercase if you're going to use XHTML. Next, if that still happens, those are probably background colors. Track down what colors they are (the ColorZilla extension for Firefox works wonders for this purpose) and find where they exist in your stylesheet. __________________ www.patrick-oneill.com

24-01-2008, 23:41	#5 (permalink)
pgo misanthrope Join Date: Jan 2005 Posts: 12,269	Well, you can't be sure you're getting an accurate rendering with invalid code. Simple as that. Testing invalid code is pointless. __________________ www.patrick-oneill.com

25-01-2008, 00:08	#6 (permalink)
rustybones corporate whore Join Date: Oct 2007 Location: Umeå, Sweden Posts: 207	Remove the first closed H1 Code: </h1> I was bored and tried your code. Your colours are coming from the h1 styling hence why the closing H1 before the text was causing the red lines across the top and then the text to fall below... But seriously I would listen to pgo. Use valid code or at least have your bloody body and html tags in there... saves a shit load of headaches

25-01-2008, 03:03	#8 (permalink)
dakota Registered User Join Date: Jan 2008 Posts: 8	Red bar under the writing would be coming from this part: Code: border-bottom-style: solid; border-bottom-width: 0.5em; border-bottom-color: #c00; in the h1 class. Basically, it's telling the browser to put a 0.5em wide red border around the whole heading. Odd that it's only the bottom though (unless there's something I missed)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

24-01-2008, 22:57	#2 (permalink)
haku shiro Join Date: Aug 2007 Location: Yokohama, Japan Posts: 2,208	Got a link?

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)