css issue with IE versus Firefox - jquery related?

[mr_absinthe]

Hello, I wonder if someone can help with the following issue relating to formatting. I've installed new, better looking FAQ page - JQuery Style which looks fine and in my opinion is much better than original version, it eliminates the page jumping around, returning to the top, as the user clicks on questions.

It looks fine, but there are two major differences between Firefox and IE. All is fine in FF, but I'm unable to define margin-top in faqs h2 (stylesheet.css) - it is currently bigger in IE than margin-bottom - you need to see it to understand what I mean, this image should explain it better:

 

The second problem is with the answer's font - again, perfect in FF, but not clean in IE - compare that text with text used for questions - seems like the text for answer is not being defined:

 

Adding the following to the stylesheet did not help:

.answer p{
font:11px/1.5em Verdana, arial, helvetica, sans-serif;
font-weight: normal;
color: #333;
}

 

The complete code added by the contribution to the stylesheet is this:

/*jquery faqs  */
#faqs h2 {
background: url(images/open.png) no-repeat 0px 2px;
margin-top:5px;
padding:0px 0px 5px 20px;
border-bottom:1px dashed #CCCCCC;
cursor: pointer;
font:11px/1.5em Verdana, arial, helvetica, sans-serif;
font-weight: normal;
color: #000;
}

#faqs h2.close {
background-image: url(images/close.png);
}

#faqs .answer {
background-color: white;
padding:0px 0px 5px 30px;
border-bottom:1px dashed #CCCCCC;
margin-bottom:5px;
}

.answer p{
color: #000;
}

 

I've been trying to sort it out for a few days already... it is failing on the FAQ page only, all other contributions with extra formatting in stylesheet are fine (links manager, site map seo, etc.). If it is related to the jquery, I don't know, I'm not a coder. It is pity, because it's a great piece of code and improves the look of the FAQ page significantly. You can see it here and test it in IE or FF: Absinthe FAQ

[NodsDorf]

For the font try this

 

Change

.answer p{
color: #000;
}

 

To

.answer p{
font-size:11px/1.5em Verdana;
color: #000000;
}

The weight should be assumed as normal, and by removing the family options, you force it to use only Verdana.

 

Try it see if that helps.

 

The spacing issue, I am not familiar with so I can't offer anything there.

 

[mr_absinthe]

That did not work I'm afraid.

[Guest]

I have the same issue with the margin, but I did figure out how to fix the issue with the font. Change all the answer <p> to <p class="main"> then define it in your stylesheet.css

[Guest]

Here is for the stylesheet.css

 

p.main {

font-family: Verdana, Arial, sans-serif;

font-size: 11px;

line-height: 1.5;

}

[mr_absinthe]

I've tried it and the result is that I can change the color and weight of the font. However it still remains the same, sort of crisp as you can see on the picture above and below. No idea how to change the margin, yet. This is now in my stylesheet:

/*jquery faqs  */
#faqs h2 {
background: url(images/open.png) no-repeat 0px 2px;
margin-top:5px;
padding:0px 0px 5px 20px;
border-bottom:1px dashed #CCCCCC;
cursor: pointer;
font:11px/1.5em Verdana, arial, helvetica, sans-serif;
font-weight: normal;
color: #000;
}

#faqs h2.close {
background-image: url(images/close.png);
}

#faqs .answer {
background-color: white;
padding:0px 0px 5px 30px;
border-bottom:1px dashed #CCCCCC;
margin-bottom:5px;
}

p.main {
font-family: Verdana, Arial, sans-serif;
font-size: 11px/1.5em;
line-height: 1.5;
color: #000;
} 

 

Why is this issue with the jquery only and nowhere else?

 

I've also noticed that the top margin is OK when you open an answer above it, see this picture for details:

 

[Guest]

This is probably not the greatest solution, but in playing around with different fonts and font sizes and font weights, I was able to get the text somewhat smoother...

 

Try this

 

p.main {

font-family: Helvetica;

font-size: 13px;

font-smooth: always;

font-style: normal;

text-decoration:none;

font-weight: bold;

}

[mr_absinthe]

I would love to know why it is impossible to define that top margin!

If you don't use font-weight: bold, the font looks crisp, it is not normal - is this because of jquery???

[Guest]

I wish I knew the answer. I have the same issue. Using helvetica bold seem to be the only way I could get it to look fairly decent in IE. I don't know about the margin, but you may be able to play with the padding numbers to get the desired margin.