Grow your CSS skills. Land your dream job.

Browser Compatibility Issues.

  • # January 9, 2010 at 10:41 pm

    I’m having problems with the position of a div. If I make it look right in FF it looks wrong in IE 7/8 and vice versa. When I try to inspect the page in FireFox using FireBug’s Element Inspector it shows that the div wrapper for my button is 15px above the actual button. When you look at the same page in IE the button is in its wrapper but of course 15px above where it needs to be.

    The problem button will be at the bottom left "Sandestin Registration >>"
    http://www.shepardsuperteam.com/chris/100kplus_pg1.html

    You will need to check it out in both browsers to see what I’m talking about and FireBug helps to.

    Note: I am currently using a script that fixes problems between IE7 and IE8 (<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>) which has worked fine on every other page even this one but has no effect on this button.

    # January 10, 2010 at 2:18 am

    So here’s what’s strange:

    1) The top of your button is about 345px from the top of it’s parent div, but your "TOP" is 299px.
    2) If you use Firebug to hover over the element, you will see that the #RegisterButton is sitting above where it should be, yet the link "inside" of it is being pushed below it.

    Something is pushing that link down ~46px, but it is too late for me to figure out. Anyone have an idea?

    # January 10, 2010 at 9:50 am

    This is just a fix for your problem, but there is something wrong with the link not sitting within the div.

    Anyway, your problem comes from the "IE=EmulateIE7" which makes IE8 work like IE7. IE8 and Firefox show the same, and IE7 and IE6 show the button above it’s place but both show the same thing. So if you get rid of the Emulate comment and use a conditional comment instead for IE6 and 7 to change #wrapper #MidSection100kPlus_pg1 #RegisterButton, then make top: 325px instead of 299px, it should fix your problem.

    # January 10, 2010 at 2:22 pm

    Hey, Thanks Virtual for your time.

    I knew about Conditional Comments but I didn’t know what they were called, so that helps. But I’m not sure how to apply them. I first took out the Emulate code and then tried pasting a copy of the #wrapper #MidSection100kPlus_pg1 #RegisterButton { into the Conditional Comment but I got a Parsing Error. Then I tried just putting "top:325" between the Conditional Comment and it said the same thing. Where exactly am I supposed to put the Comment and what Code do I put in it?

    Thanks Again.

    My First Attempt


    <!–[if IE 7]>
    #wrapper #MidSection100kPlus_pg1 #RegisterButton {
    color: #333333;
    line-height:13px;
    color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    height: 28px;
    width: 76px;
    position: relative;
    left: 55px;
    top: 299px;

    }
    <![endif]–>


    My Second Attempt



    #wrapper #MidSection100kPlus_pg1 #RegisterButton {
    color: #333333;
    line-height:13px;
    color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    height: 28px;
    width: 76px;
    position: relative;
    left: 55px;
    top: 299px;
    <!–[if IE 7]>
    top:325px;
    <![endif]–>

    }


    # January 11, 2010 at 5:45 am

    You can find a lot of replies by using Google. Chris has an article here on Conditional comments
    http://css-tricks.com/how-to-create-an- … tylesheet/
    and here is another
    http://www.javascriptkit.com/howto/cc2.shtml

    The conditional comment goes in the <head> section of your html files not in the css code and you can either call just an ie stylesheet if there are a lot of discrepancies, or just the part of the statement that needs correcting. If you are using a hack, you would place that in the css, but I would recommend using the conditional comment over the hack.

    As I mentioned in my previous post you need to target both IE6 and 7, so your comment should probably be <!–[if lt IE 8]> which means less than IE8. I don’t think anyone bothers about IE5.5 and hopefully we won’t have to bother about IE6 in another couple of years…sigh!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".