Safari and fieldsets.

Hi everyone.

If you would be so kind please visit this page:

[URL=http://waringnetts.contrastcompany.co.uk/contact-us/apply]waring and netts contact us application[/URL]

If you have Safari available you will notice how the fieldset continues behind the floated div containing the image on the right.

Is there any way I can get Safari to play ball? I have tried many things all without success.

here is the html

[CODE]
<div id=”content”>
<div id=”media”>
<img src=”/userfiles/images/contact.jpg” alt=”image” width=”380″ height=”320″ longdesc=”/longdesc.php?image_id=61″ />
<span class=”hidden”><a href=”/longdesc.php?image_id=61″>d</a></span>
</div>
<div id=”text”>
<form action=”/index.php” method=”post” enctype=”multipart/form-data”>
<fieldset>
<legend>Vacancies</legend>
<label for=”name”>Your Name:</label>
<input type=”text” name=”name” id=”name” value=”” /><br />
<label for=”email”>Email:</label>
<input type=”text” name=”email” id=”email” value=”” /><br />
<label for=”subject”>Subject:</label>
<input type=”text” name=”subject” id=”subject” value=”” /><br />
<label for=”message”>Message:</label>
<textarea name=”message” id=”message”></textarea><br />
<label for=”upfile”>Attach CV:</label>
<input type=”file” name=”upfile” id=”upfile” />
</fieldset>
<input type=”hidden” name=”section” id=”section” value=”/contact-us” />
<input type=”hidden” name=”mode” id=”mode” value=”apply” />
<input type=”submit” name=”submit” id=”submit” value=”Send” />
</form>
<div class=”clear”></div>
</div>
</div>
[/CODE]

and the relevant css

[CODE]
div#wrapper
{
width: 765px;
}

div#wrapper div#media
{
float: right;
margin: 0 0 0 10px;
}

div.thumbs#media ul
{
list-style: none;
}

div.thumbs#media li
{
float: left;
width: 180px;
margin: 0 5px 5px 0;
text-align: right;
}

div#wrapper div#content
{
padding: 0 0 0 10px;
margin-left: 140px;
border-left: 1px solid gray;
width: 610px;
}

body#home div#wrapper div#content
{
padding: 0;
margin: 0;
border: none;
width: 765px;
}

div#wrapper div#content div#text
{
margin: 0 auto 0 0;
}

form input
{
font-size: 0.8em;
margin: 1px 0 0 0;
}

form select
{
font-size: 0.8em;
margin: 1px 0 0 0;
width: 12em;
}

input.intext
{
border: 1px solid #333;
width: 5em;
padding: 0 2px;
margin: 0 2px;
}

td input.intext
{
width: 6em;
}

input.innum
{
border: 1px solid #333;
width: 5em;
padding: 0 2px;
margin: 0 2px;
}

td input.innum
{
width: 2em;
}

label
{
float: left;
width: 75px;
font-size: 0.8em;
line-height: 1.2em;
vertical-align: bottom;
text-align:right;
margin: 1px 5px 1px 0;
white-space: nowrap;
}

fieldset
{
padding: 5px 5px 5px;
border: 1px solid #8c8c8c;
text-align: right;
}

legend
{
margin: 0 0 5px 0;
padding: 0 4px;
color: #fdad3e;
background: transparent;
}

textarea
{
width: 12em;
height: 10em;
}
[/CODE]

Any help would be very much appreciated…

Also in #CSS _↴