CSS Safari link not aligned properly

My issue involves Safari. When viewed in other browsers, the input and link on the second row appear on the same line, but Safari displays them differently. Any thoughts on why this might be happening?

HTML

<div id="searchWrapper01">
<div id="regulationsSearch">
    <span class="item01">Search in:</span>
    <select class="item02">
        <option value="0">Title and text</option>
        <option value="1">Title only</option>
    </select>
    <input type="text" class="item03" /><a href="/#search" onclick="vent.trigger('loadData:searchRegulationsResults')" class="item04">Search</a>
</div>

Check out the code on jsfiddle.net

htmlcsssafari

Answer №1

It's common to see a 1px variation across browsers and versions due to the use of margins and floats. To address this issue, consider using display: inline-block.

Check out the DEMO on jsFiddle

#regulationsSearch .item03{
    display: inline-block;
    position:relative;
    width:181px;
    height:24px;
    border:solid 1px #333;
    padding:0 5px;
    margin:5px 5px 0 0;
    outline:none;
}
#regulationsSearch .item04{
    display: inline-block;
    position:relative;
    width:60px;
    height:26px;
    text-align:center;
    line-height:26px;
    background-color:#333;
    color:#fff;
    text-decoration:none;
    margin:5px 0 0 0;
    font-size:12px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

An error is thrown when using less.js

Every time I attempt to add less.js, I encounter an XmlHttpRequest Exception 101. Including the .less file is done using this method: <link rel="stylesheet/less" type="text/css" href="anything.less" /> This issue only arises when I upload the th ...

javascriptjquerycsslesstumblr

Display the menu and submenus by making a request with $.get()

My menu with submenu is generated in JSON format, but I am facing issues displaying it on an HTML page using the provided code. Can someone please assist me in identifying what mistakes I might be making? let HandleClass = function() { ...

javascriptjqueryhtmljsonajax

Transferring Data Between Tables in ASP.NET Core

I'm in the process of creating a new online store with ASP.NET Core. I have a requirement to transfer data from the Products table to the Items table upon clicking a button, so that the item information can be displayed on the shopping cart page. Any ...

htmlasp.net-core

Alter the page's color scheme completely

I am currently facing an issue with my button that creates a popup and darkens the background of my page. While this functionality works, it does not affect any bootstrap containers. I am using bootstrap 4 and react for this project. https://i.sstatic.net/ ...

cssreactjsbootstrap-4stylingreact-bootstrap

Attempting to style text during extraction from webpage source code

I'm facing some challenges with formatting the album title and artist name from a lyrics website while working on counting words in a song. An example of what's been troubling me is shown below: https://i.sstatic.net/oarOI.png The desired forma ...

pythonhtmlbeautifulsoup

Incorporating Dynamic Javascript: A Step-by-Step Guide

I came across a select object that looks like this: <select id="mySelect" onchange = "start()" > <option>Apple</option> <option>Pear</option> <option>Banana</option> <option>Orange</option> < ...

javascriptjqueryhtml

Is it possible to stop the manipulation of HTML and CSS elements on a webpage using tools similar to Firebug?

How can we prevent unauthorized editing of HTML and CSS content on a webpage using tools like Firebug? I have noticed that some users are altering values in hidden fields and manipulating content within div or span tags to their advantage. They seem to be ...

htmljavascriptphpcss

Display mobile app components directly inside HTML tags within a webview

Is it possible to integrate our native Android components within regular HTML content and display them on a webview? For instance, instead of a standard button in a basic HTML page, can we replace it with a Native Android Button? How would this be accomp ...

androidhtmlwebviewnative

Tips for including a line within a circular canvas

My progress bar crafted with css, javascript and html looks great (left image). However, I'm facing a challenge in adding white color dividers to enhance the appearance of the progress bar as shown in the image on the right. Despite my various attemp ...

javascripthtmlcsscanvas

extracting data from checkbox to use in an angular function upon being selected

Currently, I am creating a list of checkboxes with distinct string values: heading, paragraph, list, table, visualtitle. I believe the current approach using (change)="onChange('heading', $event.target.checked) may not be the best way to han ...

htmljquerycssangular

Is there a way to optimize downloading multiple identical images using html, css, jquery, etc.?

My chess board features 64 squares, each with a picture of a board piece on either a light or dark square. To ensure proper formatting, a Clear knight is placed on the board. The design utilizes a div element with a background image (representing light or ...

javascriptjqueryhtmlcssimage

The information provided in a PHP form is not saved in a MySQL database

I am trying to create a form using AngularJS to save person details in phpMyAdmin (mysql). However, when I submit the form, the details are not getting added to the database. Can someone please assist me in resolving this issue? Below is the HTML page cod ...

phphtmlmysqlangularjs

Unable to alter the background color of the text box

I am currently struggling with my code where I am trying to overlay a text box on an image. Even after setting the background color to white, it still shows up as transparent. I have successfully done this in the past, but for some reason, it is not work ...

htmlcssbackground-color

CSS: Adding decorative trailing dots below the header when positioned over a background

I am seeking assistance with achieving a specific effect in CSS, as shown in the attached screenshot. The trailing dots should cover the entire width of the element (100%) and be responsive. However, I encountered an issue when placing the header on a bac ...

htmlcsspseudo-class

How can I use jQuery to switch the positions of two <div> elements in HTML based on the selection of a dropdown value?

I need to switch the display positions of two <div> containers based on a dropdown value change. Can this be accomplished using jQuery? Here are the two div containers whose display positions need to be interchanged: <div id="first"><p> ...

javascriptjqueryhtml

Maintain the border styling of a radio button when it is in the selected state

Having an issue with the radio type options - when selected, a blue border appears but disappears if clicking elsewhere. Need the blue border effect to stay even when clicked outside, unless switching to the other option. Looking to align the price in th ...

htmlcss

Aligning social icons to the right within the navigation bar

As I construct my website, my vision includes a collapsible navigation bar in the top left corner and a social media bar in the top right corner. It is imperative to me that the social icons remain aligned with the navigation links at all times. To achiev ...

htmlcssbootstrap-4navbar

Tips for concealing the "maxlength" attribute in HTML

Here is the code snippet I currently use on a signup and login form to restrict users from entering more than a specified number of characters: $( "#limit1" ).attr('maxlength','11').on('input', function() { if ($(this).val(). ...

javascriptjqueryhtmlformsinput

Exploring ways to access iPhone contacts using HTML5 and JavaScript

How can contacts be fetched on an iPhone with user permission using HTML5 and JavaScript? I understand that an app can access that data, but can a browser do the same? ...

javascriptiphonehtml

Activate vertical scrolling in JavaScript when an image is clicked

I currently have a collection of button images with different hover effects specified like this: <img src="home.PNG" onmouseover="this.src='homemo.PNG'" onmouseout="this.src='home.PNG'" /> My goal is to make them scroll down to ...

javascriptjqueryhtmlcss