Expression >
Forums Home
>
Expression Studio Forums
>
Expression Web and SuperPreview
>
CSS Selector not recognized correctly
CSS Selector not recognized correctly
- Greetings All,
I'm developing a web site in which I want to place a text block in the lower right hand corner of each page and make the text associated with that block smaller than the other content text. So far, so good. I'm having trouble with different browsers recognizing the correct size of the font. Firefox 3.5 wants to make it larger than specified and IE 8, Chrome, and Opera want to make it smaller.
The base font-size for the site is 1em. I want to make the font 0.8em or 0.6em. It seems to render at full size in Firefox and almost unreadable in the others. (Then again, I'm sitting 5 feet away from my screen.) I don't know what I've done wrong so I don't know how to correct the problem.
The web site is still in its beginning stages and not yet published but here's a test link .
The CSS for the block looks like this:#pk-web { position: relative; width: 200px; height: 55px; float: right; margin-top: 105px; padding-bottom: 12px; } #pk-web p { font-size: 0.8em; font-weight: 500; font-family: "Comic Sans MS"; color: #3209B2; line-height: 1em; margin-top: 0; margin-bottom: 5px; }This div is inside the site content div.
I'd appreciate any suggestions to help me correct this problem.
Peace,
Phroneo
Answers
- Look at inheritance. You have set 9px as the font size in the footer div. I suspect that is being inherited in at least some of the browsers.
Not a good idea to mix pixels and ems in the same document if you want to have predictablilty.
MS MVP Expression Tutorials & Help http://by-expression.com and online instructor led Expression Classes- Marked As Answer byPhroneo Monday, November 02, 2009 10:53 PM
All Replies
- Look at inheritance. You have set 9px as the font size in the footer div. I suspect that is being inherited in at least some of the browsers.
Not a good idea to mix pixels and ems in the same document if you want to have predictablilty.
MS MVP Expression Tutorials & Help http://by-expression.com and online instructor led Expression Classes- Marked As Answer byPhroneo Monday, November 02, 2009 10:53 PM
Not a good idea to mix pixels and ems in the same document if you want to have predictablilty.
Hello Cheryl,
That was the answer. Thanks for looking.
I had forgotten that setting. I'd placed it there as a trial and never removed it. Because all the other measurements were in px and only the font in em, I reset the CSS so that everything is now in px. I haven't posted it but the font sizes are now as I want.
Thank you for your help.
Peace,
PhroneoI had forgotten that setting. I'd placed it there as a trial and never removed it. Because all the other measurements were in px and only the font in em, I reset the CSS so that everything is now in px. I haven't posted it but the font sizes are now as I want.
Hmm, might want to think a bit more about that. By specifying in pixels, IE can't resize for accessibility by the vision-impaired. Furthermore, since your containers are fixed in size, when text size is increased in browsers such as Firefox and Safari you page breaks messily, with your content running far outside the fixed-size containers, and some content overrunning other content.Do not use fixed heights on containers holding text. You pretty much guarantee that your design will break when resized. Also, for accessibility you should have switched from a mix of pixels and ems to ems, not to pixels, which are not resizable in IE.cheers,scott
Plural's don't have apostrophe's. It seem's sometime's that any word's ending in "s" get a gratuitous apostrophe. Apostrophe's are used to indicate possessive's and elision's (contraction's or abbreviation's).- I'd go the other way and kill off the pixel font sizes. NOTE: I will not ever use 9px on the web. I've got too many high resolution screens around here. 9px translates to 4pt print type on three of them. That's smaller than the back of most medicine bottles (usuahly 5-6pt). Nobody could ever be expected to read something that small and as Scott mentioned you can't scale pixel based font sizes in Internet Explorer. (Using Zoom doesn't count because it will pixelate the images and you use images for all your navigation.)
MS MVP Expression Tutorials & Help http://by-expression.com and online instructor led Expression Classes
The use of ems confuses me. I know the equation for pixels and that's OK for font sizes. It's that ems aren't intuitive for larger sizes, such as using 47.5em for 760px. I just can't look at that number and say it's 760px.
The other thing that confuses me is mixing of pixels and ems. If one specifies ems for the fonts, is it OK to use pixel sizing for the rest of the document? Is there something in the way a browser will translate a combination of pixels and ems that can create havoc in the way a site is rendered? If I'm going to make a web site, it's best to get it right at the beginning because fixing it afterward is a bear.
Thanks for the warning about fixed height. I don't normally call the height dimension but I wanted it some for areas of this site. Most of them will drop off by the time I'm done.
It ended up that I couldn't read the font at 9px. I've brought it up to 12px and with a 16px base font that does what I wanted.
Thanks for your response. I'm still unsure about mixing px and ems.
Peace,
Phroneo- You will fail accessibilty requiremenets when you use pixels. If you want a rough guide 16px = 1em in most browsers for converting between pixels & ems.
Phroneo, I'm going to suggest you read Joe Clarke's "Building Accessible Website" while I have the book it is also available online free on his website. Another book if you are going to be charging anyone for building websites is "Don't Make Me Think" by Steven Krug. Those are about accssibility & usability, something that is absolutely essential, especially for business websites.
I would strongly suggest taking a couple of CSS classes either at http://lynda.com or if you need more feedback at HTML Writer's Guild for online classes.
MS MVP Expression Tutorials & Help http://by-expression.com and online instructor led Expression Classes - Thank you for the book suggestions, Cheryl. I've already started to look at Clarke's book and will take into consideration you other sugestions.
Peace,
Phroneo
