CSS - Css Menu Broken In Ie, Works In Firefox

I am working on a template that looks great in IE and Chrome but Firefox makes it look really ugly so I was curious if anyone would mind looking at my site and telling what they think I need. centextechs is the site

Any help is greatly appreciated

Randy

Hi I have done two pages and they seem to work fine in IE8 but when I view it in firefox there are a couple of issues:

link

On the home page i have a lightbox set up for the polaroids with specific width and height. In IE the div is exact in size but in firefox the div seems to expand beyond the dimensions of the div (a red dotted border is displayed on click)

On the Products page, the right hand side of the book has products listed in which you hover over and the polaroids will reflect different angled shots of the product that the cursor is over. Each product line is a hyperlink but in Firefox some of these lines are unlinkable whereas in IE there is no problem here! It is the same instance with the sub menu on the left hand page too

Can anyone point me in the right direction of solving these issues please?

Hello Everybody,

I had this site working in opera and IE and it works beautifully. When it comes to firefox, the box form extends for a hundred pixels and I don't know why. The sheet is set at a specific width and i can't change anything with the form in css. can anyone please help me with this, thank you.

here is the site
Firefox not working for form

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

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>

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>

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

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

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

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.

I'm having a display problem with the following code in Firefox.
It works fine in IE. Basically I want the layout to look as close as it does in IE from firefox (I think I'm using the W3C CSS correctly?)...

Any suggestions?

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<style type="text/css">
<!--
body 
{
	background-color: #6699CC;
}

#topBanner 
{
	overflow: hidden;
	width:100%;
	height:15%;
}

#contentTable
{
height: 84%;
width: 100%;
border:1px solid black;
}

#leftMenu
{
	background-color: #6695FF;
	width: 15%;
	height: 100%;
	display: block;
	border: 8px outset #999999;
	padding: 1px;
	vertical-align: top;
	
}

#contentArea
{
	background-color: #FFFFFF;
	width: 85%;
	height: 100%;
	display: block;
	vertical-align: top;
	border: 2px solid #999999;
}

.menuChildShow
{
 display: yes;
}

.menuChildHidden
{
 display: none;
}
-->
</style>

<script type="text/javascript">
	function toggleMenu1(objName) {
		temp = document.getElementById(objName);
		if(temp.className == "menuChildShow") {
			temp.className = "menuChildHidden";	
		} else {
			temp.className = "menuChildShow";
			temp.style.color = "#00ffff";
		}
	}
</script>

</head>
	<body>
		<div id="topBanner">
				 <img src="" width="2048" height="75">
		</div>
		<table id="contentTable">
  		<tr>
    		<td id="leftMenu">
						<div id="menuItem1" class="menuParent">
								 <a onclick="javascript:toggleMenu1('sub1Item1');">Item #1</a>
								 
								 <div id="sub1Item1" class="menuChildHidden">
  								 Item #1 Child 1<br />
  								 Item #1 Child 2<br />
  								 Item #1 Child 3<br />
  								 Item #1 Child 4<br />
								 </div>
						</div>
						
						<div id="menuItem2" class="menuParent">
								 <a onclick="javascript:toggleMenu1('sub2Item1');">Item #2</a>
								 	<div id="sub2Item1" class="menuChildHidden">
  								 Item #2 Child 1<br />
  								 Item #2 Child 2<br />
  								 Item #2 Child 3<br />
  								 Item #2 Child 4<br />
								 </div>
						</div>
    		</td>
  			<td id="contentArea">
  					Content area
  			</td>
  		</tr>
		</table>
	</body>
</html>

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

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