CSS not displaying correctly in IE & other browser issues

this site won’t display correctly for some reason in IE. the top menu is pushed to the left and the menu_btm is pushed up to the right.

article menu section header and section has some errors such as with spacing (In firefox and safari a section is displayed that is not otherwise displayed too).

Also for the “Sign up” text button in the paragraph appears properly in Chrome, but not in other browsers (specifically in safari and IE it is overlaying the horizontal rule graphic below).

There is also a tooltip that pops up except in IE. the code that I added for that should make it have a drop shadow in every browser, but it hasn’t in Chrome on the PC…

Any ideas?

Hi,

You have IE in quirks mode from a malformed doctype, you cannot have any space or characters before the DTD or IE will do whatever it pleases with your page.

Here is what it looks like (text added by me). You can’t see it in the page source, but there is a period before the opening bracket below the empty line.


[B][COLOR=Red]remove this line and first character below  
.&#65279;[/COLOR][/B]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

There are several other problems with your javascript page and you need to get the html cleaned up first. All those html comments are not helping things either.

Run your page through the validator and get the errors cleaned up before you start trying to debug the css.

this site is rooted in wordpress.

I am currently working with a php and css file in this. Let me know if I am correct in my interpretation of the code.

  • a lot of the errors are in the main html

  • some of the other errors are in the javascript.

(i actually did not make all the code, but I have put some of it in there and have discovered that there are a lot of errors in the overall code as a whole).

Is there a way to keep a section in the code (but hide it) without so many comments?

Is there a way to keep a section in the code (but hide it) without so many comments?
Hi,
Yes you could always set an element to display:none; if you want to keep it in the html and not display it.

You can use html comments but you have to use them correctly and IE will have problems with comments after a floated element if it comes directlt after that elements closing tag.

Look at your “Shop By Color” section and look below the last link. You see that straggling comment, it was not closed properly.

You have not removed all the whitespace above your doctype yet either. That will be the biggest problem with IE right now.

Thing is, you have to get all the html errors fixed before you even start trying to fix the problems you listed in your first post. It will be futile to attempt to try to fix any css at this point.

Most of us around here won’t work on Wordpress themes because everything is too intertwined with multiple stylesheets overriding each other to the point where you just want to pull your hair out. It is a WYSIWYG editor that is bad about producing poor code.