6 replies [Last post]
rozwado1
Offline
newbie
East Lansing, MI
Last seen: 14 years 19 weeks ago
East Lansing, MI
Timezone: GMT-5
Joined: 2004-05-27
Posts: 6
Points: 0

Site is here.

My gallery looks fine in Safari/Mozilla, but IE6 stretches the <body> onto the blue background. Any ideas?

Stylesheet is over here.

FactoryJoe
Offline
newbie
Last seen: 16 years 40 weeks ago
Joined: 2004-06-02
Posts: 7
Points: 0

Body width in IE6?

I'm thinking the problem is that you've tried to give your BODY tag a width. While you can do this, I wouldn't advise doing so. Instead, create a div with an id called content that contains everything and give that div a width:

BODY  
	{ 
	  font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
	  font-size: 10pt;
	  color:#666666;
	  background: rgb(45, 63, 102) url(http://www.msu.edu/~rozwado1/images/centerback.gif) center repeat-y;
	  margin-top: 10px;
	  margin-left: auto;
	  margin-right: auto;
	}

#content {
	  width: 644px;
}

Also, validate your css.

rozwado1
Offline
newbie
East Lansing, MI
Last seen: 14 years 19 weeks ago
East Lansing, MI
Timezone: GMT-5
Joined: 2004-05-27
Posts: 6
Points: 0

Body width in IE6?

Since Gallery is coded in PHP, any ideas on how I could add in a <div class="content"> tag to the PHP code?

FactoryJoe
Offline
newbie
Last seen: 16 years 40 weeks ago
Joined: 2004-06-02
Posts: 7
Points: 0

Body width in IE6?

Actually, looking over the HTML source, there's some weird table widths going on (I'm on a Mac so I'm winging it as far as diagnosing your problem--can you provide a screenshot perhaps?). The first table has a width of 644 and the rest of the layout tables are 100%. I'm guessing that IE is confused since you've specified 644 for the body width and used percentages and actual lengths throughout the rest of the code.

Try this:

  1. Open up /gallery/album.php
  2. Search for "<body"
  3. Insert <div id="content"> as a new line
  4. Search for "</body>"
  5. Insert </div> as a new line before the closing BODY tag.
Let me know if that works.

[/]
rozwado1
Offline
newbie
East Lansing, MI
Last seen: 14 years 19 weeks ago
East Lansing, MI
Timezone: GMT-5
Joined: 2004-05-27
Posts: 6
Points: 0

Body width in IE6?

Ok. Here's what I got:

body  { 
	  background: rgb(45, 63, 102) url(http://www.msu.edu/~rozwado1/images/centerback.gif) center repeat-y;
	  margin-top: 10px;
	  }
#content {
	  width: 644px;
	  margin-left: auto;
	  margin-right: auto;
	  }

It's fixed now to an extent - the whole #content is 644px wide, but it's aligned to the left of the window in IE6 (works in Safari). Does IE just not recognize the "margin-L/R : auto" tag? 100% widths have been removed and CSS is now valid, btw.

edit: I tried the "margin: auto" tag in body as well as #content to get the same results in IE6.[/b]

FactoryJoe
Offline
newbie
Last seen: 16 years 40 weeks ago
Joined: 2004-06-02
Posts: 7
Points: 0

Body width in IE6?

Cool. I think you actually don't need to set the margins to auto for the body element. You should only need to do this:

BODY  
   { 
     font: 10pt 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif; 
     color:#666;
     background: rgb(45, 63, 102) url(http://www.msu.edu/~rozwado1/images/centerback.gif) center repeat-y;
     margin: 0; 
   } 

#content { 
     margin: 10px auto; 
     width: 644px; 
} 

rozwado1
Offline
newbie
East Lansing, MI
Last seen: 14 years 19 weeks ago
East Lansing, MI
Timezone: GMT-5
Joined: 2004-05-27
Posts: 6
Points: 0

Body width in IE6?

I still get the same. It may be easier to just put a message on there that tells IE users to d/l firefox...