SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member raj77's Avatar
    Join Date
    May 2004
    Location
    Mumbai
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Help Me Solve This Bug, Please!!!

    there are two problems below:

    1. In instance of Marital status
    - while i write 'nowi' - it overwrites my padding value and throws the 'br' tag on the next line, thereby extra space below text alright. Ideally 'nowi' the entire word should wrap onto the next line, please help!

    2. In instance of 'Special Cases'
    - every time content written in the "<b>last</b>" row wraps onto the 2nd line, it falls out side of the box. y doesn't it increase the height of the box with the bgcolr?? please help!

    <html>
    <head>
    <title>test problem</title>
    <style>
    .mediumblack{font-weight: normal; font-size: 12px; color: #000000; font-style: normal; font-family: arial; text-decoration: none; line-height: 16px;}
    </style>
    </head>

    <body>
    <div style="width: 273px; float: left;">

    <div style="padding: 8 0 1 6px;" class="mediumblack"><b>My Basics</b></div>
    <div style="padding: 0 6 0 6px; border-top: 1px solid #8FA7BF; border-bottom: 1px solid #8FA7BF; background-color: #ffffe0;">

    <div style="width: 115px; float: left;" class="mediumblack">Age</div>
    <div style="width: 8px; float: left;" class="mediumblack">/div>
    <div style="float: left;" class="mediumblack">24</div>
    <br clear="all">

    <div style="width: 115px; float: left;" class="mediumblack">Marital Status</div>
    <div style="width: 8px; float: left;" class="mediumblack">/div>
    <div style="float: left;" class="mediumblack">Never Married before nowo</div>
    <br clear="all">

    <div style="width: 115px; float: left;" class="mediumblack">Marital Status</div>
    <div style="width: 8px; float: left;" class="mediumblack">/div>
    <div style="float: left;" class="mediumblack">Never Married before nowi</div>
    <br clear="all">

    <div style="width: 115px; float: left;" class="mediumblack">Special Cases</div>
    <div style="width: 8px; float: left;" class="mediumblack">/div>
    <div style="float: left;" class="mediumblack">Physically challenged from birth</div>
    <br clear="all">

    </div>
    </div>


    </body>
    </html>

  2. #2
    SitePoint Member raj77's Avatar
    Join Date
    May 2004
    Location
    Mumbai
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image screenshot

    hi again,

    forgot to upload an image of what the problem looks like... plsease help me out guys!

    thnx
    Attached Images Attached Images

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

    You need to give your floats a width and also the parent of the float should have a width or ie gets jumpy.

    Heres the code revised (I have used the height:1% hack instead of a width but you can change it to the correct width if you want.They'll both do the same thing.)

    Code:
    <!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">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    .mediumblack{font-weight: normal; font-size: 12px; color: #000000; font-style: normal; font-family: arial; text-decoration: none; line-height: 16px;}
    .clearer{
    height:1px;
    overflow:hidden;
    clear:both;
    margin-top:-1px;
    }
    #outer{
    width: 273px; 
    float: left;
    }
    #basics{
    padding: 8px 0 1px 6px
    }
    #inner{
    padding: 0 6px 0 6px; 
    border-top: 1px solid #8FA7BF; 
    border-bottom: 1px solid #8FA7BF; 
    background-color: #ffffe0;
    }
    /* commented backslash mac hiding hack  \*/ 
    * html #inner{height:1%;} 
    /* end hack */ 
    .left{
    width: 115px; 
    float: left;
    clear:both;
    }
    .divider{
    width: 8px; 
    float: left;
    }
    .right{
    float: left;
    width:138px;
    }
    </style>
    </head>
    <body>
    <div id="outer" class="mediumblack"> 
      <div class="basics"><b>My Basics</b></div>
      <div id="inner"> 
    	<div class="left">Age</div>
    	<div class="divider">:</div>
    	<div class="right">24</div>
    	<div class="left">Marital Status</div>
    	<div class="divider">:</div>
    	<div class="right">Never Married before nowo</div>
    	<div class="left">Marital Status</div>
    	<div class="divider">:</div>
    	<div class="right">Never Married before nowi</div>
    	<div class="left">Special Cases</div>
    	<div class="divider">:</div>
    	<div class="right">Physically challenged from birth</div>
    	<div class="clearer"></div>
      </div>
      <br class="clearer" />
    </div>
    </body>
    </html>
    Oh and I got rid of the inline styles because I dislike them (even in examples ).

    Paul

  4. #4
    SitePoint Member raj77's Avatar
    Join Date
    May 2004
    Location
    Mumbai
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a ton Paul!!
    Your suggestion was really helpful. Its so amazin, small things like these make hell lots a differnce.

    Regards...


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
  •