Solved

Floated DIV not visible

Posted on 2004-04-30
9
462 Views
Last Modified: 2009-07-29
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>
0
Comment
Question by:Orroland
  • 5
  • 4
9 Comments
 
LVL 18

Expert Comment

by:CrYpTiC_MauleR
ID: 10959562
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?
0
 

Author Comment

by:Orroland
ID: 10959586
Thanks for the quick reply.

I have just tried putting a border - it seems to be the divs that are not visible.
0
 
LVL 18

Expert Comment

by:CrYpTiC_MauleR
ID: 10959614
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?
0
Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

 

Author Comment

by:Orroland
ID: 10959640
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>
0
 

Author Comment

by:Orroland
ID: 10959643
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;
}
0
 
LVL 18

Expert Comment

by:CrYpTiC_MauleR
ID: 10959709
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)
0
 
LVL 18

Expert Comment

by:CrYpTiC_MauleR
ID: 10959739
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
0
 

Author Comment

by:Orroland
ID: 10959751
I see now, how can I re-order things?
0
 
LVL 18

Accepted Solution

by:
CrYpTiC_MauleR earned 500 total points
ID: 10959788
position:relative;
z-index:50;

add those to the

.photo_left {
    width:40%;
    float:left;
         border: 1px solid #778;
}
.photo_right {
    float:right;
    width:40%;
         border: 1px solid #778;
}


and it shold be over other elements
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
CSS Position not returning 2 57
Change javascript css 1 30
bootstrap footer centering and expand problems 7 42
Make navigation bar highlight the page you are on. 1 19
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question