Challenge with list items and Safari

[dwlamb]

Good day,

I've run into a problem with list items displayed inline (i.e., horizontally) using Safari for Windows.

If you follow this link, you'll find an uploaded static version of the problem.

Viewing it in IE7-8 and Firefox (Windows & Linux), the page yields as it should. The 4 menu items across the top are similar to the 4 items down the left side. However, in Safari the items displayed inline lose the padding.

Debugging this, I have narrowed it down that adding display:inline triggers the loss of the style.

There are two sections of my CSS that govern these areas:

.menuItem {
	background-color:		#ccaabb;
	border:				2px solid #033;
	color:				#000000;
	margin:				1em auto;
	padding:			3%;
	width:				85%;
}
#subNavigation .menuItem {
	display:			inline;
	margin:				.5%;
	padding:			1%;
}

To debug I've tried commenting out the last 3 lines of .menuItem. In another debug possibility, I changed the class name of divs falling under #subNavigation .menuItem and duplicated the appearance attributes to something like:

.menuItemInline {
	background-color:		#ccaabb;
	border:				2px solid #033;
	color:				#000000;
	display:			inline;
	margin:				.5%;
	padding:			1%;
}

These have been to no avail. I'm stumped and wondering if this is a quirk to Safari or maybe just Safari for Windows.

If it is a quirk, what is the work-around for displaying menu items evenly spaced and managed like a horizontal list?

Thanks for taking the time to read this,

Daniel

[pixelsoul]

This isn't an "answer" so much as a suggestion but, avoid using percentages for margins/padding etc and use pixels to define these values. There really isn't a good reason here to use a percentage and I can almost bet that is where Safari is failing at.

[dwlamb]

That is not a viable solution for this is a liquid/flexible lay-out. By what you're suggesting, all CSS in Safari would only work if it was fixed layout.

Intrigued to find a solution, I tried what you suggest and it didn't solve the problem.

Thanks for trying.

[pixelsoul]

I am sorry but that is not a "fluid" layout but if you feel inclined to use percentages that is fine...

[pixelsoul]

I have looked at the site in Safari on Windows 7 and the site looks the same there as it does in Chrome, Firefox, IE.

[dwlamb]

Until a few minutes ago, I was viewing it using Safari 3.2.3 on Windows XP. Recently, I had to rebuild my Windows installation. I thought the download of Safari was the most recent version. Just now, after reading your most recent reply, I checked the version. It didn't look right and I investigated further to see that Safari for PC is up to ver 5.x.

Now I am seeing results that are identical to the other browsers and I imagine what you are viewing.

Just so you don't think I'm totally nuts, I've uploaded a screen-shot of how it was rendering.

Thank you for your time and patience.