Help - Search - Members - Calendar
Full Version: <h2> tags not recognized in IE
HTMLHelp Forums > Web Authoring > General Web Design
tarapenner
Hi there,

I'm new to web development, but I've set up a site at www.kimberleylets.com and although it looks fine in Chrome, Firefox and Opera, IE doesen't recognize the <h2> tags. I've pasted the code from my CSS below (note that in the very beginning, this was from a template I downloaded). Any help would be greatly appreciated, thanks!

Tara



body {
margin: 0 0 1em 0;
padding: 0;
color: black;
background-color: #ffffff;
line-height: 130%;
font-family: arial, helvetica, verdana, tahoma, sans-serif;
text-align: center;
}
#wrapper-header { background: #437C17; }
#header {
background: #437C17 url('/images/banner.jpg') center no-repeat;
width: 760px;
height: 129px;
line-height: 129px;
background-position: center center;
margin: 0 auto;
border-left: 1px solid #437C17;
border-right: 1px solid #437C17;
text-align: left;
}
#header h1 {
margin: 5px;
padding: 0;
padding-bottom: 3px;
font-size: 150%;
letter-spacing: -1px;
}
#wrapper-menu {
background: #003300;
float: left;
width: 100%;
}
#menu {
width: 75%;
margin: 0 auto;
font-size: 95%;
white-space: nowrap; /* stops half a menu link dropping to next line. Instead, the whole link will drop. This only happens if you have a lot of menu links, and large text size */
padding-right: 2px; /* The menu far left, and far right borders are not quite lining up in non IE browsers for some reason. This makes it less noticable */
}
* html #menu { padding-right: 0; } /* See above comment. This re-adjusts IE to the above padding */
#menu ul {
margin: 0;
padding: 0;
list-style: none;
float: left;
border-left: 1px solid #437c17;
border-right: 1px solid #437c17;
width: 100%;
}
#menu li { display: inline; }
#menu a:link, #menu a:visited {
padding: 0.25em 1em;
background: transparent;
color: #fff;
text-decoration: none;
float: left;
border-right: 1px solid #437c17;
}
#menu a:hover {
background: #437C17 url('/images_styles/first_menu_background.jpg') repeat-x;
color: #669900;
}
#content {
width: 73%; /* 73% because it has 1% padding on each side, which brings it to 75% wide */
margin: 5px;
padding: 3.5em 1% 20px 1%;
border-left: 1px solid #437c17;
border-right: 1px solid #437c17;
background: white;
font-size: 90%;
text-align: left;
}
* html #content { padding-top: 1.8em; } /* Set padding top in IE to 20px */
#footer {
margin: 0 auto;
padding: 2px 1%;
width: 73%;
text-align: right;
color: white;
letter-spacing: 0.15em;
background: #437c17;
border: 1px solid #a0c80e;
font-size: 80%;
}

h2 {
margin: 5px;
padding: 0;
color: #437C17;
padding-bottom: 3px;
border-bottom: 2px solid #437C17;
font-size: 150%;
letter-spacing: -1px;
}
h3 {
color: #437C17;
padding-bottom: 3px;
border-bottom: 1px solid #a0c80e;
font-size: 150%;
letter-spacing: -1px;
}
a:link, a:visited {
color: #260;
text-decoration: none;
}
a:hover {
color: #000;
text-decoration: underline;
}
p { margin-left: 1em; }
pandy
Use the validator.
http://www.htmlhelp.com/cgi-bin/validate.c...mp;input=yes#L6

It tells you this.
CODE

Line 6, character 2:
        <link rel="stylesheet" type="text/css" href="styles.css" />
        ^Warning: unclosed start-tag



See that it points to before the LINK tag? Click the link to line 6 and look at what you have before that LINK tag.

CODE
5       <link rel="shortcut icon" href="images/icon.ico"
6       <link rel="stylesheet" type="text/css" href="styles.css" />


The previous LINK lacks the closing '>'.

You should correct the other errors too. But before you do you should put a doctype in. You will get a more fair and correct validation result. No doctype also puts browsers on Quirks Mode, an you don't want that.
http://hsivonen.iki.fi/doctype/

Also, you shouldn't use XHTML closing slashes of you don't write XHTML. In HTML it's
CODE
<link rel="stylesheet" type="text/css" href="styles.css">

not
CODE
<link rel="stylesheet" type="text/css" href="styles.css" />
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.