1

I have a control that I am trying to highlight when it is selected. I'm achieving this using padding on a div and some positioning so that it surrounds the control. The problem I'm encountering is that the padding on the highlighter div renders differently in chrome and in firefox. Everything I've read says that they render the same so this shouldn't be a problem.

Chrome:

Chrome:

Firefox:

Firefox

Here's a fiddle that has the problem on it: http://jsfiddle.net/5fuGB/1/

.control{
    position: absolute;
    width: 100px;
    height: 20px;
    top: 30px;
    left: 300px;
    z-index: 1;
}

.highlighter{
    background-color: orange;
    position: absolute;
    width: 100%;
    height:100%;
    left: -2px;
    top: -2px;
    padding-right: 8px;
    padding-bottom: 10px;
    z-index: -1;
}

input{
    width: 100%;
    height: 100%;
}

My Chrome Version: Version 31.0.1650.63 m on Windows 7

My Firefox Version: 25.0 on Windows 7

Thanks for any help you guys can offer.

mrK
  • 2,208
  • 4
  • 32
  • 46

4 Answers4

3

I believe the difference you are seeing is a difference which comes from the user agent stylesheet, browsers have their own default stylesheets which they use to render things like input elements. In your case it is probably a difference in the padding applied to the input element. You should specifically set eg: padding: 0px; or padding: 1px; on the input element, and then work out how to get it to look right for an input with the specified fixed padding. This will then override the styles set by the user agent style sheet.

Update

I moved to my Windows PC to have a go at fixing it. One way to fix this using one of the vendor specific prefixes from the answer linked in the comments is to add -moz-padding-end: 6px; to .highlighter to compensate for the differences in padding between browsers.

Here's a jsFiddle which fixes your issue, a footnote tho, I can already tell you that this probably won't fix it on Chrome for OSX, which was also rendering things the Firefox way.

Another way to fix this is by adding -moz-padding-start: 1px; -moz-padding-end: 1px; to input, but doing so somehow changes the bottom padding as well, which makes things look not as pretty in Firefox as with the other fix.

Mathijs Flietstra
  • 12,900
  • 3
  • 38
  • 67
  • OK, I gave that a try and it seems like it reversed the problem. Now, firefox has too much padding. Here's an updated link: http://jsfiddle.net/5fuGB/3/ – mrK Jan 08 '14 at 19:40
  • Yes, if you have a second, I will direct you to a previous answer on SO which might be of use to you, just finding it back again at the moment. – Mathijs Flietstra Jan 08 '14 at 19:42
  • Absolutely, always have a minute for the kind folks giving me a hand. – mrK Jan 08 '14 at 19:42
  • [Have a look here](http://stackoverflow.com/a/16532848/1846192), it was an issue experienced with `textareas` and Firefox padding behaving differently, I'm thinking it might apply to `input` elements as well. – Mathijs Flietstra Jan 08 '14 at 19:45
  • Thanks to help from this answer, and the realization that a border on the highlight div could be useful, I was able to come up with this solution: http://jsfiddle.net/5fuGB/6/ – mrK Jan 08 '14 at 21:23
1

I'd go about it differently. Instead of using an extra div, I'd recommend using a combination of border-color and box-shadow on the input's :focus state to achieve the effect you're going for.

Check out this modified fiddle: http://jsfiddle.net/5fuGB/2/

TheWiseAxe
  • 53
  • 1
  • 5
  • Because I'm using a number of different controls (including empty divs that represent something else) I'm not able to use the :focus attribute to add css to the controls. Additionally, the input boxes are on the page simply for display, but cannot be interacted with, so they will never actually obtain :focus – mrK Jan 08 '14 at 19:34
  • @mrK In your question you say it's 'selected' - what's that if the element doesn't have focus? – ChrisW Jan 08 '14 at 19:37
1

Just experienced the same issue with my code, and fixed it too. The trick is if you use display: inline-block then line-height makes sense. Try it when debugging your code.

Tien Do
  • 10,319
  • 6
  • 41
  • 42
0

You're doing a little more than what's necessary. To get a highlight around that input you can use :focus

So it would be something like this:

CSS

input {
    border: 1px solid white;
}

input:focus {
    border: 1px solid orange;
}

That will give the input a white "invisible" border so it doesn't move the input when you click into it. It will simply change the border color to orange to get that highlight effect you're looking for.

EDIT Just saw your comment. I dont have the rep to comment so I'll just add on to this.

If you aren't using the inputs as actual inputs, then I would just make them divs. Inputs render differently by default so that would mess with consistency across browsers.

I'd also recommend experimenting with those divs within one another and making the most outside div relative.

 Outside Div <------ position:relative;
 Middle Div <------- position: absolute;
 Inner div <-------- position: absolute;

Also, if you need a selected state but don't want or are hindered by inputs then I'd recommend jQuery for modifying the css based on user interaction.

Colton45
  • 280
  • 1
  • 3
  • 17