Monday, 12 August 2013

Force cell element to align right in IE(Navigation Menu)

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