This is topic CSS Help Anybody? in forum Books, Films, Food and Culture at Hatrack River Forum.


To visit this topic, use this URL:
http://www.hatrack.com/ubb/main/ultimatebb.php?ubb=get_topic;f=2;t=049723

---

Posted by Phanto (Member # 5897) on :
 
So I've been working on this website, part of which is aimed at writing articles on the art of writing. I've developed some nice (for my standards) code, and got it to look really nice. I added this nice wrapper effect so that the page has this fade-in border.

I even felt kinda proud of myself.

Then I saw the website in Internet Explorer. The wrapper effect does not work for it. How can I fix this? Any ideas? If needed, I can email the source.
 

---

Posted by fugu13 (Member # 2859) on :
 
Without more details, it isn't possible to provide specific suggestions. Could you link to it, or copy/paste some relevant source?

Of course, my basic suggestion is to create a minimal page that recreates the problem, and try to fix that (or if the minimal page works, slowly add elements to that until you understand what the problem is ).
 

---

Posted by Strider (Member # 1807) on :
 
And I can tell you from personal experience(on fugu's suggestion) that that method works beautifully!
 

---

Posted by Phanto (Member # 5897) on :
 
fugu13, you again? Must you be eternally helpful? ;-).

code:

---

#wrapper {
 float:left;
 margin: 0 auto;
 background-image: url(border-mid.jpg);
 background-repeat: repeat-y; 
 display: inline; 
}

#container  {
	width: 663px; 
text-align: center; 
margin-left: auto; 
margin-right: auto; 
	background-color: white; 
font-family: helvetica;  
display: inline; 
	}

#content 
{margin-top: 15px; text-align: left; float: left; margin-left: 8px; margin-right: 8px; 
	display: inline; }

#header {width: 97.7%; background-image: url("header-back1.jpg"); background-repeat: 
	no-repeat; float: left; margin-left: 8px;}

---

code:

---

<div id = "border"> 
<img src = "/images/border-top.jpg" />
<div id = "wrapper">
<div id = "container">
<div id = "header"> <br>

---

fugut13: The IE page does not fit neatly into the "blanket" I made for the objects. The Firefox version is like a column in the middle with a nice border and space on the left, top, and right. The IE is in the middle, but bulges out past the border.
 

---

Posted by fugu13 (Member # 2859) on :
 
Have you zeroed the padding and margins of the body element?

Actually, I'd suggest making Yahoo's Reset CSS (see: http://developer.yahoo.com/yui/reset/ ) your first CSS include, and working from that. Anything you've explicitly overridden will stay overridden, and it provides sensible uniform defaults for all the elements that vary across browsers.

The recently added YUI CSS libraries are really interesting.

My suspicion is that something related to IE's margin bug is happening: http://dorward.me.uk/www/centre/ , possibly being compounded by the floats.

Make sure your page is coded to standards and triggers standards-compliance mode on IE (see here: http://hsivonen.iki.fi/doctype/ and here: http://www.elementary-group-standards.com/web-standards/standard-compliance-has-two-different-meanings.html ). That doesn't take care of all IE, however. Also, how big was the window? Actually, it doesn't really matter. 8/.003 is approximately 2667 pixels, so if the area available to header is less than that (which I assume it almost always will be), the total width it tries to grab is greater than 100%. This can cause problems, particularly on IE.

Try to modify your design to be more fluid, such that it adjusts depending on how much content is being used (and relies on the presence of content to force it out to appropriate widths and the like).
 

---

Posted by Phanto (Member # 5897) on :
 
Thanks so much fugu13 . Great advice as always.
 

---