CSS - Horizontal Menu Appear Differently In Ie Vs Firefox

Well I'm pretty uneducated in CSS, I have just played around with it hours and hours and always figured out what I was trying to do. But right now I am stumped. Please view the following page in FireFox if you have it:
http://www.iqdrop.com/newiq/index.php
Then in IE

You see the Google ad is dropped way down in IE for some reason and overlaps my menu, and the <DIV> containing the word "index.php" is also taller in IE.

I'm not sure what is wrong and I've been trying all sorts of things with no luck. Thanks for any help.

i have a two div tags but the upermost tag sits outside the boundary of the one below

and the page seems to be over stretched in IE7

the page address is www.ftpimage.com

does anyone have any suggestions my css is as follows

Code:

body {
	margin: 0px;
	background: url(../img/top_bg.gif);
	background-repeat: repeat-x;
	font-family: Verdana, Arial, sans-serif;
    font-size: "15";
}

p {
	line-height: 50px;
	margin: 11px 0 10px 0;
	padding: 0px;
}

h2 {
	color: #9f9f9f;
	margin:0px;
	padding:0px;
	font-size: 15px;
}

ul {
	font-size: 10px;
	margin:0;
	padding:0;
	list-style-image: url(../img/bullet.gif);
}

a {
	color: #93B300;
}

a:hover {
	text-decoration: none;
}

blockquote{
	background: #F7FDE3;
	color: #606060;
	padding: 0px;
}


/**** Main Container ***/


#wrap {
       margin-left: 10px;
       margin-right: auto;
       width: 640px;
}


/**** Top ***/


#top {
	width: 155%;
	height:85px;
	color: #fff;
	background: #000 url(../img/top_bg.gif);
	overflow:hidden;
}

#top h2
{
    color: #87CEFA;
    letter-spacing: 3px;
    font-size: 2.4em;
    font-weight: normal;
    position: relative;
    margin: 0px;
    top: 33px;
    display: block;
    float: left;
    background: url(../img/bg_t.gif) no-repeat;
    padding-left: 8px;
}

#top h2 a {
	color: white;
	text-decoration: none;
}

#top h2 a:hover {
        color: #93B300;
}

#page
{
    margin-right: 20px;
    max-width: 10px
    
    
   
   
}


/**** Main Menu ***/


#menu {
	display: block;
	float:right;
}

#menu ul {
	margin: 0;
	list-style: none;
}

#menu li {
	display: block;
	float: left;
	white-space: nowrap;
}

#menu li a {
	display: block;
	padding: 20px 10px 12px 20px;
	text-decoration: none;
	color: #fff;
	font-weight: bold;
}

* html #menu a {width:1%;}

#menu li a:hover {
	background: url(../img/bg_menu.gif);
}

#menu li a.current {
	letter-spacing: 1px;
	color: gray;
	background: url(../img/bg_menu.gif);
}

#menu li a.current:hover {
	color: #fff;
}


/**** Content Container ***/


#content {
	width: 65%;
	margin-top:30px; 
	border: solid 2px black;
	 
	
}

#content h2 {
	margin: 0;
	padding: 10px 0 10px 0;
}


/**** Content ***/


#left ul {
	padding: 15px 0 15px 35px;
	margin:0;
}

#left li {
	margin-bottom:5px;
}

#left .box {
	width: 390px;
	float:left;
	display: block;
       margin-left: 20px;
	display: inline;
}


/**** Sidebar ***/


#right {
	width: 315px; 
	float: right;
	display:block;
	margin-top: 10px;
}

#right .box {
	width: 20em;/*280px*/
	background: #87CEFA;
	border: 1px solid #E1E1E1;
	padding:10px 10px 55px 10px; 
	float: right;
	
}

#right .box h2 {
	font-size: 3.1em;
	margin: 0px 0 0px 0;
	padding:0px 0 5px 0;
}

#right .box a {
	margin: 10px 0 10px 0;
	color: #93B300;
	font-size: 20px;
}

#right .box p {
	margin: 5px 0 10px 0;
	line-height: 15px;
}

#right .box ul {
	padding: 0 0 0px 20px;
	margin:10px 0 10px 0;
}

#right .box li {
	margin-top:5px;
}

html>body .box
{
width: auto;
min-width: 20em;
}

#nav{ list-style: none; margin: 2.0em 0; width: 25em; float: right;}
#nav li{ padding: 0; margin: 0; }
#nav a{
	display: block;
	height: 2.0em;
	padding: 0.3em 0.3em 0.3em 0.8em;
	border:solid;
	border-width:medium;
	border-bottom: 2px; /*solid #1a1a1a*/
	border-top: 2px; /*solid #1a1a1a*/
	border-color:Black; 
	color: black;
	background-color: #87CEFA;
	font-weight: bold;
	text-decoration: none;
	font-size:medium 

	}

#nav a:hover{
	color: #1a1a1a;
	background: url(../img/bg_t.gif) no-repeat;
	background-color: #fff;
	font-weight: bold;
	}	

/**** Clear Div ***/


#clear {
	display: block;
	clear: both;
	width: 100%;
	height:1px;
	overflow:hidden;
}


/**** Footer ***/


#footer {
        margin: 40px auto 0 auto;
	text-align: center;
	border-top: dotted 1px gray;
	padding: 20px 0 20px 0;
	width: 70%;
}

#footer p {
	margin: 0px;
	padding: 0;
 

Hi,

I've searched various threads in this forum, even tried re-iterating the question in another similar post to no avail. How is it that in Firefox (1.0) I get overflow occuring on a nested div, yet in IE (6) I do not?

i would like vertical scrollbars ONLY, if content is overflowing and not horizontal scrollbars-using a WC3 valid solution if possible.

Thanks in advance

A snippet of my css...
PHP Code:
/*css document*/
/* container div class*/
.outer{
    width: 336px;
    height: 448px;
    border-color: #000000;
    border-width: 1px;
    border-style: solid;
    float: left;
    margin: 0 0 0 10px;
    background-color: #ffffff;
    /*background:url("../images/pg_curl.gif") top right no-repeat;*/
}
/* inner-content div class*/
.inner
{
    width: 298px;
    height: 388px;
    
    border-color: #000000;
    border-width: 1px;
    
    /*margin: 34px 0 0 19px;*/
    margin: 2px 0px 0px 19px;
    font-size: 12px;
    /*line-height: 15px;*/
    color: #000000;
    clear: both;
    /*scrollbars for content overflow*/
    overflow:auto;
}

/* Example of problem: at the momment, in Firefox inserting this into the .inner classed div is creating horizonal overflow*/

.navigation {
    width: 298px;
}
.navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.navigation li {
    border-bottom: 1px solid #ED9F9F;
}
.navigation li a:link, .navigation li a:visited {
    display: block;
    padding: 2px 2px 2px 0.5em;
    border-left: 10px solid #711515;
    border-right: 1px solid #711515;
    background-color: #B51032;
    color: #FFFFFF;
    text-decoration: none;
}
.navigation li a:hover {
    background-color: #711515;
    color: #FFFFFF;
}
.navigation ul ul {
    margin-left: 12px;
}
.navigation ul ul li {
    border-bottom: 1px solid #711515;
    margin:0;
}
.navigation ul ul a:link, .navigation ul ul a:visited {
    background-color: #ED9F9F;

    color: #711515;
}
.navigation ul ul a:hover {
    background-color: #711515;
    color: #FFFFFF;
} 

You'll have to bear with me on the CSS, the file is a mess. I couldn't get it to do what I want, so I had to copy the file from someplace else, so there's alot of code commented out.
The HTML is much cleaner though!



The issue is in the image above is that the 'Contact' and 'Back to Projects' images are too high in Safari. In IE and Firefox they're placed correctly.
All the other images on the rest of the site line up fine, as you can see with the JW logo, Resume link, and even the bar across the screen

All the images are in their own < li > (I think it's weird myself, but it works). And the placement is done in the CSS.

Code:

<li id="ResumeHigh"><a href="resume.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('resume','','images/resume_rollover.gif',1)"><img src="images/resume.gif" name="resume" border="0"  id="about" /></a></li>

<li id="ContactHigh"><a href="contact.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/contact_rollover.gif',1)"><img src="images/contact.gif" name="contact2" border="0" id="contact2" /></a></li>

<li id="BackHigh"><a href="index.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Back','','images/back_to_proj_rollover.gif',1)"><img src="images/back_to_proj.gif" name="Back" width="141" height="9" border="0" id="Back" /></a></li>

And the CSS Alignment:
Code:

#ResumeHigh {left:550px; top: 62px; width: 141px; height: 11px;}
#ContactHigh {left:550px; top: 78px; width: 141px; height: 11px;}
#BackHigh {left: 550px; top: 101px; width:141px; height:9px;}

Full Pages:
http://www.jerrywatersarchitect.com/sample/contact.asp
http://www.jerrywatersarchitect.com/sample/jw2.css


Any ideas whats causing the 'Contact' and 'Back to Projects' to be a few pixels too high?
I appreciate any help you can provide.

Hi everyone

A bit of a call for help with some niggly issues - all found on the following page and css:

http://www.crashingbydesign.com.au/rsaa/index.html
http://www.crashingbydesign.com.au/rsaa/home.css

1. Two of the absolutely positioned divs don't show up at all in IE6, but they're fine in Opera 7.5 and Firefox 1.0PR. The ones with id's "title" and "utility" are the problem ones and I can't see what the problem is with IE. In addition to this, this div shows up in a different position in both Opera and Firefox (10 pixels higher in Opera). Please help!!

2. The links in the "mainnav" div are only clickable either at the very top of the <a> element (Firefox) or the very bottom of the <a> element (Opera), however in IE the whole <a> element is completely clickable. I can't see any element that is overlapping. What is going on??

All help appreciated.

Cheers

Bevester

The link to my page is:
crowncontainer.com/dev/activity_test.php

you'll have to post the www. in front, i'm a new user and can't post URL????

I have validated both the CSS and the XHTML.


If you open in IE, the width starts out at 200px, which is what I've defined in CSS. If you open it in Firefox, it is wider and I don't know why?

Also - when you click on the submit button, the program will return data in an AJAX call and the data will load in a div directly underneath the form. When the data is returned in IE, the width of the left nav will increase to the same width that displays in Firefox.

Because of this, I have to believe that there is some buggy code that causes it to 'sort of' work in IE but not in Firefox?

Can someone take a stab at this and help me? I want to keep my left nav width to 200px;

Hi all,

I've got a horizontal menu that is working just fine in every browser but IE 6 and 7. In IE it's almost there, except that the submenus will only appear one level deep. The menu is created with nested lists. The :hover functionality is simulated via JavaScript for IE 6. The IE developer toolbar shows the 3rd level menu is correctly being changed to display: block when its parent is hovered, and the border the dev toolbar draws even puts it in the correct place, it just doesn't actually appear.

You can find the page he
http://www.perceptes.com/topdog/

The CSS and JS (uses jQuery) can be found he
http://www.perceptes.com/topdog/css/screen.css
http://www.perceptes.com/topdog/css/ie.css (loaded with a conditional comment)
http://www.perceptes.com/topdog/js/tdps.js
http://www.perceptes.com/topdog/js/ie.js (loaded with a conditonal comment)

For a specific example of what I'm talking about, try hovering over the second item, Filters & Parts. This will give you another level with four choices. Each of those also has child elements, but when hovered over, the next level doesn't appear. Try it in something other than IE 6 or 7 to see how it's supposed to look.

Thanks very much in advance!

Ok, I know virtually nothing about css, but realized that that a css menu is better for SEO. Anyway I found this vertical menu that works the way I want it. But I also need a horizontal version of it with dropdown submenus. Can someone help with this? I have been trying a bunch of things but it just looks awful and doesn't work right. It has 3 basic componets; Html, Javascript, and css.

Here they are below.

drop_down.js:
Code:

// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList; 

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>
<title>Horizontal Drop Down Menus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="drop_down.js"></script>
<style type="text/css">
@import "style2.css";
</style>
</head>
<body> 
<ul id="nav"> 
  <li><a href="#">Home</a></li> 
  <li><a href="#">About</a> 
    <ul> 
      <li><a href="#">History</a></li> 
      <li><a href="#">Team</a></li> 
      <li><a href="#">Offices</a></li> 
    </ul> 
  </li> 
  <li><a href="#">Services</a> 
    <ul> 
      <li><a href="#">Web Design</a></li> 
      <li><a href="#">Internet Marketing</a></li> 
      <li><a href="#">Hosting</a></li> 
      <li><a href="#">Domain Names</a></li> 
      <li><a href="#">Broadband</a></li> 
    </ul> 
  </li> 
  <li><a href="#">Contact Us</a> 
    <ul> 
      <li><a href="#">United Kingdom</a></li> 
      <li><a href="#">France</a></li> 
      <li><a href="#">USA</a></li> 
      <li><a href="#">Australia</a></li> 
    </ul> 
  </li> 
</ul> 
</body>
</html> 

Style2.CSS:
Code:

body {
	font: normal 11px verdana;
	}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px; /* Width of Menu Items */
	border-bottom: 1px solid #ccc;
	}

ul li {
	position: relative;
	}
	
li ul {
	position: absolute;
	left: 149px; /* Set 1px less than menu width */
	top: 0;
	display: none;
	}

/* Styles for Menu Items */
ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff; /* IE6 Bug */
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
		
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
		
li:hover ul, li.over ul { display: block; } /* The magic */ 

See the last post for the solution.

Before I get to the CSS and the markup, some background info: I am rebuilding a web-based database to be all-CSS (except for the tabular data, of course). I want to make it accessible in Safari, Firefox/Mac and Firefox/Win. Anything else would be a plus but is not necessary. The markup relies heavily on PHP.

The problem lies with a horizontal nav bar I have at the top of every page. I'm using a modified version of the Suckerfish Dropdown that you can find on either HTML Dog or A List Apart.

In Safari, this works to perfection. In Firefox/Mac, the alignment is a little off (which I'll fix later), but other than that works pretty well. In Firefox/Win, this absolutely blows up all over the place. There are a lot of symptoms to describe, so for now I'll provide the CSS and the markup, and if more description is necessary, I'll provide it as best I can.

Without further ado, here's the CSS for the menu:

Code:

#main_menu {
top: 0;
left: 0;
position: fixed;
width: 100%;
background: #D8DCEF;
margin: 0; padding: 1px 0;
text-align: left;
border: 1px dotted #446CB4;
border-width: 0 0 1px 1px;
}

#nav, #nav ul {
float: left;
list-style: none;
padding: 0;
margin: 0 2px;
font-weight: bold;
}

#nav a { color: #111; }

#nav li, #nav li.search {
float: left;
padding: 1px 4px;
margin: 0 2px;
border: 1px solid transparent;
background: transparent;
text-align: center;
}

#nav li.search { padding: 0 4px; border: 0; }
#nav li:hover { border-color: #3466B1; background: #fff; }
#nav li.search:hover { background: transparent; }

#nav li span { font-size: 9px; line-height: 11px; }

#nav li ul {
position: absolute;
left: -999em;
width: 150px;
font-weight: normal;
border: 1px solid #3466B1;
margin: 1px 0 0 0;
}

#nav li li {
width: 142px;
margin: 0;
padding: 0 4px;
line-height: 1.5em;
border: 0;
background: #fff;
text-align: left;
}

#nav li li a {
display: block;
width: 142px;
text-decoration: none;
padding: 0;
}

#nav li li a:hover { color: blue; }
#nav li ul ul { margin: -1.6em 0 0 150px; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li li:hover, #nav li.sfhover { background: #D8DCEF; }
#nav ul.end { width: 300px; }
#nav ul.end li, #nav ul.end li a { width: 292px; }
#nav ul.long { width: 165px; height: 300px; overflow: auto; }
#nav ul.long li, #nav ul.long li a { width: 142px; }
#nav li.flyout { background: url(../images/icons/arrow.gif) center right no-repeat #fff; }
#nav li.flyout:hover { background: url(../images/icons/arrow.gif) center right no-repeat #D8DCEF; }
#nav li.separate { border-top: 1px solid #3466B1; background: #EFF1F9; font-style: italic; }

And here's an anonymized version of the markup:

Code:

<div id="main_menu">
	
<ul id="nav">

<li>Menu 1<ul>
	<li><a href="#">Choice 1</a></li>
	<li><a href="#">Choice 2</a></li>
</ul>
</li>

<li>Menu 2<ul>
	<li><a href="#">Choice 1</a></li>
	<li class="flyout">Submenu 2a<ul class="end">
		<li><a href="#">Subchoice 1</a></li>
		<li><a href="#">Subchoice 2</a></li>
		<li><a href="#">Subchoice 3</a></li>
	</ul>
	</li>
	<li><a href="#">Choice 2</a></li>
</ul>
</li>

<li>Menu 3<ul>
	<li><a href="#">Choice 1</a></li>
	<li><a href="#">Choice 2</a></li>
	<li><a href="#">Choice 3</a></li>
</ul>
</li>

<li>Menu 4<ul>
	<li><a href="#">Choice 1</a></li>
	<li><a href="#">Choice 2</a></li>
</ul>
</li>

<li class="search"><form name="search" action=""><input name="name_search" type="text" onFocus="if(this.value=='Search')value=''" onBlur="if(this.value=='')value='Search';" value="Search" size="25"> <input type="submit" name="Submit" value="Go"></form></li>

</ul>
							
</div>

When I comment out the main menu, the pages load just fine, so it has to be somewhere in the code for the main menu (or that means it's somewhere else entirely). Thanks in advance for taking the time to look at my code, and any help at all is extremely appreciated.

I'm using this for a horizontal rule, I'm after a 1 pixel blue line...
Code:

hr {
  border: 0;
  width: 98%;
  height: 1px;
  color: #003366;
}

But while I get what I'm after in IE, in Firefox there is nothing, zip, no line at all.

What's wrong?

I am trying to create a navigation menu for a page using images i have sliced in photoshop and I now need to put the images all on a 900px wide line and link them to the appropiate pages.

When i put the images next to each other i end up with a gap. The only way I have found to solve the problem is to leave the img src all on the same line. I'm sure this isn't the best way to do it and it is throwing out the div below.

Ideas anyone?

Code:

Code:
Original - Code <div id="nav"> <img id="home" src="images/menu/home.gif" alt="" /><img id="about" src="images/menu/about.gif" alt="" /><img id="wedding" src="images/menu/wedding.gif" alt="" /><img id="corporate" src="images/menu/corporate.gif" alt="" /><img id="occasions" src="images/menu/occasions.gif" alt="" /><img id="contact" src="images/menu/contact.gif" alt="" /> </div>

  
<div id="nav">
<img id="home" src="images/menu/home.gif" alt="" /><img id="about" src="images/menu/about.gif" alt="" /><img id="wedding" src="images/menu/wedding.gif" alt="" /><img id="corporate" src="images/menu/corporate.gif" alt="" /><img id="occasions" src="images/menu/occasions.gif" alt="" /><img id="contact" src="images/menu/contact.gif" alt="" />
    </div>

Jake

I have a horizonatal menu on my webise and the list items that drop down, are all jumbled into a single block of text. How do I create a new line fore each list item?

what i want as horizontal fly out menu BUT I want the list of items to appear horizontally in a line below. These menus have the items appear vertically from a horizontal menu

i looked at these and could find one

http://www.cssdrive.com/index.php/menudesigns/category/C20/