does Firefox have something against the <DIV> tag?

[PaperCut]

hello world.

I'm designing a site neh, now, it uses a whole lotta <div> tags; which I'm using for separating and referencing content.

The site displays perfectly in IE7, runs smoothly and everything!

But when I run it on Firefox, the content shows up at the wrong place.

Is there anything I can change/add in my CSS that wont affect the layout too much in IE??

help.

Or should I have two different CSSs for each browser, and just add a browser detector that would then call the relevant CSS??

[Synthesis]

Are you running any Javascript on that particular site? I can't explain but I've had the same problem only when Javascript is involved.

[PaperCut]

Yah, I have quite a number of .js files. but somehow they all work, just that the layout is messed up.

[Synthesis]

ok, then I'm also stumped PC. Will have to go back to the drawing board on this one. But I remain pretty sure it has something to do with the .js

[PaperCut]

ok, then I'm also stumped PC. Will have to go back to the drawing board on this one. But I remain pretty sure it has something to do with the .js

but which one... :crazy: like i said, they all work perfectly. No errors no nothing. just that the <div> content doesn't display where it should. i'm gonna try to fiddle with relative/absolute positioning see what happens.

i can't start the site all over again. Even the prototype (with just 1 .js and 1 CSS) does the same thing...



eish...

this sucks...

edit:
before =

Code: Select all

#content {
	margin: 75px 0 0 40px; 
	float: left;
	font-size: 1.1em; 
}

after =

Code: Select all

#content {
	margin: 75px 0 0 40px; 
	/*float: left;*/
	font-size: 1.1em; 
}

dit werk... dit werk...

now i have to find another way of aligning the content!!

oh happy day!!!!

:biggrin:

[Synthesis]

chances are then it probably has nothing to do with your .js. Maybe it is the CSS. Design a quick 1 minute "scrap" layout with only CSS and another one with no CSS but the same layout. See if the layout with CSS is "scrambled" in Firefox, then we know it's a CSS in firefox glitch.

[PaperCut]

see above post

[maxxis]

CSS Support in FF is excellent.

You just need to know what to look for and how to use the !important params with the CSS

Ive built quite a few <UL> based nav systems with CSS and every single one of them required different code for IE and FF

Also keep in mind that IE 6 is still very much mainstream so make sure to test in that.

[PaperCut]

**** it!!!

My site looks k@k in FF!

is there a way of working around the 'float' property for use in FF??

edit:
before =

Code: Select all

#content {
	margin: 75px 0 0 40px; 
	float: left;
	font-size: 1.1em; 
}

after =

Code: Select all

#content {
	margin: 75px 0 0 40px; 
	/*float: left;*/
	font-size: 1.1em; 
}

[PaperCut]

You just need to know what to look for and how to use the !important params with the CSS

I'll look into that.

Ive built quite a few <UL> based nav systems with CSS and every single one of them required different code for IE and FF

funny enough, the nav works fine, just the content that's in the wrong place. Even after i remove the float property, it still adds some extra space at the end of the page (whic I don't need )

Also keep in mind that IE 6 is still very much mainstream so make sure to test in that.

ya, on top of that, i was thinking of adding an option where the user can choose a stylesheet to use based on their browser... or something like that...

[maxxis]

Floats are really powerful with CSS

What is the layout and what should be where?

[PaperCut]

checketh thou pm!