Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,254
Total Threads: 80,792
Total Posts: 566,472
There are 1927 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     HTML/XHTML/DHTML/CSS :

Menu slightly off in IE

Thread title: Menu slightly off in IE
Closed Thread    
    Thread tools Search this thread Display Modes  
10-14-2008, 04:54 PM
#1
TehClayzor is offline TehClayzor
TehClayzor's Avatar
Status: Junior Member
Join date: Mar 2006
Location: Texas
Expertise:
Software:
 
Posts: 35
iTrader: 0 / 0%
 

TehClayzor is on a distinguished road

Send a message via AIM to TehClayzor

  Old  Menu slightly off in IE

My main header navigation menu looks perfect in Firefox. But once I load it up in IE 6 or Safari the last button is moved down below the rest of the buttons and my logo disappears. Help is appreciated. Here is the header code and some Screen shots.

HTML
Code:
<div id="header">
	<div id="menu">                 
          <ul>
	          <li class="current"><a href="index.html">Home</a></li>
		  <li><a href="engineering/engineering.html">Engineering</a></li>
		  <li><a href="documentcontrol/documentcontrol.html">DocumentControl</a></li>
	          <li><a href="manufacturing/manufacturing.html">Manufacturing</a></li>
		  <li><a href="teamresources/teamresources.html">TeamResources</a></li>
                 <li><a href="maintenance/maintenance.html">Maintenance</a></li>
                 <li><a href="customersupport/customersupport.html">CustomerSupport</a></li>
                 <li><a href="mailto:blahbloooh@nothing.com?cc=blahblah@nothing.com">ITdept.</a></li>
	  </ul>
	</div>
</div>
<div id="logo-wrap">
  <div></div>
</div>
CSS
Code:
/* Header */

#header {
	width: 860px;
	height: 52px;
	margin: 0 auto;
	background: url(images/img02.jpg) no-repeat left top;
}

/* Menu */

#menu {
	float: left;
	width: 860px;
	height: 54px;
	
}

#menu ul {
	margin: 0;
	padding: 0px 0 0 20px;
	list-style: none;
	line-height: normal;
}

#menu li {
	display: block;
	float: left;
}

#menu a {
	display: block;
	float: left;
	padding: 12.75px 9px;
	letter-spacing: -.55px;
	text-decoration: none;
	text-transform: none;
	font: 16px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	border-style: outset;
	border-width: thin;
	border-color: #333333;
}

#menu a:hover {	
	background: #65944A;
	color: #FFF;
}

#menu .current  {
	background: #65944A;
	color: #FFF;
}


#menu .current_page_item a {
	color: #FFFFFF;
}

/** LOGO */

#logo-wrap {
	width: 860px;
	margin: 0 auto;
	padding: 75px 0 0px 0;
	background: url(images/karlee.png) no-repeat top right; 
}

#logo {
	width: 820px;
	height: 200px;
	margin: 0 auto;
	background: url(images/img05.jpg) no-repeat left top;
}

#logo h1, #logo h2 {
	float: left;
	margin: 0;
	padding: 0 0 0 20px;
	line-height: normal;
}

#logo h1 { 
	padding-top: 95px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size:36px;
	font-style: italic;
}

#logo h1 a {
	text-decoration: none;
	color: #FFFFFF; 
}

#logo h1 a:hover { text-decoration: underline; }

#logo h2 {
	padding: 115px 0 0 5px;
	font: italic 13px Georgia, "Times New Roman", Times, serif;
	color: #000000;
}

#logo p a {
	text-decoration: none;
	color: #B6ACA2;
}

#logo p a:hover { text-decoration: underline; }

Firefox 3




Internet Explorer 6

10-14-2008, 05:05 PM
#2
Wildcard is offline Wildcard
Wildcard's Avatar
Status: Member
Join date: Jul 2006
Location: soundwave.
Expertise:
Software:
 
Posts: 379
iTrader: 12 / 100%
 

Wildcard is on a distinguished road

Send a message via MSN to Wildcard

  Old

Try fooling around with display: inline; to eliminate the double padding error in IE.

10-14-2008, 05:32 PM
#3
TehClayzor is offline TehClayzor
TehClayzor's Avatar
Status: Junior Member
Join date: Mar 2006
Location: Texas
Expertise:
Software:
 
Posts: 35
iTrader: 0 / 0%
 

TehClayzor is on a distinguished road

Send a message via AIM to TehClayzor

  Old

Where would I add display: inline;? To the header id? menu?

11-03-2008, 09:50 PM
#4
Zazou is offline Zazou
Status: I'm new around here
Join date: Nov 2008
Location:
Expertise:
Software:
 
Posts: 22
iTrader: 1 / 100%
 

Zazou is on a distinguished road

  Old

For Safari, the issue can be the thickness of the text. If you've noticed it, Safari's text rendering isn't as good as FF or IE7's. The text is very different, and that can definitely work against you in this kind of thing.
In IE6, it looks like the Home link is more to the right, so that's a padding/margin problem, which is very very common in IE6.

As for the image, it depends. It can be not displaying because of the falling menu, or for some other reason. If it doesn't show, try putting the logo as a display:block; and give it a size (width and height). Sometimes, that fixes the problem.

Closed Thread    


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed