Tabs not aligning properly in IE7

[DolphinDesign]

I am using the Drop Down Tabs Menu (#2) from Dynamic Drive <http://
www.dynamicdrive.com/dynamicindex1/droptabmenu.htm> and most everything is working correctly.

However, all tabs align fine in Firefox and Safari -- but tabs don't align correctly in IE7 -- does anyone know an IE hack to fix this?

Also padding is still not working in the .tabsON class that I added to change the page ON tab color -- (I used borders for now, not good, I know... any ideas?)

site can be viewed here: <http://www.smartplugsystems.qwestoffice.net/site_review/index.html>

CSS is here: <http://www.smartplugsystems.qwestoffice.net/site_review/styles/>

thanks much!
-- Heidi

Heidi Hackler
dolphindesign.seattle@gmail.com

[magicyte]

However, all tabs align fine in Firefox and Safari -- but tabs don't align correctly in IE7 -- does anyone know an IE hack to fix this?

An IE hack????? What in the world is an IE hack????? You probably mean "an experienced programmer".

Yeah. Could you explain a bit more? What exact alignment is there? It should be working fine, unless somethin's wrong with IE7 (which I DOUBT (tehehe!!) because IT IS "COMPLETELY ERROR FREE" (yeah right)). If IE's wrong, maybe then you would need to call Microsoft and complain in Bill's face. Nah! Just kiddin'! Maybe if you could post the CSS on the forum (cuz im to lazy to go see it now). Then I could help you.

-magicyte

[DolphinDesign]

Thanks for taking a look -- specifically, in IE7, the tabs move UP about 2 pixels from the cyan blue line that they should be sitting ON, (view in Firefox to see how it "should" look)

any help is much appreciated, I can not figure this one out! :-)

here is the css for the tabs:

.orangetabs{
padding-top: 1px;

}

.orangetabs ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
list-style-type: none;
}

.orangetabs li{
display: inline;
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
list-style-type: none;
color: #FFFFFF;
}

.orangetabs li a{
text-decoration: none;
margin-right: 0px;
color: #002878; /*THEME CHANGE HERE*/
background-color: #FF5A00;
padding-top: 3px;
padding-right: 7px;
padding-bottom: 3px;
padding-left: 7px;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #FF9459;
border-right-color: #FF9459;
border-left-color: #FF9459;
font-size: 110%;
}

.orangetabs li a:visited{
color: #002878;
}

.orangetabs li a:hover{
color: #FFFFFF;
background-color: #00aeef;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #46CCFF;
border-right-color: #46CCFF;
border-left-color: #46CCFF;
}

.orangetabs li.selected{
background-color: #00aeef;
color: #FFFFFF;
}

.orangetabs li.selected a{ /*selected main tab style */
background-color: #00aeef;
color: #002878;
}

.orangetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
background-color: #00aeef;
color: #FFFFFF;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #46CCFF;
border-right-color: #46CCFF;
border-left-color: #46CCFF;
}

.tabON {
text-decoration: none;
color: #FFFFFF;
background-color: #00aeef;
display: block;
font-size: 100%;
font-weight: bold;
display: inline;
margin-top: 1px;
margin-bottom: 0;
border-right-width: 3px;
border-left-width: 3px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #00AEEF;
border-left-color: #00AEEF;
margin-right: 0px;
margin-left: 0px;
padding-top: 3px;
padding-right: 1px;
padding-bottom: 0px;
padding-left: 1px;
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv_b{
position:absolute;
top: 0;
z-index:100;
width: 150px;
visibility: hidden;
border-top-width: 0;
border-right-width: 1px;
border-bottom-width: 0;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
background-color: #00aeef;
margin-top: 2px;
}

.dropmenudiv_b a{
width: auto;
display: block;
text-indent: 5px; /*THEME CHANGE HERE*/
border-bottom-width: 1px;
padding: 2px 0;
text-decoration: none;
color: #002878;
border-top-width: 0;
border-right-width: 0;
border-left-width: 0;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #002878;
border-right-color: #002878;
border-bottom-color: #002878;
border-left-color: #002878;
font-size: 85%;
}

.dropmenudiv_b a:hover{ /*THEME CHANGE HERE*/
background-color: #FFFFFF;
}

* html .dropmenudiv_b a{ /*IE only hack*/
width: 100%;
}