Need some CSS help (navbar element showing slightly differently in IE)

DJMK4 · 21 Aug 2009 at 09:09

Hi,

I was wondering if somebody would be kind enough to have a look at a problem I have at the moment with a website im developing.

The element I am having problems with is #nav2 which is the grey navigation bar with the login text boxes. It works fine in Firefox, all lined up correctly but in IE7 so it seems its slightly lower than it should be, could somebody advise on what Im doing wrong or where to place the IE hack if needed?

Open the following link in Firefox and IE7 (and 6 if you have it)and you will see what I mean.

The css file is all validated with no errors.

Here is my CSS

Code:

/*style.css copyright dmoranda.co.uk 2009
/*-------------------------------------------
/*Container Dimension (960px W by 650px H)
/*Margin Properties TOP/RIGHT/BOTTOM/LEFT*/

* {
		margin: 0px;
		padding: 0px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
}

body {
		margin: 10px 0px 0px 0px;
		background-color:#F2F2F2;
		/*background-image:url(images/bodypixel1.jpg);*/
		/*background-repeat: repeat;*/
}


/*CSS DIV Layout*/
/*---------------------------------------*/

#container {
		margin:0px auto;
		width: 960px;
		height: 655px;
		border: 1px solid #000000;
		background-color:#ffffff;
}

#banner {
		margin:0px auto;
		width: 960px;
		height: 110px;
		background-color: #000000;
		background: url(images/banner.jpg);
}

#nav{
		margin: 0px auto;
		width: 960px;
		height: 35px;
		background: url(images/navbar.jpg);
		background-repeat: no-repeat;
		/*border-bottom: 1px solid #8e8e8e;*/
		/*border-top: 1px solid #8e8e8e;*/
		/*text-align: center;*/
}

#nav2{
		margin: 0px auto;
		width: 960px;
		height: 25px;
		background: url(images/navbar2.jpg);
		background-repeat: no-repeat;
		/*border-bottom: 1px solid #8e8e8e;
		/*border-top: 1px solid #8e8e8e;*/
		/*text-align: center;*/
}

/*#login{
		margin: 0px auto;
		width: 550px;
		height: 20px;
		border: 1px solid #000000;

}	*/	

#mainbody {
		/*margin: 0px auto;*/
		width: 750px;
		height: 459px;	
		background: url(images/mainbody.jpg);
		float: right;
		/*background-color:#E6E6E6;*/
		/*min-height: 400px;*/	

}


#sidebar {
		/*margin: 0px auto;*/
		width: 210px;
		height: 459px;
		background: url(images/sidebar.jpg);
		background-color:#E6E6E6;
		
}

#mailform {
		margin: 0px auto;
		width: 37%;
		font-size: 0.7em;
		/*border: 1px solid #000000;*/
		
}

#footer {
		margin:0px auto;
		width: 960px;
		height: 26px;
		background: url(images/footer.jpg);
		/*clear: both;*/
		/*border-top: 1px solid #8e8e8e;*/
}
/*---------------------------------------*/



/* CSS Navigation Bar*/
/*---------------------------------------*/

#nav ul {
		width: 100%;
		margin: 0px auto;
		padding: 8px 0px 0px 0px;
		/*padding: 0px auto;*/
		text-align: center;
}

#nav li {
		display: inline;
		list-style-type: none;
}		

#nav ul li a{
		color: #ffffff;
		text-decoration: none;
		font-family: Arial, Verdana, Sans-Serif;
		font-size: 0.8em;
		padding: 0px 40px 0px 40px;
		
		/*border-left: 1px solid #8e8e8e;
		border-right: 1px solid #8e8e8e*/
}

#nav ul li a:hover{
		color:#ffffff;
		/*background:url(images/Buttons.jpg);*/
		text-decoration: underline;
}


/* IE7/6 Hacks */
/*---------------------------------------*/
:first-child+html #nav ul li a {
padding: 2px 15px 2px 40px;
}




/*IE6 Hacks */
* html #nav ul li a {
padding: 0px;
}
/*---------------------------------------*/



/*Text Classes*/
/*---------------------------------------*/
/*Margin Properties TOP/RIGHT/BOTTOM/LEFT*/

p.navbar {
		font-family: Arial, Verdana, Sans-Serif;
		padding: 2px 10px 5px 10px;
		font-size: 0.8em;	
		text-align: center;
		
}
		
p.maintext {
		font-family: Arial, Verdana, Sans-Serif;
		padding: 10px 5px 10px 10px;
		font-size: 0.8em;	
		text-align: left;
}

p.maintextcontact {
		font-family: Arial, Verdana, Sans-Serif;
		padding: 10px 5px 50px 10px;
		font-size: 0.9em;	
		text-align: left;
}

p.sidetext {
		font-family: Arial, Verdana, Sans-Serif;
		padding: 5px 5px 5px 10px;
		font-size: 0.7em;	
		text-align: left;
}

p.footer {
		text-align: right;
		padding: 6px 0px 0px 0px;
		font-family: Arial, Verdana, Sans-Serif;
		font-size: 0.7em;
		color: #ffffff;
}

h3 {
		font-family: Arial, Verdana, Sans-Serif;
		font-size: 0.8em;
		text-align: center;
}
		

/*Mailto*/
/*---------------------------------------*/


/*Links*/
/*---------------------------------------*/

/*a.nav:link {
		color: #000000;
		text-decoration: none;
}

a.nav:visited {
		color: #000000;
		text-decoration: none;
}

a.nav:hover {
		color: #000000;
		text-decoration: underline;
}
*/

And here is the index.php code

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>dmoranda.co.uk</title>
</head>

<body>

	<div id="container">
	
		<div id="banner">
			<img src="images/banner.jpg" alt="Banner" />
		</div>

		
			<div id="nav">
					<ul>
							<li><a href="index.php">Home</a></li>
							<li><a href="index.php">About</a></li>
							<li><a href="index.php">Networking</a></li>
							<li><a href="index.php">Web Development</a></li>
							<li><a href="index.php">My Portal</a></li>
							<li><a href="index.php">Contact</a></li>
					</ul>
			</div>
			
		<div id="nav2">
			
		
			<center>	
			<form name="form1" method="post" action="checklogin.php">
			<p class="navbar">
				Username:<input name="myusername" type="text" id="myusername"/>
				Password:<input name="mypassword" type="password" id="mypassword"/>
			<input type="submit" name="Submit" value="Login"/>
			</p>
			</center>
			
		
		</div>
		
		<div id="mainbody"></div>
		<div id="sidebar"></div>
		

		
		
			
		
		
	
		<div id="footer">
			<p class="footer">Developed by dmoranda.co.uk &copy; Copyright dmoranda.co.uk. All Rights Reserved.</p>
		</div>
		
		
	</div>

</body>


</html>

Would be extremely greatful for your help

DJMK4 · 21 Aug 2009 at 09:24

Ooooo I think iv sorted it all by myself by adding the following

Code:

:first-child+html p.navbar {
padding: 0px 0px 0px 0px;
}

Although the "Submit" button is slightly higher than anticipated, literally by about 1px.

Need some CSS help (navbar element showing slightly differently in IE)

DJMK4

DJMK4

DJMK4

DJMK4