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