WordPress.org

Ready to get started?Download WordPress

Forums

Website rendering woes x2 (I hate you IE!!!) (7 posts)

  1. fuBarness
    Member
    Posted 7 years ago #

    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.

  2. Dickie
    Member
    Posted 7 years ago #

    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

  3. fuBarness
    Member
    Posted 7 years ago #

    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.

  4. Dickie
    Member
    Posted 7 years ago #

    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

  5. Dickie
    Member
    Posted 7 years ago #

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

  6. Root
    Member
    Posted 7 years ago #

    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.

  7. fuBarness
    Member
    Posted 7 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic