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
  • 106 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by elneco
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.