...

View Full Version : border not wrapping images correctly



ch4sethe5un
08-20-2010, 02:39 AM
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? :confused:

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.

shaunisradd
08-20-2010, 04:04 AM
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.

ch4sethe5un
08-20-2010, 04:38 AM
If it helps, that is a simplified version of my 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>



#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; }

abduraooft
08-20-2010, 08:39 AM
I see a 3px border around all 3 images in FF3.6

Post the code, .... The code can be obtained from browser's view source option, after opening the given link.

ch4sethe5un
08-20-2010, 08:40 AM
html


<div class="image-box">
<img class="image" alt="mu mau5" src="www.blahh.com/images/image.jpg" />
</div >

css


.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.

ch4sethe5un
08-20-2010, 08:41 AM
I see a 3px border around all 3 images in FF3.6

:D 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.

abduraooft
08-20-2010, 08:45 AM
Why are you using such a big image (http://www.mu-guides.com/wp-content/uploads/2010/08/20100520TKI6AA60930O03J7.jpg), if you just need to show one having a width of just 549px ?

ch4sethe5un
08-20-2010, 08:47 AM
Why are you using such a big image (http://www.mu-guides.com/wp-content/uploads/2010/08/20100520TKI6AA60930O03J7.jpg), 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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum