CSS help with IE fix?

srhino · November 22, 2013

I am working on trying to lay out a navigation bar using css...So far it looks great in every browser except in IE !

Heres the scenario...I have a logo floated to the left...I then want my navigation to be floated left and be 175px to the right of the logo.

here is the css... I am new to this so it could just be I am using bad practice? Please help !?

I have also attached the HTML doc

Thanks for your time!

@charset "UTF-8";
/* CSS Document */


html { 
  background: #000 url(../images/skyline.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  
}

p
{
	color:#FFFFFF;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:18px;
	font-weight:bold;
	text-align: left;
	margin: 5px;
	padding: 5px;
}

p.indent
{
	text-indent: 10px;
}


p.footer
{
	text-align:center;
}

p.center
{
	text-align:center
}

h1
{
	text-align:center;
	color:#FFFFFF;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-weight:bold;
}
h2
{
	color:#FFFFFF;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:24px;
}


label
{
	color:#FFFFFF;
	font-family:Arial, Helvetica, sans-serif;
}


#outer
{
	position:relative;
	background:url(../images/Content_Background.png);
	height: 160px;
	top: 0;
	width: 85%;
	margin:auto;
	text-align:left;
}


#nav
{
	position:absolute;
	top: 110px;
	height: 2.3em;
	background-color:#666;
	width: 100%;
	z-index: 2;
	
}

#logo
{
	position:absolute;
	z-index: 3;
	float:left;
}

#content
{
	position:absolute;
	background: url(../images/Content_Background.png); 
	top:160px;
	height:auto;
	width:100%;
}

#footer
{
	position: absolute;
	background:#000;
	color:#FFFFFF;
	bottom: -50px;
	width: 100%;
	height: 50px;
	

}

img.left
{
	float:left;
	border: solid 5px #FFF;
	margin: 25px;
	box-shadow:#000 5px 5px 2px;
	vertical-align:text-top;
  
	
}

.hr
{
	color:#FFF;
	clear:both;
}

.fb-like-box
{
	float:right;
	background-color:#CCCCCC;
	clear:both;
	margin: 15px;
}
/*  NAVIGATION AND MENUS  */
.cf:before,
.cf:after
{
	content:"";
	display:table;
}

.cf:after
{
	clear:both;
}

.cf
{
	zoom:1;
}

nav {
	background-color: #ccc;
	height: 2.3em;
	margin-left: 175px;
}
ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
	float:left;
}
ul {
	background: #666;
	height: 2em;
	width: 100%;

}

li
{
	position:relative;

}

li a {
	display: block;
	line-height: 2em;
	padding: 0 1em;
	color: white;
	text-decoration: none;
}
li a:hover, .topmenu > li:hover > a {
	background: #f00;
	height: 2em;
	
}
.current, a:hover.current {
	background: #F00;
	color: #eee;


}
/*dropdown menu styles*/
ul.submenu {
	float: none;
	color:#000000;
	background: #666;
	width: auto;
	height: auto;
	position:absolute;
	top: 2em;
	left: -9000em;

}
ul.submenu li {
	float: none;
}

.topmenu li:hover ul
{
	left:0;
}

ul.submenu li a {
	border-bottom: 1px solid white;
	padding: .2em 1em;
	white-space: nowrap;
}
ul.submenu li:last-child a {
	border-bottom: none;
}

ul.submenu li a:hover;
{
	background: #CCC;
	height: 2em;
	padding-top:.2em;
	top: 0;
}

HTML 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>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" type="text/css" href="css/main2.css">

<title>Santino's New York Pizza and Pasta</title>

</head>

<body>

<div id="fb-root"></div>

<script>(function(d, s, id) {

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) return;

js = d.createElement(s); js.id = id;

js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script> 

</body>

<div id="outer" align="center">

<div id="logo"> <img src="images/Santinos_logo.png" height="175" width="175">

</div>

<img class="background" src="images/banner_Interior.jpg">

<div id="nav">

<nav class="cf">

<ul class="topmenu">

<li><a href="index.html" class="current">HOME</a> </li>

<li><a href="images/SantinosMenu.pdf" target="_blank">MENU </a>

<ul class="submenu">

<li><a href="images/SantinosMenu.pdf" target="_blank">PDF MENU</a></li>

<li><a href="starters.html">Starters</a></li>

<li><a href="pizza.html">Pizza</a></li>

<li><a href="Italian_Specialties.html">Italian Specialties</a></li>

<li><a href="heroes.html">Heroes</a></li>

</ul>

</li>

<li><a href="about.html">ABOUT</a> </li>

<li><a href="contact.html">CONTACT</a></li>

<li><a href="location.html">LOCATION</a></li>

</ul>

</nav>

</div> 

<div id="content">

<img class="left" src="images/santino_window.jpg" height="267" width="400">

<h1>The History Of Pizza</h1>

<p class="indent">The first pizzeria in America was founded in 1905 in Little Italy, Manhattan, when Gennaro Lombardi, a pizzaiolo from Naples was granted the first license in the United States to sell pizza. New York style pizza is characterized by its large, wide, thin, and foldable yet crispy slices. All will agree, there's something in the water! For authentic NY pizza you must use New York City tap water to make the dough...this is what makes OUR pizza the BEST!</p>

<hr class="hr">

<div class="fb-like-box" data-href="http://www.facebook.com/SantinosNYPizzaandPasta" data-width="300" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>

<div id="footer">

<p class="footer">| © | Santino's New York Pizza and Pasta | 770.926.9184 |</p>

</div> 

</div> 



</div> 

</html>

rx3mer · November 24, 2013

Replace this and let me know if it works.



#nav

{

position:absolute;

top: 110px;

left: 175px;

height: 2.3em;

background-color:#666;

right: 0;

z-index: 2;

}

Sign In

CSS help with IE fix?

Recommended Posts

srhino

Link to comment

Share on other sites

rx3mer

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information