CSS in IE and Firefox is driving me nuts

Andy K · #1 May 17th, 2005, 23:02

So im building a site using CSS, have to say there is alot more smooth control compared to using tables.

So I had the page looking spot on in Internet Explorer only to open it up in Firefox and its been blasted appart.

Spent the next hour or so moving the div tags. Altering absolute/relative positioning. Altering the postition, for margin, then padding. aAHAHA

Still no compromise between the two. Its like fitting a square in a triangle shaped hole!

Can Anyone shed any light on how these two browsers, (also maybe inc Opera) load pages differently, and any standards they comply with? please

Smokie · #2 May 18th, 2005, 08:09

try making a copy of your page, and removing div's one by one until you work out which one is causing the problem, then post back here with your specific problem.

D3mon · #3 May 18th, 2005, 08:15

Try not using absolute/relative positioning, but using floats instead. Much easier and less likely to fall apart x-browser.

I've found in the past that a lot of the cross-browser problem stem from the varying 'default' CSS values applied by each browser. This is most commonly seen in margins and padding (IE already has a poor interpretation of the 'box' model) If you set the margin and padding to zero for problem elements and then set them again, the browser is forced to honour the style sheet values, resulting in a more consitent layout across browsers.

Andy K · #4 May 18th, 2005, 12:36

Ok thanks.

I was using a div id="container" to contain all the design.

The problem was with div tags using z-index. I placed these within the container div.

Also set all blank fields, margin, padding etc . . to '0' which seamed to give them both a spanking and behave themselves!

::

Another thing : What is the best way to centre align my design in Mozilla Firefox?

I have a css defined for <body> with the text align set to centre and middle, which does it for IE.
But Firefox is to Left. So ive put in 12% L and 10% R in the margins. This looks ok but could be more accurate maybe?

D3mon · #5 May 18th, 2005, 13:31

I usually have a div inside the BODY tags with an id="page" then I'll style as follows:

Code: Select all

<body>
<div id="page">

...

</div>
</body>

Code: Select all

BODY { 
 text-align: center /* ie centering fix */
}

#page {
 width: 760px
 margin: auto;
 text-align: left /* ie centering fix */
}

...then everything else goes inside the page DIV.

The BODY tag needs to be text-aligned to center to get the #page DIV to move to the center in Internet Explorer. Content inside the page DIV is then aligned to left again.

Andy K · #6 May 18th, 2005, 14:06

Thanks for that. Works Ok.

Columns. How can I do these without a table? Need 2 colums. Been using float left/right but the <divs> stack up.

Ive tried having one contained within another but the text pushes the contained one down
Im trying to get two Divs next to each other, or am I going about this wrong?

::AK

D3mon · #7 May 18th, 2005, 17:46

to float 2 divs side-by-side simply set the width of each one so that the total is slightly less that the width of the page and set the first DIV to float:left. the other one should jump up to the right hand side. If it doesn't then set the widths on each a bit smaller till it does. Remember that the total width will also include 2 x any margin that you have on the divs.

danburzo · #8 May 21st, 2005, 07:02

i have the following style sheet:

Code: Select all

body {
	text-align: center;
	background: #2E2E2E;
	margin: 0;
	padding: 0;
}

#page {
	width: 700px;
	text-align: left;
	background: #FFFFFF;
	}

and the XHTML document:

Code: Select all

<body>
<div id="page"></div>
</body>

What i want to do is to align the page to the center. In IE my code works, but in firefox the page is aligned to the left. Why is that?

danburzo · #9 May 21st, 2005, 07:07

if i add

Code: Select all

margin: 0px auto;

to my "page" style, the page appears corectly in firefox. Is it because i've set the left and right margins to auto?

D3mon · #10 May 21st, 2005, 12:32

yup. Also, if your setting something as 0 (zero) then you don't need the units after it, so:

0px

is the same as:

0

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS Layout Issue (in Firefox only)... probably simple but its driving me crazy!	alfandango	Web Page Design	4	Mar 8th, 2008 17:11
centering is driving me nuts!	mykl	Web Page Design	9	Oct 25th, 2007 12:13
This is driving me nuts! Please Help!	dm2757	Flash & Multimedia Forum	1	Aug 22nd, 2007 21:30

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
CSS in IE and Firefox is driving me nuts