Jump to content

Safari Problem With Thumbnails


Mystermeat
 Share

Recommended Posts

Hello, I am new to the board and css and (x)html.a problem i am having on a website i am creating with thumbnails.in firefox my list of 6 thumbnails goes vertically down the left of the page my code is div.thumbnails{position: absolute;clear: left;margin-left: 5px;margin-top: 20px;padding: 5px;z-index: 1;}they look great in firefox but when i open the page in safari the thumbnails all go horizontally across the top is there some line of code i need to add or remove to make thumbnails work correct in safari?Thanks for any help

Link to comment
Share on other sites

Better post the relevant HTML and the CSS that controls the images themselves. Is there a reason you define that div with position: absolute ?
hi thank you for your response.the html code for the thumbnails is <div id="thumbnails"><img class="thumb"<a href="/"images/thumbnails/thumb1.jpg"/></a><img class="thumb"<a href="/"images/thumbnails/thumb2.jpg"/></a><img class="thumb"<a href="/"images/thumbnails/thumb3.jpg"/></a><img class="thumb"<a href="/"images/thumbnails/thumb4.jpg"/></a><img class="thumb"<a href="/"images/thumbnails/thumb5.jpg"/></a><img class="thumb"<a href="/"images/thumbnails/thumb6.jpg"/></a></div>the css for the thumbnails themselves is img.thumb{display: block;padding: 5px;}I took out the position: absolute also was not needed.
Link to comment
Share on other sites

Hmm. You got a little confused.This will work:<img class="thumb" src="images/thumbnails/thumb1.jpg">If you want a link, you'll need to supply more info:<a href="something.jpg"><img class="thumb" src="images/thumbnails/thumb1.jpg"></a>If you do it this way, the appearance may turn out fine, but it would be more correct to give the <a> elements a display:block property in CSS, which you could do like this:#thumbnails a {display:block}Otherwise, you'd be nesting a block item insides a line item, and that could break, now or in the future.

Link to comment
Share on other sites

hi thank you for your response.the html code for the thumbnails is <div id="thumbnails"><img class="thumb"<a href="/"images/thumbnails/thumb1.jpg"/></a><img class="thumb"<a href="/"images/thumbnails/thumb2.jpg"/></a><img class="thumb"<a href="/"images/thumbnails/thumb3.jpg"/></a><img class="thumb"<a href="/"images/thumbnails/thumb4.jpg"/></a><img class="thumb"<a href="/"images/thumbnails/thumb5.jpg"/></a><img class="thumb"<a href="/"images/thumbnails/thumb6.jpg"/></a></div>the css for the thumbnails themselves is img.thumb{display: block;padding: 5px;}I took out the position: absolute also was not needed.
You don't want to escape the quote. ("/"image) should be ("image).By making it block, you will get the vertical images you wanted. It should be that way in all browsers. Could we see a link to investigate further?
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...