|
CSS - Force Opera To Use Font Size Less Than 10px Or 1em
I have set font size to 8px, and IE, FF, Safari and Chrome all respect this and size the font to the value in question, but Opera refuses to comply.
When I tested it, I've found out it wont show fonts that are smaller than 10px or 1em. Is there a way to force Opera to display fonts less than 10px or 1em? Similar TutorialsHi guys, I'm working on a layout for a client, and I've run into a problem I've never seen before. My code is fully valid CSS (except for the *html IE fixes) and fully valid transitional XHTML, and it works fine in FF, IE and even Safari - but as soon as I load it up in Opera, it breaks completely. The font size is absolutely HUGE for some reason (like 400% of normal!), and it is completely breaking my layout. I have no idea why this would be happening, and it's immensely annoying. I'm setting all of the font sizes throughout the page in ems, and at the start of the css I declare the following: Code: html, body {
height: 100%;
margin: 0px;
padding: 0px;
text-align: center;
font: 62.5% Tahoma, Verdana, Arial, Sans-Serif; /* Resets 1em to 10px */
background-color: #000000;
}
Now this should be fine, and indeed it works in every other browser.. but Opera is wigging the hell out, and I don't know what's wrong. Has anybody ever experienced anything like this? If so, please let me know! I'm hesitant to post the full code because it's covered by a hefty NDA, but I can strip out confidential bits if needed. Thanks everyone! Hi 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 How could I Force a parent div to vertically expand to size of its child div? Thanks in advance, Richard Carson I used to be better at this, but never used to care how things looked in other browsers. Now I'm so confused about what I'm doing wrong that I've second-guessing every action I take, and can't make sense of something... I've got a very simple header-content-footer (footer is essentially header tacked onto bottom) that works more or less how I'd like, but when viewing in Opera 9.5 the Georgia font I'm asking looks utterly crap. Please have a look at Firefox 3 or IE 6+ for how I want it to look. It's essentially the standard <h1> font setting for most Wordpress templates. What am I doing wrong??? site -- littlebee.gq.nu Thank you sincerely for your help. I'm regressing to extreme beginner here -- can't seem to get it to work even when creating a document focusing only on the body and text attributes... Hello, I have a code below which works fine in IE and Firefox. However in Opera the 4 boxes are displayed in a 2x2 form insetad of 4x1. Any idea? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#container {
margin: auto;
padding:0px;
width: 980px;
border: 1px solid #000000;
}
#center {
margin: 0px;
padding: 0px;
clear:both;
}
#left_panel {
width: 240px;
float:left;
border:1px solid #ff0000;
}
#main_panel {
padding: 0px;
margin: 0px;
margin-left:295px;
width:660px;
border:0px solid #ff0000;
}
#main_panel #main_panel_header {
padding-top: 5px;
border:1px solid #ff0000;
overflow:hidden;
}
#main_panel_header .photo_box {
float:left;
background-color:#000000;
}
#main_panel_header .photo_box img {
background-color: #000000;
height: 115px;
width: 140px;
border:2px solid #000;
border-bottom:0px;
margin:0px;
}
#main_panel_header .photo_box a{
color: #ffffff;
text-decoration:none;
font-size:10px;
font-weight:bold;
display:block;
text-align:right;
text-transform: uppercase;
width:140px;
float:left;
padding:2px;
margin:0px;
background-color:#000000;
}
</style>
</head>
<body>
<div id="container">
<div id="center">
<div id="left_panel">
Menu1<br/>Menu1<br/>
</div>
<div id="main_panel">
<div id="main_panel_header">
<div class="photo_box">
<img src="style/tmp/pic.jpg" />
<a href="#">Link</a>
</div>
<div class="photo_box">
<img src="style/tmp/pic.jpg" />
<a href="#">Link</a>
</div>
<div class="photo_box">
<img src="style/tmp/pic.jpg" />
<a href="#">Link</a>
</div>
<div class="photo_box">
<img src="style/tmp/pic.jpg" />
<a href="#">Link</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
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... 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? 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 <!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?? 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? Hi I'm using a css file for the layout of my website. But I'd like to define the default font size but I can't! I mean the size of the font that's under no special style. I think it's something like: Code: .body
{ font-size: 10px; }
Or similar (instead of 10px, small)... anybody knows exactly hoy can I do it? 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 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 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 know this topic has been discussed a number of times in the past and I have read some of them. Kravittz I do appreciate all your knowledge in this area as you have answered a lot of my questions already. But I do have a few problems yet. I am switching now to set the font size in body as Code: body {
font-family:Verdana, Tahoma, Arial;
font-size: 85%;
color: #000000;
background-color: #FFFFFF;
}
(actually not sure if I like Verdana or the good ol' Arial first. that is a different question) Anyway, I set the font to 85% for body. then for <p> Code: p {
font-size: .8em;
}
That seems to look fine. but first question is for links <a>. I have some links that are just be themselves or sometimes in a <div> tag. Those ones are very large. So I set the size like this. Code: a:link {
text-decoration: underline;
color: #000000;
font-size: .8em;
}
that works fine but them for the few links that are inside of a <p> tag it seems to adjust the size twice, once for <p> tag and then again for <a> tag. Thus making it twice as small as I really want. How do I fix that? Do I need to make a whole bunch of psuedo classes for all those instances? Seems like there should be an easier way. Any suggestions? Thanks! I have set up a test for several basic CSS-layouts, like 3-column layout, frame-like layout/behaviour etc. and I noticed some strange behaviour in IE. Here is a number of layouts that I have created: http://www.duwgati.nl/csstest In layout samples 1 - 4 the fonts show up smaller than in the samples 5 -7, even though the font-size declaration is identical in all 7 samples. This only happens in IE, in Mozilla/Firefox, the fontsizes are correct in all 7 samples. Anybody got a clue why this is happening? 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? |
|||||||