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).
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.
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
How do other designers normalize padding and margins across browsers. I have tried CSS Resets (currently using the YUI one), but I still run into a lot of inconsistencies.
It seems for some elements, with some browsers, setting a padding or margin to 0px will trigger the browser to use a default padding and margin determined by that browser. Is there a way to hard reset the padding or margin across all browser so there is a consistent look?
Update
It seems from additional research and the feedback here, it's near impossible to get websites to look the same across different browsers to the letter. I think I'll stick with using a CSS Reset and just try to plan out my sites better.
I'm not sure how to overcome the default browser mechanisms that override style settings and it would probably be too much effort to do so.
This is usually solved with a CSS reset but not all of them are complete. On some browsers, the overall body has to have its border set to 0 (i.e. Opera and sometimes IE) to be truly the same. Try the following:
body,html{margin:0;border:0;padding:0;}
Since you don't say which element or give a link I can't really go too far into this. Which elements are you having trouble with?
Its not worth the extra CSS interactions and extra code to add a complete set of "normalizing" padding or margin elements.
Its best to style for what you need by explicitly stating the padding and margin for the elements you are using on your pages.
Paddings are usually 0 everywhere. It are the margins which are the most disbalanced among browsers. Just define your own margins on HTML block elements. A CSS reset is like a sledgehammer. You'd need to redefine more than only margins. But it may be helpful for beginners since they often can't at first glance distinguish between default inline and block elements in HTML. A CSS reset would force them to redefine the one and other "the right way".
Related questions:
Are margin and padding the most disbalanced among browsers?
That said, if you keep seeing inconsistencies among browsers, then it may happen that you're using a doctype which forces the browser into quirksmode. In MSIE the box model bug would then come alive. You'd like to use a strict doctype: <!DOCTYPE html>.
See also:
Activating browser modes with doctype
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?