posted
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.
Posts: 3060 | Registered: Nov 2003
| IP: Logged |
posted
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 ).
Posts: 15770 | Registered: Dec 2001
| IP: Logged |
posted
And I can tell you from personal experience(on fugu's suggestion) that that method works beautifully!
Posts: 8741 | Registered: Apr 2001
| IP: Logged |
Argh. I guess a problem is that I'm trying to get this up to meet a deadline and that's making me both more aggressive and less eager to create "good" code. Any thoughts?
Posts: 3060 | Registered: Nov 2003
| IP: Logged |
posted
erosomniac: I am applying wrapper to the whole page. I do not think I cancel that <div> until the end of the document.
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.
Posts: 3060 | Registered: Nov 2003
| IP: Logged |
posted
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).
Posts: 15770 | Registered: Dec 2001
| IP: Logged |
Printer-friendly view of this topic
![[Wink]](wink.gif)
).
![[Smile]](smile.gif)
. Great advice as always.
