|
CSS - Quick Question - Font Sizes In Ie And Firefox Look Different?
Hi,
If you set a font-size: 7pt and font-family:Verdana in your stylesheet, does the text in your webpage look slightly bigger in Firefox than in IE 6? I'm using Windows by the way ... this is just a general question as some of my menu links are lined up well on IE (which displays text a bit smaller) but overlapping to multiple lines on Firefox (because the text size is slightly bigger) Many thanks! Similar TutorialsI'm trying to write a website at the moment and I want to use <h1>/<h2> etc for the headings. Problem is though, the heading is going in to a blue bar and the font needs to be the right size. And naturally, IE and FF display the font in different sizes How would I fix this problem so that the font renders the same size? Could I make a hacked CSS class that only IE can see that I can apply to the <h1> tag to change the font-size to make it the same size as FF displays it as? This is an old subject, and sore spot with everyone, I know. But I like to do a "check-up" from time to time, to see if there are better ways to do this .... When implementing a tight design, where I cannot afford much deviation in font size from the original design, I find the differences in browsers/versions/OS to be... well... rediculous. Some time ago I went about normalizing this by specifying font sizes in CSS with the em specification. i.e. font-family: serif; font-size: 0.6em; I then have a piece of javascript included in every page that detects the OS, OS version, browser and browser version.... and writes the CSS <LINK REL=stylesheet statement to use a particular CSS file. I started out with three CSS files: Mac, Windows MSIE7 and Windows MSIE6. Now, expecially with Vista, I'm up to 7 different CSS files in all. This controls fonts very well. And it's not really that much trouble, since you just create the first CSS as you design, then copy that to the other 6 files, and just make font size adjustments. HOWEVER - is this sane? Is there a better way? (keep in mind that our designs require tight control.) Any thoughts much appreciated. I heard people complaining about "accessibility", so i finally designed a site with relative font sizes. my default font sizes are 90% of whatever the browser default would be. to my horror, i see that indented lists that contain indented lists get progressively smaller.... can someone suggest how to prevent this while still letting allowing variable font sizes? many thanks. dan I was in a meeting today talking about relative font sizes and how they can be problematic, because nesting elements may increase or decrease their font size. A co-worker said that I could use !important in my CSS to override/ignore the font-sizes of any nested elements. He seems to be way off. The W3C says that !important is really just about user versus author stylesheets, and apparently declaring !important in an author stylesheet doesn't do anything. So first question -- am I right about !important? It's only about user and author stylesheets, yes? Second question -- When dealing with relative fonts and nested elements, you have to start writing pretty complex rules, right? Is there any easy way in CSS without writing multiple rules to say "regardless of what element I place you in, always be x% font size..."? Hi All I have been contacted by a visitor to one of my sites to let me know that the fonts on a menu are too large but only on Chrome and Safari. I'm struggling to figure out why the web-kit browsers are enlarging the fonts so much any help that I can get from you guys would be gratefully received. Font size is fine FF3.5 and IE8 Site is http://www.pwfs.co.uk and its the horizontal navigation menu that the issue occurs. Hoping someone can help John Good Day, Trying to setup the font sizes for my site. In higher resolutions, everything seems to look acceptable. When I view the page on a low resolution screen, everything seems ridiculously large. Is there anyway to set the styles up to relieve this problem? Best, Colin PHP Code: #searchBox { float:right; margin:0em; padding:0em; margin-right:0.2em; clear:right; background-image:url(/images/site/backgrounds/searchBox.jpg); /*border:black solid 1px;*/ } #searchBox input { margin:0em; padding:0em; background-color:#d2c5a2; } .submit { background-color:#6F5F42;; color:#483e2b; font-size:smaller; font-weight:bold; margin:0em; padding:0em; } and html PHP Code: <div id="searchBox"> <form action="search.php" method="post" style="margin:0em; padding:0em;"> <fieldset style="border:1px solid #a29383; margin:0em; padding:0.1em;"> <label>What are you shopping for?</label><input type="text" name="search" size="14"/> <input class="submit" type="submit" name="submit" value="Search" /> </fieldset> </form> </div> i dont know but for some reason in firefox the three elements of form (label, input & submit) are on the same line but in IE they are in two lines.. I have just tried width:55%; but the submit box goes outside the top box.. but in FF the searchbox goes haywire and take the whole box!! also is there anyway to make sure that the font sizes are same/similar in both IE and FF? http://www.zahra-zahra.com/fullpage.html EDIT: to say i have tweaked it and firefox problem is solved but IE still puts the form OUTSIDE The box.. Hi there, I have two font sizes: 22px and 12px. However, If I use the 2 sizes next to each other, the large pushes the smaller on down. I tried to use vertical-align: middle to center them vertically, but it didn't work. How can I center them vertically? Thanks! figured it out. don't know how to delete I'm making a blog layout for someone, but I'm having problems with compatibility. I have not put in all the blog code yet, so don't tell me about that. My problem is that my scrolling div elements do not scroll in firefox. They work fine in IE though. I've tried everything I can think of. Firefox only resizes the table to fit the text, but I want scrollbuttons and a 90% high by 90% wide table.I want it to be compatible with as many resolutions as possible, so I am not really interested in going down the route of absolute table sizes, and even that doesn't seem to work either. Any ideas? If you can tell me what to do, please e-mail me: My email address Actually, on second thoughts you can just reply to this post. The CSS I tried: Code: <html>
<head>
<title>JM Beta</title>
<style type="text/css">
body {
background-color: #000;
}
table.main {
background-color: #fff;
border-style: solid;
border-width: 2px;
border-color: #666;
height: 90%;
width: 90%;
padding: 0px;
}
h3 {
font-size: 10px;
font-family: arial;
font-color: #000;
}
td {
border-style: solid;
border-width: 2px;
border-color: #666;
background-color: #fff;
padding: 10px;
}
div.scroll {
width: 100%;
height: 100%;
background-color: #fff;
overflow: auto;
font-size: 10px;
font-family: arial;
text-align: justify;
}
div.norm {
width: 100%;
height: 100%;
background-color: #fff;
font-size: 10px;
font-family: arial;
text-align: justify;
}
</head>
</html>
Hey guys. I am increasing the size of my radio buttons using: input {width: 20px; height: 20px;} However. The radio buttons show much smaller in IE than firefox. Anyone have any clues how I can make the buttons semi-equal in size between browsers? Thanks. -Andrew on my page http://tampabay-online.org/cetr/news/ the left side : Code: .content {
position:relative;
width:300px;
margin-left: 155px;
margin-top: 20px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:3;
}
and the two on the right are : Code: #right {
position:absolute;
width:200px;
top:20px;
left:500px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:1;
}
#sidebar {
position:absolute;
width:200px;
top:400px;
left:500px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:1;
}
If someone has a their font bigger on the artists section then the div will grow and go under the sidebar div. Any way to make these relative or fix that problem? Thanks! Can either someone direct me to a webpage or help me out in figuring out what to do when one css style interferes with another? I have a couple different style sheets and when I load them together in one page one style is taking over another one. Thanks. i have a pre maid script that i want to modify.it is all css and im not to good at it yet. there is a menu box.very plain.i want to make an image to replace that plain css. i have this Code: #menu table { font-family:Verdana,Tahoma,Arial; font-size:8pt; font-weight: bold; color:#FFFFFF; background-color:#003399; }
how could i link it to an image instead? Hi, Im not sure what the difference between an ID and a class. I was reading an article and It seems that a ID and a class would do the same thing. Thanks to who can clear this up. Hi all. I've used tables to layout websites for a long time, and I've finally decided to start using CSS like everyone else is doing. I'm having a hard time understanding why this is happening: Check out this site at: http://216.69.165.177/ Why is it that when I increase the padding in the left div, it causes the content in the right column to be placed beneath the content in the left div. Is that because adding padding adds length to a div? I've never seen this behavior before with tables. I'm a little confused by it. Thanks in advance, Gregg edited I had the wrong code I have the following html/css code. I was wondering if this is the only way to do a multi column layout where all the columns fit to the size of the largest one?? I am newer to css to be warned. Is there any other way besides layering to have perfectly even columns? 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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="" />
<title>Untitled 8</title>
<style type="text/css">
.clear {
line-height:0;
font-size:0;
clear:both;
}
#container {
background-color: white;
border: black solid;
}
#container3 {
float: left;
width: 100%;
background: green;
overflow: hidden;
position: relative;
}
#container3 #header {
width: 100%;
height: 50px;
margin: 5px;
padding-left: 5px;
padding-bottom:10px;
background-color: blue;
color: white;
font-size: 25px;
}
#container2 {
float: left;
width: 100%;
background:yellow;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#column1 {
float: left;
width:26%;
position: relative;
left:72%;
overflow:hidden;
}
#column2 {
float:left;
width:36%;
position:relative;
left: 76%;
overflow:hidden;
}
#column3 {
float:left;
width:26%;
position:relative;
left:80%;
overflow:hidden;
}
</style>
</head>
<body>
<div id="container3">
<div id="header">
Test Header
</div>
<div id="container2">
<div id="container1">
<div id="column1">
Test Column1
<br />
Test Column1
<br />
Test Column1
<br />
Test Column1
<br />
Test Column1
</div>
<div id="column2">
Test Column2
</div>
<div id="column3">
Test Column3
</div>
</div>
</div>
</div>
</body>
</html>
How come IE obeys fixed and em font sizes and firefox doesn't? I want all my site text to be scaleable apart from the navigation text which I gave a fixed size of 10px. In IE the scaling is observed and all fonts are em apart from the navigation. In firefox however it scales ALL fonts which is very annoying. Is this a known problem? i have a div which will contain a list of user inputted names. i want the div to simulate a select box, so i need the width of the div to match the contents: Code: <div id="dselect"> <div class="arrow" style="float: right"><img src="arrow.jpg"></div> <img src="icons/icon1.jpg" /> Label 1 </div> |
|||||||