|
CSS - Odd Textarea Font Size Problem In Firefox
Having a strange problem with textarea font sizes in Firefox (1.06)
See here - http://www.4L.ie/contact.php Text entered in the text fields is appearing correctly, but when entering text into the "Your Query" textarea, the font-size is noticeably smaller and less legible. It appears fine in IE6. My CSS relating to fonts is as follows: Code:
body {
font: 76% verdana, arial, helvetica, sans-serif;
}
input, select, textarea {
font-size: 1em;
}
If I use pixels (ie font-size: 12px) there is no problem. Ems and % seems to mess things up. Anybody able to shed some light on this? A possible bug in Firefox 1.06? Thanks in advance. Similar TutorialsHello all! I'm having an odd problem. I have a select box and a textarea right next to each other that need to be the exact same dimensions. I figure, easy, just set the height and width via CSS properties, but that doesn't seem to be accurate at all - in either browser. I got out a neat program called pixel ruler to see exactly how many pixels each is displayed with. This is what happens: ie - Not counting borders, the textarea is the exact width and height. The select box is correct width (not counting the border. If you include the 1px standard blue border on any of these, they are 2px too wide or tall). However, the height of the select box(very annoying) seems to be somewhat ignored in that ie forces the select box to end at the end of a row, so giving it a height will just approximate a row number. It would be nice if I could fix this. Any thoughts on that? firefox- Not including the border, the select box is 2px too few in both the width and height. If you include the border it is exact. (which means that ie and ff are going to be hard to match.) But here is the REAL puzzler and the biggest reason for the post. Firefox seems to get the textarea size completely wrong. Not including the border, it is 2px too wide and tall! If you include the border, it is then 4px too wide and tall. I have no padding or margins on these by the way, so that can't be the answer. Any thought as to why firefox is putting extra width and height on textareas? Or any suggestions on making a textarea and select the same size in both ff and ie? Thanks! Ok so this is probably really basic but I'm tearing my hair out. the page is http://fireshui.com/about.php the css is http://fireshui.com/global/styles2.css I used to use the bigtitle class for headers (you can see an example of this at http://fireshui.com/mtglinks.php). One day I looked in IE and it wasn't showing up right. So I decided to change it to the proper way of using h1, h2, etc. In Firefox, the size for h1 is right - it's 110% of the normal text. In IE, it's really huge, which I don't want. On a side note, if you checked out http://fireshui.com/mtglinks.php, why exactly is the bigtitle class not working? I used to use fixed sizes before I found out they were bad, the old css is at http://fireshui.com/global/styles.css, and that doesn't work either. This is all hugely confusing. Thanks for any help you can offer!! :-) 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 Hi, This is only happens in IE, in firefox (the only 2 browsers I tested) works fine. http://nazgulled.no.sapo.pt/test.html There's only one image inside the <div> tag, and I have set that div tag style to have a 10px height. But that doesn't work on IE... it's like there were some spaces wich because of the font-size it makes the height be more than 10px.... I wanted to fix that but how can I do it? One solution is to make the div tag like this: Code: <div id="test"><img src="spect.gif" width="300" height="10" /></div> instead of this: Code: <div id="test"> <img src="spect.gif" width="300" height="10" /> </div> But I don't want to fix it that way... Any help would be hot, thanks. I have the following CSS styles: Code:
#content p { font-size: 24px; }
.smalltext p { font-size: 12px; }
Then, I create a #content div in my HTML with three paragraphs in it. I want the middle paragraph to have the .smalltext class, like this: http://www.toprival.com/temp/css_question.gif With the CSS the way I have it, the font size (12px) of the .smalltext paragraph is ignored. But if I change the CSS so both selectors are IDs, or so both are classes (and update the HTML accordintly), it works. Why is that? Hi 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 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/ 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 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? hello is it possible to use css or some other artifice to make textarea/input elements adjust their row/col/size when the user increases/decreases the font size? i'm mostly talking about IE, because netscape/etc. seem to work it out just fine... setting a relative font-size for textarea/input elements on the stylesheet doesn't seem to do the trick. as usual, i tried looking around for info on this but found none, i'm beginning to think it just can't be done. any help would be really appreciated 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 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 What is the best way to make compatble text size between browser? I have a div with a width of 300px, I pasted some text in it, it appears identical with firefox, chrome and safari (the letters are the exact same place), but when it comes to IE 8 (probably 6/7 too), the text is not displayed at the same place. 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? |
|||||||