I have a newbish CSS question, any smarter guy to help ?

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
By Oliver AKA The Admin on 7 comments
in Categories: Just Talking

I noticed the text in the tables is much bigger when hentairules.net is viewed with IE, compared to the “normal” font size there is when using firefox. I thought I had my css avoid this, but obviously not. Please, if you’re competent in web developing, do you have any idea of what I should add to my css to make this bloody IE accept to render the fonts in the tables at the normal size ?
Thanks a lot if you can help with the perfect reply in a comment ;)
Update : it is now fixed. Thanks a lot for your help, guys :)

Subscribe
Notify of
guest

7 Comments
oldest
newest most voted
Inline Feedbacks
View all comments
dano
dano
15 years ago

… ie is probably ignoring the font styles within tables. Try explicitly setting them with the table: http://shapeshed.com/journal/css_font_size_not_inherited_in_ie_tables/

hidden
hidden
15 years ago

Hello,

Your fonts are a relative to the browser’s default:
“font:76% Verdana,Tahoma,Arial,sans-serif;”

that line is in the body{ section of your css. try this instead:

font-size: 11px;
font-family: “Verdana, Tahoma, Arial, sans-serif;

with that said, you will need to specify different font sizes for different parts of the webpage. Titles are larger, so do font-size: 12px; (or 13).

good luck

hidden
hidden
15 years ago

i took a quick look and your titles are already size specified. change them by changing the font-size section of the the

#content h2 {

section.

good luck

bimz
bimz
15 years ago

The problem probably caused by the overlapping font-size attributes that used ’em’ dimension. I’m not a master in web development, but you might want to try adding this CSS:

#content table td, #content table td p { font-size: 11px; }

That will make every text under table cells, whether you have a paragraph tag or not, has a size of 11 pixels. Hopefully. :)

Rapscallion
Rapscallion
15 years ago

How have you defined the font size in the css? (-o-)

Oliver AKA The Admin
Oliver AKA The Admin
15 years ago

Thanks guys, that table overlapping had me wrong.

Thanks for your help, thanks to you I could fix that irritating problem :)

bmore
bmore
15 years ago

I saw that you seemed to have your font overlap fixed, but for future reference, I wanted to share since I’ve worked with WordPress, CSS, XHTML, and HTML for at least three years; eight with HTML.

IE is OS-dependent, meaning that by default it won’t go below OS font size chosen by the user; specifically when IE fails to fully acknowledge a value type such as “em”. When looking at your stylesheet, you’ve modified a template it seems, but haven’t made the css as cross-browser compatible as possible. So you might want to think about the following:

Stick with style classes with families whenever possible. It’s easier to re-use classes in a template.

You use at least three different font-size value types, but it’s best to stick with one throughout, and px works best across all OS and browsers. At least that’s my opinion having tested my designs on Macs, Linux, and Windows.

For myself, I don’t use “table td” to id attributes, but it does work. I usually just use table, and then insert a specific class in a td or tr whenever necessary. That way I can use any tag or class already found on the page wherever I want it, and without making too many repetitive attributes in the css.

Anyway, that’s just my experience with web design, css, php, etc. Also, I don’t know if this means much to you, but the right-side navigation menu ad doesn’t appear in my IE7, but does in Firefox. I didn’t bother checking the code or javascript to make sure that the problem wasn’t css related. What I do know is that sometimes relative and absolute positioning will cause display problems in a page’s content in versions of IE while compared to Firefox, and font-size values can cause content to display incorrectly in Firefox if developed solely with IE in mind. So I just thought I should mention it in case that particular ad doesn’t seem to be helping to generate any revenue for your site. If it’s not, then maybe it’s not visible in IE.

Regardless, good luck with the site.