Member Avatar for jules213

hi there,

bit of a newcomer to web building, and having now finished a site which is xhtml transitional validated (except for the <embed> on the first page for the embedded .rm file... which from what i've seen around the net, is insurmountable).

But I have a couple of questions which are baffling me. Here is a link to the home page:

1) For some reason, on IE, the site is aligned to the left hand side, whereas on NN and Mozilla it is centred, as it should be according to the CSS script. Any reason why?

2) At the bottom, on the bottom bar, I have some logo images, which i would like centered in the bottom bar along with the text, but can't for the life of me figure out how.

Any help, advice, pointers, etc, gratefully appreciated.

Thanks,

Jules

  • 3 Contributors
  • 2 Replies
  • 126 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by Dogtree

Dani AI

Generated

A few focused troubleshooting notes that complement and without repeating their quick fixes.

A likely cause of IE-only centering problems is the document rendering mode. If the DOCTYPE is not the very first bytes sent (for example, there is a byte-order mark, XML prolog, or stray characters before it) IE can fall back to quirks mode and ignore modern layout behavior. Server headers also matter: serving XHTML as an XML MIME type will behave differently in non‑Mozilla browsers. Use the browser’s developer tools (F12) to confirm the document mode and the computed box sizes for the page wrapper.

Internet Explorer’s old “hasLayout” behavior can produce mysterious shifts that don’t appear in Gecko browsers. Triggering layout on the page wrapper or footer often cures it; a noninvasive IE-only trigger is typically sufficient:

/* triggers hasLayout in IE6/7 without affecting modern browsers */
#wrapper {
  zoom: 1;
}

For the logo row, modern CSS makes centering simple and robust across browsers. Replacing the bottom-bar table cell with a semantic container and using a centered flex container will keep logos and text aligned horizontally and vertically:

.footer-logos {
  display: flex;
  justify-content: center;
  align-items: center;
}

Quick practical checks: temporarily disable CSS to confirm the HTML structure, add a visible border to the wrapper to observe its true width, validate the page markup, and inspect for floated elements inside the footer that are not cleared. Because saw the page centered in his environment while did not, differences in DOCTYPE placement, file encoding (BOM), or server MIME type are prime suspects.

Recommended Answers

All 2 Replies

Member Avatar for Zachery

1. site is aligned dead centered to me in IE6

2. In your site you could take

<table width="760" border="0" cellspacing="0" cellpadding="0" class="bgbottombar">
  <tr>
    <td class="baseline">

and change it too

<table width="760" border="0" cellspacing="0" cellpadding="0" class="bgbottombar">
  <tr>
    <td align="center" class="baseline">

:) remember while its an awsome thing to follow w3 standards and be as complaint as possible, not everything works cross browser sadly.

Member Avatar for Dogtree

1) You're using the margin:auto trick, right? IE can have issues with that, especially older versions. Though the site looks fine for me in IE6. A common hack to fix that is to use text-align:center on the box rather than the text.

2) If you want to use CSS for it, wrap everything in a div and center 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.