Results 1 to 6 of 6

Thread: [CSS] problem with div background

  1. #1

    [CSS] problem with div background

    This is what's going on (http://adolfo.losdelacatarina.com/portafolio_final/):



    It's looks good in IE but not in Firefox, so I supposed I'm doing something wrong.

    This is the scheme:

    1) container div
    • top_banner div
    • menu div
    • middle div (the part with shadow below menu)
    • content_area div:
    -content_box div (to give some space at left and right)
    +box with "lorem ipsum"


    The part with the problem is the one cointained in "content_area"
    Code:
    /* CSS Document */
    body {
      text-align: center;
      background:url(images/bg.gif) repeat-x;
      }
    #contenedor{
     margin-left: auto;
     margin-right: auto;
     width: 614px;
    }
    #top_banner {
     width:614px;
     height:130px;
     background-image: url(images/index_02.gif);
    }
    #menu {
     width:614px;
     height:25px;
    }
    #middle {
     width:614px;
     height:16px;
     }
    #content_area {
     width:614px;
     height:auto;
     background:url(images/index_14.gif);
     background-repeat:repeat-y;
     margin:0;
    }
    #content_box {
     margin-left:10px;
     margin-right:10px;
    }
    p {
     font-family:Verdana, Arial, Helvetica, sans-serif;
     font-size:0.8em;
     color:#000000;
    }
    /* inicia caja de texto */
    .box {
     width:302px;  
     padding:0 0 26px 0;     
     background:url("images/box.gif") bottom left no-repeat;
     float:left;
     }
    .box h1 {  
     margin:0;  
     padding:15px 10px 20px 10px;  
     font-size:24px;
     font-style:italic;  
     color:#ffffff;    
     background:url("images/box.gif") top left no-repeat; 
    }
    .box p{  
     margin:0;  
     padding:0 10px 3px;  
     border:1px solid #F70185;  
     border-width:0 5px;
     background:#000;
     color:#FFFFFF;
     font-size:0.8em;
     line-height:1.2em; 
    }
    /* termina caja de texto*/
    .box_ptf{
     width:280px;
     height:150px;
     background:#33CC66;
     float:right;
    }

  2. #2
    ok, I suck at CSS so i can't help you, but ijust wanted to drop a line and say: Beautiful post. It's very rare to see somebody actually post their question offering all the info in an easy to understand way..

    (im bored)


    member #1 of the "XML-is-a-crutch-to-make-people-feel-elite-club"
    K-Emmys-06: Best Quote K-Emmys-06: Flash Genious

  3. #3
    176
    posts
    Registered User
    change your #content_area to:
    Code:
    #content_area {
     width:614px;
     height:auto;
     background:url(images/index_14.gif);
     background-repeat:repeat-y;
     margin:0;
    }
    Don't know what it will do for ya in IE but should fix the FF problem
    PHP Code:
    <zip> echo this; </zip

  4. #4

  5. #5
    Quote Originally Posted by antizip
    change your #content_area to:
    Code:
    #content_area {
     width:614px;
     height:auto;
     background:url(images/index_14.gif);
     background-repeat:repeat-y;
     margin:0;
    }
    Don't know what it will do for ya in IE but should fix the FF problem
    Actually, that's the original code I'm using, antizip

    thebloodpoolkid, I'll read "tomorrow" the article,it's 1.20am and my brain can't process such information but yes, it's the "float" thing that makes this difficult. I just erased the float part and it worked but I'll read the article to avoid more problems later

    Thank you guys!

    I'll try to keep posting the same way, Defective... lol

  6. #6
    176
    posts
    Registered User
    $hit sorry ... i forgot to add the edit
    you need a float:left;

    Code:
    #content_area {
     float:left;
     width:614px;
     height:auto;
     background:url(images/index_14.gif);
     background-repeat:repeat-y;
     margin:0;
    }
    PHP Code:
    <zip> echo this; </zip

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012