• Home
  • Guides
  • Resources
  • Privacy Policy
  • Blogroll
  • Contact
  • Authors
  • Tree Shirts
  • Subscribe via RSS
  • Subscribe via E-Mail
  • Tree Shirts
  • Recent Comments
  • Mana Regen Calc.
  • The World Tree

I <3 the
Nostromo N52TE

Favorites

  • /hug
  • 4 Haelz
  • Banana Shoulders
  • Big Bear Butt
  • BigRedKitty
  • Gray Matter
  • Greedy Goblin
  • Leafshine: Lust for Flower
  • Of Teeth and Claws
  • Out of Mana
  • Think Tank
  • Tree Bark Jacket
  • Unbearably HoT
  • Yet Another Warlock Nerf
  • View Full Blogroll

Blogroll Highlights

  • Three Druid Noob
  • The Druid Team
  • Moonglade Exalted
  • The Druid Team
  • Glyph of Thorns

Categories

Archives

Resto4Life is regularly featured at the Daily Druid!
I blog Azeroth. Do you?

Creative Commons License

Featured Post

Featured: Phae’s e-Fish-ent Macro

Glub, glub, glub! Improve your piscatorial pursuits with this handy macro that will handle equipping your fishing pole, equipping a lure, and casting your line — all in one button! Fish will FEAR you!

Read More | All Featured Posts

Recent Posts

  • LoniHuff.NET
  • The Sprout(ed) Seed
  • Phaelia’s Vestments of the Sprouting Seed
  • Resto4Life Farewell Photo Album

Phaelia LFD = Looking for Designer

Published on May 9, 2008 by Phaelia
Blog
17 Comments

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.

resto4life_ie resto4life_firefox
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@NO SPAM!.com. I have a sandbox version of the site that I can give you access to if you think you can help!

Thanks, everyone!

Related Posts

  • How-To: Set up a Custom Avatar for Resto4Life
  • Thanks, WoWInsider!
  • Starting Over
17 Comments
Categories: Blog

17 Comments

  • Gravatar Ermengol

    Oh, so there is a cute tree :( I always wondered about the weird layout of the site, now I know :(

    4:48 pm on 5/9/08
  • Gravatar sibohan

    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.

    4:52 pm on 5/9/08
  • Gravatar Zackoria

    Strange, i have only half a tree. /shrug

    4:57 pm on 5/9/08
  • Gravatar Phaelia

    @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.

    5:15 pm on 5/9/08
  • Gravatar Monique

    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.

    6:00 pm on 5/9/08
  • Gravatar Andrige

    See Phaelia, always some Druids to help out those in need ^^
    Hope you can solve it, left aligned is quite odd indeed.

    6:26 pm on 5/9/08
  • Gravatar SaladFork

    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?

    8:35 pm on 5/9/08
  • Gravatar raiko

    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

    10:16 pm on 5/9/08
  • Gravatar Lidon

    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/).

    2:16 am on 5/10/08
  • Gravatar Juergen

    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

    4:04 am on 5/10/08
  • Gravatar Ermengol

    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 ;)

    5:17 am on 5/10/08
  • Gravatar Phaelia

    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! :-D

    @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”!

    2:38 pm on 5/10/08
  • Gravatar Slippir

    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

    3:27 pm on 5/10/08
  • Gravatar Ermengol

    Oooooh so much better now :D

    7:14 am on 5/11/08
  • Gravatar Andrige

    [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-

    6:34 pm on 5/11/08
  • Gravatar Juergen

    It’s centered now, and there is a tree looking out from behind the central column.

    So GJ, have a cookie :)

    2:36 pm on 5/12/08
  • Gravatar Mike

    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.

    3:06 pm on 5/12/08

Trackbacks

Comments RSS Feed  

Sorry, the comment form is closed at this time.

 

Recent Comments

LoniHuff.NET (2)

Phaelia
Hey, Stormwalker! Great to hear from you! Our little sprout is growing fast, but don’t call him “little” when he’s around or he’s sure to tell you “I a little bit big!” :-)

Stormwalker
I…I…kinda miss you and your Druidic writings of old. Good to see you’re still around, busy with RL. The little sproutling looks a little bigger now! Regards, Stormwalker, of old.
The Sprout(ed) Seed (91)

Triadx
Gratz on the mini sprout!

Keybinding
Oh my gosh! You look beautiful. Is that a new druid in training? Maybe he will rebel and spec feral or oomkin? /cheer!

Bolink
Beautiful! Congratulations! (I know this is just a tad late) .-= Bolink´s last blog ..Druid Defense in Warsong Gulch =-.

Teledris
Awesome, dude! Congratulations!

tkc
15 short years till he wants to borrow the car! Cheers!
Druids (Not) to Pick Locks in Cat Form (17)

Claire Swazey
I have a cat who has learned to open the pet door lock. I’d never have thought…
The Belkin Nostromo N52 TE (74)

Alahnna (Mama Druid)
Over two years later and this is still relevant and so very helpful. I hope you are having a blast with your little sprout, who’s probably running all over the place now. =D

Marc
Hi, Too bad this blog is no longer maimtained. Thanks for you post though. I wanted to address the issue of lefties. I am on, and use the N52TE. I use a trackball with my right hand and the n52TE with my left, no problems.
© 2009 Resto4Life. Some Rights Reserved. Original theme by Dezinerfolio. Respecced by Phaelia.