Website Css Firefox!

[crackafaza]

Hi All!

I Am looking for a little help off all you css gurus out there!
My website: http://www.sunpropertiesdirect.com

If you view it on Firefox, it looks all and well, except when you search properties (left hand side form)
When on the properties page, the white background doesn't reach the end of the content, so could someone help me on that please.

Also, in IE7 on the homepage, I have a huge white area at the bottom that I can't seem to get rid of!
Soo help on that would be appreciated!

Here is my css:

Code: Select all

a.theselinks:link, a.theselinks:visited, a.theselinks:active {
  color: #ffffff;
  text-decoration: none;
}
a.theselinks:hover {
  color: #E1E1E1;
  text-decoration: none;
}
a.otherlinks:link, a.otherlinks:visited, a.otherlinks:active {
  color: #000000;
  text-decoration: none;
}
a.otherlinks:hover {
  color: #0640D5;
  text-decoration: none;
}
a.footertext:link, a.footertext:visited, a.footertext:active {
 color:#000000;
 text-decoration:none;
}
h1 {
  font: normal 1.8em sans-serif;
}
h2 {
  font: normal 1.3em verdana;
}
body { font: normal 10px verdana; background: #E9EDF5; margin: 0px;}
#container {
 width: 760px;
 background: white url(img/header13.jpg) no-repeat;
 height: 800px;
} 
#titlemenu {
 margin: 0;
 width: 760px;
 height: 200px;
 margin-top: 0;
}

#headertitle {
 margin: 0;
 width: 760px;
 height: 40px;
 margin-top: 0;
 font-size: 2px;
}
#toptext {
 position: relative;
 top: -10px;
 left:100px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 color: 4A65A8;
}
#photos {
 position: relative;
 top: -250px;
 left: 300px;
 text-align: left;
 z-index: 1;
}
#property_search {
 position: relative;
 top: -200px;
 left: -200px;
 background: #FFFFFF url(img/property_search.jpg) no-repeat;
 width: 327px;
 height: 230px;
}
#property_search2 {
 position: relative;
 top: 20px;
 left: -200px;
 background: #FFFFFF url(img/property_search.jpg) no-repeat;
 width: 327px;
 height: 230px;
}
#featured {
 position: relative;
 top: -570px;
 left:10px;
 text-align: left;
}
#searchtext {
 float: left;
 font-family: century gothic;
 font-size: 13px;
 font-weight: bold;
 color: #4766AD;
 line-height: 25px;
 text-align: right;
 z-order: 100;
}
#propertyform {
 margin: 56px 0 0 130px;
 float: left;
 text-align: left;
 line-height: 92px;
}
#propertyform2 {
 margin: 56px 0 0 130px;
 float: left;
 text-align: left;
 line-height: 92px;
}
#results {
 position: relative;
 margin-top: 5px;
 margin-left: 0px;
}
#results2 {
 position: relative;
 margin-top: 40px;
 margin-left: 30px;
}
#footertext {
 color:#000000; 
}
#menu {
 position: relative;
 top: 146px; 
 left: 0px;
 width: 760px;
 height: 40px;
}
#menu2 {
 position: absolute;
 top: 3px; 
 left: -280px;
 width: 800px;
 font-size:13px;
}
#maintext {
 position: absolute;
 top: 220px; 
 left: 140px;
 width: 670px;
 font-size:15px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 text-align:left;
}
#maintext2 {
 position: relative;
 top: -10px;
 left:190px;
 width: 350px;
 color: #000000;
 text-align:left;
}
#maintext3 {
 position: absolute;
 top: 220px; 
 left: 140px;
 width: 670px;
 font-size:13px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 text-align:left;
}
#AgentHome {
 margin-top:15px;
 margin-left:20px;
 position:relative;
}
#SrchForms {
 width:100%;
 position:absolute;
 text-align:right;
 float:left;
}

Thanks alot
Cracka

[Rakuli]

On the results page, in the HTML - not your CSS, you have assigned #results2 a height, this means that once the content exceeds the height, it is breaking out... Take the height out and it should stretch

[crackafaza]

Hi Rakuli
Thanks for takeing a look for me!
I Have now removed the height! but it still isn't stretching like you said it would, any other suggestions?

Thanks
Cracka

[Rakuli]

give #results2 and overflow:hidden; property

[dab42pat]

change height to auto in your #container.

that might do it.

[crackafaza]

Thanks Alot Both Of You!
I Tried Both, And Dab42Pat Yours Worked A Treat! Thanks Alot

Also, As Said Above, Does Anyone Know How To Fix The Massive White Area On The Bottom Of The Homepage In IE7?

Thanks
Cracka

[dab42pat]

Glad it worked.

cant help with ie7 issue my laptop is ill and its got ie7.(probably why its ill)

[crackafaza]

Ok No Problem, Thanks For Your Help Anyway!

Cracka

[dab42pat]

Just spotted a problem on your homepage code.

HTML: Select all

</head>

<!-- http://www.bytecraft.co.uk -->

<body>
<!-- Buy Property In Spain, Sell Property In Spain, Buy Spanish Property, Sell Spanish Property. -->
<div align="center">
<div id="container">

<html>
<head>

<title>Sun Properties Direct</title>

</head>

<body>

this could be whats wrong to many head and body tags causing your two divs center and container to through up some errors.

[crackafaza]

Hmm...That is very strange, When i look at my index.asp file, i can't see the extra <body> and <head> tags! (from local, and from main website)

But when i look at the source code on the website, it is completely different! the code on here is well old, and has been modified alot since then! hmm... confusing!

[dab42pat]

it certainly is odd, if you edit in firebug the extra tags dont show but as you said they show up in the source. infact if you look further down the source there are head,html and body tags frequently.

[MikeHopley]

Originally Posted by dab42pat

it certainly is odd, if you edit in firebug the extra tags dont show but as you said they show up in the source. infact if you look further down the source there are head,html and body tags frequently.

It's not odd.

Firebug receives the document structure after Firefox has tried to make sense of it. So if the structure is broken, Firebug gets a "sanitised" version.

[crackafaza]

So what should I Do now to try and resolve my problem?

[MikeHopley]

So what should I Do now to try and resolve my problem?

Fix your broken HTML, and fix your broken CSS.

[dab42pat]

not sure.

I would check my local code if it looks okay upload it. Also give it a doctype and validate the code. At the moment W3C is seeing all the extra tags.

[dab42pat]

this should get you started.

HTML: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>

  
<meta name="keywords" content="buy property in spain, sell property in spain, buy spanish property, sell spanish property, spanish property for sale, sun properties direct, spain, property, villa, apartment, town house, bungalow, buy, sell, Andalucia, Huelva, Jerez, Cadiz, Conil, Zahara, Tarifa, Jimena/Gaucin, Duquesa, Estepona, San Pedro, Marbella, Fuengirola, Torremolinos, Nerja, Motril">
<meta name="description" content="Buy and Sell a Property in Spain">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Buy and Sell a Property in Spain</title>
<style type="text/css">

@import "styles.css";

.style1 {
    margin-left: 66px;
}
.style2 {
    margin-right: 0;
}
.style4 {
    font-size: 14px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
body,td,th {
    color: #ECE9D8;
}

.style5 {color: #5E7CB8}

</style>


</head>

<!-- http://www.bytecraft.co.uk -->

<body>
<!-- Buy Property In Spain, Sell Property In Spain, Buy Spanish Property, Sell Spanish Property. -->
<div align="center">
<div id="container">
<div id="titlemenu">
<div id="menu">

<table width="760px"  border="0" cellspacing="0" cellpadding="0">

      <tr>
      
        <td width="8%" style="border-left-style: solid; border-left-width: 3px"><p align="center"><a href="index.asp" class="theselinks">
        <font size="2">Home</font></a></p></td>
        <td width="10%" style="border-left-style: solid; border-left-width: 3px"><p align="center"><a href="propertysearch.asp" class="theselinks">
        <font size="2">Property <br>Search</font></a></p></td>
        <td width="10%" style="border-left-style: solid; border-left-width: 3px"><p align="center"><a href="buyproperty.asp" class="theselinks">
        <font size="2">Buying a <br>Property</font></a></p></td>
        <td width="10%" style="border-left-style: solid; border-left-width: 3px"><p align="center"><a href="sellproperty.asp" class="theselinks">
        <font size="2">Sell my <br>Property</font></a></p></td>
        <td width="10%" style="border-left-style: solid; border-left-width: 3px"><p align="center"><a href="contact.asp" class="theselinks">
        <font size="2">About Us/<br>Contact Us</font></a></p></td>
        <td width="10%" style="border-left-style: solid; border-left-width: 3px"><p align="center"><a href="mortgages.asp" class="theselinks">
        <font size="2">Mortgages</font></a></p></td>
        <td width="10%" style="border-left-style: solid; border-left-width: 3px"><p align="center"><a href="solicitors.asp" class="theselinks">
        <font size="2">Solicitors</font></a></p></td>
        <td width="8%" style="border-left-style: solid; border-left-width: 3px"><p align="center"><a href="career.asp" class="theselinks">
        <font size="2">Join Us <br>Career</font></a></p></td>        
        <td width="10%" style="border-left-style: solid; border-left-width: 3px; border-right-style: solid; border-right-width: 3px"><p align="center">
        <font size="2"><a class="theselinks" href="security.asp">Security</a></font></p></td>
      </tr>
    </table>
</div>
</div>
    
<div id="toptext"><h1>Sun Properties Direct</h1>
</div>
<div id="maintext2"><h2>Here at <b>Sun Properties Direct </b> we offer
 a service for buyers and sellers of Spanish Properties. If you would like to Buy or Sell a Property in Spain, then please fill in our forms on the 
 <b><a href="buyproperty.asp" class="otherlinks">'Buying A Property'</a></b> and <b><a href="sellproperty.asp" class="otherlinks">'Sell My Property'</a></b> pages.<br>
We sell different types of properties, such as: Villas, Apartments, Town Houses and Bungalows. <br>If you have any queries or problems about anything on this website
please don't hesitate to <a href="contact.asp" class="otherlinks">Contact Us.</a></h2>
</div>
<div id="property_search" class="style2">
<div id="propertyform" class="style1">

<form method="POST" action="SearchResults.asp" name="fmsearch">

<select size="1" name="txtTown">
    


<option value="ANDALUCIA" >ANDALUCIA</option>
        


<option value="Huelva" >Huelva</option>
        


<option value="Jerez" >Jerez</option>
        


<option value="Cadiz" >Cadiz</option>
        


<option value="Conil" >Conil</option>
        


<option value="Zahara" >Zahara</option>
        


<option value="Tarifa" >Tarifa</option>
        


<option value="Jimena/Gaucin" >Jimena/Gaucin</option>
        


<option value="Duquesa" >Duquesa</option>
        


<option value="Estepona" >Estepona</option>
        


<option value="San Pedro" >San Pedro</option>
        


<option value="Marbella" >Marbella</option>
        


<option value="Fuengirola" >Fuengirola</option>
        


<option value="Torremolinos" >Torremolinos</option>
        


<option value="Nerja" >Nerja</option>
        


<option value="Motril" >Motril</option>
</select><br>

<select size="1" name="txtType">
        
<option value="0">No Preference</option>
<option value="Villa">Villa</option>
<option value="Flat">Apartment</option>
<option value="Townhouse">Town House</option>
<option value="Bungalow">Bungalow</option>
</select><br>

<select size="1" name="txtBeds">    
    
<option value="0">No Preference</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>

<select size="1" name="txtBath">
    
<option value="0">No Preference</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>

<select size="1" name="txtMin">
    
 <option value="0">No Preference</option>
 <option value="20000">&euro;20000</option>
 <option value="40000">&euro;40000</option>
 <option value="60000">&euro;60000</option>
 <option value="80000">&euro;80000</option>
 <option value="100000">&euro;100000</option>
</select><br>

<select size="1" name="txtMax">
    
 <option value="9999999999">No Preference</option>
 <option value="40000">Upto &euro;40000</option>
 <option value="50000">Upto &euro;50000</option>
 <option value="60000">Upto &euro;60000</option>
 <option value="80000">Upto &euro;80000</option>
 <option value="100000">Upto &euro;100000</option>
 <option value="150000">Upto &euro;150000</option>
 <option value="200000">Upto &euro;200000</option>
 <option value="99999999">&euro;200000 +</option>
</select><br>

<input type="submit" value="Submit" name="submit">
</form> 
</div>
</div>

<div id="photos"><img src="img/photos.gif" alt="Sell Property In Spain"></div>

<div id="featured"><a href="details.asp?Ref=144"><img src="img/property1.jpg" width="270" height="161" border="0" alt="Buy Property In Spain"></a><br>

  <br>
      <a href="details.asp?Ref=143"><img src="img/property2.jpg" border="0" alt="Buy Property In Spain"></a><br>
  <br>
</div>
</div>
</div>

<br>






<div id="footertext" align="center">
  <font size="2px">
    &copy; Copyright 2007 sunpropertiesdirect.com<br>

    <a href="index.asp" class="otherlinks">Home</a> |
    <a href="termsandconditions.asp" class="otherlinks">Terms And Conditions</a> |
    <a href="contact.asp" class="otherlinks">Contact Us</a>
  </font>
</div>

</body>

</html>

this is validated for html 4.01 transitional. I would advise trying to validate to a strict doctype when you get time.