CSS - Displays Great In Firefox But Not In Ie! Grrr! Help Please

I apologize if this is supposed to be in the HTML forum. Since html code can be viewed from the source I thought I will post the css code to cross check since I couldn't figure out what is causing the problem. So thought I would post it in CSS forum.

I have the following site that displays fine in Firefox but is all a mess in IE.

http://www.geocities.com/dhaagey08/DhaageyTab2.html

Following is the CSS code I am using.

======================================

* {
margin: 0;
padding: 0;
}
html {
background: #fff url("images/html1.png") repeat-x left top;
}
body {
font-family: arial, sans-serif;
font-size: 12px;
color: #888888;
background: url("images/body.png") repeat-y left top;
width: 1000px;
margin: 0 auto 30px auto;
position: relative;
}
a img {
border: 1px solid #ccc;
}

a {
color: #f48a88;
text-decoration: none;
}
a:hover {
visibility: visible;
/* IE bug fix */
}
a:hover img {
border: 1px solid #729AD7;
}
h1 {
font-size: 14px;
}
h2 {
font-size: 12px;
}
.page {
background: url("images/page3.jpg") no-repeat left top;
padding: 15px 125px 0px 115px;
width: 760px;
}

.header{
position: relative;
width: 760px;
height: 170px;
left: 5px;
top: 0;
background: url("images/header1a.jpg") no-repeat left top;
}


/************* menu1 ******************/

.bar4285801 {

width: 345px;
height: 35px;
position: relative;
}

.bar4285801 table.tabbar {
position: absolute;
width: auto;
height: auto;
top: 0px;
left: 45px;
}

.bar4285801 div {
height: 35px;
width: 115px;
}

.bar4285801 div.button {
background: url(menu47831178.jpg);
}

/****************** menu2 ***********************/
.bar4285846 {

width: 345px;
height: 35px;
position: relative;
}

.bar4285846 table.tabbar {
position: relative;
width: auto;
height: auto;
top: -35px;
left: 390px;
}

.bar4285846 div {
height: 35px;
width: 115px;
}

.bar4285846 div.button {
background: url(menu30455262.jpg);
}
.main {
width: 706px;
margin: 0 auto;
}
.box1 {
border: 1px solid #ccc;
clear: both;
padding: 0 5px 25px 2px;
width: 690px;
height:350px;
position: relative;

}
.lady {
float: left;
width:220px;
height:350px;
background: url("images/lady2s.jpg");

}

#right {
width: 457px;
float: right;
padding-bottom: 130px;
}

.dhaagey {
font-family: monotype corsiva;
font-size: 30px;
color: #89201d;
}
.contact{
font-family: monotype corsiva;
font-size: 18px;
color: #89201d;
float: right;
margin-top: 55px;
}

.photos {

margin-top: 5px;
padding-bottom: 8px;
}
.photos a {
width: 106px;
height: 140px;
float: left;
background: #C2D3EE;
text-align: center;
color: #A2A3A6;
text-decoration: none;
font-size: 11px;
font-weight: bold;
margin-right: 14px;
}
.photos>a {
min-height: 148px;
height: auto;
}
.photos a.last, .greybox-background .right a.last {
margin-right: 0;
}
.photos a:hover {
color: #f48a88;
}
.photos a span {
display: block;
padding-top: 2px;
}
.photos a>span {
padding-top: 5px;
}
.greybox {
border: 1px solid #ccc;
margin-bottom: 39px;
padding: 5px 0;
}
.greybox-background {
background: url("images/gbback.jpg") repeat-y left top;
width: 100%;
line-height: 170%;
}
.greybox-background .left, .greybox-background .right {
width: 321px;
float: left;
padding: 0 10px;
}
.greybox-background .right {
float: left;
padding: 0 19px 0 20px;
}

.greybox-background .right a {
display: block;
float: left;
margin-right: 11px;
margin-top: 8px;
}
.greybox2 {
border: 1px solid #ccc;
margin-bottom: 15px;
padding: 9px 7px;
width: 688px;
}
.greybox2 .preview {
float: left;
margin-right: 40px;
margin-right: 44px;
}
.greybox2 .preview img {
padding: 5px;
}
.greybox2 .right {
float: left;
width: 350px;
}
.greybox2 .right a {
float: left;
margin: 0 14px 7px 0;
}
.footer1 {
text-align: center;
padding: 0 27px 3px 27px;
}
.footer1 a {
color: #872323;
text-decoration: none;
}
.footer1 a:hover {
color: #d87126;
text-decoration: none;
}
.footer2 {
font-size: 0px;
line-height: 0px;
height: 15px;
background: url("images/footer.png") no-repeat left top;
margin-left: 110px;

}
.cleaner {
font-size: 0px;
line-height: 0px;
height: 0px;
clear: both;
}
============================================

Any help is greatly appareciated.

I've spent hours trying to figure out what is wrong with my page. It loads fine in IE. When I load it in Firefox, the nav menu on the left displays at the bottom of the page (as if my content section were too wide). If I hit refresh enough times, it will appear properly... hit refresh some more and it goes back to the incorrect layout. Additionally, if try to Edit CSS (Ctrl+Shift+E) the page snaps into the correct format.

http://snipurl.com/19l6w

I've tried everything I can think of to solve this. Any input here would be appreciated.

I did a site recently and Im having trouble finding what is causing this weird error.

If you go to this gallery using firefox:

http://www.mmimageart.com/fineart4.html

you will notice that the thumbnails under "saguaro" will display wrongly. IF you dont see the problem just keep refreshing the browser until you get the problem. you will get it.

there are problems also in:
http://www.mmimageart.com/fineart3.html (everglades)
http://www.mmimageart.com/fineart.html (Atlantic Coast)

What coding error in css can cause firefox to display the website wrong randomly ?

Is this a well known error ? if not, then Ill post the code. Thanks in advanced!!!

Hi-

I am finishing up design of a site, and validated it with the W3c validator (everything is valid). When I go to it on IE, everything shows up the way that it should. However, when I go to it on Firefox or Safari, on three pages there seems to be a 'chunk' taken out of the left side. If you compare the three pages in IE and Firefox you should see what I mean (devshed won't let me post links so sorry for the formatting):

01f086d.netsolhost dot com/yk/services dot html
01f086d.netsolhost dot com/yk/experience dot html
01f086d.netsolhost dot com/yk/principals dot html

It seems to be the page length that is causing this, because on shorter length pages, there is no chunk.

I am using DIV tags to lay the site out, which should be pretty easy to follow if you view source. My CSS file is at: 01f086d.netsolhost dot com/yk/assets/css/defaultPage dot css (also validated with W3C).

Any help would be GREATLY appreciated as I have spent hours on this last problem and can't figure out what is causing it!

Greetings... I've looked all around for a solution, and can't find one. Any help that anyone could provide would so greatly appreciated.

My site http://www.baltimoregamers.com displays the div boxes incorectly in Firefox. I am using quite an unusual layout with one big picture as a plate for the entire site...

I then lay div boxes/layers ontop of the plate to position text exactly where I want it to go. It works flawlessly in IE, but displays a too far down and to the right in FF/Mozilla.

I am new to using CSS and I'm sure that something is off somewhere in the code.

Thank in advance for any help.

Feel free to e-mail me he dekay@baltimoregamers.com

Seems that if class's are applied to individual TD tags, no matter how i try to implement row highlighing, the TD class will overide the highlighting color.

A simple way to implement row highlighting is:

<TR onmouseover="this.style.backgroundColor='navy';" onmouseout="this.style.backgroundColor='grey';">

however, a TD with a class that set's a DIFFERENT backgroundColor will disregard the TR mouseover.

Any help?

Man i am working an an all new CSS theme and it was all going well intel i seen a bug.

It only pops up in ie, the menu gets cut off 10%!
If i resize the code it appears larger in firefox,opera,+ but looks ok in ie...

I don't want to resize it just for IE witch only 2% of my old members used.

Is there way to fix it without a major headach?

Page code.
Code:

<div id="main_menu">
<ul id="main_menu">
      <li><a href="home.php">Home Page</a></li>           
      <li><a href="javascript:void(0)" class="down" onclick="expand_nav(this); return false;">Members</a><ul style="display: none;">
        <li><a href="./login.php">Community Login</a></li>   
        <li><a href="./lostpass.php">Retrive Account</a></li>
        <li><a href="./signup.php?task=350_!sx0993tru35500x0p40e_002354mpL334!500X6PK000D30001">Signup Free!</a></li>
      </ul></li>
      <li><a href="javascript:void(0)" class="down" onclick="expand_nav(this); return false;">Features</a><ul style="display: none;">
                <li><a href="#">Live Chat</a></li>       
        <li><a href="#">Live Demo</a></li>             
        <li><a href="#">Feature List</a></li>
              </ul></li>
      <li><a href="./forum/">Forums</a></li>
      
        <li><a href="./blogs/">Blog</a></li>
      
      <li><a href="javascript:void(0)" class="down" onclick="expand_nav(this); return false;">Support</a><ul style="display: none;">
        
          <li><a href="./help.php">FAQs</a></li>
        
		<li><a href="#">Mail Us</a></li>
          <li><a href="#">Phone Us</a></li>
        <li><a href="./contact.php">Contact Support</a></li>         
        <li><a href="./tos.php">Terms Of Service</a></li> 
      </ul></li>
      
    </ul></div>

Css:
Code:

ul#main_menu {
	color: #231f20;
	padding:0; 
	margin:0 0 0 0;
	background-color:#666666;
	border-left:1px solid #6b6659;	
	border-right:1px solid #6b6659;
	border-bottom:1px solid #6b6659;
	border-top:1px solid #7d786c;

}
ul#main_menu li {
	list-style: none;
	margin: 0;
	padding: 0;	
	font-size:12px;
}
ul#main_menu li a {
	color: #ffffff;
	text-decoration:none;
	padding:7px;
	padding-left:14px;	
	padding-right:6px;
	width:128px;
	display:block;
	border-top:1px solid #a29e91;
	border-bottom:1px solid #8a8477;	
}
ul#main_menu li a:hover {
	background-color:#DDFADA;
	border-top: 1px solid #a29e91;
	border-bottom: 1px solid #7d786c;
	color: #666666;
}
ul#main_menu .selected {
	background-color: #CCCCCC;
	border-bottom: 1px solid #5a5548;
	color: #fea849;	
	font-weight:bold;
}
ul#main_menu .down {
	background-image:url(images/icons/plus16_disabled.gif);
	background-repeat:no-repeat;
	background-position:130px;
}
ul#main_menu .down:hover {
	background-image:url(images/icons/plus16_disabled.gif);
	background-repeat:no-repeat;
	background-position:130px;
}
ul#main_menu .down_open {
	background-image:url(images/icons/minus16_disabled.gif);
	background-repeat:no-repeat;
	background-position:130px;
	background-color:#DDFADA;
	border-top: 1px solid #a29e91;
	border-bottom: 1px solid #7d786c;
	color: #666666;
	font-weight:bold;
}
ul#main_menu .down_selected {
	background-image:url(images/icons/back16.gif);
	background-repeat:no-repeat;
	background-position:130px;
	background-color: #CCCCCC;
	border-bottom: 1px solid #5a5548;
	color: #fea849;	
	font-weight:bold;
}



ul#main_menu ul {
	color: #231f20;
	margin: 0; padding: 0;	
	border-bottom:1px solid #8a8477;
}
ul#main_menu ul li {
	list-style: none;
	margin: 0;
	padding: 0;	
}
ul#main_menu ul li a {
	color: #666666;
	text-decoration:none;
	padding:6px;
	padding-left:14px;	
	padding-right:4px;
	width:130px;
	display:block;
	border:0;
	background-color: #CCCCCC;
	border-top:1px solid #e4decf;
	font-size:11px;
}
ul#main_menu ul li a:hover {
	color: #111111;
	background-color:#DDFADA;	
	border:0;
	border-top:1px solid #e4decf;
	font-weight:normal;		
}
ul#main_menu ul li .submenu-down {
	color: #ffffff;
	background-color: #7e755c;	
}

Hi,

Here's my demo site: http://www.alpha-dreams.com/demo5/

Why is IE 7 off? I've looked everywhere. Do I need a stylesheet for IE 7?

Thanks

Alrighty, my friend made this menu: phreakyourgeek.com/tf2/original which looks great in Firefox/Opera. However, Internet Explorer absolutely rapes it and it comes out all whacked up. He gave me the task of redesigning it for IE.

I am not a CSS whiz, but I made it this far: phreakyourgeek.com/tf2 which needs some help.

-Background does not move when hovered over.
-The menu is aligned along the left side, they need to align along the right

CSS for my menu is embedded in the source, CSS for original is in phreakyourgeek.com/tf2/original/stylesheet.css

Please help me make any adjustments to either of them; there must be a way to make the first IE compatible. Thank you for your time.

EDIT: I was informed upon posting that links were not allowed for new posts; I have removed the "www." preventing such restriction. I disagree with your rule; my links are legit and without them my visit would be useless.

EDIT: solved, can be closed

Please look at the menu on this page,

http://www.dougswansonre.com/

In IE7 it looks perfect, in FF it looks terrible???

I figured it out, I think.

It would seem I am always "taking" from this sites and never giving much back, but not today. I had posted a message a few days ago which generated a reply with a link to this site - http://www.sitepoint.com. While I was there, I requested a sample download of some chapters of a book. It was in the book "Html without tables" or something like that they pointed me to this sample site - www.footbagfreaks.com What an awesome way to learn css layout. I checked it in both IE and NS and it was pefect. There are three .html files and one style sheet. I know I will be studying this code if only to get the basics down. I hope this works for you.

Yesterday I was able to get my page to validate with strict XHTML and get it looking exactly how I want it to in Firefox:

http://www . restonheights . com/

However, the design falls apart a bit in IE6. Viewing in it IE6 causes the feedback div to grow causing a left-right scroll bar. Scary things also happen if you reduce the width of your browser. Again, it behaves perfectly in FF.

Can anyone recommend an IE hack that would get that feedback div to behave?

Fun title

anyway - pretty straight forward question :

essentially i have 2 divs, we'll say Div A and div B -- now heres their relation :

Code:

<div id="a"> 
  <div id="b">
  </div>
</div>

=====
css info : 

/*DIV A*/

#pageContent {  
position : absolute;
display : block;
top : 6.75em;
left : 38em;
width : 340px;
overflow: hidden;
height : 19em;
z-index: 2;
font-family :arial;
font-size : 12px;
color : #c8c8c8;

}

/* DIV B */

#scrollo { 
overflow: scroll;
width : 150px;
height : 150px;
margin: .1cm;
z-index: 1;
font-family :arial;
font-size : 12px;
color : #c8c8c8;
}

in my CSS file, DIV A has a specific Width / Height set -- AND -- an "overflow" setting of "hidden" ( aka hides anything that exceeds its boundries - obviously. )

DIV B has it's overflow set to "scroll"

OK WHY ?

essentially I wish to hide the horizontal scroll bar (since its of no use).


THE CATCH 22 :

Safari : This works fine.

FireFox 1.5.x : Horizontal Scroll bar is still displayed.


3 cheers for standards right? Anyway - I was curious if anyone has encounted this, and if so, knows a work around .

Thanks !

edit: The child being Z-indexed lowwer then the parent was just a "logic attempt" on my part - it does not change the outcome if its zindexed to the same or high lever.