Force cell element to align right in IE(Navigation Menu)
Is there any IE hacks to force an element to align right in IE?
It looks really messy in Internet Explorer. I tried some workarounds but
nothing worked.
HTML:
<div class="centered" style="top:3px; overflow:normal;"><br />
<table style="width:100%; border-spacing:0; margin:0 auto;">
<tr>
<td align="left" valign="top">
<a href="aboutus1.php" target="content"><img
src="images/cti-logo.png" alt="logo" align="left" /></a>
</td>
<td id="cssmenu" style="position:relative; margin-top:21px;
float:right; margin-bottom:-3px; margin-right:-1px;">
<ul id="navbar">
<li><a href="welcome.php"><img src="images/home.jpg"
onmouseover="this.src='images/hover-home.jpg'"
onmouseout="this.src='images/home.jpg'"/></a></li>
<li><a href="aboutus1.php" class="menu"
target="content"><img id="id_About"
onclick="over('about')" src="images/aboutus.jpg"
onmouseover="this.src='images/hover-aboutus.jpg'"
onmouseout="if(me2=='about'){}else{this.src='images/aboutus.jpg'}"
/></a>
<ul>
<li class="x" style="left:-20px;"><a
href="aboutus1.php" onclick="over('about')"
id="id_About" target="content">ABOUT CTI</a></li>
<li class="x" style="left:-20px;"><a
href="aboutus2.php" onclick="over('about')"
id="id_About" target="content">OUR
CLIENTS</a></li>
<li style="left:-20px;"><a href="aboutus3.php"
onclick="over('about')" id="id_About"
target="content">MISSION / VISION </a></li>
</ul>
</li>
<li><a target="content" href="partners.php"><img
onclick="over('partners')" id="id_Partners"
src="images/partners.jpg"
onmouseover="this.src='images/hover-partners.jpg'"
onmouseout="if(me2=='partners'){}else{this.src='images/partners.jpg'}"
/></a></li>
<li><a href="products1_1.php" target="content"><img
onclick="over('products')" id="id_Products"
src="images/products.jpg"
onmouseover="this.src='images/hover-products.jpg'"
onmouseout="
if(me2=='products'){}else{this.src='images/products.jpg'}"
/></a></li>
<li><a href="contactus.php" target="content"><img
id="id_Contactus" onclick="over('contactus')"
src="images/contactus.jpg"
onmouseover="this.src='images/hover-contactus.jpg'"
onmouseout="
if(me2=='contactus'){}else{this.src='images/contactus.jpg'}"
class="contactus" /></a></li>
</ul>
</td>
</tr>
<tr>
<td colspan="2" class="bar"></td>
</tr>
</table>
</div>
CSS:
* {
font-family: verdana;
color:#514f4d;
}
html { overflow-y:scroll; }
img { border:0; }
body {
margin:0;
padding:0;
text-align:center;
}
.centered {
width:830px;
border:0px;
margin:0 auto;
}
div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.blue { border:1px solid #00b1ef; }
.container {
border-collapse: collapse;
position: relative;
min-height: 90%;
height: auto !important;
height: 90%;
margin: 0;
width: 100%;
}
.header {
margin: 0 auto;
width:100%;
height: auto;
border-collapse: collapse;
}
.b, .back-more:hover {
color:#00b1ef;
font-face:verdana;
}
.footer, .push {
width:100%;
height: 40px;
clear: both;
margin: 0 auto 0;
}
p.copyright {
font-weight: bold;
text-align: center;
line-height:11px;
}
p { color:#514f4d;}
.a {
text-align: left;
font-family: verdana;
font-size: 11pt;
text-decoration: none;
color : #000000;
}
#cssmenu {
list-style:none;
border:none;
}
#cssmenu ul {
list-style: none;
margin:inherit:
}
.box {
border:1px solid #cccccc;
width:272px;
height:290px;
padding-bottom:0.5em;
overflow:hidden;
-moz-box-shadow 3px 5px 4px rgba(235, 235, 235, 1);
-webkit-box-shadow: 3px 5px 4px rgba(235, 235, 235, 1);
box-shadow: 3px 5px 4px rgba(235, 235, 235, 1);
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2,
Direction=10, Color='#060606')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2,
Direction=10, Color='#060606');
}
.x { line-height:1.5em; }
.bar {
background: url('images/heading-top.jpg') repeat-x;
height:20px;
position:relative;
z-index:1;
margin-top:95px;
}
<!--Navigation-->
#navbar {
margin: 0;
padding: 0;
}
#navbar li {
list-style: none;
float:left;
}
#navbar li a {
display: block;
background-color:#03beff;
text-decoration: none;
font-size:0.62em;
text-align:center;
}
#navbar li ul {
display: none;
width:5.3em; /**Width to help Opera out **/
}
/**hover state**/
#navbar li:hover ul {
display: block;
position: absolute;
margin-top:-2px;
padding:0;
z-index:99999;}
#navbar li:hover li {
float: none;
}
#navbar li:hover li a {
/**background-color: #2177c0;**/
/**border-bottom: 1px solid #fff;**/
color: #fff; }
#navbar li li a:hover {
background-color: #2177c0; }
<!--End of Navigation-->
I also search all over the net but of no luck. I'm frustrated. You can
check it out here
No comments:
Post a Comment