SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image goes outside the content div [Solved]

    Hello everybody,

    I'm having a problem here. I don't if what I'm seeing is causing this behaviour but I can't seem to clear the description of a photograph. I want it to be at the bottom of the image but it displays at the right side. I'm following one of the first examples in the Art and Sice of CSS book. Is it possible to make the div contain everything automatically without setting an specific height?. And also, if I do that, the clear property still does not work!. . Here's a screen shot of the visual aids property of dreamweaver and the code as well. Oh, it behaves the same way in firefox 3 and internet explorer! . Thank you very much for your time!



    HTML Code

    Code:
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN"
      “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
      lang="en">
    <head>
    <title>Photo Gallery</title>
    <meta http-equiv="Content-Type" content="text/html;
      charset=utf-8" />
    <link type="text/css" href="style.css" rel="stylesheet" />
    </head>
    <body>
    <div id="content">
     <h1><a href="#">Photos</a> &raquo; <a href="#">Album:
       <em>London, England Dateless</em></a> &raquo;   </h1>
       
       <p class="photo"><a href="#"><img alt="Big Ben" src="images/image01.jpg" /></a></p>
       <p class="desc">Walking towards Big Ben</p>
       
       </div>
       </body>
       </html>

    CSS Code:

    Code:
    body {
    
    margin: 0;
    padding: 0;
    font: 62%/1.7em "New Times Roman", serif;
    color: #4d4d4d;
    
    }
    
    a:link, a {
    border-bottom: 1px dotted #960;
    text-decoration: none;
    color: #960;
    }
    
    a:hover {
    
    border-bottom: solid 1px #960;
    
    }
    
    h1 {
    
    margin: 0 6px;
    padding: 0 0 .5em 0;
    font-style: italic;
    font-weight: normal;
    font-size: 1.25em;
    line-height: 2.375em;
    color: #ccc;
    
    }
    
    h1 em {
    color: #4d4d4d;
    }
    
    h1 a:link, h1 a, h1 a:hover, h1 a em, h1 a:link em, h1 a:hover em{
    border-color: #999;
    color: #999;
    }
    
    p, ul{
    margin: 0 6px;
    padding: 0px;
    
    }
    
    img {
    display: block;
    margin: 0px 0px 5px px;
    border: 1px solid #ccc;
    border-bottom-color: #eee;
    border-left-color: #ddd;
    border-top-color: #bbb;
    
    }
    
    p .photo {
    
    padding: 0 0 10px 0;
    float: left;
    width: 75%;
    text-align: center;
    background-color: #fff;
    line-height: 1em;
    
    }
    
    p.photo a {
    display: block;
    float: left;
    margin: 0px;
    padding: 4px 4px 9px 4px;
    border: 1px solid #ccc;
    border-bottom-color: #bbb;
    border-right-color: #ddd;
    border-top-color: #eee;
    background-color: #fff;
    text-align: center;
    }
    
    p .photo a:hover {
    border-color: #ccc;
    background-color: #eee;
    }
    
    p .desc {
    clear: left;
    }
    
    #content {
    
    margin: 0px 0px 0px 10px;
    padding: 5px 0 0 0;
    width: 512px;
    background-color: #fff;
    font-size: 1.25em;
    line-height: 1.25em;
    overflow: hidden;
    
    }
    Thanks again!
    Last edited by Marshallin; Jan 16, 2009 at 16:24. Reason: Problem is solved

  2. #2
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    #content { overflow:hidden; width:somevalue; }

    width triggers hasLayout in IE, and overflow makes modern browsers contain floats.
    Cross browser css bugs

    Dan Schulz you will be missed

  3. #3
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SoulScratch View Post
    #content { overflow:hidden; width:somevalue; }

    width triggers hasLayout in IE, and overflow makes modern browsers contain floats.
    Thank you for your fast reply!. I researched hasLayout and I'm a bit confused. Like you said width and height triggers the hasLayout in IE. If I understand correctly assigning either width, height, float, display or zoom to #content should fix the issue but it's not working for me . Maybe I misunderstood what you said. Could you clarify this for me?. Thanks a lot!

  4. #4
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try a hard refresh ( ctrl f5 ). Try adding a bg color on #content/container incase you're not seeing it correctly or are referring to another element.
    Cross browser css bugs

    Dan Schulz you will be missed

  5. #5
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SoulScratch View Post
    Try a hard refresh ( ctrl f5 ). Try adding a bg color on #content/container incase you're not seeing it correctly or are referring to another element.

    I tried the hard refresh and adding the bg to the content. It seems I'm referring to the element I want. Still, it is not working. This is driving me insane, what am I doing wrong?

  6. #6
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you validate html/css? Live demo? Looking at old copy of page? Typo?
    Cross browser css bugs

    Dan Schulz you will be missed

  7. #7
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SoulScratch View Post
    Did you validate html/css? Live demo? Looking at old copy of page? Typo?
    Thanks for the reply again!. Finally I was able to solve it. It's kinda embarrasing really but here it goes:

    The problem was here,

    p.desc { }

    There was a space between the p and the dot. It's strange really since the other class is being affected by the CSS whether or not there's a space.

    Thanks for your help SoulScratch!


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
  •