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