1 Replies - 626 Views - Last Post: 13 August 2013 - 08:30 AM

#1 yakult02  Icon User is offline

  • New D.I.C Head

Reputation: -3
  • View blog
  • Posts: 26
  • Joined: 04-December 09

Force menu navigation to align right in cell element(IE browsers)

Posted 12 August 2013 - 09:41 PM

Hi. I'm creating a simple website and it's working fine in FF and Chrome. But when viewed on IE, the header is a mess. The navigation menu is not aligned right. Since I am new to HTML/CSS I still dont know how to hack IE ('hack' as what I have searched in the internet). I've done searching all over the internet but of no luck.

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%;
}

#left-panel, #right-panel {
        border-collapse: collapse;
        display:inline-block;
        width:30em;
        height:100%;
        margin:0px;
        min-width:100px;
        background:white;
        overflow:hidden;
}
.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-->


Is This A Good Question/Topic? 0
  • +

Replies To: Force menu navigation to align right in cell element(IE browsers)

#2 DblAAssassin  Icon User is offline

  • D.I.C Regular

Reputation: 34
  • View blog
  • Posts: 261
  • Joined: 11-May 13

Re: Force menu navigation to align right in cell element(IE browsers)

Posted 13 August 2013 - 08:30 AM

Could you post a screenshot of what this looks like, in the IE browser, then what it looks like in Chrome or Firefox, so we can see how it's messing up, and how you want it to look.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1