Grow your CSS skills. Land your dream job.

Text is going outside and I don’t know why

  • # July 17, 2008 at 5:32 pm

    Here’s the site: http://stuckpixelstudio.com/clients/pay … clips.html

    On the last item, the text is going outside the box that is containing it. I have that text in a span so does that have anything to do with it?

    HTML:

    Code:

    Mounting Clips

    Polypropylene material. Standard white. Also available in black.

    PPC-202
    Single Super clip. Extra strong clip that provides very firm support for membrane housing. Requires strong hand to mount housing. Fits 2.375″ cylinder.
    PPC-204
    Single clip. Mounts water saver shut off valve or an inline filter to a flat surface. Fits 1.91″ OD cylinder.
    PPC-212
    Single clip. Standard clip for mounting membrane housings. Provides firm support as well as easy placement of the membrane housing. Two holes for 1/4″ tubing. Fits 2.375″ cylinder.

    CSS:

    Code:
    body {
    margin:0px; padding:0px;
    font-family:Helvetica, Arial, sans-serif;
    }

    .header {
    background:url(images/header.jpg);
    width:1000px;
    height:200px;
    min-height:200px;
    margin: 0px;
    padding:0px;
    }

    .navbar {
    background:url(images/navbar.jpg) repeat-x;
    min-height:21px;
    height:21px;
    color:#ffffff;
    }

    .waterdrop {
    background:url(images/test.jpg);
    width:1000px;
    min-height:439px;
    height:439px;

    }

    .hometext {
    position:absolute;
    top:350px;
    left:400px;
    width:586px;
    font-size:22px;
    }

    .contactimage {
    background:url(images/contact.jpg);
    min-height:685px;
    height:685px;
    width:733px;
    color:#ffffff;
    }

    .contactaddress {position:absolute;
    top:250px;
    left:100px;
    }

    .contact {
    color:#ffffff;
    margin-left:100px;
    padding: 30px 0px 0px 0px;
    }

    h1, h2 {display:inline;}

    .column1 { float:left; width:250px; margin-right:30px; margin-left:70px;}
    .column2 { float:right; width:282px; color:#000000;}

    .content {
    background:#cccccc;
    width:500px;
    margin: 0px auto;
    padding: 10px;
    }

    .maindescription {
    width: 750px;
    margin-left:50px;
    margin-top:20px;
    }

    .productbox {
    background-color:#f8f8f8;
    height:150px;
    min-height:150px;
    width:750px;
    border-style:solid;
    border-width:1px;
    margin-left:50px;
    margin-top:10px;
    margin-bottom:0px;
    padding: 0px 10px 0px 0px;
    }

    img.product {position:relative;
    top:6px;
    left:7px;
    float:left;
    }

    .description {
    position:relative;
    top:6px;
    left:22px;
    }

    .enlarge {
    margin-left:105px;
    margin-top:-17px;
    font-size:12px;
    }

    a {color:#333333;
    text-decoration:none;
    }

    #nav, #nav ul{
    margin:0px;
    padding:4px 0px 0px 0px;
    list-style-type:none;
    list-style-position:outside;
    position:relative;
    margin-top:-2px;
    margin-right:10px;
    font-size:12px;
    text-transform:uppercase;
    z-index:1;
    }

    #nav a{
    display:block;
    padding:0px 5px;
    color:#fff;
    text-decoration:none;
    background-color:#b31212;
    }

    #nav a:hover{
    background-color:#fff;
    color:#333;
    }

    #nav li{
    float:left;
    position:relative;
    }

    #nav ul {
    position:absolute;
    display:none;
    width:12em;
    top:1.1em;
    }

    #nav li ul a{
    width:12em;
    height:auto;
    float:left;
    }

    #nav ul ul{
    top:auto;
    }

    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
    display:none;
    }
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
    display:block;
    }

    /*
    Footer
    */
    #footer {
    border-top:1px solid #c0c0c0;
    padding:10px 0px 70px 0px;
    color:#c0c0c0;
    background-color:#001c84;
    font-size:9px;
    text-align: left;
    line-height:20px;

    }
    #footer img {
    float:left;
    margin-right:10px;
    }
    #footer span {
    display:block;
    float:left;
    width:250px;
    margin-left:50px;
    }
    #footer a {
    color:#9e8292;
    text-decoration:none;
    }

    img {border:none;}

    Thanks.

    # July 17, 2008 at 11:48 pm

    all in the box on my pc, using IE7

    Al

    # July 18, 2008 at 1:51 am

    try adding a span rule to your site with a width. that should do it.

    span { width:200px; } //or whatever your width needs to be.

    that should keep it in the box

    # July 18, 2008 at 12:19 pm

    Remove "position: relative" from both your img.product and .description classes. Then style your b and span tags with margin or padding to provide spacing between the borders and the text.

    You might consider taking a step back and redesign your text area to be more semantic. Instead of:

    Code:




    PPC-208

    Double clip. Mounts two inline filters piggyback style. Cylinder sizes are both 1.950″.

    Use:

    Code:

    PPC-208

    Double clip. Mounts two inline filters piggyback style. Cylinder sizes are both 1.950″.

    Since all your images seem to be the same width (150px), start styling those elements with:

    Code:
    .productbox h5 {
    margin-left: 180px;
    }
    .productbox p {
    margin-left: 180px;
    }

    You might also consider using the * { margin: 0px; padding:0; } strategy to reduce confusion when aligning things.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".