CSS - Css Rgba Colors Don't Work In Firefox?

I added a new template to my vbulletin forums. Unfortunately, the nav bar (uses css) is not displaying the proper anchor text color in IE6 (should be white).

url: forums*jwsuretybonds*com

Here is the header code:
Code:

<STYLE TYPE="text/css">
<!--

.nav_box
{
	border-top:solid 1px #677281;
	border-right:solid 1px #677281;
	height: 24px;
	vertical-align: middle;
	text-align: left;
	background-color: #214E77;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #000000;
	padding-left: 5px;
}

.nav_box_over
{
	border-top:solid 1px #677281;
	border-right:solid 1px #677281;
	height: 24px;
	vertical-align: middle;
	text-align: left;
	background-image:url('images/bg_roll.jpg');
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #000000;
	padding-left: 5px;
	cursor: hand;
}

.nav_box A{font-family:Arial, Helvetica, sans-serif; font-size:12px; text-decoration:none; color:#ffffff;}
.nav_box_over A{font-family:Arial, Helvetica, sans-serif; font-size:12px; text-decoration:none; color:#606060; }

//-->
</STYLE>


<table width="741" border="0" align="center" cellpadding="0" cellspacing="0" style="border-top:solid 1px #F1F2F2; border-left:solid 1px #F1F2F2; border-right:solid 1px #F1F2F2">
  <tr>
    <td><img src="http://www.jwsuretybonds.com/images/jw_logo2.jpg" alt="JW Surety Bonds - Logo" width="281" height="167" /><img src="http://www.jwsuretybonds.com/images/bannertop.jpg" alt="Bond"width="458" height="167" /></td>
  </tr>
</table>

<table width="741" border="0" align="center" cellpadding="0" cellspacing="0"  background="http://www.jwsuretybonds.com/images/bg_pattern.jpg" style="border-right:solid 1px #F1F2F2; border-left:solid 1px #F1F2F2">
  <tr>
    <td width="741" valign="top">
      <table width="741" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
        <tr>
            <td width="185" bgcolor="#F9FFFF" class="nav_box" onclick="javascript:parent.top.location.href='http://www.jwsuretybonds.com/index.htm'" onmouseover="this.className='nav_box_over';" onmouseout="this.className='nav_box';">
              <center><a href='http://www.jwsuretybonds.com/'>Home - JW Surety Bond</a></center>
            </td>
            
            <td width="184" bgcolor="#F9FFFF" class="nav_box" onclick="javascript:parent.top.location.href='http://www.jwsuretybonds.com/apps.htm'" onmouseover="this.className='nav_box_over';" onmouseout="this.className='nav_box';">
              <center><a href='http://www.jwsuretybonds.com/apps.htm'>APPLICATIONS</a></center>
            </td>
            
            <td width="185" bgcolor="#F9FFFF" class="nav_box" onclick="javascript:parent.top.location.href='http://www.jwsuretybonds.com/bond_information.htm'" onmouseover="this.className='nav_box_over';" onmouseout="this.className='nav_box';">
              <center><a href='http://www.jwsuretybonds.com/bond_information.htm'>Learn About Bonding</a></center>
            </td>
            
            <td width="185" bgcolor="#F9FFFF" class="nav_box" onclick="javascript:parent.top.location.href='http://www.jwsuretybonds.com/coprof.htm'" onmouseover="this.className='nav_box_over';" onmouseout="this.className='nav_box';">
              <center><a href='http://www.jwsuretybonds.com/coprof.htm'>Company Profile</a></center>
            </td>
        </tr>
      </table>
  </tr>
  <tr>
    <td>
          
      <table style="float: right;" border="0" cellpadding="5" cellspacing="0" background="http://www.jwsuretybonds.com/images/bg_pattern.jpg">
        <tr>
          <td align="center">
          <a href="https://srv0.velaro.com/visitor/requestchat.aspx?siteid=1151&showwhen=inqueue&secure=yes" target="VelaroChat"  
          onClick="this.newWindow = window.open('https://srv0.velaro.com/visitor/requestchat.aspx?siteid=1151&showwhen=inqueue&secure=yes', 'VelaroChat', 
          'toolbar=no,location=no,directories=no,menubar=no,status=no,scrollbars=no,resizable=yes,replace=no')  ;
          this.newWindow.focus();this.newWindow.opener=window;return false;"><img alt="Velaro Live Help" 
          src="https://srv0.velaro.com/visitor/check.aspx?siteid=1151&showwhen=inqueue" border="0"></a>
          </td>
        </tr>
      </table>
      
      <BR>
      <H1 style="margin-left: 20px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 20px; color:#103465;">Surety Bond Forums</h1>

Anyone have any ideas?

Hi,

link to wesbite

why doesn't the drop down menu, that works in IE6 not work in Firefox 0.8? It is pure CSS, no Javascript. OK, I know it doesn't validate and don't care too much about that. I know putting tables inside an anchor tag is frowned on but hey, it works and I didn't think it up.

I thought IE was the worst when it came to CSS compliance?

Any ideas how I can fix it?

Thanks,

John

the url is:
http:// jhlmc.com/JHLMC/FreshDemoFiles/CoverTToLayers_JHLMCArt.html

In IE8 beta it works perfectly.

In firefox the entire bottom section (the part under the slide show) is messed up.

In Opera there's a gap under the play controls.
If I close the gap, it messes up IE.

Getting this slide show to work was quite the task, but I'm close to having it work on the big three!

Should I just un-nest everything?

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

Hi, I'm completely new to this but I've been trying to implement CSS tabs on my webpage in a computer science class. They work correctly in IE (the browser at my school that I've been testing on) but not in Firefox (there is a space between the bottom of the tab and the line). Below is the CSS, what do I need to change to make it compatible with both browsers? Thanks for the help.

body {
font: 100% "Century Gothic", verdana, arial, sans-serif;
background-color: #fff;
margin: 50px;
}

ul#tabnav {
font: bold 11px "Century Gothic", verdana, arial, sans-serif;
list-style-type: none;
padding-bottom: 26px;
border-bottom: 1px solid #03A;
margin: 0;
}

ul#tabnav li {
float: left;
height: 21px;
background-color: #38E;
margin: 2px 2px 0 2px;
border: 1px solid #03A;
}

body#tab1 li.tab1, body#tab2 li.tab2, body#tab3 li.tab3, body#tab4 li.tab4 {
border-bottom: 1px solid #fff;
background-color: #fff;
}

body#tab1 li.tab1 a, body#tab2 li.tab2 a, body#tab3 li.tab3 a, body#tab4 li.tab4 a {
color: #000;
}

#tabnav a {
float: left;
display: block;
color: #000;
text-decoration: none;
padding: 4px;
}

#tabnav a:hover {
background: #fff;
}

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?

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

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.

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

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!!!

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 am using a table bg mouseover CSS effect. In FireFox and my dreamweaver workspace, the page looks fine. However in IE, the section where I used the CSS effect has a slightly different color.



What could be the cause of this?

Thanks.

wait, i just figured out that its the image that is a different color...

so my new question is, why?

Excuse me but i am a little thick on this one: How do I create different colored link style for say a:

1. navigation bar
2. footer bar
3. main body

Does making classes make sense in this situation

doug