Div box moving when zooming
I've got this Div slide which makes your div box change to another div box.
The problem is when I zoom in or out, or when Chromes message pops up, the
box where it asks you if you want the webpage translated. I've tried many
things but it still moves :/ I think the problem is with the CSS, but as I
said, I don't know where the problem is :(
Picture of the problem:
http://imageshack.com/scaled/large/801/1xsk.png
CSS:
#wrapper {
width:960px;
height: 750px;
margin-top: 30px;
overflow:hidden;
position:absolute;
}
#mask {
width: 500%;
}
.item {
width:20%;
height:100%;
float:left;
}
.content {
width:100%;
height:750px;
margin:0 auto;
margin-top: 20px;
}
.content a{
color:#F00;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
text-decoration:none; }
.selected {
font-weight:700;
}
.clear {
clear:both;
}
HTML:
<div id="wrapper">
<div id="mask">
<div id="item1" class="item">
<a name="item1"></a>
<div class="content">
<a href="#item1" class="panel"> <img
src="Images/testknapp.png" /> </a>
<a href="#item2" class="panel"> <img
src="Images/testknapp1.png" /> </a>
<table class="album">
<tr>
<td height="130" width="420" class="tdcontent"><span class="volt">
<img src="Images/buy/voltex.jpg" class="voltexpic" /></span> <div
class="toltex"><h2 class="toltexh2">toltex - beliel</h2><p
class="available">available now on itunes & beatport!</p><table
class="toltexitunes"><tr><td class="toltexbuy" width="200"> <a
href="#"> <img src="Images/knapp.png" class="toltexitunesbutton"
/></a> </span></td><td class="toltexbuy"><a
href="http://www.beatport.com/release/beliel/1094237"> <img
src="Images/knapp_beatport.png" class="toltexbutton" />
</td></tr></table></div></td>
<td height="130" width="420" class="tdcontent"><span class="volt">
<img src="Images/buy/noize.jpg" class="noizepic" /></span> <div
class="toltex"><h2 class="noizeh2">noize - nothing special</h2><p
class="available">available now on itunes & beatport!</p><table
class="noizeitunes" height="30"><tr><td class="noizebuy"> <a
href="#"> <img src="Images/knapp.png" class="noizeitunesbutton" /></a>
</td><td class="noizebuy"><a href="#"> <img
src="Images/knapp_beatport.png" class="noizebeatportbutton" />
</td></tr></table></div></span> </td>
</tr>
<tr>
<td height="130" width="420" class="tdcontent"><span class="volt">
<img src="Images/buy/dubwood.jpg" class="dubwood" /></span> <div
class="toltex"><h2 class="dubwoodh2">Dubwood - Beatz for
streetz</h2><p class="available">available now on itunes &
beatport!</p><table class="dubwooditunes"><tr><td class="dubwoodbuy">
<a
href="https://itunes.apple.com/us/album/epic-whatever/id653499598?i=653499730&ign-mpt=uo%3D4">
<img src="Images/knapp.png" class="dubwooditunes" /></a> </td><td
class="dubwoodbuy"><a
href="http://www.beatport.com/release/beatz-for-streetz-ep/1098201">
<img src="Images/knapp_beatport.png" class="dubwoodbeatport" /></a>
</td></tr></table>
<td height="130" width="420" class="tdcontent"> <span class="volt">
<img src="Images/buy/metaphix.jpg" class="metaphixpic" /></span> <div
class="toltex"><h2 class="metaphixh2">metaphix - facets</h2><p
class="available">available now on itunes & beatport!</p><table
class="metaphix"><tr><td class="metaphixbuy"> <a
href="https://itunes.apple.com/us/album/facets/id649920953?i=649921004&ign-mpt=uo%3D4">
<img src="Images/knapp.png" class="metaphixitunes" /></a> </td><td
class="metaphixbuy"><a
href="http://www.beatport.com/release/facets/1094445"> <img
src="Images/knapp_beatport.png" class="metaphixbeatport" /></a>
</td></tr></table></td>
</tr>
<tr>
<td height="130" width="420" class="tdcontent"><span class="volt">
<img src="Images/buy/dtsk.jpg" class="voltexpic" /></span> <div
class="toltex"><h2 class="toltexh2">lök - i'm a dtsk lover</h2><p
class="available">available now on itunes & beatport!</p><table
class="toltexitunes"><tr><td class="toltexbuy" width="200"> <a
href="#"> <img src="Images/knapp.png" class="toltexitunesbutton"
/></a> </span></td><td class="toltexbuy"><a
href="http://www.beatport.com/release/beliel/1094237"> <img
src="Images/knapp_beatport.png" class="toltexbutton" />
</td></tr></table></div></td>
<td height="130" width="420" class="tdcontent"><span class="volt">
<img src="Images/buy/strobe.jpg" class="noizepic" /></span> <div
class="toltex"><h2 class="noizeh2">toltex - strobe</h2><p
class="available">available now on itunes & beatport!</p><table
class="noizeitunes" height="30"><tr><td class="noizebuy"> <a
href="#"> <img src="Images/knapp.png" class="noizeitunesbutton" /></a>
</td><td class="noizebuy"><a href="#"> <img
src="Images/knapp_beatport.png" class="noizebeatportbutton" />
</td></tr></table></div></span> </td>
</tr>
<tr>
<td height="130" width="420" class="tdcontent"><span class="volt">
<img src="Images/buy/gohard.jpg" class="dubwood" /></span> <div
class="toltex"><h2 class="dubwoodh2">Toltex - go hard</h2><p
class="available">available now on itunes & beatport!</p></br><table
class="dubwooditunes"><tr><td class="dubwoodbuy"> <a
href="https://itunes.apple.com/us/album/epic-whatever/id653499598?i=653499730&ign-mpt=uo%3D4">
<img src="Images/knapp.png" class="dubwooditunes" /></a> </td><td
class="dubwoodbuy"><a
href="http://www.beatport.com/release/beatz-for-streetz-ep/1098201">
<img src="Images/knapp_beatport.png" class="dubwoodbeatport" /></a>
</td></tr></table>
<td height="130" width="420" class="tdcontent"> <span class="volt">
<img src="Images/buy/ineedu.jpg" class="metaphixpic" /></span> <div
class="toltex"><h2 class="metaphixh2">crypehead - i need u</h2><p
class="available">available now on itunes & beatport!</p><table
class="metaphix"><tr><td class="metaphixbuy"> <a
href="https://itunes.apple.com/us/album/facets/id649920953?i=649921004&ign-mpt=uo%3D4">
<img src="Images/knapp.png" class="metaphixitunes" /></a> </td><td
class="metaphixbuy"><a
href="http://www.beatport.com/release/facets/1094445"> <img
src="Images/knapp_beatport.png" class="metaphixbeatport" /></a>
</td></tr></table></td>
</tr>
</table>
</div>
</div>
<div id="item2" class="item">
<a name="item2"></a>
<div class="content">
<a href="#item1" class="panel"> <img src="Images/testknapp1.png"
/></a>
<a href="#item2" class="panel"> <img src="Images/testknapp.png" />
</a>
<table class="album">
<tr>
<td height="130" width="420" class="tdcontent"><span class="volt">
<img src="Images/buy/rewind.jpg" class="voltexpic" /></span> <div
class="toltex"><h2 class="toltexh2">toltex - rewind</h2><p
class="available">available now on itunes & beatport!</p><table
class="toltexitunes"><tr><td class="toltexbuy" width="200"> <a
href="#"> <img src="Images/knapp.png" class="toltexitunesbutton"
/></a> </span></td><td class="toltexbuy"><a
href="http://www.beatport.com/release/beliel/1094237"> <img
src="Images/knapp_beatport.png" class="toltexbutton" />
</td></tr></table></div></td>
<td height="130" width="420" class="tdcontent"><span class="volt">
<img src="Images/buy/killerkraut.jpg" class="voltexpic" /></span> <div
class="toltex"><h2 class="toltexh2">killerkraut - time to get
rollin'</h2><p class="available">available now on itunes &
beatport!</p><table class="killerkrauttable"><tr><td class="toltexbuy"
width="200"> <a href="#"> <img src="Images/knapp.png"
class="toltexitunesbutton" /></a> </span></td><td class="toltexbuy"><a
href="http://www.beatport.com/release/beliel/1094237"> <img
src="Images/knapp_beatport.png" class="toltexbutton" />
</td></tr></table></div></td>
</tr>
<tr>
<td height="130" width="420" class="tdcontent"><span class="volt">
<img src="Images/buy/harbinger.jpg" class="voltexpic" /></span> <div
class="toltex"><h2 class="toltexh2">oskri - harbinger</h2><p
class="available">available now on itunes & beatport!</p><table
class="toltexitunes"><tr><td class="toltexbuy" width="200"> <a
href="#"> <img src="Images/knapp.png" class="toltexitunesbutton"
/></a> </span></td><td class="toltexbuy"><a
href="http://www.beatport.com/release/beliel/1094237"> <img
src="Images/knapp_beatport.png" class="toltexbutton" />
</td></tr></table></div></td>
<td height="130" width="420" class="tdcontent"><span class="volt">
<img src="Images/buy/philosophy.jpg" class="voltexpic" /></span> <div
class="toltex"><h2 class="toltexh2">dubtheraphy - philosophy</h2><p
class="available">available now on itunes & beatport!</p><table
class="philosophy"><tr><td class="toltexbuy" width="200"> <a href="#">
<img src="Images/knapp.png" class="toltexitunesbutton" /></a>
</span></td><td class="toltexbuy"><a
href="http://www.beatport.com/release/philosophy/1118970"> <img
src="Images/knapp_beatport.png" class="toltexbutton" />
</td></tr></table></div></td>
</tr>
<tr>
<td height="130" width="420" class="tdcontent"><span class="volt">
<img src="Images/buy/anditgoes.jpg" class="voltexpic" /></span> <div
class="toltex"><h2 class="toltexh2">crypehead - and it goes (like
this)</h2><p class="available">available now on itunes &
beatport!</p><table class="philosophy"><tr><td class="toltexbuy"
width="200"> <a href="#"> <img src="Images/knapp.png"
class="toltexitunesbutton" /></a> </span></td><td class="toltexbuy"><a
href="http://www.beatport.com/release/and-it-goes-like-this/1114352">
<img src="Images/knapp_beatport.png" class="toltexbutton" />
</td></tr></table></div></td>
</tr>
</table>
</div>
</div>
</div>
Do any of you have any idea what the problem could be? :)
No comments:
Post a Comment