Header Image postion in IE
newbie
Posted: Thu, 2008-05-15 18:05
Hi Guys.
I'm new to CSS and I have a problem with IE6 (Apparently so do a lot of people) Right the problem. I have a small image in the header of my page which displays incorrectly in IE6. I've spent sometime trying to figure it but getting nowhere. I've read up on IE6 bugs but cant workout what I need to do. If any kind soul can help me with this I would be very grateful.
Regards
Kili
Screen shots:
Correctly displayed in IE7
incorrect in IE6>
The header include file:
<div>
<div id="header"><img src="images/logo3.gif" title=
"Jersey Holidays - Short breaks Jersey - Walking holidays and walking breaks in Jersey"
class="logo" />
<form action="/cgi-bin/smpro/s.pl" method="post"><span class=
"strapline">
<input type="hidden" name="l" value="2 " />
</span><span class="strapline"><font size="-2" face=
"verdana, arial, helvetica"><b>Join our mailing list for the latest
walks and offers</b></font><br/>
<input type="text" size="20" name="e" />
<input type="radio" name=
"subscribe" value="subscribe" checked="checked" align="top" />
<font size="-2"
face="verdana, arial, helvetica">subscribe </font>
<input type="radio" name="subscribe" value="unsubscribe" align=
"top" />
<font size="-2" face=
"verdana, arial, helvetica">unsubscribe </font></span><span class="strapline">
<input type="submit" value=
" Submit " />
</span>
<align><span class="strapline"><br/>
</span></align>
</form>
</div>
</div>The above html is an SSI include file
The CSS file
body{
margin: 0;
padding: 0;
background-color: #FFFFFF;
color: #000000;
font-family: Verdana, Helvetica, sans-serif;
/* border-top: 2px solid #2A4F6F; */
}
/*---------------------------------------------------------------*/
#header {
background-color: #003300;
border-top: 3px solid #52A800;
border-bottom: 3px solid #52A800;
height: 4.5em;
}
#header .strapline {
font: 100% Georgia, "Times New Roman", Times, serif;
color: #FFFFFF;
background-color: transparent;
float: right;
width: 500px;
text-align: left;
margin-right: 4em;
margin-top: 0em;
}
#header .logo {
float: left;
width: 140px;
height: 73px;
margin-left: 1.5em;
margin-top: 1.5em;
}
/*---------------------------------------------------------------*/
#nav {
position: absolute;
top: 7em;
left: 1em;
width: 10em;
background-color: #FFFFFF;
}
#nav ul {
list-style: none;
margin-left: 1em;
padding-left: 0;
}
#nav li {
font-size: 80%;
border-bottom: 1px solid #003300;
margin-bottom: 0.3em;
}
#nav a:link, #nav a:visited {
text-decoration: none;
color: #538629;
background-color: transparent;
}
#nav a:hover {
color: #FF0000;
}
#nav h2 {
font: 100% Georgia, "Times New Roman", Times, serif;
color: #003300;
background-color: transparent;
border-bottom: 1px dotted #cccccc;
}
/*--------------------------------------------------------------------*/
#content {
margin-left: 12em;
margin-right: 2em;
background-color: #FFFFFF;
}
h1 {
font: 105% Georgia, "Times New Roman", Times, serif;
color: #003300; margin-bottom: 0; margin-top: 0;
}
.imgleft {float: left; padding: 1em;}
.imgright {padding: 1em; float: right;}
#content p {
font-size: 80%;
line-height: 1.6em;
padding-left: 1.2em;
font-weight: normal;
}
/* -------------------------------------------------------------------*/
.datatable {
border: 1px solid #51A500;
border-collapse: collapse;
margin-top: 0.5cm;
margin-bottom: 0.5cm;
margin-left: 6cm;
}
.datatable td {
border: 1px solid #51A500;
text-align: left;
padding: 0.2em;
font: 80% Georgia, "Times New Roman", Times, serif;
}
.datatable th {
color: #FFFFFF;
font: 80% Georgia, "Times New Roman", Times, serif;
border: 1px solid #51A500;
background-color: #003300;
font-weight: normal;
text-align: left;
padding: 0.2em;
}
.datatable caption {
font: bold 80% "Times New Roman", Times, serif;
text-align: left;
background-color: #51A500;
color: #FFFFFF;
padding: 0.4em 0 0.3em 0;
border: 1px solid #003300;
margin-left: 6cm;
}
/*--------------------------------------------------------------------*/
#footer {
position: float;
bottom: -32em;
width: 100%;
border-top: 1px solid #778899;
border-bottom: 1px dotted #B2BCC6;
height:5em;
font-size: 80%;
font-weight: normal;
color: #FFFFFF;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
background-color: #003300;
}| Attachment | Size |
|---|---|
| ie7.gif | 5.43 KB |
| ie6.gif | 4.5 KB |
newbie
Posts: 3
Joined: 2008-05-15
Sorry I should have posted
Posted: Thu, 2008-05-15 18:07
Sorry I should have posted the doctype that would normaly be included in the full page:
<!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-US" lang="en-US">
newbie
Posts: 3
Joined: 2008-05-15
Problem solved. I created a
Posted: Thu, 2008-05-15 21:28
Problem solved. I created a separate ie6 style sheet and added
margin-bottom: -6em; increased margin-top to 1.7em and that lines it up in IE6 perfectly.