View more than 30 screenshot submissions for the 2008 Arbor Day celebration, showing off the uniqueness of readers’ Tree of Life form and their enthusiasm about this annual holiday!
Below is a snapshot of what Resto4Life looks like in the two most mainstream browsers, Internet Explorer and Firefox. As you can see, the two versions look pretty different with the IE version showing my site contents centered and with a cute little Tree of Life waggling his leafy hand at visitors. The Firefox version is flush against the left side of the screen and does not have the aforementioned cute tree. This is a CSS issue that I’ve spent hours trying to resolve, and I’ve finally decided to throw my hands up and ask for help from visitors.
 |
 |
| Internet Explorer | Firefox |
If there are any CSS-experienced gurus out there who think they can help, I’d greatly appreciate if you could either respond here or contact me via the site’s contact form or by e-mailing me at resto4life@
.com. I have a sandbox version of the site that I can give you access to if you think you can help!
Thanks, everyone!
17 Comments
Trackbacks
Comments RSS Feed TrackBack URL
Oh, so there is a cute tree
I always wondered about the weird layout of the site, now I know 
I can probably tell you the problem. IE does not handle CSS correctly. If you have nested tags with no content other than another , CSS spec is to collapse the empty area, which is what Firefox does. IE ignores CSS specifications and displays everything. It’s a more intuitive behavior, but it causes CSS sites to look different across browsers.
This is probably happening to the left side of your screen. Firefox may be following the CSS and collapsing an empty while IE is not. The workaround is absolute positioning, which is where my CSS knowledge starts to get thin. I know about the IE browser bug because I had to deal with the same issue.
Strange, i have only half a tree. /shrug
@Ermengol: Yeah, unfortunately the difference didn’t come to my attention at first because I use IE most of the time.
@Sibohan: That’s pretty much what I was able to deduce from my research. Unfortunately, I haven’t been able to find and apply a solution that works. =(
@Zackoria: You may only see half the tree because of your resolution. In IE, the content of the page is centered and then the tree is just stuck onto the left side. If there isn’t enough space to show the whole thing, it only shows part.
I don’t think you’re properly centering your divs. You’re probably using some code that’s just IE compliant; always design for Firefox, since IE is satanic. Once you center them, you can easily have a repeating background that repeats once with the tree to line up behind the table and wave.
Anyway, I’d have to actually analyze the code, but let me know if you still need help and I’ll do what I can do.
See Phaelia, always some Druids to help out those in need ^^
Hope you can solve it, left aligned is quite odd indeed.
A few quick seconds in Stylish (Firefox addon) easily let me center your blog with one hack:
.wrap {
margin: 0 auto !important;
}
The tree still isn’t appearing though, and I can’t find where in your theme you reference it (which makes it hard to figure out the CSS that’s affecting it). Could you give us the image name, or the div that the tree is placed in?
you should just flip the tree over and put him/her on the right side that way you dont have to deal with it and you can see it in IE or firefox
Try changing all of your “margin: 0;” to “margin: auto;” or “margin: 0 auto;. Consider putting a new div around the entire site (just inside the body tag) and do “margin: auto;” in there.
If that doesn’t work, you could try using padding on the body tag instead (remember the box model! http://htmldog.com/guides/cssbeginner/margins/).
Not help as such but FYI
In Safari (the Mac Os X Browser) your website looks like in your firefox screenshot (i.e. flush left, no cute tree).
Happy tweaking
Juergen
I have the theory that Microsoft did IE like this on purpose, so designers checking their sites with IE think they’re fine, and visitors not using IE say “oh, this browser of mine is crap, I’d better use IE like the rest”. Just a theory though
Thank you to everyone who commented or e-mailed me. I did finally find a solution to the problem, thanks to the assistance of reader Tone. For those curious, I added an align=”center” attribute to my header DIV. Then he had me change my div#phaelia style so that it looks like this:
div#phaelia {
background-image: url(images/phae_tol_side.gif);
position: relative;
/*z-index: -1;*/
top: 150px;
left: -613px;
height: 429px;
width: 261px;
margin-bottom: -429px;
}
That seems to have done exactly what I was hoping for, though you may have to clear your cache (I did) to see the change! Thank you, Tone!
@Monique: You were exactly correct! The solution that ended up working for me did, in fact, recommend adding a center attribute to my main DIV which I had previously avoided because I worried it might not be good markup. Good markup be damned, it works!
@Andrige: I’m very, very lucky to have so many generous and helpful readers. =)
@SaladFork: Thank you for your help. =) What is the “!important” for? I have always wondered. I did find a solution that works and adjusted the #phaelia tag.
@Raiko: Well I originally decided to show the tree on the left side because it helped balance out the “weight” of the dark blue sidebar on the right side. Luckily, I got it working on that side. =)
@Lidon: I tried just about every possible combination of margin change I could think of in an effort to resolve this issue. Unfortunately, I didn’t have any luck with it. Thanks for the margins guide!
@Juergen: How does it look now?
@Ermengol: I have never considered that, but honestly it sorta makes sense. As a VB.NET developer, I deal work almost exclusively in IE. Firefox design differences make me want to pull my hair out, even if they are doing things “right”!
I can see it now! I honestly never noticed it was there as I never use anything but Firefox. Its like a whole new site! XD
Oooooh so much better now
[Whisper][Andrige]: You were LFD? I have made something: http://i40.photobucket.com/albums/e206/Macswe/Phaelia1.jpg , not detailed enough though to be complete.
[Whisper][Andrige]: Get on MSN sometime later on so I can talk if there’s anything you want changed on it and/or send the PSD to you.
[Whisper][Grrblbllb] FREE WoW Gold Now!! Offer for You for ONLY-
It’s centered now, and there is a tree looking out from behind the central column.
So GJ, have a cookie
I worked for Microsoft (not in Windows or in IE) so I might be biased the other way but I believe the IE differences are not really that sinister. IE 6 is a pretty old browser, it was released in 2001. A lot of the CSS standards were relatively young at the time, and CSS support in other browsers wasn’t stellar either. IE 7.0 improved on CSS support from IE 6.0, it’s just that other modern browsers had more releases and improved more during the same period of time. Ironically the same thing people complain about (IE not sufficiently supporting standards) also makes it harder for Microsoft to make dramatic changes to support standards, since sites tweaked to work with older versions need to continue to work right with new releases, or you end up with angry customers. That said I do think Microsoft, once it was in a dominant position, managed to neglect its browser development, especially in terms of supporting standards. IE 8.0’s coming down the pipe, and Microsoft’s hyping its standards support. Hopefully it will ease the pain of developing for multiple browser types. However with many people still using IE 6.0 you’d still have to worry about old IE bugs even if Microsoft released something more standards compliant than Firefox tomorrow.