Browser Conflict on Input Fields!

Forum Moderators: not2easy

Message Too Old, No Replies

Browser Conflict on Input Fields!

EfeBuyuran

10:19 pm on Sep 14, 2011 (gmt 0)

Hello guys,

What I'm writing today is a problem that has been haunting me for years. I stylize input fields on CSS, give them paddings to place them in the middle of the box but EACH browser shows them different.

I took screenshots to accurately pin-point the problem.

Google Chrome: [imageshack.us...]
Firefox: [imageshack.us...]
IE: [imageshack.us...]

Here's the code:

.div43 input[type="text"] {

width: 180px;
height: 18px;
padding: 0;
margin: 4px 0px 0px 8px;
outline: none;
color: #333;
font-family: Tahoma, Geneva, sans-serif;
font-size: 11px;
border: none;
background: none;

}

Also, I've already reset my CSS by [meyerweb.com...]

Thanks in advance!
I really need to fix this.

penders

7:40 am on Sep 15, 2011 (gmt 0)

Have you tried setting

line-height:18px

(the height of your container)? That should at least lessen the differences I would have thought?

EfeBuyuran

10:39 am on Sep 15, 2011 (gmt 0)

I have done that on entire body.

rocknbil

4:23 pm on Sep 15, 2011 (gmt 0)

Welcome aboard EfeBuyuran, first stop: does the page validate [validator.w3.org]?

EfeBuyuran

6:15 pm on Sep 15, 2011 (gmt 0)

No it probably doesn't. I never bother validating. It's just a waste of time.

alt131

7:36 am on Sep 16, 2011 (gmt 0)

Hi EfeBuyuran and welcome to WebmasterWorld :)

I expect one reason rocknbil suggested validating is that browser error handling varies - so that variable has to be removed when trying to solve cross-browser differences.

Unfortunately I cannot reproduce the issue on the provided code. Have you double-checked using developer tools that there is nothing else affecting the font-size?

EfeBuyuran

9:38 am on Sep 16, 2011 (gmt 0)

Hey alt131,

The problem is not the font-size, it's about the position (distance of pixels it has from the top or bottom). I can safely assume validation is not going to solve this because I remember it hasn't when I have been validating once upon a time.

Which tolls exactly are you refering to?

Thanks,
Efe

EfeBuyuran

9:53 am on Sep 16, 2011 (gmt 0)

Let me expand the code a little.

the HTML form of the page is this;

<div class="div43"><input type="text" value="Name..." /></div>

div43 has been placed as a container to the input field.
Here is the CSS;

.div43 {

width: 192px;
height: 26px;
margin-bottom: 20px;
background-image: url(img/input_field.png);
}

.div43 input[type="text"] {

width: 180px;
height: 18px;
padding: 0;
margin: 4px 0px 0px 8px;
color: #333;
font-family: Tahoma, Geneva, sans-serif;
font-size: 11px;
border: none;
background: none;
outline: none;
}

As you see, the appearance of input field is a background provided in div43 container. Margin values of Input field places it in the middle of the box where I want them to be.

It's supposed to be easy but still producing various results on different browsers. I'd like to fix that.

alt131

11:22 am on Sep 16, 2011 (gmt 0)

can safely assume validation is not going to solve this because I remember it hasn't when I have been validating once upon a time.

Validation may not solve the problem, but invalid code introduces variables that can make it impossible to identify and therefore resolve the actual issue.

The developer tools I meant were things like firebug for firefox, dragonfly for Opera, web developer tools for ie

Browsers have considerable discretion when drawing form controls as they are part of the user interface, however there are some components that can be controlled. I know you rejected the idea of setting line-height on the input as you already have it on <body>, but some browsers default to an !important line-height, which can only be over-ridden by explicitly setting the preferred !important line-height. You haven't specified which browser versions you are using, but doing so seemed to resolve the issue in ie8, ff4, winSafari5 and opera11.

rocknbil

4:20 pm on Sep 16, 2011 (gmt 0)

It's just a waste of time.

Interesting position, considering that 1) standards compliance mode is the first stop to cross browser compatibility without hacks and IE conditionals, and 2) by beginning with a validated output, you can spend a lot less time sorting out rendering issues. If your page doesn't validate, it will render in Quirks Mode, and you will **definitely** see cross browser differences. Without validation, you have a bunch of patches and fixes piled on top of other patches and fixes and it just makes your work more difficult.

EfeBuyuran

9:26 pm on Sep 17, 2011 (gmt 0)

Hey guys,

By erasing the margin values and using padding on container div seemed to reduce the inaccuracy. Chrome and Firefox is balanced now. IE still has 2px flaw but I've chosen to ignore that considering it shouldn't even be in use at the first place.

@rocknbil; While I appreciate you're taking your time to give me an explanation, I'm actually an uptight anti-validator and generally don't agree with you. I trust this link will express my feelings about validation:

[validator.w3.org...]

@alt131; I haven't rejected the idea of defining line-height on individual divs. I just didn't know it could make a difference. I always use my browsers in latest update. Thank your for attention on my problem.

lucy24

11:46 pm on Sep 17, 2011 (gmt 0)

I trust this link will express my feelings about validation:

Feeding your enemy's url into the validator so you can snicker about the number of errors is a time-honored form of innocent entertainment.

By obvious analogy, insurance is a waste of money. I hate to think how many thousands I've thrown down the tubes over the years, just to cover eventualities that didn't happen.

alt131

1:00 am on Sep 18, 2011 (gmt 0)

@alt131; I haven't rejected the idea of defining line-height on individual divs

Just to clarify, it's the input - and must be !important (which is usually something to avoid) to override any default stylesheet setting.

I think perhaps "agree to disagree" on validation - EfeBuyuran, from comments over the years I think many regulars here validate as part of their daily coding life. I imagine at least some do because they work to the standards set by the recommendations rather than other coders coding habits. It's personal choice and there are many viewpoints.

However, I'm sure you can recognise that professionals are justified in asking if code is valid as a first step to helping with cross-browser issues given invalid code introduces so many variables and makes issues more time-consuming to solve.

By erasing the margin values and using padding on container div seemed to reduce the inaccuracy.

And that has the sound of margin collpasing - which would exdplain why I couldn't reproduce the issue here, and makes it even more intersting. Is it possible to post some more html and css for the surrounding elements?

[Edit reason:] Grammar!

EfeBuyuran

12:13 pm on Sep 18, 2011 (gmt 0)

Feeding your enemy's url into the validator so you can snicker about the number of errors is a time-honored form of innocent entertainment.

By obvious analogy, insurance is a waste of money. I hate to think how many thousands I've thrown down the tubes over the years, just to cover eventualities that didn't happen.

@Lucy, if you think of it that way, you should definetly validate your pages. Happy coding for you!

@alt131

I agree with you but I'm not comfortable to be forced on that. People should respect my rights of unvalidation. Also, my real life name is Efe. You can just call me that.

So the function of !important is overriding default stylesheet settings then. Doesn't that apply automaticly when you define your own values? I've seen it in use before but never understood it. Isn't that the same function of reseting css (http://meyerweb.com/eric/tools/css/reset/?

Is this expansion enough?

<HTML>
<div class="div14">

<div class="div15">
<div class="div16"><input type="text" value="Name..." /></div>
<div class="div16"><input type="text" value="Email..." /></div>
<div class="div16"><input type="text" value="Website..." /></div>

</div>

<div class="div17"><textarea>Message...</textarea></div>

<div class="div18"><input type="submit" name="submit" id="submit" value="" />

</div>
</div>
</HTML>

- CSS

.div14
{ width: 566px; height: 300px; margin: 0 auto; }
.div15
{ width: 244px; height: 300px; float: left; }
.div16
{ width: 218px; height: 18px; padding: 8px 13px; margin-bottom: 20px; background-image: url(img/input_field2.png); }

.div16 input[type="text"]
{ width: 180px; height: 18px; padding: 0; margin: 0; outline: none; color: #fff; font-family: Tahoma, Geneva, sans-serif; font-size: 12px; border: none; background: none; }

.div16 input[type="text"]:focus
{ outline: none; }

.div17
{ width: 302px; height: 200px; float: right; }

.div17 textarea
{ width: 274px; height: 182px; padding: 9px 14px; margin: 0; outline: none; color: #FFF; font-family: Arial, Helvetica, sans-serif; font-size: 12px; border: none; background-image: url(img/textarea2.png); resize: none; line-height: 18px; overflow: auto; }

.div17 textarea:focus
{ outline: none; }

.div18
{ width: 302px; height: 30px; float: right; margin-top: 20px; text-align: right; }

.div18 input[type="submit"]
{ width: 100px; height: 26px; background-image: url(img/submit_button2.png); background-color: transparent; border: none; padding: 0; margin: 0; cursor: pointer; }

.div18 input[type="submit"]:hover
{ background-image: url(img/submit_button_hover2.png); }

EfeBuyuran

12:19 pm on Sep 18, 2011 (gmt 0)

This is how it looks on browser:

[imageshack.us...]

alt131

9:29 am on Sep 22, 2011 (gmt 0)

Hi Efe, thanks for posting the code - is that the code that is now working - or the earlier code that wasn't working as desired? The reason I ask is because I'd like to explore margin collapsing, and "working" code won't expose the issue.

So the function of !important is overriding default stylesheet settings then. Doesn't that apply automaticly when you define your own values?

Not quite - the cascade assigns a "weight" to rules, and !important gives a rule more "weight", so usually it will be applied unless your own rules ahve a greater weight or specificity.

I've seen it in use before but never understood it. Isn't that the same function of reseting css (http://meyerweb.com/eric/tools/css/reset/?

Again, not quite. A reset will only "reset" rules that have a lesser weight. Useful reading on this is the cascade (section 6.4) [w3.org]. A reset relies on having greater weight, usually because it is applied last. However, !important will mostly retain greater weight, so won't be over-ridden.

I think this is an interesting question (thanks), and for me the key to understanding is recognising they are different things: !important affects the weight of a rule, while the idea behind a reset is that it will over-ride earlier rules because of it's place in the cascade.

!important is very powerful, but be cautious if using it - it can be difficult to over-ride and the most common technique is to start using very specific selectors. But that creates very specific code, and that can create real maintenance issues.

EfeBuyuran

6:22 pm on Sep 22, 2011 (gmt 0)

Well, actually I don't understand what do you mean by "weight" but about the !important part, you're basicly saying the reset function simply overrides the previous rules while !important makes them unoverridible. Did I get that correct?

alt131

9:49 am on Sep 23, 2011 (gmt 0)

Hi Efe,

Well, actually I don't understand what do you mean by "weight

did you read the explanation at the link I posted above? That should explain it, but if not, another way of understanding is to think of real weights - it really is this simple :). Say you have 100 items. The first weighs 1kg, the second weighs 2kgs, and so on up to 100kg. Obviously the item that weighs 100kgs has a greater "weight" than the thing that only weighs 1kg. In css different types of style sheets, and different types of rules are given a "weight" - and the rule with the greatest (largest) "weight" is applied.

you're basicly saying the reset function simply overrides the previous rules while !important makes them unoverridible. Did I get that correct?

Usually yes - as explained in the recommendations I linked to, a rules "weight" will depend on the cascade, and also specificity. However, as a general guide, !important will usually have a greater "weight" - so as you say - will be "unoverridible".

EfeBuyuran

11:54 am on Sep 23, 2011 (gmt 0)

Hey alt,

I'm positively convinced now that I should read your link to get in-depth knowledge rather than asking superficial questions. Thank you for your time in assisting me! :)

Jon_King

2:22 pm on Sep 23, 2011 (gmt 0)

As mentioned before a developer tool like those in Chrome allow you to right click to inspect any element on the page. It will show you the exact css hierarchy of anything. You will really come to like an inspector tool, as when inspecting code that is like a spaghetti factory.

EfeBuyuran

4:22 pm on Sep 28, 2011 (gmt 0)

Thanks Jon