Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Floated DIV not visible

Posted on 2004-04-30
9
Medium Priority
?
469 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Suggested Courses

885 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