Page 1 of 1

does Firefox have something against the <DIV> tag?

Posted: 28 Mar 2008, 08:46
by 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??

Posted: 28 Mar 2008, 08:50
by 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.

Posted: 28 Mar 2008, 08:59
by PaperCut
Yah, I have quite a number of .js files. but somehow they all work, just that the layout is messed up.

Posted: 28 Mar 2008, 09:04
by 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 :?

Posted: 28 Mar 2008, 09:15
by PaperCut
Synthesis wrote: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...

:x

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:

Posted: 28 Mar 2008, 09:18
by 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.

Posted: 28 Mar 2008, 09:21
by PaperCut
see above post 8)

Posted: 28 Mar 2008, 09:24
by 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.

Posted: 28 Mar 2008, 09:36
by PaperCut
**** it!!!

My site looks k@k in FF!

is there a way of working around the 'float' property for use in FF??
I wrote: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; 
}
:x

Posted: 28 Mar 2008, 09:46
by PaperCut
maxxis wrote:You just need to know what to look for and how to use the !important params with the CSS
I'll look into that.
maxxis wrote: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 :x)
maxxis wrote: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...

Posted: 28 Mar 2008, 09:47
by maxxis
Floats are really powerful with CSS

What is the layout and what should be where?

Posted: 28 Mar 2008, 10:35
by PaperCut
checketh thou pm! ;)