First of all I would like to say that my site is a combination of html, css, and javascript codes. Some javascript is used for the menus and this COULD be at fault. I am hoping for a CSS fix... seeing as I know how to create an override for IE. You'll have to let me know if I am posting to the wrong area.
The (incomplete) site that works fine in both safari and firefox is:
www.aeoliaphotography.com
Unfortunately the drop down menus do not work properly in Internet Explorer 8... Oddly enough the first drop down appears great, but of course the one with some "horizontal pop-out" menus doesn't work and for some reason gets shoved to the far left side of the website. From what I see I am suspecting that IE is not recognizing the block item and wants to place it inline before "Clients" and "Contact"...but there isn't enough room. That is my best guess and I am still uncertain about how to fix it.
Since I am sure you are interested in seeing the code for the menu this is it (according to the IE hack.CSS, which I have been messing with some):
Quote:
body {margin:0px; font:11px helvetica,arial; background: whitesmoke} #container a img{border:none;} a:active{outline:none;} a:focus{outline:none;} #container{ width: 900px; height: 650px; margin-top: 20px; margin-right: auto; margin-left: auto; background-color: black; } #container2{ width: 900px; height: 650px; margin-top: 20px; margin-left:0px; background: #000000 url(studio/red.png) no-repeat; } #text{ line-height: 1.9; color: #ffbbd0; font-size: 12px; font-family:"HelveticaNue",MankSans,"GeosansLight", "Helvetica", "Arial"; margin-top:100px; margin-left: 720px; width: 150px; height: 500px; } #menubar{ width: auto; height: 31px; background-image: url(images/menubar.png); }
ul.menu {list-style:none; margin:0; padding:0; float:left}
ul.menu * {margin:0; padding:0}
ul.menu a {display:block; color:#fff;font-size: 11px; text-decoration:none; list-style:none}
ul.menu li {position:relative; float:left; margin-right:2px; margin-top: 0;}
ul.menu ul {position:absolute; top:0px; left: 43px; margin-top: 20px; display:none; opacity:0; list-style:none; display:inline;}
ul.menu ul li {position:relative; border-top:none; width:148px; margin:0px} ul.menu ul li a {display:block; padding:3px 7px 5px; font-family:"GeosansLight", MankSans, "Helvetica", "Arial"; font-size: 17px; color:#fff; list-style:none}
ul.menu ul li a:hover {}
ul.menu ul ul {left:148px; top:-1px; postion:absolute;}
ul.menu .menulink {margin-top: 0px; padding-left: 0px; padding-top: 0px; padding-bottom:0px; margin-bottom:0px; font-size: 20px; font-family: "MankSans", GeosansLight", "Helvetica, Ariel; width: 134px;}
ul.menu .menulink:hover, ul.menu .menuhover {}
ul.menu .sub {background:url(images/arrow.gif); line-style:none; text-decoration:none; width ; height; no-repeat}
ul.menu .topline {margin-top: 0;} ul, li {list-style-type: none;} #studio a{line-style:none; text-decoration:none; list-style-type:none; color:#fff;}
|
I can't imagine that you would need any more of the css since the rest is working fine. |
