when i place a certain image (lightnin) above my css buttons, it makes my
buttons inoperable. the buttons work fine, except when the image is overlapping the buttons extended vertical space.
does it have to do with the way my css buttons are displayed?
i’m using IE browser. here’s my code and a url, if you wanna take a look:
[url]http://fatbottoms.atspace.com/zbrindex.html
p.guitar { position:absolute; top: 17px; left:271px }
p.lightnin { position:absolute; top:-24px; left:101px }
.buttons a { margin-left:122px;
color: #0000CC;
border: 4px solid;
background-color: #FFCC00;
font: bold 18px verdana;
text-decoration: none;
border-color: #FFFF00 #CC9900 #CC9900 #FFFF00;
display: block;
width: 105px; margin-top:16px;
padding-top:2px; padding-bottom:2px;
text-align: center; }
.buttons a:hover {
color:#0000FF;
border: 4px ridge;
background-color: #FFCC00;
font: bold 18px verdana;
text-decoration: none;
border-color: #00FFFF;
display: block;
width: 105px;
text-align: center;}
<body>
<div class=”buttons” style=margin-top:302px>
<a title=”home sweet home” href=”brindex.html”>HOME</a>
<a title=”storyline & character desc.” href=”intro.html”>INTRO</a>
<a title=”archives of all the strips” href=”archives.html”>STRIPS</a>
<a title=”merchandise” href=”
<a title=”request a custom drawn strip for yourself” href=”donations.html”>CUSTOM</a>
<a title=”contact” href=”mailto:
</div>
<div class=”globe”><img src=”brorbit1.jpg”></div>
<!–<img style=”position:absolute; top:290px; left:289px” src=”brlogo2.gif”>–>
<p class=”guitar”><img src=”guitarsave1.gif”></p>
<p class=”lightnin”><img src=”lightnin2.gif”></p>