Solved

Floated DIV not visible

Posted on 2004-04-30
9
464 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: 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!

 

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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

717 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