Cross Browser compatibility with CSS and “if statements”

After finishing an intermediate level CSS class, I re-designed my portfolio website in tableless CSS. I ran into issues with my drop down menus. In IE7, when I would click my drop down menu, it would cause un-wanted scroll bars to appear. This happened in a screen size of 1024 x 768. Also, the drop downs would not work in IE6. Firefox and Opera did not seem to be an issue. So I went to Killersites forum (www.killersites), and some of the members helped thru the issue.

For the IE7 issue I added in my style sheet:

#navbar li li{ float:none; }

My style rule float: left from the #navbar li style was pushing the dropdowns out to the right

-------------------------------------------------------

For the IE6 issue I added an if statement in the head section of my web page:



I then added a behavior file csshover.htc. Downloaded from
http://www.xs4all.nl/~peterned/csshover.html, and put it in the same folder/directory as the html file.

After adding adding these, my drop downs worked good. I also, learned about
. They helped me with cross browser issues. I created my main style sheet to work with Firefox and Opera, and then added the for IE6 and IE7.