Member Avatar for techie929

Hi,

I have written a small piece of code to display a text box and submit button next to it.

The submit button is displayed properly in all browsers except in safari the position of the search box is shifted to left. Is there any way I can fix it?

Thanks.

  • 3 Contributors
  • 2 Replies
  • 110 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by Luckychap

Dani AI

Generated

A few focused notes based on the replies from , and plus practical fixes to try.

Avoid browser-sniffing and tables. 's idea of checking navigator.appVersion will work but is fragile and hard to maintain; 's table layout will "fix" alignment but harms semantics and accessibility. A small CSS reset plus consistent layout rules will fix cross‑browser differences (including Safari) in a robust way.

Try one of these minimal CSS approaches (pick the one that fits your markup):

/* modern, simple */
.search-row {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* safe fallback */
.search-row input,
.search-row button {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  padding: .35em .6em;
  line-height: normal;
  box-sizing: border-box;
  -webkit-appearance: none; /* neutralize Safari defaults if needed */
}

Troubleshooting checklist

  • Confirm a standards doctype is present.
  • Inspect the input and its parent in Safari Web Inspector: check computed margin, padding, line-height, transform/translate, and float/position.
  • If using input[type="search"], Safari applies a WebKit search-field appearance that alters padding; removing it (and restyling borders) may be necessary.
  • Consider adding a small reset like normalize.css to remove UA differences before your layout rules.

References: MDN notes on the box model and appearance behavior are useful starting points: box-sizing (MDN) and appearance (MDN). Use these checks before resorting to browser detection.

Recommended Answers

All 2 Replies

Member Avatar for Amr87

This can be solved by javascript as follow:

first you need to set a style specific for safari , just ignore the rest of browsers (as long as your code looks pretty in them) and design only for safari
then you need to include a bit of javascript code that will check for the browser used by the client and set a specific style for it

below is the script you will used

<script type="text/javascript">
var e = navigator.appVersion;
if (e.indexOf('AppleWebKit') > -1){
// Execute Specific Style for Safari Here
}

</script>

let me know if you need further assistance

Edited by Amr87 because: n/a
Member Avatar for Luckychap

use <table> to position input and button

<table>
   <tr>
       <td style="text-align: left;"><input type='text'></input></tb>
       <td style="text-align: right;"><input type='submit'></input></tb>
   </tr>
</table>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.