Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 466
  • Last Modified:

IE align menu with CSS

I'm trying to add a menu to my new web design, and I;m having an issue with it aligning and looking proper in IE. It looks GREAT in Firefox, Safari, and Chrome, but it does not line up correctly in IE.

I'm floating it right and padding it up. It looks great in FF, but how can I get it to work in IE?

Address of new site is www.duffyskennebunk.com/new
.chromestyle{
width: 670px;
float: right; 
position: absolute;
display: inline;
padding-top: 3px;
padding-right: 11px;
padding-left: 238px;
font-weight: bold;
}

Open in new window

0
cluffcakes
Asked:
cluffcakes
1 Solution
 
Britt ThompsonSr. Systems EngineerCommented:
IE treats padding and margins a bit differently. You'll need to setup a separate style sheet for IE that will load after your primary css file...like this:

<!--[if IE]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

In this case you'll probably just need to adjust your padding in your ie.css and it may look something like this:

.chromestyle{
padding-top: 0;
padding-right: 8px;
padding-left: 238px;
}
0
 
cluffcakesAuthor Commented:
I put
            <!--[if IE]><link href="includes/ie.css" rel="stylesheet" type="text/css" /><![endif]-->
in my html doc

then put

.chromestyle{
float: right;
display: inline;
padding-top: 500px;;
padding-right: 5px;
padding-left: 243px;
position: absolute;
}

in my ie.css doc and still cant get it to budge. Even with making atrocious numbers. Driving me crazy!
0
 
nanharbisonCommented:
(you have a typo in your css, two semicolons after the padding top, although it probably doesn't affect the outcome.)
If that doesn't work, then another css element is impacting the position.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
cluffcakesAuthor Commented:
Still not working.

Here is the rest of the original css. Ideas?
html {
	background-image: url('http://www.duffyskennebunk.com/new/img/bg.jpg');
	background-repeat: repeat-x;
}
 
 
body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 15px;
 height:100%;
 margin: 0;
}
 
#container
{
	
	margin:0 auto;
	width:955px;
	/*overflow:hidden;*/
}
#main {
	float:left;
	display: inline;
	width:955px;
	text-align:left;
}
img{
	border: 0;
	padding: 0;
}
p
{
	margin:0;
	padding:0 0 10px 0;
}
 
/* Links */
a, a:link, a:visited, a:hover, a:active {
	color:#942923; 
	background-color:transparent; 
	text-decoration:none; 
	-moz-outline-style:none; 
	/*fix will not validate*/
}
 
a:hover {
	color:#075590; 
	text-decoration:underline; 
	-moz-outline-style:none; 
	/*fix will not validate*/
 
}
p a, p a:link, p a:visited, p a:hover, p a:active {
	color:#942923; 
	text-decoration:none; 
	-moz-outline-style:none; 
	/*fix will not validate*/
}
 
p a:hover, p a:active {
	color:#075590; 
	text-decoration:underline; 
	-moz-outline-style:none; 
	/*fix will not validate*/
}
 
/*NAV and SUBNAV and TERTIARY NAV styles*/
#header
{
	width: 955px;
	height: 95px;
	background: url(/new/img/header.png) no-repeat;
}
#nav-container
{
	width: 725px;
	margin-top: 18px;
	margin-left: 268px;
	margin-right: 11px;
	position: absolute;
	padding: 0px;
}
 
/* IMAGES*/
#images-container
{
	float:left;
	width: 954px;
	padding-top: 2px;
	background:url(/new/img/images_bg.jpg) repeat-y;
}
 
 
#images-bottom
{
	float:left;
	width: 954px;
	height: 2px;
	background:url(/new/img/images_bottom.jpg) no-repeat;
}
 
/*CONTENT SECTION - GENERAL STYLE*/
#content-container
{
	float:left;
	width: 954px;
	background:url(/new/img/content_bg.jpg) repeat-y;
}
#content-bottom
{
	float:left;
	width: 954px;
	height:15px;
	background:url(/new/img/content_footer.jpg) repeat-y;
}
#title
{
	float:left;
	width:794px;
	padding-bottom: 20px; 
}
 
#content {
	float:left; 
	display: inline;
	width:850px; 
	padding:20px 50px 10px 60px;
}
#col-1 {
	float:left; 
	display: inline;
	width:400px; 
}
#col-2 {
	float:left; 
	display: inline;
	width:400px;
	margin-left:35px;
}
#col-2 img
{
	border: 2px solid #ffffff;
}
 
strong {
	font-weight:bold;
}
 
h2{
	font-size: 14px;
	font-weight:bold;
	color:#075590;
	margin:0;
	padding: 10px 0 5px 0;
}
h3{
	font-size: 13px;
	font-weight:bold;
	margin:0;
	padding: 10px 0 10px 0;
}
/* FOOTER STYLES*/
#footer
{
	float: left;
	display: inline;
	background:url(/new/img/footer_bg.jpg) no-repeat;
	width: 955px;
	height: 25px;
	font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-size: 11px;
	font-weight:bold;
	padding-top: 6px;
	color: #ffffff;
}
#footer ul
{
	width: 450px;
	margin:0 auto;
	list-style:none;
}
#footer ul li
{
	display:block;
	float:left;
}
#footer ul li.footer-bullet{
	padding: 0px 20px 0px 20px;
	font-size: 12px;
}
#footer ul li a
{
	color: #ffffff;
	text-decoration:none;
}
#footer ul li a:hover
{
	text-decoration:underline;
}
 
#twitter_div
{
	font-size: 11px;
	color: #075590;
	font-style: italic;
	padding-left: 475px;
	padding-top: 8px;
	padding-right: 65px;
	text-align: right;
}
 
#twitter_update_list
{
	list-style-type: none; 
}
 
.chromestyle{
width: 670px;
float: right; 
position: absolute;
display: inline;
padding-top: 3px;
padding-right: 11px;
padding-left: 238px;
font-weight: bold;
}
 
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}
 
.chromestyle ul{
width: 100%;
margin: 0;
text-align: center; /*set value to "left", "center", or "right"*/
}
 
.chromestyle ul li{
display: inline;
padding: 0px;
}
 
.chromestyle ul li a{
padding: 0px;
margin: -4px;
text-decoration: none;
}
 
/*.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
/*background: url(chromebg-over.gif) center center repeat-x; }  /*THEME CHANGE HERE*/
 
 
/* ######### Style for Drop Down Menu ######### */
 
.dropmenudiv{
position:absolute;
top: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
width: 200px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
}
 
 
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: #942923;
background-color: #ffdc78;
}
 
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
 
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #075590;
color: #ffffff;
}

Open in new window

0
 
nanharbisonCommented:
Try putting borders around some of the divs to see where their edges are in the IE stylesheet. Adding a border will throw everything out of place, but you will be able to see what element is causing the problem. This kind of thing has happened to me, and it is so tedious to find the cause in IE.
0
 
nanharbisonCommented:
can you give us the html code for the page too?
0
 
mstrelanCommented:
If you add the following to the VERY top of your HTML file it tells IE to interpret padding properly.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Open in new window

0
 
nanharbisonCommented:
wait, never mind, I can get it from the browser.
0
 
cluffcakesAuthor Commented:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	 
		<title>Duffy's Tavern &amp; Grill - Kennebunk, Maine</title>
 
		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
		<meta name="keywords" content="kennebunk, maine, me, restaurants, restaurant, dining, dinner, lunch, casual, duffy's tavern & grill, duffy's tavern and grill, kennebunk pub, kennebunk tavern, tavern &amp; grill, maine bar, maine pub, lafayette center, kennebunk lafayette center, lafayette pub, lafayette bar, lafayette tavern and grill, 4 main street">
		<meta name="description" content="Duffy's Tavern &amp; Grill, located at 4 Main St, Lafayette Center, Kennebunk, Maine is Kennebunk's premier family tavern and grill in Southern Maine.">
		
		<link rel="stylesheet" type="text/css" href="http://www.duffyskennebunk.com/new/includes/style.css" />
		<!--[if IE]><link href="includes/ie.css" rel="stylesheet" type="text/css" /><![endif]-->
		<link rel="shortcut icon" HREF="http://duffyskennebunk.com/img/favicon.ico">
		<script type="text/javascript" src="includes/chrome.js"></script>
 
	</head>
	<body>
	<div id="container">
		<div id="main">
		
			<div id="header">
				<div id="twitter_div">
					<ul id="twitter_update_list"></ul>
				</div>
 
				<div class="chromestyle" id="chromemenu">
					<ul>
						<li><a href="#" rel="dropmenu1"><img src="img/nav/story.png" alt="Our Story" /></a></li>
							<img src="img/nav/b1.png">
						<li><a href="#" rel="dropmenu2"><img src="img/nav/menu.png" alt="The Menu" /></a></li>
							<img src="img/nav/b2.png">
						<li><a href="#" rel="dropmenu3"><img src="img/nav/whatsup.png" alt="What's Up?!" /></a></li>
							<img src="img/nav/b3.png">
						<li><a href="#" rel="dropmenu4"><img src="img/nav/contact.png" alt="Contact Us" /></a></li>	
					</ul>
				</div>
 
				<div id="dropmenu1" class="dropmenudiv">
					<a href="#">About Us</a>
					<a href="#">Careers</a>
					<a href="#">Press</a>
				</div>
 
 
				<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
					<a href="#">Lunch/Dinner</a>
					<a href="#">Beverages</a>
					<a href="#">Breakfast</a>
				</div>
 
				<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
					<a href="#">Schedule</a>
					<a href="#">Brew Crew Crew</a>
					<a href="#">Email Newsletter</a>
				</div>
			
				<div id="dropmenu4" class="dropmenudiv" style="width: 150px;">
					<a href="#">Online Reservations</a>
				</div>
 
			<script type="text/javascript">cssdropdown.startchrome("chromemenu")</script>
 
			</div>
			
			<div id="images-container">
				<center><iframe src="includes/images.html" width="950" height="164" scrolling="no" frameborder="0" align="middle"></iframe></center>
			</div>		
			<div id="images-bottom"></div>
			
			<div id="content-container">
				<div id="content">
 
					<div id="title"><img src="img/titles/title_about.png" alt="About Us" /></div>
					<div id="col-1"><p><img src="http://www.duffyskennebunk.com/img/bio_duffy.jpg" align="left" alt="David 'Duffy' Cluff" hspace="5" vspace="5" /><h2>Duffy - President</h2>
Born, raised and educated in Kennebunk, David "Duffy" Cluff could very well be considered Mr. Kennebunk. Many know Duffy from his twenty year career with Kennebunk Fire Rescue, most recently serving as Deputy Chief. In 1986, Duffy founded Duffy's Pizza in Lower Village, Kennebunk. Learning from the Meserves, Duffy led Duffy's Pizza to great success. Shortly after starting a family with his wife Laurie, Duffy sold Duffy's Pizza and turned to his career with the Town of Kennebunk. Twenty years later in 2008, Duffy and business partner Shawn Spencer decided revive the <i>Duffy's</i> name and open Duffy's Tavern & Grill. Duffy lives in Kennebunk with his wife, Laurie, and sons Chris (away at college in Vermont) and Dylan (a student at Kennebunk High School).</p></div>
<div id="col-2">
<p><img src="http://www.duffyskennebunk.com/img/bio_patti.jpg" align="right" alt="Patti Bibber" hspace="5" vspace="5"  /><h2>Patti - General Manager</h2><br/>
Patti Bibber is what many in Kennebunk call a "transplant." Born in Massachussets, Patti moved to Maine in 1999 and started her own inn, the Spofford Inn on Summer Street in Kennebunk. While Patti is new to Maine, she is not new to the hospitality industry. With over thirty years experience serving, bartending, and managing in restaurants and hotels in Massachusetts and Maine, Patti brings a broad skill set and knowledgebase to Duffy's Tavern & Grill. She's tenacious and a stickler for details. Patti lives in Kennebunk with her husband, Eddie. </p></div>				
</div>
				</div>
			<div id="content-bottom"></div>
		</div>
		<div id="footer">
			<ul>
				<li><a href="#">contact</a></li>
				<li class="footer-bullet">&bull;</li>          
				<li><a href="#">careers</a></li>
				<li class="footer-bullet">&bull;</li>
				<li><a href="#">press</a></li>
				<li class="footer-bullet">&bull;</li>
				<li><a href="#">search</a></li>
				<li class="footer-bullet">&bull;</li>
				<li><a href="#">site map</a></li>
 
			</ul>
		</div>
<!--[if !IE]>FOOTER ENDS<![endif]-->
 
	</div>
 
	<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
	<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/duffyskennebunk.json?callback=twitterCallback2&amp;count=1"></script>
	
	</body>
</html>

Open in new window

0
 
myderrickCommented:
You can also try using the actual width rather than 100% for the following class

.chromestyle UL

Good luck

MD
0
 
nanharbisonCommented:
You should either float the element or use absolute positioning, but not both. That might be messing up the layout in IE.
0
 
nanharbisonCommented:
Another thing, you haven't assigned any css to the div containing the navigation, the chromemenu -
<div class="chromestyle" id="chromemenu">
you should apply the positioning to the div
0
 
nanharbisonCommented:
It looks like you got this aligned properly in IE, what did you change?
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now