I have a webpage where Firefox 2 displays the font certain, really specific elements, larger than than what I specified in the CSS.
When I look at the affected element (mostly td elements as far as I can tell) with Firebug, I see that the font-size is inherited from the body (11px, so its not a relative size). No styles overwrite this font-size, anywhere. When I toggle the Show computed style option, the font-size is displayed as 16px, Firefox's default.
It seems that the td does not inherit the font-size properly. Obviously, I could specify a more specific CSS selector targeting the td (which in fact works) but I can't find any documented behavior of Firefox not inheriting the font-size properly. It only happens in just a few tables, but completely unrelated to each other.
Does anyone know if I am overlooking something or is this a rendering issue in Firefox? Internet Explorer (I know, not the best reference for standards compliance) does not scale the font sizes up in tables.
This is a reasonably well known annoyance: TABLEs and TDs will inherit all font styles except font-size, at least in XHTML. To "fix" this, set the font size also for the TABLE or TD element.
So to clarify, this is not Firefox-specific. Did you test in other browsers?
Related
Imagine CSS like:
.x {
background: blue none;
border-radius: 6px;
}
and HTML like:
<div>Words and <span class="x">decorated</span> words</div>
The height of the span reading 'decorated' is going to vary wildly between different browsers, and between different OSes running otherwise the same browser.
Is there any way to make it be the same height?
(I don’t want to move to inline-block or sacrifice the text using exactly the same baseline.)
My experience with avoiding of different height is setting exact line-height and font-size
Sounds like there is something else causing your problem. I just tried a basic html5 document with the snippits from your question and compared the alignment on Windows with Chrome, Safari, FF & IE. They all rendered exactly the same except for IE9 which had a 1px gap above the span only.
Granted Mac renders fonts differently from Windows, and I didn't test on linux or mac, but 9px!!!??? Here are some things I'd investigate:
First, try a basic test file if you are working in a larger project, this will limit your variables.
Second, try setting explicit fonts and ensuring they exist on all of your test machines - perhaps linux is falling back to a different font.
Third, make sure you are not zoomed in or using a custom font size browser setting on any of the browsers (I ran into this one a while back where somehow my IE was set to 105% zoom.)
Finally, if all of that fails, you might want to try using a web font (#font-face) and see if that renders more strictly.
Edit:
In lieu of the new information in your comment, another strategy would be to use JavaScript to inspect the rendered heights of some off-screen elements and then programmatically adjust styles accordingly. You'll probably get a huge FOUC, but you can use a whiteout div to minimize the shift.
I have uploaded an example page
https://bobdn.com/Temp.aspx.
This page has just a single jquery UI button.
Why does this look little large in firefox.
Padding and font-size both look large.
It looks fine in chrome.
How can I make it equal size (padding, font etc) for both browser.??
My guess it that it's inconsistent rendering of the <input> element. I can verify that the rendering is inconsistent between each browser, with a 2px height difference.
If you can use a <button> element instead, you may find that it renders more consistently from browser to browser, although you will most likely have to adjust padding yourself.
That done, you need to try setting any of the relevant styles explicitly, rather than relying on defaults.
This includes: line-height, padding, font-size, border-width, and perhaps more.
Every browser has it's own defaults.
If you want consistency, you must provide css that replaces the default values.
I fixed this problem by setting the defaults explicitly.
Ex. I created a input.navigation_button CSS class with padding:2px (Chrome had zero padding on my buttons).
Some text on a page I'm modifying is displaying with a computed size of 16px, which I understand is the default font size for most browsers. Firebug in FF 10 shows several font sizes which would apply to that element, but all are overridden (selector and value displayed with strikethrough).
Why would this happen? I assume any styles applied via scripting would appear in an element.style selector.
I believe having a table element inside a p element is invalid HTML (you can check that by running through a validator).
I suspect this is the problem, and then the browsers are not letting the table inherit the font properties (due to the invalid structure) and thus are defaulting to the browser settings.
I think if you get rid of the p as a wrapper and make your css include:
#cajanoticias table {font-size: 10px}
you will solve your problem.
My problem consist of displaying components in forms. First I m working on a JSF and facelet application. In one of my pages I put a inputText with a fixed width but when I execute the project in Chrome and IE navigators I have a different display mostly in component width.
This is the part of code: <h:inputText style=" width : 600px;" value="#{MyBean.Name}" />
component width in chrome :602px
component width in IE : 604px
Can anyOne help me.
Achraf,
Often this problem has to do with padding or lack thereof. IE handles padding relative to width differently than most of the other browsers. One adds the padding to the width, while some others track padding and width separately. This inconsistency among browsers is so prevalent that I commonly start my CSS with body * {padding:0;} and override in specific styles as needed.
Additionally, the less style you specify, the more control the browser (or User Agent) has over the style of rules that are not specified. This means that these browsers with the inconsistent widths are probably adding padding to the <input> as they deem necessary. Try adding padding:0 to your style attribute for your <input>. This will force the issue and may require a little tweaking but should ultimately solve your problem.
Hope this helps,
FuzzicalLogic
When printing the page below in Safari/Chrome, the content (everything on the page, basically) is squished into the left side of the page, at about 60% of the page's width.
However, in FireFox and IE 7, the printed page shows the content as the full width (and looks quite nice, imo). I resized all the layout elements to 100% width (using !important to make sure they're applying), and Safari/Chrome still won't print out the full width.
Here's the page I'm referencing:
http://archstl.org/commoffice/press-release/2010/local-catholic-principal-honored-fi
And here's an image of the difference between Webkit (first) vs. Gecko (second):
(source: skitch.com)
(source: skitch.com)
sorry not really an answer but a comment(i can't comment yet) but, have you tried printing the sheet already? if not, just try it.
Also, I checked your print.css and although I'm not too sure, maybe you can check your font-sizes. Try using pixels first instead of em. Since em is relative to your base font size, it may vary in browsers. You can rectify this by adding a fixed font size in your body style like so:
body { font-size: 13px; }
then continue using em for the others.
I've decided to give up on trying to improve the print stylesheets anymore, and instead just accept the odd spacing issues in different browsers.
I would recommend, to anyone else trying to style your pages for print, to consider using #screen instead of #all for your main site stylesheets, though—this makes styling things for print easier on some more complex layouts.
Anyways, we should just move into the 21st century and forget about printing ;-)