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
Related
Excuse me if it is a dumb question, but the fact is that I do not have any idea about it.
I was searching to find some way to position an img element in HTML pages that noticed this sentence from w3schools.com (It is speaking of setting width in an img element):
In HTML 4.01, the width could be defined in pixels or in % of the containing element. In HTML5, the value must be in pixels.
It says that the width attribute must be set in pixels not in percent. But solving my problem was far more easier when using percentage. I used the percent and checked the result in the latest versions of FireFox, Chrome, and IE. All were OK.
Now, my question is that what are bad consequences of using percent (despite HTML5 directives) while it actually works fine? What should we care about and what we shouldn't?
Thank you very much for reading and clarifying the situation.
The main reason for giving image dimensions in HTML, rather than in CSS, is so that the user agent (the browser) can leave an appropriate amount of space in the page for the image while the browser is waiting for it to load. If the image size is left unset, the browser will have to rerender the page once the image has downloaded--and do the same again for each subsequent image on the page.
The WHATWG HTML5 docs state the following in the section on presentational markup:
For those reasons, presentational markup has been removed from HTML in this version. This change should not come as a surprise; HTML4 deprecated presentational markup many years ago and provided a mode (HTML4 Transitional) to help authors move away from presentational markup; later, XHTML 1.1 went further and obsoleted those features altogether.
I would assume that since percentage values are relative to the element in which an image is contained, they are considered to be presentational, whereas pixel dimensions are absolute and will not vary across platforms, user agents, or view ports.
As with many HTML properties and attributes, you can use invalid, obsolete, or non-recommended syntax and browsers will still render your page. This is partially because they are usually backward-compatible--i.e. they can render HTML docs written in previous versions of the markup language, when the syntax was valid.
Should you use invalid syntax? Well, you can do, but there are downsides to it: unpredictable browser rendering of invalid elements, poor browser performance, cross-browser compatibility issues, potential security concerns, and more. There is also the knowledge that there are HTML pedants out there who are looking at your syntax like it's something the dog threw up. Ultimately, if you can do something the right way--specifying your percentage widths in your css, not in your html--I don't see any point in doing something wrong just because the browsers that you tried it out on will still render the page.
As noted in my comment, image width and height can be specified in CSS using various different units--pixels, ems, rems, percent, centimetres, inches, etc -- see css measurement units # w3.org.
Hi what I found is your assumption is correct but to make it clear try this yourself. Based on the W3 validator
If you pass this code:
<img src="http://placehold.it/350x150" alt=" " width="100%" height="100%">
you get an error
Bad value 100% for attribute width on element img: Expected a digit but saw % instead.
But if you get this
<img src="http://placehold.it/350x150" alt=" " width="350" height="150">
All is fine, then the specification is that you can't define percentages in the tag itself but you can do that with css.
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).
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
This div will have a computed height of 104.5px (in most recent Chrome, FF, and IE)
<div><img src="" height="100px" /></div>
This div will have a computed height of 100px
<div style="overflow:auto;"><img src="" height="100px" style="float:left;" /></div>
I used FireBug to look at the DIVs and IMGs, and both IMGs have 0 for margin, padding, and border, yet the computed height somehow is 4.5px bigger in the first instance.
Why is this? It impacts me when I try to layout a page with a consistent vertical grid. Ideally, I'd like to not have to float the imgs.
I tried to look here ==> http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.7.2 and I even tried vspace=0, but that didn't change anything.
Thanks for your help!
clients include their own stylesheets that should be overidden before you try to do any pixel-perfect layouts or cross-browser debugging. Even if you remove all your stylesheets there are still styles on the page.
Try it again with a css reset at the top of your stylesheet. Also, make sure that you're declaring a valid doctype. Use a strict doctype and make sure your code validates if that still doesn't help.
I usually use the meyer web reset with a few minor modifications that suit my workflow.
If other people are seeing 100px then it's likely a client side problem, so hopefully this troubleshoots it for you.
I use Yahoo! CSS Reset to get my browsers all starting from scratch, usually helps.
Look out for a line-height definition at a high level when applied to a div that only contains an image. (for example html {line-height:1.5em;})
You probably still want this line height setting in general for resetting text throughout the site, but try applying line-height:0 just to the div with nothing but an img inside it.
http://jsfiddle.net/kq3Yy/
Setting <div style="display:inline" /> should fix your problem.
There must be more going on here than what you show. How are you measuring these half pixels? What tool are you using? I can see line-height coming into play but you don't show that in your sample.
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?