Problem w/ Border on Top and left side of Image

classic Classic list List threaded Threaded
8 messages Options
Reply | Threaded
Open this post in threaded view
|

Problem w/ Border on Top and left side of Image

pstebbing
I'm having an issue with images once they are displayed. A black border (about 10px) appears on the left and top of the image causing the image to be cut off on the right and bottom.
Shadowbox.css is still set to its defaults.
There is another post with the same issue, but no resolution has been posted.

Any thoughts by the gurus out there?

Reply | Threaded
Open this post in threaded view
|

Re: Problem w/ Border on Top and left side of Image

manfer
Can't you include a link to a page with the problem?
Reply | Threaded
Open this post in threaded view
|

Re: Problem w/ Border on Top and left side of Image

pstebbing
Manfer
Thanks for the reply. It seems that there is something in my website that might be causing this. When I create a blank page and add the same content I do not get the same result. What I'm trying to do seems to be getting more complex and I may need to find someone that not only understands Shadowbox, but jQuery and DreamWeaver. Up for a challenge?
Reply | Threaded
Open this post in threaded view
|

Re: Problem w/ Border on Top and left side of Image

pstebbing
In reply to this post by manfer
Ok. Here is a link to the webpage that I was finally able to get the code straightened out enough to get it online. I'm still having problems withe the Shadowbox border.
Check out the test page here.
Reply | Threaded
Open this post in threaded view
|

Re: Problem w/ Border on Top and left side of Image

dataload

I think you might be overestimating complexity of the issue. You've got this rule in a style block in the head section of your page:

div img {
  display: inline;
  float: left;
  margin: 8px;
}

It's applying 8 pixels of margin around the image in the shadowbox since it's an image inside a div tag.

Reply | Threaded
Open this post in threaded view
|

Re: Problem w/ Border on Top and left side of Image

pstebbing
Ok took out the references for the img margin. That fixed the border issue. I'll have to find another way to space out the thumbnails.
Now the problem is (and was btw) that the "next", "previous" and "close" controls don't show up in shadowbox.
Thoughts?
Reply | Threaded
Open this post in threaded view
|

Re: Problem w/ Border on Top and left side of Image

dataload

If you want to target the thumbnails without affecting all images inside divs then give the div a class and target it with a descendant selector like:

.thumbnails a {margin:8px;}

The missing images are not where the css is looking for them. This is where it thinks they are: http://www.treehousearch.com/TH-test/assets/close.png, but as you can see that gives a 404

Try downloading firebug for firefox or using the dev tools in one of the other browsers like chrome, since these are just CSS issues, nothing to do with shadowbox.

Reply | Threaded
Open this post in threaded view
|

Re: Problem w/ Border on Top and left side of Image

pstebbing
@petemitch

Thanks for the great help.
Later on today when I was able to get back to this I realized that Shadowbox couldn't find the pngs b/c they weren't in the folder and ultimately that was why they weren't loading.
You beat me to it. Kudos.
I'll add the class to the div. That should do the trick.
Also I have to ask do you do websites for work or is this just something of interest for you?
thanks
peter