Member Avatar for sandbox

This seems like a simple enough question to answer....

For some reason, FF and IE7 seems to render the navigation on my web page differently. Both the top and bottom borders of the links render as i want them to in FF, but not in IE7. Maybe someone could help me fix this, because i really dont know where to start....

Thankyou in advance.

  • 3 Contributors
  • 4 Replies
  • 106 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Nice catch by — this is a classic inline vs. block formatting issue and the replies from and were on the right track. Anchors are inline by default, so vertical padding, borders and height behave relative to the text line box. Different engines (Firefox vs older IE) handle that line-box rendering and baseline alignment slightly differently, which is why the same CSS can look different across browsers. See the CSS display and vertical-align behavior for details: display on MDN and vertical-align on MDN.

Practical fixes and checks:

  • Confirm the link element is not constrained by inherited line-height or float styles from parent elements.
  • Make the link act like a replaced/block-level box so its top/bottom borders are drawn consistently (block or inline-block). For old IE versions, you may also need the small “hasLayout” workaround.
  • Prefer styling the anchor itself (so the full clickable area is styled) rather than wrapping it in another element purely for presentation. That keeps semantics and accessibility intact.

Example (non-destructive) approach to try:

nav ol, nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ol li a {
  display: inline-block;
  padding: 6px 12px;
  vertical-align: top;
  /* IE6/7: trigger layout for inline-block behavior */
  zoom: 1;
  *display: inline;
}

If borders still appear off, use the browser devtools to inspect the computed box model and look for inherited line-height, padding or transforms. For a refresher on how the box model affects borders and padding, see MDN’s box-model guide: .

Recommended Answers

All 4 Replies

Member Avatar for sandbox

im, sorry, but maybe there is something that im missing here...


obviously, border declaration is a universal feature amongst the most popular browsers. From my knowledge, my syntax should render the proper appearance in both internet explorer and Firefox. all i did was simply define the top and bottom borders of the ol li a in one declaration:

border-bottom:5px double #CECFC6; border-top:1px solid #CECFC6;

is this wrong?

Member Avatar for sandbox

oops... stumbled on my own solution. Turns out that i needed to declare

display:block;

in order for it to render correctly

Member Avatar for MidiMagic

There are several goofy differences between how IE renders and how FF and other browsers render. IE is usually the culprit, because it won't stick to standards.

If you are trying to put a border on an inline object, it often does not work. Try enclosing the object in div tags, and put the border styels on the div.

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.