Horje
ie7 not displaying Header & Footer correctly - Wordpress Solution
[Solved] - ie7 not displaying Header & Footer correctly - Wordpress Solution
Try following codes
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. Following is the relevant header markup taken from my functions file:
<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 -->
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)
#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>
Here are the styles for my footer:

.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;
	}
Try adding
h1.banner {margin-top:25px; padding-top:20px; }
Works for me in IE6. 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. Try this for the header
h1.banner {margin-top:25px; padding-top:20px; height:150px; }
I'll look into the footer issue. For the footer, try
#siteinfo {width:850px; text-align:center;}
nope. see attached picture

Solution - 1

Try adding

h1.banner {margin-top:25px; padding-top:20px; }
Works for me in IE6.

Date: 2022-10-21 05:22:55
Category: Wordpress
More for You