Code CSS on Firefox

Otaku Ichise

New Member
Messages
64
Reaction score
0
Points
0
Ok my question is, for those who are used to code for IE7

what are the issues we should know about firefox?, like for the tags <ul> we cant give margin-top or it will also move along with the div, the solution was giving padding (for example 20px) and margin-top:0px

Also when i wanted to repeat a background pic (100px height 5pxwidth) on a div with 100% value width/height, it wouldnt show/repeat unless i gave a postion absolute to it, any beter solution?

all advices are welcome, thanks in advance.

current website im making: http://otakushrine.elementfx.com/falcom/eiyuu densetsu 6/legend_of_heroes_fc.html
modify_inline.gif
 

galaxyAbstractor

Community Advocate
Community Support
Messages
5,508
Reaction score
35
Points
48
Ok my question is, for those who are used to code for IE7

what are the issues we should know about firefox?, like for the tags <ul> we cant give margin-top or it will also move along with the div, the solution was giving padding (for example 20px) and margin-top:0px

Also when i wanted to repeat a background pic (100px height 5pxwidth) on a div with 100% value width/height, it wouldnt show/repeat unless i gave a postion absolute to it, any beter solution?

all advices are welcome, thanks in advance.

current website im making: http://otakushrine.elementfx.com/falcom/eiyuu densetsu 6/legend_of_heroes_fc.html
modify_inline.gif

For the background repeat, I always do like:

Code:
.div {
background-image:url(path/to/image);
background-repeat:repeat-x;
}

repeat-x for repeating from left to right and repeat-y for repeating up and down.
 

scorch94

Member
Messages
228
Reaction score
0
Points
16
what are the issues we should know about firefox?

I bet you'll get more issues with IE than with Firefox :)
Seriously, Firefox doesn't have many issues. I know that sometimes some div doesn't stretch down as it's supposed but here's the solution (might be useful for you):

#IdOfElementOrWhatever:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
 

Otaku Ichise

New Member
Messages
64
Reaction score
0
Points
0
I bet you'll get more issues with IE than with Firefox :)
Seriously, Firefox doesn't have many issues. I know that sometimes some div doesn't stretch down as it's supposed but here's the solution (might be useful for you):

#IdOfElementOrWhatever:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

Didnt know there was a content atribute on css XD
 

scopey

New Member
Messages
62
Reaction score
0
Points
0
Obvious one...

Opacity. Firefox likes different opacities to other browsers. As a fix, I use:

filter:alpha(opacity=##);
-moz-opacity:.##;
opacity:.##;

WHere ## = value of opacity (Those 3 are all the attributes for opacity there are I think).
 
Last edited:

Otaku Ichise

New Member
Messages
64
Reaction score
0
Points
0
Obvious one...

Opacity. Firefox likes different opacities to other browsers. As a fix, I use:

filter:alpha(opacity=##);

-moz-opacity:.##;

opacity:.##;

WHere ## = value of opacity (Those 3 are all the attributes for opacity there are I think).

Obvious in what way? if when i went to learn they didnt mention it o.o
thanks in advance.

Someone can explain me, why margin-top on a div sometimes wont work on firefox?
Another example: i gave absolute position to it, then the next div gave absolute position again and it stayed on top of it :happysad:
 
Last edited:
Top