3 replies [Last post]
DJSdotcom
Offline
Enthusiast
Rochester, NY / Chicago, IL
Last seen: 16 years 34 weeks ago
Rochester, NY / Chicago, IL
Joined: 2003-03-23
Posts: 95
Points: 0

Instead of moving forward in the new design of my site (http://test.phark.net/newUI.html), I've been struggling with this problem in Mac IE 5.

The page looks good in IE6 for Windows, along with the usual slew of Gecko and WebCore enabled browsers... but I'm not really sure about the Mac IE 5 bug...

I used the box-model workaround for IE, but it still doesn't appear to work... check out the code but be forewarned, its some real complicated CSS haha:

     body {
        padding: 0px;
        margin: 0px; }
        
    #nav {
        width: 676px;
        height: 135px;
        padding: 54px 0px 0px 0px;
        background: transparent url(rosebig.jpg);
        margin: 0px auto 0px auto; 
        voice-family: "\"}\"";
        voice-family: inherit;
        height: 81px; }
    html>body #nav { height: 81px; }
        
    ul.button {
        float: left;
        list-style: none;
        padding: 0px;
        margin: 0px; }
        
    ul.button li {
        float: left;
        display: block;
        width: 101px;
        height: 28px;
        text-align: right;
        padding: 0px;
        margin: 0px;
        background: transparent url(regtrans.gif);
        border-top: 1px solid white;
        border-right: 1px solid white;
        border-bottom: 1px solid white;
        voice-family: "\"}\"";
        voice-family: inherit;
        width: 100px;
        height: 26px; }
    body>ul.button li { width: 100px; height: 26px; }
        
    ul.button li a {
        display: block;
        text-decoration: none;
        cursor: pointer;
        font-family: Verdana, Arial, sans-serif;
        font-size: 12px;
        color: white;
        background: transparent;
        margin: 0px;
        padding: 5px;
        width: 100px;
        height: 26px;
        voice-family: "\"}\"";
        voice-family: inherit;
        width: 90px;
        height: 16px; }
    body>li a { width: 90px; height: 16px; }
        
    ul.button li a:hover { background: transparent url(regover.gif); }
    
    ul.button li#current { 
        cursor: default;
        height: 80px;
        border-left: 1px solid white;
        background: transparent url(currenttrans.gif); }
        
    ul.button li#before { border-right: 0px; }
    ul.button li.first#current { border-left: 0px !important; }
        
    ul.button li#current a {
        cursor: default;
        height: 80px;
        background: transparent url(arrow.gif) no-repeat left bottom;
        voice-family: "\"}\"";
        voice-family: inherit;
        height: 70px; }
    body>li#current a { height: 70px; }
        
    a.logo {
        clear: left;
        display: block;
        float: right;
        text-align: right;
        text-decoration: none;
        margin-top: 4px;
        padding: 0px 5px;
        font-family: Georgia, Arial, sans-serif;
        font-size: 14px;
        color: white; }
        
    a.logo:hover {
        text-decoration: none;
        cursor: hand; }

Check out the URL listed above for the full source... thanks everybody!

-Mike

</twocents>

DJSdotcom
Offline
Enthusiast
Rochester, NY / Chicago, IL
Last seen: 16 years 34 weeks ago
Rochester, NY / Chicago, IL
Joined: 2003-03-23
Posts: 95
Points: 0

*Mysterious Mac IE5 problem...

**Fixed the previous problem with http://test.phark.net/newUI.html, but now the columns on the bottom do not work with IE6 on Windows (they work on Safari, Mac IE5, and Gecko browsers).

Any ideas?

-Mike

PS: TONY! I know you can help!

</twocents>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 2 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

*Mysterious Mac IE5 problem...

I'm still waiting for someone nice to send me a Mac. Cool

One thing I did notice is you have two </style> tags.
Also the leftbox is not floated, shouldn't that be float:left; after that I could only suggest playing around with the maths.

I'll have a closer look once I get home tonight.

DJSdotcom
Offline
Enthusiast
Rochester, NY / Chicago, IL
Last seen: 16 years 34 weeks ago
Rochester, NY / Chicago, IL
Joined: 2003-03-23
Posts: 95
Points: 0

*Mysterious Mac IE5 problem...

GREAT CALL TONY!

I replaced float: none with float: left, and now it works perfectly in IE6!

The reason that I wrote float: none was because I couldn't figure out how to float three columns, so I checked out 37signals' site (CSS gods of the universe here in Chicago, http://www.37signals.com), and copied what they had done for their three column layout, but something must have been different because it worked for them, but not for me lol.

I removed the extra style tag... now I've only got one more gripe (a very small one)...

Only in IE6, there is an extra pixel added to the bottom of the big red navigation section, it extends below the regular rose background picture, and it is an ugly red stripe because the background picture tries to repeat itself (currently not visible because i added the no-repeat rule to my background image). But there must be some hidden padding or margins in there somewhere causing the mishap... but oh well, don't worry about it.

Thanks again for your help Tony.

-Mike

</twocents>