SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    Raleigh, NC
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Float problems

    Hello,

    I am having problems with some form elements in the right column pushing down below the floted left navigation. In IE 6 PC, Safari and IE 5 for mac shows it this way. All the form elements should start at the top. I bet it's just some small change I need to make, but Im at a loss.

    The page validates. I am so stumped as to what is causing this. If anyone of you CSS gurus can help me with this that would be awesome. Note though this site obtains erotic art so if you are offended by these things do not navigate to the other parts of the site.

    The page is at http://www.eberotic.com/contact.php

    The css is http://www.eberotic.com/includes/global.css

    here's the code for the XHTML:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>EB Erotic | Contact</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="eroticism, sex, erotica, drawings, brushwork, prints, nude, art,cut paper," /> 
    <meta name="description" content="EB Erotic consists of the erotic drawings of artist Electric Bill." />
    <meta name="author" content="Electric Bill" />
     <link rel="stylesheet" type="text/css" media="screen" href="/includes/global.css" />
    
    <script type="text/javascript" src="/includes/global.js"></script>
    
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    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 MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    </head>
    
    <body onload="MM_preloadImages('/images/previous_over.gif','/images/index_over.gif','/images/next_over.gif')">
    <div id="container">
    <div id="header"><img src="/images/logo.gif" alt="EB Erotic" width="245" height="125" />
    <h1>Contact</h1>
    </div>
    
    <div class="Article">
    		<div id="top-cap"><img src="/images/top_cap.gif" alt="" /></div>
    
    		<div id="wrapper">
    	<div id="menu">
    <div class="menutitle" id="nomargin"><a href="/" id="home">Home</a></div>
    
    	<div class="menutitle" onclick="SwitchMenu('sub2')"><a href="#" id="galleries">Galleries</a></div>
    	<span class="submenu" id="sub2">
    		- <a href="/galleryone/index.php">Gallery 1</a><br />
    		- <a href="gal2.php">Gallery 2</a><br />
    		- <a href="help.htm">Scripts FAQs</a></span>
    
    	<div class="menutitle" onclick="SwitchMenu('sub3')"><a href="/contact.php" id="contact">Contact</a></div>
    	
    	<div class="menutitle" onclick="SwitchMenu('sub4')"><a href="/about.php" id="about">About the Artist</a></div>
    	
    	<div class="menutitle" onclick="SwitchMenu('sub5')"><a href="/prints.php" id="prints">Prints</a></div>
    		
    	<div class="menutitle" onclick="SwitchMenu('sub6')"><a href="/links.php" id="links">Relevant Links</a></div>
    </div>
    
    	<div id="content">
    
    
    
    <form action="UltimateFormMail_v_2_5/mailit.php" method="post">
    
    <div class="row">
    <span class="label">Name:</span><span class="formw"><input type="text" name="name" id="name" size="25" maxlength="40" /></span>
      <div class="spacer"></div>
      </div>
    
    <div class="row">
    <span class="label">Email Address:</span><span class="formw"><input type="text" name="email" id="email" size="25" maxlength="60" /></span>
     <div class="spacer"></div>
     </div>
    
    <div class="row">
    <span class="label">Subject:</span><span class="formw"><input type="text" name="subject" id="subject" size="25" maxlength="40" /></span>
     <div class="spacer"></div>
     </div>
    
    <div class="row">
    <span class="label">Comments:</span><span class="formw"><textarea name="comments" id="comments" cols="35" rows="10"></textarea></span>
     <div class="spacer"></div></div>
    
    <div class="row"><input name="as_hash" type="hidden" id="as_hash" value="8af9feed2a7bbe44615bf8b07dbe6d10" />
              <input name="required" type="hidden" id="required" value="email, name, subject,comments" /></div>
    
    <div class="row"><input type="submit" name="Submit" value="Submit" /></div>
    
    </form>
     <div class="spacer">
      </div>
      </div>
    
     <div class="spacer">
      &nbsp;
      </div>
    	<div id="bootom_cap"><img src="/images/bottom_cap.gif" alt="bottom bar" /></div> 
      </div>
    		
    </div>
    
    <div id="footer">&copy;2004 Bill Pridgen. All rights reserved.</div>
    </div>
    </body>
    </html>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I think the problem is that floats should have a width defined or the results will be unreliable.

    As it is only ie that is having problems you could try this code:
    Code:
    * html #content {width:1%}
    Hope that helps.

    Paul

  3. #3
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    Raleigh, NC
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    I think the problem is that floats should have a width defined or the results will be unreliable.

    As it is only ie that is having problems you could try this code:
    Code:
    * html #content {width:1%}
    Hope that helps.

    Paul
    Actually, the div content is not floated...the menu though is floated to the left and has a specified width of 150px with left margin of 8 px...

    I tried adding that code but it didnt work.

    Any other ideas as what the problem is?

    Thanks for your help Paul. I am fairly new at CSS layout so it's a deep learning curve.

    Kevin

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    I tried adding that code but it didnt work.
    Worked for me!!
    http://www.pmob.co.uk/temp/eb.htm

    Or was I looking at the wrong thing again ( I know I was in a rush )

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •