Member Avatar for 3265002918

Hey,

Can someone help me figure out why this is displaying differently in IE vs. Firefox? I am trying to make it look the same on both browsers. I would like the "mainlevel-nav" to display in the middle of the red bar on top, but nothing I try works.


The files are attached.

Thank you,
Jason

mecca_template_css.zip (465.64 KB)
  • 2 Contributors
  • 1 Reply
  • 96 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by peter_nichol

Dani AI

Generated

This thread shows a classic cross‑browser centering issue: the nav looks different because user-agent defaults, font metrics, or layout mode differ between IE and Firefox. supplied the files and rightly pointed at spacing — build on that by using a predictable layout method instead of nudging with offsets or browser‑sniffed stylesheets.

A reliable modern approach is Flexbox (works in current browsers). Make the red bar a flex container and vertically center its children:

.topbar {
  display: flex;
  align-items: center;   /* vertical centering */
  height: 48px;          /* explicit height helps consistency */
  background: red;
}

#mainlevel-nav {
  margin: 0 auto;        /* optional: center horizontally */
}

For older browsers where flex is not available, the table/table-cell method is a simple fallback that also yields consistent vertical centering:

.topbar { display: table; width: 100%; height: 48px; }
#mainlevel-nav { display: table-cell; vertical-align: middle; text-align: center; }

Quick troubleshooting checklist: confirm a standards DOCTYPE so IE is not in quirks mode; give the bar an explicit height (or matching line-height) so vertical centering is deterministic; inspect computed box model in each browser to find differing margins, paddings, or font metrics; use a small normalize/reset to remove UA differences. Useful references: a flexbox primer A Complete Guide to Flexbox and the quirks mode explanation on MDN (standards vs quirks) (). For cross‑IE testing, Microsoft provides VMs for different IE versions (developer.microsoft.com).

Member Avatar for peter_nichol

There's 2 things I'd try here - firstly check that there's no margin above the navigation links.

p { margin:0px; }

or if you're using lists then

ul, li { margin:0px; }

If this still doesn't work then you can use the "position:relative" and then do "top:-10px;" - now this will move the IE as well, you will need 2 style sheets, one with just fixes for the other web browser and so when defining your style sheets you will need to do a web browser check to see what the user agent is and then pick the correct style sheet.

commented: thanks! I thought I had done that, but I left out the comma and only realized once I saw your post. +4
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.