Closed Bug 990650 Opened 8 years ago Closed 7 years ago

Mac Dev Center search box span.right renders with a gap

Categories

(Web Compatibility :: Desktop, defect)

x86
macOS
defect
Not set
normal

Tracking

(Not tracked)

RESOLVED WORKSFORME

People

(Reporter: rillian, Unassigned)

References

()

Details

Attachments

(1 file)

Attached image Rendering in FF28
In Firefox (and Chrome) the search box in the upper right of Apple's Mac Dev Center page doesn't render correctly. In Firefox there is a gap between then end of the text input box and the closing round graphic.

In Chrome the closing graphic doesn't render at all.
The markup + CSS is something like this:

<div style="width: 200px; position: relative">
  <span style="float: left; display: block; position: absolute; width:20px; height: 19px; left: 0; top: 0; background: url('https://devimages.apple.com.edgekey.net/assets/elements/prettysearch/searchfield_leftcap.png') no-repeat"></span>
  <input type="text" style="width: 136px; margin-left: 20px">
  <span style="float: right; display: block; position: absolute; width:10px; height: 19px; right: 0; top: 0; background: url('https://devimages.apple.com.edgekey.net/assets/elements/prettysearch/searchfield_rightcap.png') no-repeat"></span>
</div>

As you can tell, 20px + 10px + 136px is not 200px, so there is a gap.  With that markup, I see the gap in Safari too.

But the site sends different markup to Safari.  In safar, the markup is more like this:

  <input type="search">

without all the goop.
Assignee: nobody → english-us
Component: Layout → English US
Product: Core → Tech Evangelism
Version: 29 Branch → Trunk
Site bug then. Thanks for investigating!
Moving to the desktop component.
Assignee: english-us → nobody
Component: English US → Desktop
Blocks: 114156
Not the case anymore.
Status: NEW → RESOLVED
Closed: 7 years ago
Resolution: --- → WORKSFORME
yay!
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.