CSS

 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me



Go Back   Tutorialized ForumsWeb Design & DevelopmentCSS

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Tutorialized Forums Sponsor:
  #1  
Old November 9th, 2009, 03:24 AM
Spainhighlander Spainhighlander is offline
Registered User
Tutorialized Newbie (0 - 499 posts)
 
Join Date: Dec 2008
Posts: 4 Spainhighlander User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 h 21 m 22 sec
Reputation Power: 0
Image top edges are not level

Greetings in CSS land

Having a bit of a problem with making my rows of images be at the same level at the top.

The CSS sheet (relevant sections included below) uses adapted script from a website (can't remember the name ... but it was ...cooooool !)

The src images are set in standard grid patterns.

Each image has a mouseover behaviour attached to it.

The swapped image causing the problem is an .swf file The problem occurs with gif, png or even jpg's... so I suspect it is a CSS problem)

Now, here is the serious bit ... it does not happen to every single image ... which is really frustrating, of course.

Here is the relevant CSS Script....

.img {
margin-top: 5px;
margin-right: 5px;
border: 2px solid #000000;
margin-left: 5px;
}



.thumbnail {
position: relative;
z-index: 0;
}

.thumbnail:hover {
background-color: #FFFFCC;
z-index: 50;
}

.thumbnail span { /*CSS for enlarged image*/
position: absolute;
padding: 5px;
left: 50px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
caption-side: left;
font-size: medium;
top: -100px;
}



.thumbnail span img { /*CSS for enlarged image*/
border-width: 0;
padding: 0px;
}


.thumbnail:hover span { /*CSS for enlarged image on hover*/
visibility: visible;
left: 185px;
top: -100px;

So ..... anyone got any ideas on what I am doing wrong (setting aside it is a sort of adult site... )


This is an extract of the website, although I am not certain whether it will help or muddy the waters even more ...

<td width="34%" align="center" valign="top"><a class="thumbnail" href="#thumb"><img src="images/library/200PX/B11.jpg" width="200" height="296" align="middle"/><span><!--changes TO this image OR words-->
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="xxxxx" width="400" height="400">
<param name="movie" value="images/library/SWF COLLAGES/b11_swf_400x400collage.swf" />
<param name="quality" value="high" />
<embed src="images/library/SWF COLLAGES/b11_swf_400x400collage.swf" quality="high" pluginspage="xxxxxx" type="application/x-shockwave-flash" width="400" height="400"></embed>
</object>
</span></a><br />
<span class="style7">B11</span><br />
<span class="itemprice"><a href="New Folder/FFT/payment.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('pilloryrollover','','New Folder/FFT/images/Pillory/large350/pillory_large_350_1x.jpg',1)">€</a><a href="New Folder/FFT/payment.html" class="itemprice"> 30</a></span><br />
<span class="style7"> Heel: 4 " <br />
Size: 6 & 6<a href="New Folder/FFT/payment.html" class="style7">˝</a> <br />
Colour: Black Leather <br />
Height: 18" &24 " <br />
Width: 16" & 18 " <br />
Detail: Opens at top back. </span><br />
<form target="paypal" action="xxxxx" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="9217509">
<table width="212">
<tr><td width="204"><div align="center">
<input type="hidden" name="on0" value="UK Shoe Size">
UK Shoe Size</div></td></tr><tr><td><div align="center">
<select name="os0">
<option value="6">6 </option>
<option value="6˝">6˝ </option>
</select>
</div></td>

Fond regards to youall from sunny Spain

Stewart

Reply With Quote
Reply

Viewing: Tutorialized ForumsWeb Design & DevelopmentCSS > Image top edges are not level


Developer Shed Advertisers and Affiliates


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 

Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.

© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap