Margin problem (opera and safari)

HTML & CSS
1

When i open my page, problem arises with the margin of the page.
There is, unfortunately, a right margin in the page, this problem walks off as i hover over the search box. It only arises in Opera(OperaNext16) and Safari(5.1.7). In other browsers(FF, IE8, Chrome), it works fine.

Is there a problem with the browser(like, non-supporting versions) or am i missing something with my css ?

Any suggestions are welcome.

Regards.

2

It’s most likely that you are missing something in your CSS. :slight_smile: Are you able to post a link?

3

This is the link:
http://jsfiddle.net/isdixit/jW6W8/

4

It seems Safari5.1.7 has problems with the type=“search” in the input element.
If you omit that, everything is alright. As far as I can see, it has no negative influence for other browsers.

Notes:

  • The strange extra margin-right in Safari (above the 100% width!) and the horizontal scrollbar are disappeared in the meantime.
  • The size=“…” in the html is not needed (is given by the css *).
  • The align=“right” attribute for the #searchBox is deprecated since 1999 and is obsolete nowadays in html5. :wink: - Replaced by css.
  • The rgba() notation for colors is not supported by lte IE8; while the opacity was 1, it can be replaced by the hex color number (otherwise it can be added as fall back).
  • I can’t test OperaNext16.

*) And if size=“…” is used in the html, it must be without the px-unit.

5

Hi,

The link to the fiddle is missing but I assume Francky’s example above is much the same so these comments refer to that :slight_smile:

The input type=search adds icons and other things to the input so it looks like it needs a minimum width or the content spills out and you get a horizontal scrollbar. You would be better off setting a width of 40px rather than padding 40px and then apply the padding and larger width on hover.


#search {
	width:40px;
}

#search:hover {
	width: 150px;
	padding: 0px 0px 0px 40px;
}

That allows you still to use the input type=search but you should note that some browsers will automatically add a search icon to that input (and other icons for closing) so you may end up with two search icons in some browsers. You may be better off for the time being sticking to a normal input as Francky suggests until all browsers are applying the same rules to that search input.

6
Off Topic:

From an accessibility point of view, an alternative to type=“search” would be role=“search”. Not that it’s relevant to the question, but you can still get some extra semantics without getting tangled up with the new input type.