Support » Themes and Templates » Website rendering woes x2 (I hate you IE!!!)

  • fuBarness

    (@fubarness)


    I am frustrated how both websites do not render properly on the popular browsers, such as gantdesigns.com not rendering on IE6/7 and Safari. While buufdesigns.com does not render properly on IE6/7.

    Are there any hacks or tips for me to get both websites up and kicking. Stupid browser wars! Argh!

    Look at the CSS and what do you see!

    I would really like if anyone is willing to help me on this. I want to make both websites render flawless on the popular browsers so I can transfer them on WordPress.

    + I am thinking or recoding the whole CSS

    Thanks.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Dickie

    (@dickie)


    Ok I think I’ve got it… (for gantdesigns.com)

    you need to add a top and left value to the #gantnav
    e.g.

    #gantnav {position: absolute; top:0px; left: 0px; display:block; width:156px; height:478px; margin-left: 34px; margin-top: -3px; margin-top: 0px;}

    and the .page class needs to be made position: relative
    e.g.

    .page {
    position: relative;
    width: 716px;
    margin-left: auto;
    margin-right: auto;
    min-height: 400px;
    background-image: url(http://gantdesigns.com/images/content_bkg.gif);
    background-repeat: repeat-y;
    }

    This looks fine here in IE7 and Firefox

    Just a tip…. make almost everything position: relative (within reason) and many layout problems go away

    fuBarness

    (@fubarness)


    Dickie… your awesome, I will check it out.

    What do you mean, “within reason”?

    I am also looking at Dean Edwards hack for IE6/7 browser complaint hack.

    Thanks.

    Dickie

    (@dickie)


    Well…you don’t need it on everything, but certainly structural elements like Divs that are not otherwise positioned.
    It’s even worth declaring it on floats

    Dickie

    (@dickie)


    In fact I just noticed…you should be able to clean this ID up a bit, (you seem to have margin-top twice, and the left margin can be moved to the left postion)
    Original
    #gantnav {position: absolute; top:0px; left: 0px; display:block; width:156px; height:478px; margin-left: 34px; margin-top: -3px; margin-top: 0px;}

    New
    #gantnav {position: absolute; top:0px; left: 34px; display:block; width:156px; height:478px; margin: 0px;}

    Root

    (@root)


    Hi
    That is a stunning looking site. You are doing some fantastic work. However it might be a wasted effort fixing up the CSS then transferring to WP. Why not jump now?. Plenty of CSS folk in these parts will help.

    fuBarness

    (@fubarness)


    @dickie
    Thanks!

    @root
    I wish! To tell you the truth, I did not make the website (gantdesigns.com). The individual who made the layout/coded is clearly stated in the credit page. Hence, I am CSS/PHP savvy. I am one of those folks who know the concept of CSS/PHP, but know to little of it in general.

    I will check out the ‘how to theme with WP’ page and check/try it out. I did before, but it completely frustrated me (due to my savvy knowledge in CSS/PHP).

    I don’t know where to start, should I use the same CSS or do I start all over again? What about the IE6/7 bugs?

    If there are anyone who wants to help me out ‘completely’, you will be credited in the credit list. I get about 100+ unique visitors a day from this website alone. Not much, but it’s something than nothing.

    Thank you WP members! I will keep you updated.

    PS: @root, thanks for the comment.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Website rendering woes x2 (I hate you IE!!!)’ is closed to new replies.