CSS behaving differently in IE than Firefox

Hello xSuperioRx:

I added that to the CSS file (seo.css), but it didn't seem to make a difference.  I'll verify the setting is not getting overwritten, but do you have any other suggestions?

Just to verify, I added the text-align: center to a in-page style, which should overwrite any other body elements.  I await any further assistance you can provide.

Hmmm takes some time to read through everything.

IE does have problems with using auto margins.

I'll submit some of the code that i've used that i'm sure works. (Using it on my page with very few changes, like background-color etc)

The code i submitted basically makes the #main div in the horizontal center of the page.

Note sure if it'd do anything but try changing your :
margin-left:auto; margin-right:auto
in your #container to:
margin : 0 auto;

Sadly you do have too many .css files on that page for me to look through them all :) So another tip would be to start out with a clean css start and then work your way slowly forward. (As im guessing you are changing from tables to divs). And keep checking regularly that all browsers work as intended.

Please keep me up to date on your process!

html, body {margin: 0;padding: 0;text-align:center;font-family: Arial, Helvetica, sans-serif;}
 
#main{text-align:left; margin:0 auto; padding:5px; width:740px; height:510px; border: solid 1px #000; position:relative; clear:both;}
                                              

1:
2:
3:

Hello xSuperioRx:

Thanks for your suggestion, I will try it out.  Regarding the number of CSS files, it is a Joomla CMS, which adds its own CSS.  However, the only difference between the home page and my test page is the seo.css file, which is where the margin info is contained (and what handled the transition from table to div).

I will let you know how it turns out!

If it helps, I removed several of the stylesheets.  I may need to add the base template back in, but right now there are only 2 (the seo.css which is the table->div conversion and swfree.css which handles the menu styling).

Does this help narrow down the problem?  With only these 2, I still get the same behavior in IE, but in Firefox the page is no longer centered.

I notice some errors in the code now:

margin-left : 0 auto; and margin-right: 0 auto;
should be margin:0 auto; (without -left -right)

margin:0 auto; basically means that top and bottom should be 0, and left and right should be auto;
That is of course almost identical like you had it, but who knows what IE thinks about sometimes ;)

Also you cannot comment  in the css using //
So change the following :
//position: relative;

Also a good way to check your CSS for errors is :
http://jigsaw.w3.org/css-validator/

I'll take a quick peek at your css again before going to bed :)

Thanks again for your help, I missed those margin subtleties.  Because we are using opacity (which is valid CSS 3 but not 2, which the validator uses), I cannot completely rely on the CSS validator.  I will make sure there are no other errors besides the opacity however.  Thanks also for the tip on the comment, not sure how that snuck in there.

I made those changes, and Firefox is fixed now, but IE has no changed at all for me.  What I can't understand is why the banner is so far off to the right (and the menu as well, but the banner is positioned absolutely).  The only div that is positioned correctly is the content, which is inside the same wrapper as the menu.

I'm trying to think of more pieces I can take out of the HTML/CSS and still be able to identify the parts correctly--any suggestions?  I've thought about creating a standalone HTML and CSS file to toy with instead of going through Joomla.

Hmmm i downloaded :

http://www.microsoft.com/downloads/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en

which is a great help for debugging pages in IE.

With it i noticed (bah im too tired) that you arent using float:left; on any containers.

First off you should assign the divs in vertical order, so put the div containing the banner (banner) prior to the one containing the body (contentwrapper).

Put position relative on the banner div.

Use float:left; on the 'content' div and also the 'menumodule' div.

The snippet i added shows what i ment by putting the div id banner and topmodules prior to the contentwrapper div.

So yeah basically its probably the float:lefts; that i said that are missing and the position:relative;
You might also want to make a clear:both; div that helps containing the floats :)

Try around with different combinations and lets hope it gets sorted :)

More information about floats:

http://webdesign.about.com/od/advancedcss/a/aa010107.htm

Best of luck! I'll swing by tomorrow and see how you are doing :)
Hopefully i'm on the right track and not rambling in my sleep ;)

<body>
<div id="container">
	<div id="banner"> <img src="/images/banner_GSATW_1.jpg" alt="Go Shopping Around the Web Banner" width="900" height="200" /> </div>
	<div id="topModules">
	<div id="contentWrapper">
		<div id="content">
			  
			<table class="contentpaneopen">
			<tr>
			<td valign="top">
			Ryan Test
			</td>
			</tr>
			</table>
 
			<span class="article_separator">&nbsp;</span>
 
			<div id="footer">
				<p>&copy; 2009 Go Shopping Around the Web - All rights Reserved</p>
				<p>Website Design by: Kathy Farrell &amp; Jeff Dingsor<br />
				</p>
			</div>
		</div>
		<div id="menuModule">
 
		<div id="wrap" class="menu" align="left">
		</div> 
		<div id="subwrap"> 
		</div>
		<!--End swMenuFree menu module-->
		</div>
	</div>
	</div>
</div>
</body>
</html>
                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:

I have the developer toolbar, but I find it's CSS ability lacking.  I originally went with something like what you are suggesting, but I was unable to get the floats to work (didn't seem to make any difference, which suggests I was using them wrong).  The overall goal here is to have the actual content in HTML source as close to the top of the page as possible (some search engines only use the top so many words for indexing, including HTML markup, so sites with content deep inside the source do not do as well).  That is why I did not pursue the vertical approach.  I will see what I can do with the floats; I definitely know that putting the menu before the content will not work because so much markup is auto-generated by the CMS.

One of my inquiries is why IE behaves so differently from Firefox.  I know the two interpret tags differently, but in this case IE is way off, so my hope was to get some advice on how to get IE to behave more like Firefox (which behaves correctly and gives the desired effect with the current source layout) using CSS and not having to restructure to source.

I will keep you posted.

Yes IE can be way off sometimes :) If you google "css ie" you end up with loads and loads of pages that explains all the things IE interpet different. It would probably be a good idea (guessing you already have.. but if you haven't) read through some of them to get a general view what IE does wrong (or differently).

The developer toolbar isn't that great with CSS, you're right. But you can add new attributes and see what kind of changes it does. So it does help :) (not as good as firebug with firefox, which is a great asset)

Hope you get it sorted soon!

Think i finally figured it out :)

To get the absolute property on the banner you need to put the container it is to relative.

So changes i made that made it look good in IE: (havent tested firefox then lol)

menuModule -> float : left;
container -> position : relative;
banner -> left:0px;

Hope thats everything i changed :)

Hello xSuperioRx:

Thanks, that helps a lot.  There are a few snags.  First, if I add the position: relative to the container, it causes the submenu in the menu to be off.  I found that using any position would cause this, which is why I had to avoid it.  Since position is inherited, I believe that having it in the container causes the menu CSS to also be relative, therefore screwing up the submenu pull out.

However, by removing the position: relative, both the content and the menu are in the right place in IE.  The problem, as you pointed out, is that the banner is still off.  Is there any way that I can get the banner in the right position without using the position: relative or possibly stop the inheritence down to the menuModule class?

I feel like I'm almost there!

Also, it's interesting how putting in the left: 0px causes the banner to be flush with the left side, yet without it, it's way off to the right.  Surely there is some middle ground that will allow the banner to be centered properly?