$35
ie7 not displaying Header & Footer correctly

I've made a child theme of Thematic, and it displays just as intended in safari, firefox, and ie8.

Check it here: http://embassylane.com/notes/

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;

	}

giantbonsai | 04/08/10 at 10:59am | Edit

bug, crop, cropping, footer, header, ie6, ie7, truncate, truncated

(3) Possible Answers Submitted...

Last edited:
04/08/10
1:22pm
Utkarsh Kukreti says:
Try adding
```
h1.banner {margin-top:25px; padding-top:20px; }
```
Works for me in IE6.

Previous versions of this answer: 04/08/10 at 11:16am
- 04/08/10 11:38am
  
  giantbonsai says:
  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.
- 04/08/10 11:41am
  
  Utkarsh Kukreti says:
  Try this for the header
```
h1.banner {margin-top:25px; padding-top:20px; height:150px; }
```
  I'll look into the footer issue.
- 04/08/10 11:44am
  
  Utkarsh Kukreti says:
  For the footer, try
```
#siteinfo {width:850px; text-align:center;}
```
- 04/08/10 11:47am
  
  giantbonsai says:
  nope. see attached picture
  
  Attached Image
- 04/08/10 11:49am
  
  Utkarsh Kukreti says:
  Could you add those 2 pieces of css code on the live site?
- 04/08/10 12:02pm
  
  giantbonsai says:
  the code is on live site - doesn't work.
- 04/08/10 12:06pm
  
  Utkarsh Kukreti says:
  I can't see the css code anywhere. Are you sure it's added?
- 04/08/10 12:35pm
  
  giantbonsai says:
  Hi Utkarsh,
  
  I apologize - I had added the code but to my actual website rather than my test site.
  
  Adding your bits of code produces a successful result for the header in ie6, an improved result in ie7, but still truncation at the bottom, and the site info part of the footer is fixed in ie6 and 7 but throws it off in firefox 3.0
- 04/08/10 12:40pm
  
  Utkarsh Kukreti says:
  Add this
```
#siteinfo {margin-left:0;}
```
  This should hopefully work across all browsers.
- 04/08/10 12:53pm
  
  giantbonsai says:
  that line does fix the siteinfo across browsers. Still having truncation of the header (just the lower part, not top and bottom as before) in ie7.
Last edited:
04/08/10
1:22pm
Erez S says:
you can to create new css files which will work only in IE7 and lower versions,this is how you do it:
```

```
paste this code in your <head> tag,and only ie7 and lower version will read the code inside the comments that call to css file called IE7styles.css(change the location if you need) and then on the new css change the header & footer style only for IE7 as you need.
enjoy
- 04/08/10 11:52am
  
  Erez S says:
  try to add this:
```
#bottomtextmenu li{width:50px;}
```
- 04/08/10 12:15pm
  
  giantbonsai says:
  I tried this - not as a conditional code, just pasted into existing style sheet. Did not work. See attached screenshot of how footer looks now in ie7
  
  Attached Image
- 04/08/10 12:21pm
  
  Erez S says:
  this fix the header:
```
h1.banner {margin-top:25px; padding-top:20px;padding-bottom:20px; height:150px; }
```
- 04/08/10 12:27pm
  
  Erez S says:
  this is partial solution for the footer:
```
#bottomtextmenu li{;margin-left:1px;}
```
- 04/08/10 12:51pm
  
  giantbonsai says:
  Hi Erez213, yes that does mostly fix the footer - it's still a little off, but then I am running into the fact that that solution throws off firefox.
  
  If I wanted to make it a conditional statement, as you had originally recommended, do I make a new header.php file for my child theme, and if so, how would this look exactly?
  
  thanks
- 04/08/10 12:52pm
  
  Erez S says:
  here is the complete code,working and i checked it myself:
```

```
  put it after the tag that reading to your original css (<link> tag)
- 04/08/10 12:55pm
  
  Erez S says:
  if you want me to add for you,just give me your header.php file and i will rewrite your code and add it for you,and if you don't have one give me your functions.php file
- 04/08/10 12:56pm
  
  giantbonsai says:
  Hi erez, I'm sorry, but I am still confused as to where to put the statement.
  
  Right now, I have a functions.php and a style.css.
  
  The functions holds my custom markup, and the style my styles.
  
  Exactly where would I put this?
- 04/08/10 1:00pm
  
  Erez S says:
  here is the code you should put on your functions.php file:
```
<?php function childtheme_fixie7() { ?>



<?php }

add_filter('thematic_head_scripts','childtheme_fixie7'); ?>
```
- 04/08/10 1:00pm
  
  giantbonsai says:
  sending you functions
- 04/08/10 1:05pm
  
  Erez S says:
  sended you back
- 04/09/10 10:17am
  
  Erez S says:
  WTF?! why i can to answer that question while she is close?!
Last edited:
04/08/10
11:17am
Buzu B says:
That's because of the way ie represents styles. You will need to create a different set of styles for IE to solve those problems and then use conditional comments to insert the styles only if the client is IE.

You can read about conditional comments here:
http://www.quirksmode.org/css/condcom.html

Here is also an explanation of the differences between the W3C box model and IE's box model.
http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

This should help you solve the problem, but if not, let me know.
- 04/08/10 11:42am
  
  giantbonsai says:
  Hi Buzu B and erez213 - I am aware of conditional comments, if this is the way to go, fine, but I am really looking for the specific corrections that will target these the header and footer problems I have.
  
  I don't have ie6 or 7, I verify my layouts using http://litmusapp.com/ which takes a screenshot of how the page looks in these browsers so it is really a drag to try and fix this kind of problem for me.
  
  I am looking for specific solutions for this problem.
  
  THanks!
- 04/08/10 11:47am
  
  Buzu B says:
  giantbonsai.
  
  If you keep just changing sizes you will fix one browser and brake the others. You need to use a solution that applies to IE only, and to accomplish that you need to use conditional statements. Then you just add the padding and border to your current height.
  
  Example, if your h1 has a height of 140px and padding of 10 pixes for both top and bottom, then in IE it has to have a height of 160px, that is 140 + 10px padding-bottom + 10px padding-top. But the most important is to use conditional statements.
- 04/08/10 11:53am
  
  Buzu B says:
  try this:
```
h1.banner {

font-family: "Gill Sans", Arial, Helvetica, sans-serif;

font-weight: normal;

font-size: 5em;

letter-spacing: .1em;

color: #739838;

margin-top: 45px;

position: absolute;

left: 268px;

}
```
  Let me know if it solves something.
- 04/08/10 12:02pm
  
  Buzu B says:
  you might also want to add a height to your h1.
```
h1.banner {

height: 52px;

....you other styles here

}
```
- 04/08/10 12:10pm
  
  giantbonsai says:
  Hi Buzu B,
  
  Tried that, the code you offered is live on site, and doesn't appear to change anything.
  
  I did not do as conditional style, I can try that. One question with the conditional style - since this is a child theme of thematic, do I make a header.php file to insert this conditional statement? And if so, what does that need to look like (other than the conditional statement itself which I understand)?
- 04/08/10 12:14pm
  
  Buzu B says:
  Most probably I was wrong about the conditional styles, looking at your code a bit closer it seems you don't really need them. The problem can be solved easily, but I would need to have access to the css to edit it directly. I remember you sent me your header once to fix it. Can you send me the entire theme?
- 04/08/10 12:16pm
  
  giantbonsai says:
  Hi Buzu, how would I send it to you?
- 04/08/10 12:20pm
  
  Buzu B says:
  I will PM you my email address...
- 04/08/10 12:35pm
  
  Buzu B says:
  I got the files. I'm about to go out to school... I hope some of the guys here can give you a solution, otherwise, I'll get back to you when I come back from school.
- 04/08/10 1:03pm
  
  Buzu B says:
  this solves the header:
```
h1.banner {



font-family: "Gill Sans", Arial, Helvetica, sans-serif;



font-weight: normal;



font-size: 5em;



letter-spacing: .1em;



color: #739838;



padding: 40px 0 40px 268px;



position: absolute;



	}
```
- 04/08/10 1:14pm
  
  Buzu B says:
  this fixes the footer:
```
#bottomtextmenu li {

margin: 0 0 0 0px;

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;

	}
```
  now you only need to adjust the value of left for each li. Especifically this part:
```
#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;}
```
  Edit left for each item to accommodate it in its position.