Grow your CSS skills. Land your dream job.

Cross-Browser Problems Once Again

  • # May 4, 2009 at 4:01 pm

    I also seem to run into these problems at the 11th hour. In any case, I have attached three screen shots and as you will notice, the header image is not aligning correctly with my page background in both IE7 and 6, along with Firefox on the PC. The screen shot that is correct is from Firefox 3.0 on my MAC. Since I develop on the MAC it is a bit frustrating when I go to test on the PC and come up with these issues. I know it’s not a new problem for anyone, but nonetheless frustrating.

    Here is a link to the testing site:

    http://www.corvairflair.com/np-consulting

    Hopefully someone has an idea of what I may be doing incorrectly here. I’m sure it is a simple oversight on my part, but I can’t seem to locate the issue.

    Please defer to the attached screen shots.

    [attachment=2]Firefox_MAC.png[/attachment]

    [attachment=1]ie7.png[/attachment]

    [attachment=0]firefox3_PC.png[/attachment]

    Thanks You,
    Mike

    # May 4, 2009 at 5:29 pm

    Hi Miker,

    It looks like the problem is arising from your navigation bar varying in height depending on the browser.

    This is what I try to do in cases like these:

    Set all the different top and bottom paddings and margins to 0.
    Assign a height to the .top-navigation.
    That should make all of your browsers looking the same (even if they are all wrong, at least they are the same). Then you can add one margin or padding (or increase the .top-navigation height) to bring down the image until it lines up.

    It will require a little bit of guess and checking to be perfect, but let me know how it goes,
    Ashton Sanders

    Edit:

    I would do 70px height:

    Code:
    .top-navigation {
    margin: 0 auto;
    height: 70px;
    }
    # May 6, 2009 at 2:40 pm

    Hey Ashton that worked! I was able to set everything from a top and bottom margin and padding perspective to zero and then work my way backwards. I am still having a bit of an issue with IE 6.0 on the image hover. When a user rolls over the image the spacing gets all out of whack under the top navigation. I think this is probably an easy fix once I dig a bit deeper.

    I really appreciate the help on this.

    Thanks Again,
    Mike

    # May 6, 2009 at 7:48 pm

    Great.

    It sounds like you have an incorrect setting in a :hover somewhere. Your testing site changed, so I can’t check it.

    # May 7, 2009 at 3:12 pm

    Ashton,

    Sorry about that. My hosting services were down for a couple of days. The site is back up now and I’ve got everything working just fine now but I can’t figure out the hovering issue with IE6. Could you take a look again to see if you know what it may be?

    http://www.corvairflair.com/np-consulting

    Thanks for all of your help,
    Mike

    # May 7, 2009 at 3:45 pm

    Hmmm…

    I haven’t found the source of the Hover problem in IE6, but here are some notes that may help in general:

    You have this in your css file:

    Code:
    .left-navigation-container ul li a:hover, a:active {text-decoration: none;}

    this is the same as:

    Code:
    .left-navigation-container ul li a:hover {text-decoration: none; }

    a:active { text-decoration: none; }

    You probably meant to do it like this:

    Code:
    .left-navigation-container ul li a:hover, .left-navigation-container ul li a:active {text-decoration: none;}

    Secondly, you have all this code:

    Code:
    .top-navigation ul li.home a:hover { background-position: 0 -50px;}
    .top-navigation ul li.therapeutic-services a:hover { background-position: 0px -50px;}
    .top-navigation ul li.program-development a:hover { background-position: 0px -50px;}
    .top-navigation ul li.training-and-supervision a:hover { background-position: 0px -50px;}

    which in this case is exactly the same as:

    Code:
    .top-navigation a:hover { background-position: 0 -50px;}

    Keeping the code simplified can sometimes help with these kinds of problems. I’ll look at it again in a bit

    # May 7, 2009 at 5:27 pm

    Thanks Ashton. I have been combing through the code as well. Thanks for the tips on simplifying some of the code. I will definitely do this in hopes of making it easier to troubleshoot along with more efficiency. I’ll keep checking back to see if you find anything.

    Thanks,
    Mike

    # May 8, 2009 at 10:45 am

    Ashton,

    I tried simplifying the css a bit based on your suggestions in the second example you supplied, however the hover now doesn’t seem to be working in terms of the image changing its background-position. Any ideas of what I am doing wrong?

    Thanks
    Mike

    # May 8, 2009 at 10:53 am

    Never mind. Stupid me, it was something simple that I missed. But on a separate note, I still haven’t been able to resolve the IE 6 issue. Any luck with this?

    Thanks
    Mike

    # May 8, 2009 at 12:03 pm

    I don’t have access to ie6 at the moment (actually it’s Friday afternoon and I can’t be bothered to boot up the pc ;) ) but I can offer a bit of educated guesswork if you’re game.

    I know that ie6 does have some issues with negative margins and you have a negative top margin on the np-consulting-header div. Thing is, you really don’t need that margin at all. Try removing that and reducing the bottom padding on the top-navigation div by 2 pixels instead.

    It should look like this:

    Code:
    .top-navigation {
    height:53px;
    padding:20px 41px 18px;
    }

    .np-consulting-header {
    background:transparent url(../images/home/np-consulting-header.jpg) no-repeat scroll 0 0;
    height:222px;
    margin:0;
    }

    # May 8, 2009 at 12:33 pm

    Thanks for trying but this still didn’t do the trick. So I’m still game for anyone who has suggestions. :mrgreen:

    Thanks,
    Mike

    # May 8, 2009 at 12:53 pm

    Could you be more specific? What exactly is the problem?

    # May 8, 2009 at 1:51 pm

    When you hover over the top navigation (one of the buttons) I am changing the image with a background-position class. This is working fine on all browsers except IE 6. On IE 6 when you hover over the button, while the image changes fine, the entire <div> for the top navigation pushes the header image down about 20px. Since I need this header to align with my image background it looks all out of whack. See the screen shot below.

    [attachment=0]IE6.jpg[/attachment]

    Thanks,
    Mike

    # May 8, 2009 at 2:29 pm

    Well I can’t see anything that would obviously cause it. So the only thing I can suggest is a slightly different approach to achieve the same effect. You could be a little more specific in the css and a bit more general with your bg positions.

    Code:
    .top-navigation {
    height: 53px;
    padding: 19px 43px;
    }

    .top-navigation ul li {
    float: left;
    text-align: center;
    padding: 0 4px 0 0;
    display: inline;
    }

    .top-navigation ul li a {
    background-position: center top;
    height: 50px;
    text-indent: -9999px;
    display: block;
    }

    .top-navigation ul li.home a {
    background: url(../images/navigation/home.png) no-repeat;
    width: 153px;
    }

    .top-navigation ul li.therapeutic-services a {
    background: url(../images/navigation/therapeutic-services.png) no-repeat;
    width: 263px;
    }

    .top-navigation ul li.program-development a {
    background: url(../images/navigation/program-development.png) no-repeat;
    width: 263px;
    }

    .top-navigation ul li.training-and-supervision a {
    background: url(../images/navigation/training-and-supervision.png) no-repeat;
    width: 263px;
    }

    .top-navigation ul li a:hover, .top-navigation ul li a#active {
    background-position: center bottom;
    }

    It certainly won’t break anything and it may just help.

    # May 8, 2009 at 3:33 pm

    This definitely helps clean the css up a bit but I’m sorry to say I am still running into the same issue. It’s almost as if the hover state has some sort of padding or margin associated with it that keeps pushing whatever is above it down. Very frustrating :evil: . So if you can thin of anything else let me know. Thanks again for trying.

    Mike

Viewing 15 posts - 1 through 15 (of 25 total)

You must be logged in to reply to this topic.

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