CSS compatibility issue with FireFox 7.01

Question

I'm working in VS2010 & I designed a web site. In that web site I've designed one CSS & that style sheet is only effective in Internet Explorer. The CSS should also take effect in all borwsers (eg. Firefox, Chrome).

The CSS is

div.menuGlobal
{
    background-color: #465c71;/*#4b6c9e;/*#4169E1;*/
    padding: 10px;
    padding-bottom:0px;
}

span.menuGlobal a.current:link,span.menu a.current:visited
{
    display:inline-block;
    font-weight:bold;
    color:#0000CC;
    background-color:white;
    text-align:center;
    padding:4px;
    text-decoration:none;
    width:70px;
    padding:5px;
    margin:0px;  
}

span.menuGlobal a.current:hover,span.menuGlobal a.current:active
{ 
    color:#32CD32;
    background-color:#DFDFDF;

}

span.menuGlobal a:link,span.menu a:visited
{
    display:inline-block;
    font-weight:bold;
    color:#0000CC;
    background-color:#DCDCDC;
    text-align:center;
    padding:4px;
    text-decoration:none;
    width:70px;
    padding:5px;
    margin:0px;  
}

span.menuGlobal a:hover,span.menuGlobal a:active
{ 
    color:#32CD32;
    background-color:#DFDFDF;

}

I've used master page & added another css on that master page. And added this master page in my web page. And above css file is also applied on the same problem. I think this is having some problem.

my master page is having two content place holder. one for header section & another is for body section. And i've added link tag in the header content page holder of the child web page.

how to solve this?

This is not the place to be asking such a general question on cross-browser compatibility. Do a Google search on the subject and do some reading. Then come back if you have any more specific questions (making sure you search for existing questions and answers first) — musefan, Nov 03 '11 at 12:39
How are you specifying that all browsers should use this CSS? How do you know it isn't working for non-IE? — Richard, Nov 03 '11 at 12:41

score 0 · Answer 1 · answered Nov 03 '11 at 12:49

not 100% sure but you are not using any browser specific rules

your css should work on every browser even the very old IE5,chrome,firefox,opera

i really dont see any thing wrong

EDIT : just to be sure go and check that you don't have conditional comments <--IF[IE] -->

around your <style> tag or however you are including this stylesheet

score 0 · Answer 2 · answered Nov 03 '11 at 12:50

0

Your CSS looks fine to me.

"Random" thing, did you try removing /*#4b6c9e;/*#4169E1;*/ or adding spaces before and after /*, */?

Update:

Also please include the part in HTML that references this CSS, the <link> or <style> tag used.

answered Nov 03 '11 at 12:50

Meligy

35,654
11
85
109

score 0 · Answer 3 · answered Nov 03 '11 at 12:53

0

Put * before property which is not working in Firefox. like *height: 58px; in my case.

answered Nov 03 '11 at 12:53

Arun Rana

8,426
14
67
107

I thought that too. But a couple of days ago I read this: http://stackoverflow.com/questions/1714096/why-is-the-css-star-selector-considered-harmful and I also know it can give problems with future unknown browsers that may read it differently :s – Yisela Nov 03 '11 at 14:23

score 0 · Answer 4 · answered Nov 03 '11 at 13:51

0

If it works in IE, but not Firefox, then your markup is wrong. Never, ever trust IE to do anything right. While IE may show what you want, FF is showing what you wrote. But without the complete markup, anything we say is just a wild guess.

answered Nov 03 '11 at 13:51

Rob

14,746
28
47
65

CSS compatibility issue with FireFox 7.01

4 Answers4