CSS looks wierd on mac

[DanPorter]

A few days ago I was completely novice to CSS, but I spent some time playing around and got my site (dsporter.smugmug.com) to a place I was comfortable with. My main interest was moving the navigation links on top of my banner image. I got it figured out by using the relative position and moving the links a bit. I also had to use relative position on the rest of the page to avoid having a big gap between the banner and images. The page looks good when I view it on Firefox or IE, but it got messed up when I viewed it on IE on a mac. Is there a better way to accomplish having my navigation links overlap the banner image? How can I avoid having a messy website for mac users? Here's my CSS if it helps and thanks in advance for the great support. I did a lot of research before going with smugmug and these forums have been immensly helpful over the last few days.


#homepage {
position: relative;
bottom: 60px;
}

#journal {
position: relative;
bottom: 60px;
}

#smugmug_small {
position: relative;
bottom: 45px;
}



/*------------- hnav------------*/

#hnav ul {
text-align: center;
padding-left: 0;
/* cancels gap caused by top padding in Opera 7.54 */
margin-left: 0;
color: #FFFFFF;
background-color: none;

width: 350px;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
/* fixes Firefox 0.9.3 */
border: 0px solid black;
line-height: 19px;
z-index: 2;
position: relative;
left: 250px;
bottom: 60px;
}

#hnav ul li {
display: inline;
}

#hnav ul li a {
padding-left: 7px;
padding-right: 7px;
color: #FFFFFF;
text-decoration: none;
/*border-right: 0px solid #FFFFFF;*/
/*border-left: 0px solid #FFFFFF;*/
}

#hnav ul li a:hover {
background: #FFFFFF;
color: #000000;
}

#hnav #active {
/*border-left: 0px solid #F2EEEC;*/
}

sorry for the long post. I hope it's not bad etiquette.

[Andy]

sorry for the long post. I hope it's not bad etiquette.

It's actually *good* ettiquete - the styler helpers here really appreciate all the info.

I'm not sure, specifically, what you don't like on your site on Mac? Safari, or Firefox? Because it looks great to me. I see the spacing differences between Safari and FF on Mac, in your header... one of the experts could probably diagnose it - but I really want to say:

SUPER LOOKING SITE :clap :clap and you learned this from the stuff here on dgrin? :bow :bow that's wonderful news. I your header, and I love this touch:

[Andy]

Dan,

You might try this, too:

/* hides name on homepage (including any 's) */
#userName {display: none;}

/* hides the word home */
#userHome {display: none;}

[DanPorter]

Wow, thanks for such a quick response. When I viewed the page on my sister's mac (running IE) the navigation links were centered in the banner and the thumbnails lower on the page were not properly aligned with the background. After seeing your screenshot it looks more likely that my sister needs to update her IE than I need to change all the code. Thanks again!

[Andy]

Wow, thanks for such a quick response. When I viewed the page on my sister's mac (running IE)


STOP!!!!!!!! IE on Mac blows. It's IE 5.5. :puke

Neither we, nor Microsoft, supports it any longer. Pay no attention to IE on Mac. Nobody cares anymore about that. Tell your sister to use Safari (native mac browser) or Firefox from www.mozilla.org -

Your work is great!

[Mike Lane]

Unfortunately I don't have access to Smugmug's inside info so I don't know what you page is. Care to post the address?

[DanPorter]

Unfortunately I don't have access to Smugmug's inside info so I don't know what you page is. Care to post the address?

dsporter.smugmug.com. It looks like it was hidden amongst the huge post. it's in my signature now.