Fixed positioning in IE7
Posted: 08 March 2008 04:51 PM   [ Ignore ]
Newbie
Rank
Total Posts:  10
Joined  2008-03-08

Good Morning,

I am having a problem using fixed positioning in IE7, as you may have guessed from the subject line! 
I put my navigation images as fixed on the left hand side and they render correctly in Firefox and Opera.  In IE7 they render in the middle of the page, underneath the site background image.  They are coded outside of the “site wrapper” and I tested the CSS putting “text-align:left” just to make sure that wasn’t why it was happening. 

my website is http://marykatecreate.coma and my css page is http://marykatecreate.com/mkdigi.css
 
I have searched many forums and a lot of sites for this issue, but apparently I am doing something wrong that nobody has done before!  If you could help me, I would appreciate it immensely!

Thanks,
Mary

Profile
 
 
Posted: 09 March 2008 12:58 AM   [ Ignore ]   [ # 1 ]
Jr. Member
RankRank
Total Posts:  39
Joined  2007-08-26

Greetings Mary,
This is a very common bug it is the IE box model bug.  You can’t have any item that has a width that also has a left, and right padding.  In internet explorer instead of placing the padding inside of the width which the specification outlines, it adds them to the width.  So when you declare your width as 775, and have a padding of 95 the width is actually 870.

.site {  width:775px;
      position: absolute; top:0; left: 200px;
      padding-left:45px;
      padding-right:50px;
      margin: 0 auto 0;
      background-image:url(images/site_bg.png);
      background-repeat: repeat-y;}

Profile