Website Css Firefox!

crackafaza · #1 Dec 20th, 2007, 09:22

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 · #2 Dec 20th, 2007, 10:05

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 · #3 Dec 20th, 2007, 10:15

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 · #4 Dec 20th, 2007, 10:18

give #results2 and overflow:hidden; property

dab42pat · #5 Dec 20th, 2007, 10:19

change height to auto in your #container.

that might do it.

crackafaza · #6 Dec 20th, 2007, 10:25

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 · #7 Dec 20th, 2007, 10:37

Glad it worked.

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

crackafaza · #8 Dec 20th, 2007, 10:38

Ok No Problem, Thanks For Your Help Anyway!

Cracka

dab42pat · #9 Dec 20th, 2007, 11:05

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 · #10 Dec 20th, 2007, 11:13

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 · #11 Dec 20th, 2007, 11:18

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 · #12 Dec 20th, 2007, 11:29

Quote:

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 · #13 Dec 20th, 2007, 11:31

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

MikeHopley · #14 Dec 20th, 2007, 11:35

Quote:

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

Fix your broken HTML, and fix your broken CSS.

dab42pat · #15 Dec 20th, 2007, 11:36

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 · #16 Dec 20th, 2007, 12:30

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">

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Website Css Firefox!