Member Avatar for dwlamb

Good day,

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

If you .

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

Edited by dwlamb because: minor grammatical fix
  • 2 Contributors
  • 5 Replies
  • 255 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by dwlamb

Dani AI

Generated

Short expert summary and a practical fix.

The symptom here is classic: switching a block element to display:inline removes the block box behavior that makes width/height and vertical padding/margins behave predictably. That explains why padding looked “lost” in one browser. Older Safari for Windows builds also had rendering quirks around percentage padding on inline elements, which matches the thread observations. Rather than strip your percent-based spacing, give the items inline flow while keeping block-box behavior by using inline-block (or use a modern layout like Flexbox).

A minimal, cross-compatible change:

#subNavigation .menuItem {
  display: inline-block;
  vertical-align: middle; /* or top */
  /* keep your percent padding/margins here */
}

/* legacy IE fallback only if you must support IE6/7 */
#subNavigation .menuItem { display:inline-block; *display:inline; *zoom:1; }

Or, if you prefer a modern approach that handles spacing and alignment cleanly:

#subNavigation { display: flex; gap: 1%; align-items: center; }
#subNavigation .menuItem { display: block; }

Troubleshooting checklist

  • Confirm a standards DOCTYPE (quirks mode changes box behavior).
  • Test after switching to inline-block — if padding returns, the inline display was the issue.
  • If results differ between browsers, try a current Safari build (older PC Safari had several bugs).
  • Use devtools to inspect computed padding and display; that quickly shows whether the element is treated as inline or block-box.

Notes: ’s observation about the Safari version aligns with this diagnosis; ’s point about pixel values can help debugging but isn’t necessary—inline-block or flexbox will let percentage padding work reliably across modern browsers.

Recommended Answers

All 5 Replies

Member Avatar for 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.

Member Avatar for 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.

Edited by dwlamb because: n/a
Member Avatar for pixelsoul

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

Member Avatar for 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.

Member Avatar for 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, .

Thank you for your time and patience.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.