CSS - Is There Any Way To Display A Style Seperately For Firefox Than For Anything Else?

gday

i have a bunch of tables that are only to be shown based on a javascript call, but for some reason, firefox is rendering the space of the table, where as IE 7 isn't..

eg.
<table style"display: none;"></table>

with a whole bunch of rows in it.. the webpage still loads blank space everywhere, rather than just empty space

thoughts?

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;
} 

Im just playing around with CSS and Photoshop and made this so far:-
http://www.o0matte0o.myby.co.uk/windows-vista/
Lazy Link

It look as its ment to in IE7, Vista IE and IE6 (apart from the PNG Transparancy in IE6) but when I view the site in Firefox there are spaces between each of the sub titles and the Title on the Transparent part is not in the correct place can any one help to see where Im going wrong please?

I have tested the CSS and XHTML and bouth complie to the standard so I cant see what Im doing wrong :S

Code:

body { color:#565656; font-family: "Segoe UI", "Trebuchet MS", sans-serif; font-size: 80%; }
hr { display:none; }
img { border:none; }
body { padding:12px 0 25px; background-image:url(../images/background.png); }
h1 { padding:3px; font-size: 165%; padding-left:40px; }
h2 { font-size: 100%; padding-left:110px; line-height:8px; }
h3 { padding-left:225px; }
.p1, .p2, .p3, .p4, .p5 { padding-left: 230px; padding-right:15px;}
a { color:#6666FF; }
a:hover,a:active { background-color:#9999FF; color: #565656; }

#container { margin-left:10%; }
#pageHeader { width:822px; height:80px; overflow:hidden; background-image:url(../images/header-test.png); text-shadow:#333333;}
#quickSummary { width:822px; background-image:url(../images/content.png);}
#preamble { width:822px; background-image:url(../images/content.png); }
#explanation { width:822px; background-image:url(../images/content.png); }
#participation { width:822px; background-image:url(../images/content.png); }
#benefits { width:822px; background-image:url(../images/content.png); }
#requirements { width:822px; background-image:url(../images/content.png); }
#footer { width:822px; height:27px; text-align:center; background-image:url(../images/footer-test.png); }
#linkList { position:absolute; float:left; top:100px; } 
#linkList h3 { padding-left:30px; padding-top:1px }
#linkList h3, li, ul { list-style:none; display:list-item; }

Any other idears people comment (noting that the XHTML file should not be changed as Im trying to only do every thing with CSS like the name of the site HTML page is from.)

Just testing this in different browsers and noticed that the image is shown in the background but does not go to the background-position that is specified. This works for IE. Does anyone know if there is a different way of doing this?

<STYLE type="text/css">
BODY { background-image:url(awesome.gif); background-repeat:no-repeat; background-position:50 220; background-attachment:fixed }
</STYLE>

Thank you for an insight into this little glitch.

I posted this by accident in the html forum , so im asking he

I have this in my CSS page:

Code:

a.mainlevell:link, a.mainlevel:visited {
	display: block;
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: none;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	margin-bottom: 1px;
	font-size: 12px;
}
a.mainlevell:hover {
color: #FFFF00;
font-size: 12px;
}

And I use this style for four links:
Code:

<a href="mobile.html" class="mainlevell">Home</a>
<a href="m_about.html" class="mainlevell">About Us</a>
<a href="m_games.html" class="mainlevell">Games</a>
<a href="m_links.html" class="mainlevell">Links</a>

When viewing in IE, all the URL's using m_* in the file name works with the CSS; the one referencing mobile.html doesn't.

However, putting an m_ in front of the mobile.html makes the link work.

Why?

This happens only in IE. firefox/opera/netscape/etc ; the links all show up fine and work as supposed to.

However, I have a similar set up for another menu that does almost the same CSS as the above:

Code:

<table width="100%" border="0" cellspacing="2" cellpadding="3">
                  <tr>
                    <td align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="home" width="14" height="14" id="home"></td>
                    <td bgcolor="#990000"><a href="mobile.html" class="menulevel" onMouseOver="MM_swapImage('home','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Home</a></td>
                  </tr>
                  <tr> 
                    <td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="one" width="14" height="14" id="one"></td>
                    <td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('one','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
                  </tr>
                  <tr> 
                    <td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="two" width="14" height="14" id="two"></td>
                    <td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('two','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
                  </tr>
                  <tr> 
                    <td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="three" width="14" height="14" id="three"></td>
                    <td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('three','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
                  </tr>
                  <tr> 
                    <td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="four" width="14" height="14" id="four"></td>
                    <td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('four','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
                  </tr>
                  <tr> 
                    <td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="five" width="14" height="14" id="five"></td>
                    <td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('five','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
                  </tr>
                  <tr> 
                    <td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="six" width="14" height="14" id="six"></td>
                    <td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('six','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
                  </tr>
                </table>

and this one works fine ( even with the mobile.html)