OK, I was told this belongs on this list, so I'll give it one more chance. Oh, and I've already been told not to worry about feeding IE on the Mac since it's on it's last legs. I'm willing to accept that if there is no solution that comes to light.
First, let me mention that I am not a Mac user - this is a problem a friend who does use a Mac is having with my web page. So, I'm straying into uncharted territory for me...<G>
I have a web page <http://www.splinterscraftworks.us/> with a 5 button menu that should be lined up across the top of the page, each button using only the width needed for the text. In all but one browser and OS it works just fine - but in the one setup the buttons are each 100% of the width of the page and the buttons are stacked vertically down into the content region.
This is very frustrating, especially since I don't have a Mac and must get a friend in Europe to check on his machines at work.
I suspect that it has something to do with the width: auto; - but this works in all other versions of IE (including on other Macs!), so why just this one?
The platform in question is:
IE 5..2 for Macintosh
Power Mac G4
MacOS 10.4.3
The HTML:
<div id="head">
<p class="button_menu"><a href="index.html">Home</a></p>
<p class="button_menu"><a href="Splinters_info_menu.html">About</a></p>
<p class="button_menu"><a href="Splinters_pen_menu.html">Pens</a></p>
<p class="button_menu"><a href="Splinters_combined_menu.html">Home & Office</a></p>
<p class="button_menu"><a href="Splinters_custom_menu.html">Custom</a></p>
</div>
The CSS:
.button_menu {
min-width: 5%;
font-weight: bold;
text-align: center;
margin-bottom: 3px;
margin-top: 3px;
padding: 2px;
border:3px solid snow;
float: left;
}
* html .button_menu {
width: auto;
}
.button_menu a {
padding: 4px;
text-decoration: none;
display: block;
color: #224059;
background-color: #b5c9e2;
border-top: 2px #cce3ff solid;
border-left: 2px #cce3ff solid;
border-bottom: 2px #31557f solid;
border-right: 2px #31557f solid;
}
.button_menu a:hover {
background-color: #99aabf;
border-top: 2px #31557f solid;
border-left: 2px #31557f solid;
border-bottom: 2px #cce3ff solid;
border-right: 2px #cce3ff solid;
}
************
I should add that I tried it using a list - same thing, plus some other problems...
So, if any kind soul can find a reason - or even a clue - for this happening on just this one set-up, I would really appreaciate it.
Thanks,
Stephen
Top