ie7 not displaying Header & Footer correctly WordPress
- SOLVED
I've made a child theme of Thematic, and it displays just as intended in safari, firefox, and ie8.
Check it here: [[LINK href="http://embassylane.com/notes/"]]http://embassylane.com/notes/[[/LINK]]
But in ie7 the H1 title in the banner is truncated horizontally on the top and bottom, and my text links above the orange bar in the footer are truncated/cropped vertically in various spots. Also, the "powered by wordpress" bit below the footer loses its center justification and is left justified.
Although I am not "supporting" ie6, the problem is exactly the same in that browser as well, so if anyone can point me to the solution, I would prefer it be targeted to both ie6 and 7.
<strong>Following is the relevant header markup taken from my functions file:</strong>
<div id="vertical_slide"> <!-- header start -->
<div id="sevenpix">
<div id="notesiconrollover">
<div class="notesiconrollover"><a href="#"></a> </div>
</div> <!-- end #notesiconrollover -->
<h1 class="banner"><a href="#">notes</a></h1>
<div id="barcoderollover">
<div class="barcoderollover"><a href="#"></a></div>
</div> <!-- end #barcoderollover
</div> <!-- end #sevenpix -->
</div> <!-- end #verticalslide -->
<strong>Here are the styles for my header (Note, as this is a child theme from thematic, I imagine one possible cause of my problem is a conflict with inherited styles from thematics style sheets)</strong>
#vertical_slide {
width: 850px;
height: 127px;
margin: 8px 0 0 0;
position: relative;
background-color: #fff;
padding: 0px;
}
#sevenpix {
width: 850px;
height: 120px;
margin: 0; padding: 0;
position: relative;
background-color: #eeefef;
}
#banner {
width: 850px;
height: 120px;
margin: 10px 0 0 0;
position: relative;
background-color: #eeefef;
padding: 0px;
}
#notesiconrollover {
width: 120px; height: 120px;
margin: 0; padding: 0;
position: absolute; left: 37px;
z-index: 1;
background: url(blocklogoroll.gif);
}
div.notesiconrollover a {
display: block;
margin: 0; padding: 0;
width: 120px; height: 120px;
background: url(notesblocklogoroll.gif);
background-repeat: no-repeat;
position: absolute;
}
div.notesiconrollover a:hover {
background: transparent url(notesblocklogoroll.gif) 0px -120px no-repeat;}
h1.banner {
font-family: "Gill Sans", Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 5em;
letter-spacing: .1em;
color: #739838;
padding: 0 0 0 268px;
margin-top: 45px;
position: absolute;
}
h1.banner a:link {
text-decoration:none;
color:#739838;
}
h1.banner a:visited {
text-decoration:none;
color:#739838;
}
h1.banner a:hover {
text-decoration:none;
color: #dba63b;
}
h1.banner a:active {
text-decoration:none;
color: #8e6aa3;
}
#barcoderollover {
width: 306px; height: 53px;
margin: 0px 0px 0px; padding: 0;
position: absolute; left: 544px;
background: url(logo.gif);
}
div.barcoderollover a {
display: block;
margin: 0px 0px 0px; padding: 0;
width: 306px; height: 53px;
background: url(logo.gif);
background-repeat: no-repeat;
position: absolute;
}
div.barcoderollover a:hover {
background: transparent url(logo.gif) 0px -53px no-repeat;}
Here is the markup from my functions file for the footer:
<div class="bottomtextmenu">
<ul id="bottomtextmenu">
<li id="bthome"><a href="#" title="home page">home</a></li>
<li id="btart"><a href="#">art</a></li>
<li id="btprojects"><a href="#">projects</a></li>
<li id="btmusic"><a href="#">music</a></li>
<li id="btnotes"><a href="#">notes</a></li>
<li id="btlove"><a href="#">love</a></li>
<li id="btabout"><a href="#">about</a></li>
</ul>
</div>
<ul id="orangefeet">
<li id="footerleft">design / coding = <a href="#" title="home base">#</a></li>
<li id="footerright">all content © 2009-2010 <a href="#" title="about">#</a></li>
</ul>
<strong>Here are the styles for my footer:</strong>
.bottomtextmenu ul {
padding-top: 1px;
margin-bottom: 22px;
margin-left: 0;
}
#bottomtextmenu li {
margin: 0 0 0 -23px; padding: 0; list-style: none; position: relative;
font-family: "Gill Sans", Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 0.875em;
letter-spacing: .16em;
color: #666;
}
#bottomtextmenu li, #bottomtextmenu a {height: 15px; width: 850px; display: inline;}
#bthome {left: 80px; width: 50px;}
#btart {left: 190px; width: 50px;}
#btprojects {left: 302px; width: 50px;}
#btmusic {left: 412px; width: 50px;}
#btnotes {left: 519px; width: 50px;}
#btlove {left: 626px; width: 50px;}
#btabout {left: 724px; width: 50px;}
#bottomtextmenu li a:link{
color: #666;
text-decoration: none;
}
#bottomtextmenu li a:visited {
text-decoration: none;
color: #666;
}
#bottomtextmenu li a:hover {
text-decoration: underline;
color: #dba63b;
}
#orangefeet {
width: 850px;
height: 17px;
background-color: #dba63b;
font-family: "Gill Sans", Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 0.875em;
letter-spacing: .16em;
color: #fff;
margin: -17px 0px 5px 0px; padding: 0 0 6px 0; position: relative; top: 0;
border-bottom:1px dotted #dba63b;
}
#orangefeet li {margin: 0; padding-top: 1px; list-style: none; position: absolute;}
#orangefeet li {display: inline;}
#footerleft {left: 15px;}
#footerright {right: 12px;}
#orangefeet li a:link{
color: #666;
text-decoration: none;
}
#orangefeet li a:visited {
text-decoration: none;
color: #666;
}
#orangefeet li a:hover {
text-decoration: underline;
color: #000;
}
Answers (3)
Utkarsh Kukreti answers:
Try adding
h1.banner {margin-top:25px; padding-top:20px; }
Works for me in IE6.
giantbonsai comments:
Hi Utkarsh Kukreti - I just tried this in two different ways - one posting the line just as you have it, and one changing my existing margin-top line and adding the padding. Neither of these variations appears to render correctly in ie6 or 7 for me.
I also need a solution for the footer issue.
Utkarsh Kukreti comments:
Try this for the header
h1.banner {margin-top:25px; padding-top:20px; height:150px; }
I'll look into the footer issue.
Utkarsh Kukreti comments:
For the footer, try
#siteinfo {width:850px; text-align:center;}
giantbonsai comments:
nope. see attached picture