Member Avatar for f_atencia

I'm having an issue regarding how Safari displays my page. A snippet of the HTML includes:

<div class="MenuBar">
  <ul>...List of Menu Items</ul>
  <div class="QuickSearch"><input type="textbox" /><a>Go</a></div>
</div>

the CSS code:

* html DIV.MenuBar DIV.QuickSearch
{ margin-top:-0.3em;color:black;}

DIV.MenuBar 
{font-weight:bold; font-size:1.1em; font-family:verdana, Arial, sans-serif;background:#FFF url("../images/Gradient.jpg") repeat-x bottom left;border:1px solid black;display:block;}

Sorry about the formatting, I haven't got around to doing that yet. Well anyway, the code works fine in all browsers, except Safari. The textbox appears roughly halfway down the page, instead of inside the MenuBar div. I tried setting a height of 19px for MenuBar, but then that places the textbox out of position on Opera.

Any help would be greatly appreciated, as this has caused me problems for around a week.

Thanks in advanced.

  • 2 Contributors
  • 1 Reply
  • 114 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by elneco

Dani AI

Generated

Safari placing the search box partway out of the menu bar is almost always a layout/markup issue rather than a WebKit-only mystery. described the symptom and ’s simple test page shows the control behaving when the page is minimal — that strongly implies something in the original stylesheet or HTML is putting the search block out of flow (IE-only hacks, floated children that aren’t contained, invalid input markup, or missing DOCTYPE).

Common, effective fixes (do not rely on negative top margins or browser-specific hacks):

  • Remove IE-only selector hacks (for example the old * html trick) — WebKit ignores them.
  • Check markup validity: use a real doctype and valid attributes (for example type="text" for text inputs).
  • Contain floats (so the menu bar gets height) or use layout methods that vertically center controls.

Example approaches to try:

/* Clearfix: keeps parent containing floated children */
.MenuBar::after {
  content: "";
  display: table;
  clear: both;
}
/* Modern: align items without floats */
.MenuBar {
  display: flex;
  align-items: center;    /* vertical centering */
  justify-content: space-between;
}
/* Positioning: anchor search inside bar without forcing parent height */
.MenuBar { position: relative; }
.QuickSearch {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

Also set vertical-align: middle (or align-items: center with flexbox) on inline controls and use box-sizing: border-box if sizing with padding. For debugging, enable Safari’s Web Inspector, add temporary outlines/backgrounds to see element boxes, and inspect the computed box model to find which rule is shifting the element. For reference on clearfix, flexbox basics and valid input types see the CSS-Tricks clearfix snippet (https://css-tricks.com/snippets/css/clear-fix/), MDN Flexbox guide (https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) and MDN input element docs (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input).

Member Avatar for elneco

input field appears to be within menu bar div, although i think you should be using a button for the go instead of a link. anyway looks fine to me, hears the code i used:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="charset=UTF-8" />
<title>f_atencia</title>

<style>
*, html, DIV.MenuBar, DIV.QuickSearch
{ margin-top:0px;color:black;}

DIV.MenuBar 
{font-weight:bold; font-size:1.1em; font-family:verdana, Arial, sans-serif;background:#FFF url("../images/Gradient.jpg") repeat-x bottom left;
border:1px solid black;display:block;}

.QuickSearch {padding:20px;}
</style>

</head>

<body>


<div class="MenuBar">

  <ul>
  	<li></li>
  </ul>
  
  <div class="QuickSearch">
  	<input type="search" width="10" />
  	<input type="button" value="GO">  
  </div>

</div>


</body>
</html>
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.