CSS - Advanced Problem Firefox Works Ie Doesnt

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

The following CSS code works in Firefox, but not IE.

The site has a fixed top bar using CSS which works perfectly in firefox, but stuffs up in IE.

Does anyone know what I need to change it to to fix the problem?

Code:

		html, body
		{
			margin: 0;
			padding: 0;
			height:100%; 
			max-height:100%; 
			font-size: 90%;
			font-family: verdana, sans-serif, arial, helvetica;
			background-image: url('images/gradient.jpg');
			background-repeat: repeat-x;
			background-color:#fff;
		}
		
		#header
		{	position: fixed;
          		top: 0px;
           		left: 0px;
           		width: 100%;
           		height: 100px;
           		z-index: 1;
			height: 50px;
			margin-bottom: 2em;
			background-image: url('images/gradient2.jpg');
			background-repeat: repeat-x;
		}

		#topmenu
		{
			position: absolute;
			left: 250px;
			top: 30px;
			width:560px;
		}

		#stats
		{
			position: absolute;
			right: 15px;
			top: 5px;
			text-align: center;
		}

		#gutter
		{
			float: left;
			width: 3%;
			height: 1px;
		}

		#col
		{
			float: left;
			width: 70%;
			margin-bottom: 1em;
			padding-right: 3%;
			margin-top: 5.5em;
		}
		
		#rescol
		{
			float: left;
			width: 94%;
			margin-bottom: 1em;
			padding-right: 3%;
			margin-top: 5.5em;
		}

		#rescol a {		
			text-decoration:none;
		}

		#rescol td {		
			text-align: center;
		}

		#col1
		{
			float: left;
			width: 45%;
			margin-bottom: 1em;
			border-right: 1px solid #ccc;
			padding-right: 3%;
			margin-top: 5.5em;
		}
		
		#col2
		{
			float: left;
			width: 15%;
			margin-left: 3%;
			margin-bottom: 1em;
			padding-right: 3%;
			margin-top: 5.5em;
		}
		
		#col3
		{
			position: absolute;
			right: 30px;
			margin-left: 3%;
			margin-bottom: 1em;
			margin-top: 5.5em;
		}
		
		#footer
		{
			clear: both;
			height: 50px;
			padding: .5em;
			font-size: 11px;
		}

		#footer ul {
			border-top: 1px solid #ccc;
			margin: 0;
			padding: 1em 0 0 0;
			list-style: none;
		}

		#footer li a, #footer li span {
			display: block;
			float: left;
			padding: 5px 1em;
			border-right: 1px solid #ccc;
		}

		#footer li span.copyright {
			border-right: none;
		}

		a:hover {
			color: #003;
		}

		h1
		{
			margin: 0;
			padding: .5em;
		}
		
		h2
		{
			margin: 0;
		}

		hr.c {	
			border: none 0; 
			border-top: 1px solid #ccc;
			width: 100%;
			margin-bottom: 10px;
			text-align: center;
			height: 1px;
		}


		<!--[if IE 6]>

		body
 		{
  		overflow: hidden;
  		}

		div.content
 		{
 		height: 100%;
  		overflow: auto;
  		}

		<![endif]--> 

I am new to style sheets, and I have been trying to get an entry level position with a web developer here close to me. They sent me a PSD and told me to layout using nothing but CSS and no tables. So I did so... and it looks fantastic in Firefox, but not at all good in IE. The only real problem is with the positioning.. the content color and size and everything seems to be fine.... all the positioning is done in the code on the website, where you can view source... I pasted the CSS code below, but doubtful it will help much. Can anyone offer me some help? The site is he http://www.eomnis.com/test

the style sheet is here http://www.eomnis.com/test/css.css and i pasted the style sheet code below. Thanks for any help everyone.

Aaron


<style type="text/css">
body {
background-image: url('images/main_background.jpg');
background-color:#000000;
background-repeat: no-repeat;
margin: 0px;
}
.top_text {
font-size: 14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFF00;
font-weight:400;
}
.bold_grey{
font-size:11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#EEEEEE;
font-weight:300;
letter-spacing:inherit;
}
.small_text{
font-size:9px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#EEEEEE;
font-weight:300;
letter-spacing:inherit;
}
form {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:10px;
font-weight:300;
}
.select {
font-size:9px;
height:15px;
}
.input {
font-size:9px;
height:16px;
width:160px;
}
.zip {
width: 94px;
height:16px;
font-size:9px;
}
.Footer_links{
color:#CCCCCC;
font-size:14px;
font-weight:300;
text-decoration:none;
}

</style>

I have the following CSS that I believe is valid, but it only works in IE. In fact in IE it works perfect, but in FireFox it does not display anything at all.

Code:

<div style="font-size:8px; text-align:left; background-color:red; width:100px;"><div style="font-size:8px; background-color:green; width:75px;"></div></div>

What I am trying to do is display a rating. In the above example, the rating is 75/100, so a green bar 75px long over a red bar 100px long.

Thanks for reading my question.

Why do my a:link, a:visited, a:hover, and a:active commands work for IE but not in FireFox?

The hover works in both, but the visited only works in IE.

I don't have a url for this page yet, so I've put it under my band web page.

www.pierced.ca/Kelly/index.htm

Try it with IE and you'll see that the visited works. Try it with FireFox and the visited doesn't work.

Thanks again,

Brad

http://www.wam.umd.edu/~gdogum/testing/gdogum/gdogum.html
http://www.wam.umd.edu/~gdogum/testing/gdogum/gdogum.css

those are my two files, it seems to be working okay in IE6/win but not in firefox...

anyone can maybe help me out? thanks it is much apprceiated.



edit: also both files validate

Hello. I am going to change my site to using a CSS file for font color and display and such. I am pretty new at using CSS files with my web site, other that messing with it in modifying my blog skin. I created one I want to use at: http://rhodesfamily.org/style.css, but I can only get it to work with IE. Here is my test page: http://rhodesfamily.org/index_test.htm. It will not display in Firefox, which is my main browser . Your help would be greatly appreciated! Thanks, Carl

a site im working on .. (apparently I cant post URLs....)

it's the normal stuff at teh beginning with porservices.formapixel and the normal web ending stuff at the end.


works fine in Firefox. I validated with transitional.

In IE7 the background images for the main divs show up but the entire content and header do not. I thought for some reason it had to do with the z-index. So I removed it from the CSS and changed the .gifs to .pngs that are transparent in the center. It still doesnt work. I'm lost.

Quote:
#bg
{
position: absolute;
top: 0px;
left: 0px;
background: #fff url('images/bg.png') no-repeat;
width: 747px;
height: 264px;
}

#wrapper
{
position: relative;
width: 747px;
margin: 0 auto;
background: #fff url('images/abg.png') repeat-y;
}



that is the css relating to the two images that seem to be blocking everything (that's the only thing I can figure is that those two bg images are just sitting on top of everything.)

any suggestions? I can provide the entire css file if necessary just didnt want to post all of that here if i didnt need to.

thanks in advance.

Ok so I have a page, and The opacity only works in firefox, not IE.

This is the code im using

img{border:0; filter:alpha(opacity=80); -moz-opacity: 0.80; opacity: 0.80;}
img:hover{filter:alpha(opacity=95); -moz-opacity: 0.95; opacity: 0.95;}

any ideas?

Ok, so i worked a little on this site and i can't get it to work in IE, and its really starting to bug me. What am i doing wrong?

http://markspixel.com/smoothtobacco/bio.htm

Code:

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>Smooth Tobacco</title>


<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}

img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}

#content {
position:relative;
z-index:1;
}



.style1 {
	margin-right: 0px;
}
</style>
<!--[if IE]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
#bg { position:absolute; z-index:-1; }
#content { position:static; }
</style>
<![endif]-->


</head>

<body>
<img src="images/background.jpg" alt="background" id="bg" />
<div id="content">
My content is here
</div>

Hey,
Ive used Macromedia Dreamweaver to design the following site. But for some reason the CSS seems to only work in IE. When I view the page in firefox, the CSS doesnt seem to work properly.

Ive never encounterd this before, and have run out of ideas.
What do you think?

Website Here

Cheers,
Smitch

I'm a pretty new CSS coder, and primarily use Firefox so I designed my website based on that browser, and now when I try opening it in IE it looks completely wrong and different.

Does it have to do with my margins? I have no idea--if someone can just point me in the right direction to even figure out where the problem lies (and even better if you know how to fix it!) that would be fabulous.

The website is www.yarniapdx.com and it looks exactly how I want it to in Firefox, but in IE it's a mess!

Thank you so much in advance,
-lindsey

I cannot seem to get the CSS drop down menu system to work in IE6 but it works in IE7. I tell the Css to use globalIE.css
Code:

<!--[if IE]>QU
            <link rel="stylesheet" href="<?=$base_url;?>/_src/globalIE.css"      
            type="text/css">       
 <![endif]-->

Here is the menu system:

Code:

menu5platinum[4]='<div id="menu"><ul><li><ul><li>'+
         '<a href="./ChargeOffs.php" title="Creditor Actions">Creditor Actions</a>'+
         '<ul><li><a href="./charge_offs.php" title="Charge Offs">Charge Offs</a></li>'+
         '<li><a href="./collection_accts.php" title="Collections">Collections</a></li>'+
         '<li><a href="./late_payments.php" title="Late Payments">Late Payments</a></li>'+
         '<li><a href="./repossessions.php" title="Repossessions">Repossessions</a></li>'+
         '<li><a href="./Foreclosure.php" title="Foreclosure">Foreclosure</a></li></ul>'+
         '</li></ul></li></ul></div>';

(It rests inside of a javascript function)

and here is the CSS:
Code:

/**************** menu coding *****************/
#menu { width: 100%; background: #555555; border-style: none; font: normal 12px Verdana;}
#menu ul { list-style: none; margin-top: -7px; margin-bottom: 0; margin-left: 0; margin-right: 0; padding: 0; line-height: 18px; }
#menu a, #menu h2 { border-bottom: 1px solid #c0c0c0;   font-family: helvetica, arial, verdana, sans-serif; display: block; }
/*#menu h2 { color: #fff; background: #000; }*/
#menu a { color: #f2f2f2; background: #555555; text-decoration: none;}
#menu a:hover { color: #f2f2f2; background: #8b8b8b; }
#menu li {position: relative;} 
#menu ul ul ul { position: absolute; top: 0; left: 108.5%; width: 100%; border-left: 1px solid #c0c0c0; margin-top: 0; margin-bottom: 0; margin-left: 1px; margin-right: 0;}
div#menu ul ul ul, 
div#menu ul ul li:hover ul ul
{display: none;}

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

Any help with this is greatly appreciated. Thanks.

It displays fine in firefox, but not in IE. I haven't done anything personally with websites since php was first coming out, so css is completely new to me and Im using a (now modified) template instead of from scratch. So any help would be great.

WARNING: Linked site is not work-safe

Site is at 'razornow.comlu.com'

css code is:
Code:

body {
    font-family: tahoma, helvetica, arial, sans-serif;
    font-size: 10px;
    text-align: center;
    background: #000000;
    margin: 0px;
    padding: 10px;
}

html, #wrapper, h1 {
    margin: 0px;
    padding: 0px;
}

img { border: 0px; }

#wrapper {
    margin: auto;
    text-align: left;
    width: 710px;
    position: relative;
}

h1, h2, h3 {
    font-size: 10px;
}


h1 {
    line-height: 1;
    position: absolute;
    top: 0px;
    left: 0px;
}

h2 {
    margin: 0px 0px 5px 0px;
    padding: 0px;
}

h3 {
    padding: 4px 0px 0px 0px;
}

.block {
    display: block;
}

.clear {
    clear: both;
    height: 10px;
}

.left {
    float: left;
    margin: 5px 20px 0px 0px;
}

.right {
    float: right;
    margin: 0px 0px 0px 20px;
}

.readmore {
    text-align: right;
}

 /* page structure */

#wrapper {
    background: url(images/body_t.gif) top no-repeat;
    padding-top: 20px;
}

#body {
    background: url(images/body_bg.gif) repeat-y;
    padding-bottom: 10px;
}

#body p {
    background: white;
}
#nav {
    position: absolute;
    top: 25px;
    left: 253px;
    width: 450px;
	height:35px;
	background: url(images/nav.gif) repeat-x;
}
#nav ul{
	padding: 0px;
	margin: 0px;
	list-style-type: square;
	list-style-position: inside;
}
#nav li{
	padding: 7px 16px 0px 16px;
	margin: 0px;
	height:35px;
	list-style-type: square;
	list-style-position: inside;
	float:left;
	border-right: 1px solid #FFFFFF;
	display:inline;
}

.lastchild{border-right: 0px none #FFFFFF !important;}

#nav a{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	text-transform: capitalize;
	color: #FFFFFF;
	text-decoration: none;
}
#nav a:hover{
	color:#fcff85;
}

#current {
    float: left;
    width: 235px;
    margin-left: 10px;
    margin-top: -10px;
    background: url(images/menu_bg.gif) repeat-y;
    border-bottom: 1px solid #05256b;
}

* html #current {
    margin-left: 5px;
}

#content {
    float: right;
    width: 450px;
    padding-top: 40px;
    margin-right: 8px;
}

* html #content {
    margin-right: 4px;
}

#footer {
    background: url(images/body_b.gif) no-repeat;
    text-align: center;
    padding-right: 10px;
    padding-left: 480px;
    padding-bottom: 30px;
}

#copyright {
    position: relative;
    top: -8px;
    color: #989898;
}

/* current column */

#current .nav {
    margin: 21px 6px 5px 5px;
}

#current ul {
    border: 1px solid #8497c2;
    margin: 0px;
    padding: 0px;
}

* html #current ul {
    padding: 3px 0px;
    padd\ing: 0px;
}

#current li {
    list-style: none;
    border: 1px solid #4e698f;
    background: #01285f url(images/harry.gif) left center no-repeat;
    padding: 0px 0px 0px 20px;
    margin: 3px;
}

#current li.readmore {
    text-align: right;
    background-image: none;
}

#current ul a {
    color: #beddff;
    text-decoration: none;
    display: block;
    padding: 3px 12px 3px 0px;
}

* html #current ul a {
    width: 100%;
    w\idth: auto;
}

#current ul a:hover {
    color: white;
}

#current .readmore {
    padding: 3px 4px 4px 20px;
}

* html #current .readmore {
    padding: 0px 4px 1px 20px;
    padd\ing: 3px 4px 4px 20px;
}

#current .readmore a {
    text-decoration: underline;
    display: inline;
}

#currenttitle {
    position: absolute;
    left: 15px;
    top: 409px;
}

* html #currenttitle {
    top: 411px;
}

/* page content */

#content h2 {
    line-height: 1;
    margin: 0px;
    padding: 20px 0px 0px 0px;
}

#content h3 {
	margin: 10px 0px;
	padding: 0px;
	text-transform: capitalize;
}

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

#content .contentbox {
    border: 1px solid #e1e1e1;
    border-top: none;
    padding: 5px 20px 10px 20px;
}

* html #content .contentbox {
    padding-bottom: 11px;
}

#content, #content a {
    color: #868686;
}

#content a:hover {
    color: #000;
}

i have 10 div's with abolute positioning
and the css is external

the html is like this <div class="1">
<div class="2">.........

it works in IE but in firefox the images get put all below eachother on the left...except if i put the css inline it works