CSS - Font Size Ok In Firefox But Messed Up In Ie

Hey Folks,

I am a newbie with designing webpages and having some problems with a website that I just created. If any of you could point to a resource of help me out, that be great.

Heres the link

www.pcdigger.com

The middle part is messed up in firefox. HTML and CSS both are validated per www.w3.org but I guess, that doesnt do anything for firefox.

Thanks,
DesignFlaw

Hi, im just getting into CSS, and decided to convert my website from HTML w/ Tabkes to CSS , for smaller load times, make it more professional.. My problem is, I just finished and it looks fine under Firefox (Linux & Windows).. But it looks absolutely horrible in IE? Can anyone find an mistake. I validated the CSS with W3's validater thing.


http://mp3realm.org/new/index.php (First one)
http://mp3realm.org/new/search.php (search page)
http://mp3realm.org/new/default.css (CSS)


Thanks.

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?

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/

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

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

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...

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.

I need to shrink the fonts for the following classes on blogspot:
post-body
date-header

but for some reason it refuses to shrink below 100% or 1em

Even in firebug, adding properties to element.style, the font refuses to shrink below 100%. Even when i switch off all inherited values for font values it refuses. It does however grow to any size larger than 100%.

Other elements' fonts do shrink to any value, it is only these (and possibly others) that do not shrink.

blogspot in question is http://secretfarts.blogspot.com

Any ideas?

<!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>&nbsp;</td>
</tr>
</table>
<p class="print">&nbsp;</p>
</div>
</body>
</html>

why is the font size not changing nor the color??
only the font changes when th link is clicked??

Hi there,

I have a font size problem. Basically, some of the text on the page appears as size 14 verdana, where as the other text appears how i want it.

I want the text to be displayed as 11px tahoma.

This is what i am using:
PHP Code:
 BODY {    
    margin:0px;
    padding:0px;
    font-family: tahoma, verdana, arial;
    font-size: 11px;
    
} 





Also, some text is in a <p> tag. How do i define that?

Many 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

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!