Link to home
Start Free TrialLog in
Avatar of Orroland
OrrolandFlag for United Kingdom of Great Britain and Northern Ireland

asked on

Floated DIV not visible

I am trying to create two columns using two divs, however they don't appear to be visible on the web page (IE6)

CSS:

.photo_left {
      width:40%;
      float:left;
}
.photo_right {
      float:right;
      width:40%;
}
  .spacer
{
     clear:both;
     line-height:.1em;
     font-size:.1em;
}

HTML

  <div class="photo_left">
  <p><a href="mailto:&amp;#115;&amp;#97;&amp;#108;&amp;#101;&amp;#115;&amp;#64;&amp;#101;&amp;#117;&amp;#114;&amp;#111;&amp;#108;&amp;#105;&amp;#116;&amp;#101;&amp;#46;&amp;#99;&amp;#111;&amp;#46;&amp;#117;&amp;#107;" ><strong>Email us</strong></a></p>
  <p ><strong>Telephone: </strong><i>+44 (0)1228 672 020</i>      </p>
  <p ><strong>Fax: </strong>+44 (0) 1228 672 030 </p>
      <p ><i>(Local time now: <%=FormatDateTime(now(),4)%>)</i> </p>
  </div>
  <div class="photo_right"> <strong>Postal Address:</strong>
      </p>
    <p >Eurolite<br />
      Carlisle Brass Ltd<br />
      Kingstown Broadway<br />
      Kingstown Industrial Estate<br />
      Carlisle<br />
      CA3 0HA<br />
    United Kingdom</p>
  </div><div class="spacer"></div>
Avatar of CrYpTiC_MauleR
CrYpTiC_MauleR
Have you tried to put a border around them to see if the elemtn is visible at least and not just the text is not visible?
Avatar of Orroland
Orroland
Flag of United Kingdom of Great Britain and Northern Ireland image

ASKER

Thanks for the quick reply.

I have just tried putting a border - it seems to be the divs that are not visible.
Avatar of CrYpTiC_MauleR
CrYpTiC_MauleR
Odd when I test out your code works fine can see the DIVs and text. Is there any extra CSS code somwhere that you are using that may be overriding something? Also at times I've noticed when I use different DTDs the elements do behave properly, what DTD are you using?
Avatar of Orroland
Orroland
Flag of United Kingdom of Great Britain and Northern Ireland image

ASKER

HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"><!-- InstanceBegin template="/Templates/main.dwt.asp" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Eurolite - Decorative Electrical Brassware</title>
<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- InstanceBeginEditable name="head" -->
<script language="JavaScript" type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function YY_checkform() { //v4.71
//copyright (c)1998,2002 Yaromat.com
  var a=YY_checkform.arguments,oo=true,v='',s='',err=false,r,o,at,o1,t,i,j,ma,rx,cd,cm,cy,dte,at;
  for (i=1; i<a.length;i=i+4){
    if (a[i+1].charAt(0)=='#'){r=true; a[i+1]=a[i+1].substring(1);}else{r=false}
    o=MM_findObj(a[i].replace(/\[\d+\]/ig,""));
    o1=MM_findObj(a[i+1].replace(/\[\d+\]/ig,""));
    v=o.value;t=a[i+2];
    if (o.type=='text'||o.type=='password'||o.type=='hidden'){
      if (r&&v.length==0){err=true}
      if (v.length>0)
      if (t==1){ //fromto
        ma=a[i+1].split('_');if(isNaN(v)||v<ma[0]/1||v > ma[1]/1){err=true}
      } else if (t==2){
        rx=new RegExp("^[\\w\.=-]+@[\\w\\.-]+\\.[a-zA-Z]{2,4}$");if(!rx.test(v))err=true;
      } else if (t==3){ // date
        ma=a[i+1].split("#");at=v.match(ma[0]);
        if(at){
          cd=(at[ma[1]])?at[ma[1]]:1;cm=at[ma[2]]-1;cy=at[ma[3]];
          dte=new Date(cy,cm,cd);
          if(dte.getFullYear()!=cy||dte.getDate()!=cd||dte.getMonth()!=cm){err=true};
        }else{err=true}
      } else if (t==4){ // time
        ma=a[i+1].split("#");at=v.match(ma[0]);if(!at){err=true}
      } else if (t==5){ // check this 2
            if(o1.length)o1=o1[a[i+1].replace(/(.*\[)|(\].*)/ig,"")];
            if(!o1.checked){err=true}
      } else if (t==6){ // the same
            if(v!=MM_findObj(a[i+1]).value){err=true}
      }
    } else
    if (!o.type&&o.length>0&&o[0].type=='radio'){
          at = a[i].match(/(.*)\[(\d+)\].*/i);
          o2=(o.length>1)?o[at[2]]:o;
      if (t==1&&o2&&o2.checked&&o1&&o1.value.length/1==0){err=true}
      if (t==2){
        oo=false;
        for(j=0;j<o.length;j++){oo=oo||o[j].checked}
        if(!oo){s+='* '+a[i+3]+'\n'}
      }
    } else if (o.type=='checkbox'){
      if((t==1&&o.checked==false)||(t==2&&o.checked&&o1&&o1.value.length/1==0)){err=true}
    } else if (o.type=='select-one'||o.type=='select-multiple'){
      if(t==1&&o.selectedIndex/1==0){err=true}
    }else if (o.type=='textarea'){
      if(v.length<a[i+1]){err=true}
    }
    if (err){s+='* '+a[i+3]+'\n'; err=false}
  }
  if (s!=''){alert('The required information is incomplete or contains errors:\t\t\t\t\t\n\n'+s)}
  document.MM_returnValue = (s=='');
}
//-->
</script>
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
@import url("css/eurolite.css");
-->
</style>
<!-- InstanceParam name="pagename" type="text" value="contact" -->
</head>

<body>
<div id="container">
<div id="header"><img src="images/logo.gif" alt="Eurolite - Decorative Electrical Brassware " width="200" height="140" hspace="5" vspace="5" /></div>
<div id="content"><!-- InstanceBeginEditable name="main" --> <h1>Contact information for trade customers and brochure requests</h1>
  <div class="photo_left">
  <p><a href="mailto:&amp;#115;&amp;#97;&amp;#108;&amp;#101;&amp;#115;&amp;#64;&amp;#101;&amp;#117;&amp;#114;&amp;#111;&amp;#108;&amp;#105;&amp;#116;&amp;#101;&amp;#46;&amp;#99;&amp;#111;&amp;#46;&amp;#117;&amp;#107;" ><strong>Email us</strong></a></p>
  <p ><strong>Telephone: </strong><i>+44 (0)1228 672 020</i>      </p>
  <p ><strong>Fax: </strong>+44 (0) 1228 672 030 </p>
      <p ><i>(Local time now: 14:51)</i> </p>
  </div>
  <div class="photo_right"> <strong>Postal Address:</strong>
      </p>
    <p >Eurolite<br />
      Carlisle Brass Ltd<br />
      Kingstown Broadway<br />
      Kingstown Industrial Estate<br />
      Carlisle<br />
      CA3 0HA<br />
    United Kingdom</p>
  </div><div class="spacer"></div>
  <h2><strong>Trade Enquiry Form / Brochure &amp; Price List Request:</strong></h2>
    <p>                Fields marked with <font color="#FF0000">*</font> must be completed. If you are concerned about Data Protection please see our <a href="privacy.asp">privacy policy</a>.</p>
    <form action="/test/contact.asp" method="post" name="form1" id="form1" onsubmit="YY_checkform('form1','enquiryforename','#q','0','You must enter your forename','enquirysurname','#q','0','You must enter your surname','enquiryemail','#q','0','You must enter your email address','enquirycompany','#q','0','Please enter your company / organisation name in the form','enquiryaddress1','#q','0','Please enter your address in the form','enquiryaddress3','#q','0','Please enter your town / city in the form','enquiryaddress4','#q','0','Please enter your postal / zip code in the form');return document.MM_returnValue">
              <table align="center" width="100%" cellpadding="3" cellspacing="3" summary="Layout table - this table is used to layout the contact form.  The first column contains the title and the second column contains the form fields.">
                <tr valign="middle" >
                  <td nowrap="nowrap"  height="2" align="right" width="23%">Title:<font color="#FF0000">*</font></td>
                  <td nowrap="nowrap"  height="2" width="77%">
                    <select name="enquirytitle" >
                      <option value="Mr" selected="selected">Mr</option>
                      <option value="Mrs">Mrs</option>
                      <option value="Miss">Miss</option>
                      <option value="Ms">Ms</option>
                      <option value="Dr">Dr</option>
                      <option>Other</option>
                    </select>
                  </td>
                </tr>
                <tr valign="middle" >
                  <td nowrap="nowrap"  align="right" width="23%">Forename:<font color="#FF0000">*</font></td>
                  <td nowrap="nowrap"  width="77%">
                    <input type="text" name="enquiryforename" value="" size="32" />
                  </td>
                </tr>
                <tr valign="middle" >
                  <td nowrap="nowrap"  align="right" width="23%" height="2">Surname:<font color="#FF0000">*</font></td>
                  <td nowrap="nowrap"  width="77%" height="2">
                    <input type="text" name="enquirysurname" value="" size="32" />
                  </td>
                </tr>
                <tr valign="middle" >
                  <td nowrap="nowrap"  align="right" width="23%">Email Address:<font color="#FF0000">*</font></td>
                  <td nowrap="nowrap"  width="77%">
                    <input type="text" name="enquiryemail" value="" size="32" />
                  </td>
                </tr>
                <tr valign="middle" >
                  <td nowrap="nowrap"  align="right" width="23%">Telephone Number:</td>
                  <td nowrap="nowrap"  width="77%">
                    <input type="text" name="enquirytelephone" value="" size="32" />
                  </td>
                </tr>
                <tr valign="middle" >
                  <td nowrap="nowrap"  align="right" width="23%" height="2">Company name:<font color="#FF0000">*</font></td>
                  <td nowrap="nowrap"  width="77%" height="2">
                    <input type="text" name="enquirycompany" value="" size="32" />
                  </td>
                </tr>
                <tr valign="middle" >
                  <td nowrap="nowrap"  align="right" width="23%">Address Line 1:<font color="#FF0000">*</font></td>
                  <td nowrap="nowrap"  width="77%">
                    <input type="text" name="enquiryaddress1" value="" size="32" />
                  </td>
                </tr>
                <tr valign="middle" >
                  <td nowrap="nowrap"  align="right" width="23%">Address Line 2:</td>
                  <td nowrap="nowrap"  width="77%">
                    <input type="text" name="enquiryaddress2" value="" size="32" />
                  </td>
                </tr>
                <tr valign="middle" >
                  <td nowrap="nowrap"  align="right" width="23%">Town / City:<font color="#FF0000">*</font></td>
                  <td nowrap="nowrap"  width="77%">
                    <input type="text" name="enquiryaddress3" value="" size="32" />
                  </td>
                </tr>
                <tr valign="middle" >
                  <td nowrap="nowrap"  align="right" width="23%">Post Code:<font color="#FF0000">*</font></td>
                  <td nowrap="nowrap"  width="77%">
                    <input type="text" name="enquiryaddress4" value="" size="8" />
                  </td>
                </tr>
                <tr valign="middle" >
                  <td nowrap="nowrap"  align="right" width="23%">Country:</td>
                  <td nowrap="nowrap"  width="77%">
                    <select name="enquirycountry" >
                      <option selected="selected">Choose a country</option>
                      <option value="UK">United Kingdom</option>
                      <option value="AR">Argentina</option>
                      <option value="AU">Australia</option>
                      <option value="AT">Austria</option>
                      <option value="BS">Bahamas</option>
                      <option value="BE">Belgium</option>
                      <option value="BO">Bolivia</option>
                      <option value="BR">Brazil</option>
                      <option value="CA">Canada</option>
                      <option value="CH">Chile</option>
                      <option value="CN">China</option>
                      <option value="CO">Colombia</option>
                      <option value="CR">Costa Rica</option>
                      <option value="HR">Croatia</option>
                      <option value="CU">Cuba</option>
                      <option value="CZ">Czech, Rep.</option>
                      <option value="DK">Denmark</option>
                      <option value="DO">Dominican, Rep.</option>
                      <option value="EC">Ecuador</option>
                      <option value="EG">Egypt</option>
                      <option value="SV">El Salvador</option>
                      <option value="FI">Finland</option>
                      <option value="FR">France</option>
                      <option value="DE">Germany</option>
                      <option value="GR">Greece</option>
                      <option value="GT">Guatemala</option>
                      <option value="HN">Honduras</option>
                      <option value="HK">Hong Kong</option>
                      <option value="IN">India</option>
                      <option value="IE">Ireland</option>
                      <option value="IL">Israel</option>
                      <option value="IT">Italy</option>
                      <option value="JM">Jamaica</option>
                      <option value="JP">Japan</option>
                      <option value="LU">Luxembourg</option>
                      <option value="MX">Mexico</option>
                      <option value="MA">Morocco</option>
                      <option value="NL">Netherlands</option>
                      <option value="NZ">New Zealand</option>
                      <option value="NI">Nicaragua</option>
                      <option value="NG">Nigeria</option>
                      <option value="NO">Norway</option>
                      <option value="PY">Paraguay</option>
                      <option value="PE">Peru</option>
                      <option value="PL">Poland</option>
                      <option value="PT">Portugal</option>
                      <option value="PR">Puerto Rico</option>
                      <option value="RU">Russia</option>
                      <option value="SA">Saudi Arabia</option>
                      <option value="ZA">South Africa</option>
                      <option value="ES">Spain</option>
                      <option value="SE">Sweden</option>
                      <option value="CH">Switzerland</option>
                      <option value="TW">Taiwan</option>
                      <option value="TR">Turkey</option>
                      <option value="UK">United Kingdom</option>
                      <option value="US">United States</option>
                      <option value="UY">Uruguay</option>
                      <option value="VE">Venezuela</option>
                      <option value="OT">Other...</option>
                    </select>
                  </td>
                </tr>
                <tr valign="middle" >
                  <td nowrap="nowrap"  align="right" width="23%" valign="top">Products of interest:<font color="#FF0000">*</font></td>
                  <td nowrap="nowrap"  width="77%" valign="top">                    <input name="enquiryproducts" type="text" id="enquiryproducts" size="50" /></td>
                </tr>
                <tr valign="middle" >
                  <td nowrap="nowrap"  align="right" width="23%" valign="top" height="193">Enquiry type:<font color="#FF0000">*</font></td>
                  <td nowrap="nowrap"  width="77%" valign="top" height="193">              <input type="checkbox" name="enquirytype" value="Bathroom Manufacturer" />
              Bathroom Manufacturer<br />              
              <input type="checkbox" name="enquirytype" value="Retail Distributor" />
              Retail Distributor<br />
              <input type="checkbox" name="enquirytype" value="House Builder" />
              House Builder<br />
              <input type="checkbox" name="enquirytype" value="Architect" />
              Architect<br />
              <input type="checkbox" name="enquirytype" value="Interior Designer" />
              Interior Designer<br />
              <input type="checkbox" name="enquirytype" value="Bespoke Kitchens" />
              Bespoke Kitchens<br />
              <input type="checkbox" name="enquirytype" value="Property Developer" />
              Property Developer<br />
              <input type="checkbox" name="enquirytype" value="Builder's Merchant" />
              Builders' Merchant<br />              
              <input type="checkbox" name="enquirytype" value="Designer" />
              Designer<br />
              Other (please specify):
              <input type="text" name="enquirytype" />                  </td>
                </tr>
                <tr valign="middle" >
                  <td nowrap="nowrap"  align="right" width="23%" valign="top">Comments:</td>
                  <td nowrap="nowrap"  width="77%">
                    <textarea name="enquirycomments" cols="50" rows="10"  style="width:100%"></textarea>
                  </td>
                </tr>
                <tr valign="middle" >
                  <td nowrap="nowrap"  align="right" width="23%">&nbsp;</td>
                  <td nowrap="nowrap"  width="77%">
                    <input type="submit" value="Send" name="Submit" />
                    <a href="privacy.asp">Privacy Policy</a> </td>
                </tr>
              </table>
              <input type="hidden" name="enquirydate" value="30/04/2004 14:51:37" />
              <input type="hidden" name="MM_insert" value="true" />
              <input type="hidden" name="enquiryreferrer" value="http://www.eurolite.co.uk/test/" />
              <input name="rangeID" type="hidden" id="rangeID" value="4" />
  </form><!-- InstanceEndEditable --></div>
<ul id="navlist" name="navlist">
<li id=""><a href="index.asp" id="">Home / Products</a></li>
<li id=""><a href="about.asp" id="">About Us</a></li>
<li id=""><a href="news.asp" id="">News</a></li>
<li id="active"><a href="contact.asp" id="current">Contact Us</a></li>
</ul>
<div id="footer">
  <p><a href="mailto:&amp;#115;&amp;#97;&amp;#108;&amp;#101;&amp;#115;&amp;#64;&amp;#101;&amp;#117;&amp;#114;&amp;#111;&amp;#108;&amp;#105;&amp;#116;&amp;#101;&amp;#46;&amp;#99;&amp;#111;&amp;#46;&amp;#117;&amp;#107;" ><strong>Email us</strong></a></p>
  <p>&copy; Carlisle Brass Ltd 2004.  All Rights Reserved.</p>
</div>
</div>
</body>
<!-- InstanceEnd --></html>
Avatar of Orroland
Orroland
Flag of United Kingdom of Great Britain and Northern Ireland image

ASKER

CSS

body {
      background-color:#FFFFCC;
}
a:hover {
      text-decoration: none;
}
#navlist
{
      position:absolute;
      right:3px;
      top: 131px;
      padding: 4px 0 3px 0;
      margin-left: 0;
      font: bold 12px Verdana, sans-serif;


      }
#navlist li
{
list-style: none;
margin: 0;
display: inline;
}

#navlist li a
{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #CCB566;
text-decoration: none;
}
#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }

#navlist li a:hover
{
color: #000;
background: #C59A07;
border-color: #227;
}

#navlist li a#current
{
background: white;
border-bottom: 1px solid white;
}
#header {
      background-image:url(../images/bk-header.jpg);
      height:150px;
      border-left: 1px solid #778;
      border-right: 1px solid #778;
      border-top:  1px solid #778;
}
#content {
      border-left: 1px solid #778;
      border-right: 1px solid #778;
      border-bottom: 1px solid #778;
      border-top:  1px solid #778;
      font-size: 80%;
      font-family:Verdana, Arial, Helvetica, sans-serif;
      padding:1em;
      background-color:#FFFFFF;
}
#content h1 {
      font-size:140%;
      color:#CB7901;
      padding: 0;
}
#footer {
      font-size: 70%;
      font-family:Verdana, Arial, Helvetica, sans-serif;
      padding:1em;
      text-align:center;
      background: #F7C519;
      border-left: 1px solid #778;
      border-right: 1px solid #778;
      border-bottom: 1px solid #778;
}
.products_table {
      font-size:75%;
      clear:both;
}
.products_table th{
      text-align:left;
      border: 1px solid #778;
}
.products_table td{
      border: 1px solid #778;
      padding:3px;
      }
h2 {
      font-size:110%;
      color:#CB7901;
      padding: 0;
      margin: 0;
}
.finish_icons {
      background-color: #CCB566;
      border: 1px solid #778;
      padding:1px;
}
.photo_left {
      width:40%;
      float:left;
            border: 1px solid #778;
}
.photo_right {
      float:right;
      width:40%;
            border: 1px solid #778;
}
#container {
      position:relative;
}
.product_columns {
      width: 30%;
      text-align:center;

}
  .spacer
{
     clear:both;
     line-height:.1em;
     font-size:.1em;
}
Avatar of CrYpTiC_MauleR
CrYpTiC_MauleR
ok I know whats wrong, it seems that you have an element positioned OVER the DIVs remove the background colors and you will see =o)
Avatar of CrYpTiC_MauleR
CrYpTiC_MauleR
You can change the z-index values accordingly or put the DIVs inside another DIV which you can realtively position over the other elements. Give me some time to figure out which elements is overlapping the DIVs
Avatar of Orroland
Orroland
Flag of United Kingdom of Great Britain and Northern Ireland image

ASKER

I see now, how can I re-order things?
ASKER CERTIFIED SOLUTION
Avatar of CrYpTiC_MauleR
CrYpTiC_MauleR
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial