• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1261
  • Last Modified:

CSS behaving differently in IE than Firefox

I have coded CSS to get our template to work in Firefox, which it does.  However, when I test the page in IE, the positioning is way off.  The template is very simple, a banner with a left navigation and content area.  In order to get the content at the top of the HTML, we use div's and position the elements accordingly.  Only the banner is positioned with absolute, the menu and content are not because there is a pull out menu that does not work correctly with absolute positioning.  However, in Firefox, I am able to get the sections to line up correctly using the top element.

To see the page working in Firefox (and not working in IE), navigate to:
http://www.goshoppingaroundtheweb.com/index.php/RyanTest.html

You can see a working template (in tables, not divs and css) here: http://www.goshoppingaroundtheweb.com/
This gives you the idea of what I was trying to mimic in CSS.

If you look at the CSS, you will see that there is a div for the banner, some header text (which is empty), a wrapper for the content that contains a div for the menu and a div for the content.  The banner is absolute position, but for some reason in IE, it is way off center.  The menu is also positioned strangely in IE, though it appears the content is fine.

There is also a global wrapper that centers the page, and this may be the problem.  I center using auto margins.

Does anyone have any ideas on how I can alter the CSS to work properly in Firefox & IE or what changes I could make to an IE-only stylesheet that I can include?  Thanks in advance for any assistance.
0
dageyra
Asked:
dageyra
  • 9
  • 7
1 Solution
 
xSuperioRxCommented:
Try setting text-align: center; in the body part of your CSS file.

Just something i noticed that often helps IE.
If that doesn't work ill check some more into it.
0
 
dageyraAuthor Commented:
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?
0
 
dageyraAuthor Commented:
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.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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

Open in new window

0
 
dageyraAuthor Commented:
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!
0
 
dageyraAuthor Commented:
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.
0
 
xSuperioRxCommented:
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 :)
0
 
dageyraAuthor Commented:
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.
0
 
dageyraAuthor Commented:
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.
0
 
xSuperioRxCommented:
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>

Open in new window

0
 
dageyraAuthor Commented:
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.
0
 
xSuperioRxCommented:
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!
0
 
xSuperioRxCommented:
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 :)
0
 
dageyraAuthor Commented:
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!
0
 
dageyraAuthor Commented:
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?
0
 
xSuperioRxCommented:
If you keep the page like that (keeping container as relative) i think your best bets the absolute values inside the Transmenu.

Personally i tend to only use absolute values when i really really have to.

If you are still having trouble after you've looked at the transmenu divs, then i would suggest trying to build it from scratch (i know thats probably not so fun but.. :/).

Sadly i dont have anything better to come with right now. Its getting late so I'm going to go to bed again. Hopefully i've been to some use today :)
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 9
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now