|
CSS - Using 12px As Body Font Size -then Using %
In an attempt to make pages look readable across all browsers/screens I was wondering...
Up until now I was using everything in pixels, but recently decided that % was a much better way to go. But then I was wondering, if I used 12px to determine the default font size for all my pages and then % to format everything under that, then perhaps that would be a better way to have control over how it looks on different screens...but I thought I read somewhere that there is a problem (not sure if it's Firefox & IE or just one of them) that doesn't allow for scalibility when using a base size in pixels..... Is this true? Similar TutorialsHi there, I'm completely new to CSS. I'm trying to do this more than one hour but can't get it right. Code: <font color='white'><font size='1' face=verdana size=1> I couldn't find the equivalent of this in CSS This is my last experiment but it doesn't seem to work either Code: fontstyle { color : #FFFFFF; font-family : verdana ; font-size :1;}
Thanks So when using Netscape 7.2 & Opera 7.5 and MSIE 6.0, How do you get a simple tag like body { font-size:small; } to be equal in all browsers? Setting IE Text Size to Medium, and Opera's Zoom to 100% (both defaults) and Netscape 7.2 to 120% (not the default) is one way, but is there a CSS way? By the way, the child element hack "body>div {property}" wasn't working no matter what I tried, by not working I mean to say Netscape never would read it or apply it. It appeared to be that Opera & IE need to read the same value while Netscape needs to apply a larger size to be equal to IE's and Opera's rendering. B Hi all, I've created a simple page and managed to encode a default font in the "Body" code: Code:
body {
margin:10px 0px 0px 10px;
font: bold 10px verdana, arial, sans-serif;
}
But I'm just wondering if there's any way to include a default font colour in there, too? I've tried putting in #fff, but it doesn't work and the font still comes out as black on a dark blue background. Hi All, I'm new to the forum. My website's Index page is losing all my body font and color settings, though layout is correct. All of the subfolders' index pages and other pages throughout my website remain unaffected. I've sanity checked it all, and it validates OK. I have an email in to the webhost for some input, but I hoped to get some advice from other CSS-ers who might be in the know. My website is: NickiGreenwood.com I am a romance author and sideline-web-design-junkie. Any help, advice, or even a point in the right direction would be a huge, huge help. Thanks, all. Nicki Greenwood - Romance Author Well, the title might be a little oversimplified, but I guess it caught your attention In the past, I always set my font sizes using px. I know that this is not the appropriate standard (since it doesn't allow a user to re-size the font on their end), but I usually did it because it was easiest and most predictable. Now, I finally want to make the step towards more accessibility and I would like to learn a little bit more about using em's appropriately. Does anyone have any good advise on how to get started with the following questions: How/where do I set the initial font-size, from which I can use em's? What are the dangers of using em's instead of px? Where could this change impact my usual styling? Are there any good resources/tutorials about this? Any help/suggestions/ideas are appreciated... Hello, I have something has follows: <div> ... <table> ... </table> </div> My document font size is 1em. My div font size is 1.4em. What should be the font-size in my table to get back to the 1em of the document? Thanks, Miguel Whats the best way to fix font size? I use CSS. The font size seems to stay fix on IE but not on Mozilla and Netscape. Also I notice when I use adgui font it stay fix no matter in what browser and no matter at what text view. Why is that. Are there more of this kinda fonts? Bottom line, whats the best way to fix the size of fonts regardless of browser and at what text view. Thanks for you help Liz hi, someone using foxfire keeps saying the my font is really really tiny, I have my css file like:
Code: body { background: #FFFFFF;
/* for internet explorer */
scrollbar-face-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #FFFFFF; scrollbar-3dlight-color: #494969; scrollbar-arrow-color: #494969; scrollbar-track-color: #FFFFFF; scrollbar-darkshadow-color: #494969;
margin: 0px; padding: 0px; border: 0px; border-top: 1px solid #8E9397; border-left: 1px solid #8E9397; font-color: #494969; font-family: Verdana,Arial,Helvetica; font-size: 8pt; text-align: left; }
a:link,a:active,a:visited { color: #494969; text-decoration: none }
a:hover { text-decoration: underline; color: #494969; position: relative; top: -1px; left: -1px; }
hr { background: transparent; color: #494969; height: 1px; border-width: 0px; }
fieldset { margin: 0; padding: 1px; border: 1px solid #494969; }
legend { margin: 0; padding: 7px; color: #494969; background: transparent; font-weight: bold; }
img { border: 0px; }
table { background: transparent; }
tr { background: transparent; }
td { background: transparent; color: #494969; font-family: Verdana,Arial,Helvetica; font-size: 70%; }
input, textarea, select { color: #494969; font: normal 11px Verdana, Arial, Helvetica, sans-serif; background: transparent; border: 1px solid #494969; border-style: inset; text-align: center; text-indent: 2px; }
form { margin: 0px; padding: 0px; }
any idea on whats wrong? and I would of changed the % to an actual value but I wanted to make it so people can control the size of the font to lager or smaller here is a preview with that css file in use : http://www.dbznetwork.net/ People viewing my site at 120 dpi are seeing misaligned text and layout, whereas people viewing the site at 96dpi can see it properly. I'm using "em" instead of pixels when setting font sizes in CSS. The site has fixed length and width, do I HAVE to allow it to resize itself? I've read several books such as Dan Cederholms, "Web standard solutions" and Eric Meyers on CSS, but I've yet to come across anything that delves into the specifics between declaring font-size attributes of px, %, em . I've always kind of used px for my sites, but I've seen some sites that use percentages and others that use em. What are the best uses for each one? How exactly does the % and em know what size to be? FYI: I didn't mention 'pt' because I do in fact know the purpose of it for printing web documents. Feel free to discuss or even post a great link that covers everything. Thanks! Hello all. THis is my first post here . I use em to define font-size at my site. At main css file... body { font-size: 76%; } tr, p, div, td, div { font-size: 1em; } at secondary css file... div#content_area .contentpaneopen { font-size: 1.1em ; line-height: 1.3em; } The problem is that the text (content_area) displays correctly on firefox and Opera and wrong on IE. I need em because i use a auto font resize javascript file.I am trying to find what is wrong for days...! please check at this link... I am sorry about the greek encoding Thank you How can I randomize text size on a website? Like the ones done with the "tags" found on many wordpress blogs? Nothing too crazy, I just want to display words randomly and have some of the text bigger than others. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- div.print { font-family: Arial, Helvetica, sans-serif; font-size: 2pt; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; color: #FF3300; letter-spacing: normal; word-spacing: normal; } div.regular{ font-family: "Times New Roman", Times, serif; font-size: larger; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; text-transform: none; color:#006600; letter-spacing: normal; word-spacing: normal; text-decoration: underline; } --> </style> <script language="JavaScript"> function printerFriendly() { document.getElementById('div1').className = 'print'; } </script> </head> <body> <p><a href="javascriptrinterFriendly()">click here to change font</a></p> <div id="div1" class="regular"> <table id="tab1" width="100%" border="0" cellspacing="1" cellpadding="1"> <tr> <td>bla</td> <td>kla</td> <td>sal</td> <td>kdef</td> </tr> <tr> <td>iuwhdfqower</td> <td>ouresgopu</td> <td>uihwdrfpu</td> <td>uiwrhgfpuieroi</td> </tr> <tr> <td>oiiudefpuiwerv</td> <td>iufdgpiuwqerpoi</td> <td>iuergpuergipou</td> <td> </td> </tr> </table> <p class="print"> </p> </div> </body> </html> why is the font size not changing nor the color?? only the font changes when th link is clicked?? Thanks for taking the time to read my question. I am setting the font size for this tag in CSS and it is showing up in different sizes depending on the browser. The font is bigger in FF than it is in IE7. My text fits in the desired area in IE7, but is way to big in FF. I have to be doing something incorrect here. Does anyone notice anything? Thanks, Brad HTML: Code: <p id="FillText">Click on an item under <strong>'Latest News'</strong> to read more about it here and get links to the full story...</p> CSS: Code: #FillText {
font-size: 16px;
color: #ffffff;
height: 280px;
padding-top: 20px;
padding-left: 90px;
padding-right: 15px;
/*padding: 30px 34px 20px 96px; */
text-indent: 20px;
}
I have a style.css file included on all pages i want to sent default font and size, for all the text where i haven't already set something ok so basically my MAIN browser is Opera which I use it 99% of the time. Now when I try viewing my site in Internet Explorer, font size looks SMALLER than the one I see in Opera. Of course the solution would be simple - bump up the font size but then the font looks TOO BIG in Opera. how to equalize these font sizes in both browsers? also, is this the correct usage for setting font size? Code: body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:active {
color: #000000;
text-decoration: none;
}
a {
font-size: 12px;
}
EDIT: this message I wrote right now, looks EXACTLY the same in both browsers. Fonts match up perfectly. what did the admin do for font property? I've read several books such as Dan Cederholms, "Web standard solutions" and Eric Meyers on CSS, but I've yet to come across anything that delves into the specifics between declaring font-size attributes of px, %, em. I've always kind of used px for my sites, but I've seen some sites that use percentages and others that use em. What are the best uses for each one? How exactly does the % and em know what size to be? FYI: I didn't mention 'pt' because I do in fact know the purpose of it for printing web documents. Feel free to discuss or even post a great link that covers everything. Thanks! Hello: I'm building a website for a broad audience. I need there to be an option for text to be resized for those who have trouble with reading screens. I am trying to have the text on HTML pages be changeable through CSS. Two examples I offer are 1. wired.com 2. 1and1.com On the top right corner of the screen, there are options to change the text size without switching to a new HTML page. I believe this is done using CSS (perhaps Live StyleSheet Selector). I'm not really sure. I would like for the user the have the option to change the font-size by clicking, not by repositioning the window (then the size changing relative to window size). If anyone can help me, I would really appreciate it. Thanks! Deanna |
|||||||