Member Avatar for f_atencia

I have a site that is generated by XSLT. However, a particular div is displaying a top border on IE, but not on other web browsers. How can I get the border to display on other browsers? If I put a margin of 76px around that div, it will display, but then throws the IE version out of position.

Help is greatly appreciated.

Thanks in advance.

  • 2 Contributors
  • 2 Replies
  • 90 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by f_atencia

Dani AI

Generated

A few focused checks that solve this kind of cross‑browser mystery faster than guessing:

As recommended, first reproduce the fragment as static HTML. If the static copy shows the border consistently, the problem is in the XSLT serialization or HTTP headers rather than the CSS. If the static copy fails the same way, debug the CSS/box model directly.

Quick checklist to follow in order:

  • Use each browser's inspector to view the computed border-top properties (width, style, color) and the element's computed box (height, margins, padding).
  • View the raw markup produced by the XSLT in the browser (view‑source) and run it through the W3C validator (validator.w3.org). Invalid or malformed markup often yields different rendering across engines.
  • Confirm the document DOCTYPE and the Content-Type header. Missing or mismatched DOCTYPE (or serving XHTML with the wrong MIME type) causes different parsing modes; see MDN — Doctype.
  • If the element contains only floated children, the parent can collapse to zero height so borders seem invisible; adding a clearing strategy or forcing the parent to establish a new block formatting context usually fixes that.

Small, useful CSS troubleshooting trick (apply only to your test container):

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

If adding margin made the border appear, that strongly points to a layout/flow issue (margin collapse, floats, or overlapping elements) rather than a missing border property. Produce a minimal, valid HTML test case and compare the generated XSLT output to it; fixing serialization (use xsl:output appropriately and correct DOCTYPE/headers) normally resolves browser inconsistencies. For CSS specifics, consult the browser inspector and the MDN CSS docs (for example border-top).

Recommended Answers

All 2 Replies

Member Avatar for floatingDivs

Did you create a static version of whatever it is you're trying to generate with XML/XSL? I've learned my lesson...always make sure a static (HTML) copy works in all browsers before attempting to create it with XML/XSL.

Paste your XML and XSL (separately...obviously) and I'll take a look.

Member Avatar for f_atencia

Hey thanks for the reply. I think I may have found my answer. I may need to create a valid xhtml form using XSLT in order for all the browsers to display the css properly. Wish I could post all my code here, but it's a work thing and it's highly confidential haha.

Thanks anyway.

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.