Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jul 2008
    Posts
    71
    Thanks
    7
    Thanked 3 Times in 3 Posts

    border not wrapping images correctly

    http://www.mu-guides.com/basics/story/

    Hello, so there are three images on this page. The first one looks fine but the second one down does not "hug" the image and neither does the third.

    Im not sure where to go from here, help please?

    also, i have tried putting the border directly on the img.image and that fixes the problem and creates another. When the border gets thicker it starts to push the image out of the div#page-info.
    Last edited by ch4sethe5un; 08-20-2010 at 01:41 AM.
    If i was of any help, dont forget to click the 'thank' button =]

  • #2
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Post the code, although it looks to me like the border is set to be the width oh the table or div class and not the image.

  • #3
    New Coder
    Join Date
    Jul 2008
    Posts
    71
    Thanks
    7
    Thanked 3 Times in 3 Posts
    If it helps, that is a simplified version of my code.

    Code:
    <div id="content">
    <div id="navi-box2"></div>
    <div id="page-info">
    <p>
    <span class="image-box">
    <img class="image" alt="mu mau5" src="www.blahh.com/images/image.jpg" />
    </span>
    </p>
    </div>
    </div>
    Code:
    #content			{ float:left; width:555px; background-color:#373737;   margin: 10px;  padding:10px; }
    .page #content		{ position:relative; min-height:100px; }
    #page-info			{ margin-top: 60px; }
    .page img.image		{ max-width:100%; }
    .page .image-box		{ border:2px solid #fff; display:block;}
    
    .page #navi-box2		{ background:#252525; width:100%; position:absolute; left:0; margin:10px 0 10px 0; border-style:solid; border-width:1px 0 1px 0; border-top-color: #171717; 
    						border-bottom-color: #474747; }
    If i was of any help, dont forget to click the 'thank' button =]

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I see a 3px border around all 3 images in FF3.6
    Quote Originally Posted by shaunisradd
    Post the code, ....
    The code can be obtained from browser's view source option, after opening the given link.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Jul 2008
    Posts
    71
    Thanks
    7
    Thanked 3 Times in 3 Posts
    html
    Code:
    <div class="image-box">
    <img class="image" alt="mu mau5" src="www.blahh.com/images/image.jpg" />
    </div >
    css
    Code:
    .page img.image		{ max-width:100%; border:3px solid blueViolet; }
    .page .image-box		{ width:549px; text-align:center; }
    I wanted to do it without a calculated width which i got by finding the max width and minusing out the borders on the left and right side. I dont think i can do that though. Here was my end solution.
    If i was of any help, dont forget to click the 'thank' button =]

  • #6
    New Coder
    Join Date
    Jul 2008
    Posts
    71
    Thanks
    7
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by abduraooft View Post
    I see a 3px border around all 3 images in FF3.6
    i think i just changed it when you checked lol
    Quick question: do you know if there is a way to do the borders without a set width on the div.
    If i was of any help, dont forget to click the 'thank' button =]

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Why are you using such a big image, if you just need to show one having a width of just 549px ?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    New Coder
    Join Date
    Jul 2008
    Posts
    71
    Thanks
    7
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by abduraooft View Post
    Why are you using such a big image, if you just need to show one having a width of just 549px ?
    Well that one in particular I am going to make smaller, but it was part of a extreme case test. If the person using the wordpress backend uploads and image WAY too big, then it will accomodate.
    If i was of any help, dont forget to click the 'thank' button =]


  •  

    Posting Permissions

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