Grow your CSS skills. Land your dream job.

At a loss. Please help

  • # March 31, 2009 at 1:44 pm

    Hello CSS-Tricks community,

    I currently stumped on an issue I have with a site. The link is below, currently on IE6 and IE7 nothing shows up??? well the main map element which is the whole site doesnt appear nor do the relatively positioned ul elements. Thank you in advance.

    http://www.themerrittparkway.com

    Jeff

    # March 31, 2009 at 1:57 pm

    I don’t have access to windows right now but check this. In your CSS file where you reference the images eg.

    Code:
    #map{margin:0 20px 0 50px;background:url(‘../images/map.png’)no-repeat;height:500px;}

    try adding a space between your closing parenthesis and the rest of the rule like so

    Code:
    #map{margin:0 20px 0 50px;background:url(‘../images/map.png’) no-repeat;height:500px;}
    # March 31, 2009 at 2:13 pm

    that worked brilliantly! Who would have thought? Thanks so much for your help. Text mate closes those spaces by default when compressing the code. Now I have more issues where the positioning is off from FF to IE… Let me know if you have any idea for this.

    Thanks Again!!!

    # March 31, 2009 at 2:29 pm

    I can see everything in both ie6 and 7, it’s just it’s not lining up properly.

    (Very cool site, btw)

    It’s double confusing in IE7 because the first one (29) is lined up perfectly and then slowly but surely each one thereafter gets pushed down a little more.

    I think you’ll have to go with IE6/7 specific style sheet.

    edit: As I refresh I see you’re already making changes! ha

    # March 31, 2009 at 2:41 pm

    No worries. I had the same problem on the first site I ever built. It took me 2 days to work it out! :?

    Ok, I just had a look in IE NetRenderer and it seems to me that your problems start where you are using negative values. So try this on a couple of map points and see if it makes a difference.

    Instead of

    Code:
    #map-items li.merwins {
    background:transparent url(../images/btwn-exits.gif) no-repeat scroll 0 0;
    left:356px;
    top:-14px;

    try

    Code:
    #map-items li.merwins {
    background:transparent url(../images/btwn-exits.gif) no-repeat scroll 0 0;
    left:356px;
    bottom:13px;

    and so on.

    # March 31, 2009 at 2:52 pm

    Thanks again for your compliments and assistance. unfortunately that did not work in FF. I am trying some hasLayout properties. I will keep this updated with my progress. I am going to be a bit stubborn in writing a conditonal statement for the moment. Hopefully I can work through this while keeping my hair.

    thanks.

    # March 31, 2009 at 3:07 pm

    Didn’t work in FF? Strange. I have just been through it with firebug and was able to re-position every element (that has a negative top value) with a normal bottom value.

    # March 31, 2009 at 3:13 pm

    ya know what your right. i did it on one. duh….relative. Im going to fix them in ff and see what happens.

    Thanks.

    # March 31, 2009 at 3:23 pm

    no bueno. im at a loss getting close ton conditional :(

    # March 31, 2009 at 3:38 pm

    I have just noticed that you have given your #map div a height of 500px even though the actual bg image is only 480px. That may be confusing IE.

    The only other suggestion I can think of is to give that #map div a width as well as height, make it position: relative and then absolutely position all the points inside it.

    # March 31, 2009 at 5:37 pm

    I ended up going with fixed as your suggestion. I dont know why I did not do that from the beginning. f-in! IE will always get you. Thanks again for all your help

    twitter.com/nerty

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

You must be logged in to reply to this topic.

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