CODEWITHSUNDEEP
cssfirefoxbrowser
Jonathan Basile
Jonathan Basile

Reputation: 679

change css for firefox

I have read extensively on this site and others about how to change my css for different browsers, but none of the methods I have found are working.

I have an unordered list whose list items appear with different amounts of padding on different browsers. The value is set to 8 px and works perfectly on chrome and safari. I have tried 

ul.titles li {

padding: 8px;
-moz-padding: 7px;
font-family:"Subway", "Courier New", "serif";
font-size:11;
color: #000000;
}

I also tried

ul.titles li {

padding: 8px;
padding: -moz-7px;
font-family:"Subway", "Courier New", "serif";
font-size:11;
color: #000000;
}

Both of these had no effect. When I tried defining one for -webkit- and one for -moz- it messed up both mozilla and chrome.

Upvotes: 2

Views: 969

Answers (3)

programking
programking

Reputation: 1386

Try adding your styles inside of a Mozilla extension:

@-moz-document url-prefix() {
    /* Styles go here */
}

So in your case, you can add the following lines of code to your CSS stylesheet:

@-moz-document url-prefix() {
     ul.titles li {
        padding: 8px;
        font-family:"Subway", "Courier New", "serif";
        font-size:11;
        color: #000000;
     }
}

Another option you might want to try is Normalize.css, which makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing. I highly recommend it.

Upvotes: 1

moettinger
moettinger

Reputation: 5196

Instead of addressing every browser one by one, I suggest using Normalize.css to make common elements begin with common styles. A must have for every single website I develop.

Upvotes: 1

Joffrey Maheo
Joffrey Maheo

Reputation: 2919

You can try this :

@-moz-document url-prefix() {
    ul.titles li {
        padding: 7px;
    }
}

for sure otherwrite your css maybe add a class to your li

Upvotes: 2

Related Questions