CSS - Why Does This Css Work In Firefox & Ie7, But Not Ie6

Hi

I have a style made in CSS. It is a menu where if you hover over some of the menu a drop down box will appear. This works in Firefox but does not work in IE.

Here is the link: Look first in Firefox at my menu then look at it in IE.

http://www.bcit.gimppro.co.uk/index.php

Also is their some way to test my CSS code to make sure it works in all browser.

PHP Code:
#menu {
top:5px;
width: 8.87em; /* set width of menu */
background: #eee;
width: 100%;
} 

#menu ul { /* remove bullets and list indents */
list-style: none;
margin: 0;
padding: 0;
}

#menu ul ul {
position: absolute;
z-index: 500;
}

#menu ul ul ul {
position: relative;
top: 0;
left: 100%; /* to position them to the right of their containing block */
width: 100%; /* width is based on the containing block */
}

/* style, color and size links and headings to suit */
#menu a, #menu h2 {
font: bold 11px/16px arial;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}

#menu li {
/* make the list elements a containing block for the nested lists */
position: relative;
} 

div#menu ul ul ul,
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 8.87em;
float: left;
}

div.container{
    position:relative;
    top:0px;
    left:0px;
    width:995px;
    height:auto; 
}

#login{
    position:absolute;
    top:300px;
    left:745px;
    height: auto;
    width:240px;
    font: bold 11px/16px arial;    
}

#content{
    position:absolute;
    top:300px;
    left:0px;
    height: auto;
    width:695px;
    margin:0 .25em;
    padding: 5px 15px; 
    font: bold 11px/16px arial;    
    border: 1px solid black; 
}
#content h1, h2 {
    font-weight: bolder; 
}

#banner{
    position:absolute;
    top:0px;
    left:0px;
    height: auto;
    width:1000px;
} 

http://img55. imageshack .us/img55/6775/cssexamplesy8.png

^ please remove the space before and image shack to view the image

I've taken a screenshot of a problem I need help with, which is how IE and Firefox handle nested lists. Using code like this:

Code:

<ul>
 <li>item 1</li>
 <li>item 2</li>
 <li>
     <ul>
      <li>sub item 1</li>
      <li>sub item 2</li>
     </ul>
</li>
 <li>item 3</li>
</ul>

Firefox displays the new list without being pushed down yet IE seems to create the space for where the list item would be and I can't figure out how to remove the space / how to get it to act like firefox.

Removing the list item that holds the nested ul solves all problems but it isn't valid so I'm looking for another solution.

Cheers

My drop menu works fine in IE7, however in firefox the menu's don't drop. Anyhelp would be appreciated. Here is my css code.

Code:

#menu {
width: 769px;
height: 27px;
margin: 0px auto;
padding: 5px 0px 5px 0px;
background: #000000 url(images/SDCB-menu-bar.gif);
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 125px;
float: left;
}

#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
text-align: center;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #fff;
background: #000000 url(images/SDCB-menu-bar.gif);
text-transform: uppercase;
}

#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}

#menu li {
position: relative;
}

#menu ul ul {
position: absolute;
z-index: 500;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

Here is the HTML.

Code:

<div id="menu">

<ul>
  <li style="left: 50%;"><a href="http://mysite/index.html" title="HOME"><h2>HOME</h2></a></li>
</ul>

<ul>
  <li style="left: 50%;"><a href="http://mysite/index.html" title="ABOUT US"><h2>ABOUT US</h2></a></li>
    <ul>
      <li><a href="http://mysite/index.html" title="Board of Directors">Board of Directors</a></li>
      <li><a href="http://mysite/index.html" title="Ex-Officio Members & Staff">Ex-Officio Members & Staff</a></li>
    </ul>
</ul>

<ul>
  <li style="left: 50%;"><a href="http://mysite/index.html" title="NEWS/EVENTS"><h2>NEWS/EVENTS</h2></a></li>
    <ul>
      <li><a href="http://mysite/index.html" title="Calendar">Calendar</a></li>
	  <li><a href="http://mysite/index.html" title="Newsletter">Newsletter</a></li>
	  <li><a href="http://mysite/index.html" title="Photo Gallery">Photo Gallery</a></li>
    </ul>
</ul>

<ul>
  <li style="left: 50%;"><a href="http://mysite/index.html" title="RENEWAL PROJECT"><h2>RENEWAL PROJECT</h2></a></li>
    <ul>
      <li><a href="http://mysite/index.html" title="History">History</a></li>
      <li><a href="http://mysite/index.html" title="Executive Summary">Executive Summary</a></li>
      <li><a href="mysite/index.html" title="Plan & Dependencies">Plan & Dependencies</a></li>
		  <ul>
      <li><a href="http://mysite/index.html" title="Renewal Plan">Renewal Plan</a></li>
      <li><a href="http://mysite/index.html" title="Appendices">Appendices</a></li>
    </ul>
      <li><a href="http://mysite/index.html" title="garden">Community Learning Center & Garden</a></li>
      <li><a href="http://mysite/index.html" title="Get Involved">Get Involved</a></li>  
    </ul>
</ul>

<ul>
  <li style="left: 50%;"><a href="http://mysite/index.html" title="CONTACT US"><h2>CONTACT US</h2></a></li>
    <ul>
      <li><a href="http://mysite/index.html" title="Your Thoughts">Your Thoughts</a></li>
      <li><a href="http://mysite/index.html" title="Donate Now">Donate Now</a></li>
    </ul>
</ul>
</div>

Thank you in advance

The situation is very simple:

Code:

<div id="maindiv" style="border:1px solid #000000; width:400px; margin:0px; padding:0px;">
    <div id="reddiv" style="border:1px solid #FF0000; width:150px; float:left;">
        red box<br>
        red box<br>        
        red box<br>
        red box<br>
        red box<br>        
        red box<br>                
	</div>

    <div id="greendiv" style="border:1px solid #00FF00; margin-left:170px; width:100px;">
        green box<br>
        green box<br>
        green box<br>
        green box<br>        
	</div>
</div>  

AS you can see, I have a main div. Inside it, I have 2 divs:
red and green. If I enter text into the green div, the main div resizes automatically. But if I enter text into the red div, the main div doesn't resize, and so the red div overflows.

What I need is either enter text in the red or green divs and make the main div to auto resize.

(I'm using Mozilla FireFox)

Any Idea?

Hi. I am thinking my two problems are related!

Here are my two problems:
My top nav bar links don't work in Firefox and the design breaks in IE7.

Any help would be much appreciated! I have validated it, and I know the slider and video don't validate, but I still have these problems even when I take those out. Thanks so much for any help you can provide!

christthesavior.org


Thank you!!!

Hi all,

I'm trying to create a simple menu with rollover links using CSS, but while it works in IE, it stops as soon as the link text ends in Firefox. Is this because Friefox is ignoring the width and heigh commands in CSS? And is there any way to fix this? If so, how?

I've got this working on Firefox

Code:

	.menu_item {
	}
	.menu_item a:link{
	width: 163px;
	height: 21px;
	padding-top: 4px;
	padding-left: 20px;
	background-image: url(menu_rollover_0.gif);
	background-repeat: no-repeat;
	color: #6A7182; 
	text-decoration: none;
	}
	.menu_item a:active{
	width: 163px;
	height: 21px;
	padding-top: 4px;
	padding-left: 20px;
	background-image: url(menu_rollover_0.gif);
	background-repeat: no-repeat;
	color: #6A7182; 
	text-decoration: none;
	}
	.menu_item a:visited{
	width: 163px;
	height: 21px;
	padding-top: 4px;
	padding-left: 20px;
	background-image: url(menu_rollover_0.gif);
	background-repeat: no-repeat;
	color: #6A7182; 
	text-decoration: none;
	}
	.menu_item a:hover{
	width: 163px;
	height: 21px;
	padding-top: 4px;
	padding-left: 20px;
	background-image: url(menu_rollover_1.gif);
	background-repeat: no-repeat;
	color: #ED1C2D;
	text-decoration: none;
	}

Cheers.

I have added a percentage padding to some cells of my website (I'm really obliged to use tables and cells for that part of my website, so please do not suggest replacing the cells to DIVs as a solution). For some odd reason, the percentage padding shows just fine with Opera or Internet Explorer, but does not work at all in Firefox. Here is my CSS (and in dark red bold, the percentage padding concerned):

Quote:
html, body {
margin: 0px;
padding: 0px;
background-color: #ffffff;
font-family: verdana, tahoma, serif;
font-size: 11px;
color: #000000;
}
a:link, a:visited {
text-decoration: none;
color: #ff0000;
}
a:active, a:hover {
text-decoration: underline;
color: #ff0000;
}
form {
margin: 0px;
}
img {
border: 0px;
}
table {
border-collapse: collapse;
}
#top {
background: url(../images/top.jpg);
height: 100px;
}
#bar {
background: url(../images/bar.jpg);
font-weight: bold;
color: #ffffff;
height: 26px;
width: 100%;
}
#bar1 {
position: absolute;
top: 100px;
left: 0px;
background: url(../images/bar1.jpg);
height: 26px;
width: 4px;
}
#bar2 {
position: absolute;
top: 100px;
right: 0px;
background: url(../images/bar2.jpg);
height: 26px;
width: 4px;
}
.bar4 {
font-family: verdana, tahoma, serif;
font-weight: normal;
font-size: 10px;
width: 200px;
}
.bar5 {
font-family: verdana, tahoma, serif;
font-weight: normal;
font-size: 10px;
height: 18px;
}
a.nav:link, a.nav:visited {
text-decoration: none;
color: #ffffff;
}
a.nav:active, a.nav:hover {
text-decoration: underline;
color: #ffffff;
}
img.top {
height: 100px;
width: 395px;
}
td.bar1 {
padding-left: 6%;
}
td.bar2 {
padding-right: 6%;
}
td.bar3 {
padding-left: 1.4%;
}
And here is the HTML (in bold again the place concerned):

Quote:
<?$page='';?><?include'body/head.txt';?>

<div id="top">
<img src="images/top1.jpg" class="top" alt=""/></div><div id="bar1"></div><div id="bar2"></div>


<table id="bar">
<tr>
<td class="bar1">
<a href="index.php" class="nav">Index</a> | <a
href="forums.php" class="nav">Forums</a>
</td><td align="right" class="bar2"><form method="get" action="http://www.google.com/custom">
<table>
<tr>
<td><input type="hidden" name="domains" value="xander6669.com"/></td>
<td><input type="radio" name="sitesearch" value="" checked="checked"/></td><td>Le Web</td>
<td class="bar3"><input type="radio" name="sitesearch" value="xander6669.com"/></td><td>A Labrie.com</td>
<td class="bar3"><input type="text" class="bar4" name="q" maxlength="200"/></td>
<td class="bar3"><input type="submit" class="bar5" value="Rechercher"/></td>
</tr>
</table>
</form></td>
</tr>
</table>

</body></html>
So, anyone knows what the problem is? If you want to view how this thing looks like in Opera/IE/Firefox, just go the http://xander6669.com/.

Thanks for any help.

Hi. I've a div container with a gray bg color then inside I've two DIV (left & right). It works on IE but on firefox the bg color the the two DIV is white and if I add bg color=GRAY for the 2 DIV the middle is white.

And I don't want to put bg color on the class = left and right because if I want to reuse these with other stuff then the color won't match to other things.

How can I fix this problem?

Please take a look at the following link with IE & firefox and u know what I mean. Please take a look at source code or in here. Thank you!!!

http://yourbestproduct.com/test.html

CSS CODE:
body { text-align: center; }
#container {
width: 800px;
margin: 0 auto;
}
#sub_title {
background-color: #E6E6E6;
background-repeat: repeat;
padding: 2px;
width: 796px;
color: #848484;
}

.left {
float : left;
margin-left: 10px;
}
.right {
float : right;
margin-right: 10px;
}

HTML CODE:
<div id="container">
<div id="sub_title">
<div class="left">Left Message</div>
<div class="right">Right Message</div>
</div>
</div>

I'm going mad with this, I tested the CSS a:hover function over FF 1.0.7 and IE6, and the style file is simple:
PHP Code:
 h3 {
    margin:10px;
    color:#636500;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
}
p {
    margin:10px;
    color:#636500;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
}
a {
    text-decoration: none;
}
a:hover {
    color:#636500;
}
a:visited {
    color:#cecf9c;
}
a:link {
    color:#cecf9c;
} 





searched through the forum but seems nobody has got this problem... I just want the link to change color, I imported the css file to my html and it worked for the first time. I clicked on the link and then use brower's "Back" button to test it again, but the hover feature is not working anymore.

I think it may be affected by the a:visited style, but how do I make a:hover work all the time?

Thanks for helping.

I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it.

The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox?

You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html).

css Code:
Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; }

  

 #main-nav


 {


     background-color: black;


     height: 40px;


 }


 #nav


 {


     position: relative;


     margin: 0;


     padding: 0;


 }


 #nav li


 {


     position: relative;


     float: left;


     display: table;


     width: 99px;


     height: 40px;


     border-right: 1px solid white;


     text-align: center;


     font-size: 10px;


 }


 #nav li:hover


 {


     background-color: darkred;


 }


 #nav a


 {


     display: table-cell;


     vertical-align: middle;


     line-height: 11px;


     font-weight: bold;


     text-decoration: none;


     color: #fff;


 }


 #nav li ul


 {


     position: absolute;


     padding: 0;


     background-color: gray;


     top: 40px;


     left: 0px;


 }


 #nav li ul li


 {


     width: 98px;


     border: 0;


     border-top: 1px solid white;


 } 

html4strict Code:
Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div>

  

 <div id="main-nav">


     <ul id="nav">


         <li id="m1"><a href="#1">Main Menu 1</a></li>


         <li>


             <a href="#2">Main Menu 2</a>


             <ul>


                 <li><a href="#2a">Sub-Category 1</a></li>


                 <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li>


             </ul>


         </li>


         <li>


             <a href="#3">Main Menu 3 with multiple lines</a>


             <ul>


                 <li><a href="#3a">Sub-Category 2</a></li>


             </ul>


         </li>


         <li><a href="#4">Main Menu item which has a really long name on it</a></li>


     </ul>


 </div> 

The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers.

Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem.

I'm having an issue where a website is showing up a few pixels off in Mac Firefox than it is in PC firefox. Anyone have a quick fix for this?

Mac Screenshots: http://graffetto.com/chops/clairus_screens.pdf

PC Firefox Screenshot:


Firefox, IE, and Netscape all look identical on PC, while firefox, IE and safari look identical on Mac, but different from PC (except safari - messed up text)

Any help is greatly appreciated

Edit: after reviewing my post I realized I was quite vague. What I'm looking for is a way to filter CSS so that only Mac Firefox users will receive one CSS file, and PC users will receive another.

Im not good at all with CSS and need some help getting this to work in IE8 or older/newer versions. Works great in Firefox though.

<div style="width:90%;height:150px;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;border:4px solid #F4F4F4;background-color:#FFFFFF;-webkit-box-shadow: #B3B3B3 15px 15px 15px;-moz-box-shadow: #B3B3B3 15px 15px 15px; box-shadow: #B3B3B3 15px 15px 15px; padding-top:2%;
padding-left:2%;">

Any help making this work in IE8 would be great.

Hi Guys, I have a pretty specific page here, work fantastically in Firefox, but not in IE6/7 (or Safari/Opera etc ). Any ideas?! Thanks!

(URL address blocked: See forum rules)


Darren.

Well my fiance and I are starting a website for our photography and I designed what I wanted the layout to look like using Adobe Photoshop however now it's become a headache to get it to work.

i18.photobucket.com/albums/b117/Nagoshiffxi/help.jpg

this is what we want it to look like pretty much centered on a black background, each of those navigation images being individual pictures... the background being the box with the 3 images floating over it...

At the moment I have part of it working he
www. pollard-exposures.com/v1/

If someone can view the source and tell me a better way to make it work and how I may be able to add in the individual navigation pictures along the left side like I have it in the picture I would really really appreciate it... I am not sure how to even begin...