We help IT Professionals succeed at work.

Weird CSS issue in IE Compatability Mode

hydrazi
hydrazi used Ask the Experts™
on
Hello,

I have a website that I am fixing that needs to look the same in all browsers, including IE compatibility mode.  That seems to have the worst time of displaying the top menu right.  It skews to the right and is very annoying.  Any ideas on where I am going wrong?

http://www.mindfireweb.com/ricelaw/
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
sometimes the compatability mode does some weird stuff with margin collapsing, I would first make sure that the containing divs and the list itself have both their margins and their padding set to 0 in both the inline styles the style sheet.
Commented:
You have unbalanced tags. In particular, there is an extra </div> tag. That might not be the cause, but it could be. The first order of troubleshooting display issues is to make sure your code validates. Go to http://validator.w3.org/ and drop the address in. If you have extra or unclosed tags, unexpected display issues will happen. There's a great plugin for this type of thing:

Firefox - http://users.skynet.be/mgueury/mozilla/ (this is the developers page, you can install through Firefox's add-on manager though. Just search for html validator in the add-ons)

Chrome - https://chrome.google.com/webstore/detail/cgndfbhngibokieehnjhbjkkhbfmhojo
Commented:
As NerdsNow suggested, browsers add their own default styling. It's always best to reset the css in the beginning. A warning, if you do it now, you're likely to be fixing things in other places. It's best done in the very beginning. Before you start building the site out.

One method - http://meyerweb.com/eric/tools/css/reset/ 

The quick and dirty method (my choice) , on the very first line of your very first css file -

*{margin:0;padding:0}

Author

Commented:
Going through using the validation area at w3.org now!  Very useful, though there are some errors I do not understand why they are errors.

Commented:
Been there :) Like what?

Commented:
I also know that feeling, I use Chrome's validator, and apparently there are 71 issues on this page ;-) What are you seeing?

Author

Commented:
Sorry still going through them, but it appears the problem lies somewhere in the Joomla CKMenu module.  

Author

Commented:
These tools helped me find the issue!