Member Avatar for reeweb

I need serious help with a website!
It works fine with Safari, Google Chrome, and I spent a long time making it compatable for Firefox. But the website is completely differently in Internet Explorer. I am not having any luck at all with this one. If anyone could have a look and make suggestions as to what needs to be changed, it would be greatly appreciated.
I am especially having problems changing the menu bar – none of my css corrections seem to have any affect.
Here is a link to the website: www.vaudevillian.co.uk

  • 3 Contributors
  • 2 Replies
  • 350 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

Short checklist and targeted fixes that address the common IE differences raised in the replies (and expand on and ):

Start simple — three quick checks that cause big layout shifts in IE:

  • Confirm a standards DOCTYPE is present (no quirks mode).
  • Ensure IE isn’t running in an older document mode (use the X-UA-Compatible hint).
  • Make a minimal test page that isolates the menu (strip everything else) to reproduce the bug.

Key snippets (place in the document head):

<!DOCTYPE html>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

For HTML5 semantic elements (as noted): older IE (IE8 and earlier) won’t create/accept those elements unless they’re created via JS or a shim. Either include a small shim (served only to old IE via a conditional comment) or create the elements yourself. Also explicitly declare them as block-level in CSS:

<!--[if lt IE 9]>
<script src="/js/html5shiv.js"></script>
<![endif]>

header, nav, section, article, footer { display: block; }

Practical troubleshooting workflow:

  • Open IE’s developer tools (F12). Check Browser/Document Mode and inspect the menu element — if a rule is “struck out,” it’s either unsupported or overridden.
  • Inspect computed widths and floats. Narrow containers often break in IE when floats aren’t cleared or when box sizing differs. ’s note about block widths is on target.
  • Clear cache or append a version query to the CSS link (e.g., style.css?v=20121005) to ensure changes load.

Menu-specific fixes:

  • Prefer simple float-based layouts for the nav for broadest compatibility (example below). Avoid CSS3-only selectors like :nth-child for critical layout; use utility classes instead.
ul.main-nav { margin:0; padding:0; list-style:none; }
ul.main-nav li { float:left; margin-right:12px; }
ul.main-nav li a { display:block; padding:8px 10px; }

If the isolated test still fails, add a small IE-only stylesheet via conditional comments to patch layout differences. Conditional comments work up through IE9 (they’re ignored in IE10+), so target them only when testing older IE.

Recommended Answers

All 2 Replies

Member Avatar for masocha

l think the first thing you need to do is to try and force FF to reproduce the error then use FF to correct your CSS.Also take note of your block widths, if you make then too tight they will fall over in IE

Member Avatar for JorgeM

I beleive that part of your problem may be that you are using HTML5 elements. You should note that IE for version > 9, unlike the other browsers you mentioned, is not going to be able to style unrecognized elements (a.k.a the HTML5 elements). You can apply this html5shiv.

HTML5shiv

Here is some additional information about the HTML5shiv and page layout.

HTML5 Semantic Markup and Page Layout

Then continue your troubleshooting with various versions of IE.

Edited by JorgeM
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.