PDA

View Full Version : Resolved href is jumping when clicked



NapaStyle
Mar 14th, 2009, 10:41 PM
Hi, please help. I'm not sure if I've set this up the best way but, when you click on the href text on my page here, (redacted URL), such as "Custom Zip Hoodie", "Custom Skinny Sweats", etc, the text jumps.

Here is my CSS:


body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #9191c1;
}
body {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
background-color: #9f9fcd;
background-image: url(../images/bg.gif);
background-repeat: repeat;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

A:link {
text-decoration: none;
color: #F582FF;
font-weight:bold;
}
A:visited {
text-decoration: none;
color: #F582FF;
font-weight:bold;
}
A:active {
text-decoration: none;
color: #F582FF;
font-weight:bold;
float: left;
}
A:hover {
text-decoration: underline;
color: #CD82FF;
font-weight:bold;
}

#tink_header {
margin:0px auto;
}

.headline {
font-size: 24px;
font-weight: bold;
text-align: center;
color:#D68BE9;
padding:8px;
}


#tink_page {
margin: 0px auto;
position: relative;
width: 948px;
}



#tink_content_wrapper {
margin: 0px auto;
background-image:url(../images/content-bg.gif);
background-repeat: repeat-y;
background-position: center;
position: relative;
width:948px;
}


#window_bg {
margin: 0px auto;
padding:0px;
background-image:url(../images/window_bg.gif);
background-repeat: repeat-y;
background-position: center;
position: relative;
width:690px;
}

#window_top {
margin: 0px auto;
padding:0px;
background-image:url(../images/window_top.gif);
background-repeat: no-repeat;
background-position: top;
position: relative;
}


#window_bottom {
margin: 0px auto;
padding:0px;
background-image:url(../images/window_bottom.gif);
background-repeat: no-repeat;
background-position: bottom;
position: relative;
}

#window_content {
margin: 0px;
padding-top:10px;
padding-left:40px;
padding-right:40px;
padding-bottom:40px;
position: relative;
}

#tink_footer {
margin: 0px auto;
background-image:url(../images/footerfixed.gif);
background-position: center;
background-repeat: no-repeat;
position: relative;
width: 948px;
height: 200px;
z-index: 0;
}

#workshopleft {
text-align: center;
width: 200px;
float: left;
margin-left: 200px;
}

#workshopright {
text-align: center;
width: 200px;
float: right;
margin-right: 200px;
}


And my HTML for the page:


<!-- START CONTENT //-->

<br />
<div id="window_bg">
<div id="window_top">
<div id="window_bottom">
<div id="window_content">
<div class="headline"> <br /> </div>
<div align="center"> <br />text </div>
</div>
</div>
</div>
</div>
<br />
<tr>
<div id="workshopleft">
<p> <img src="images/sitehoodiethumb.jpg" /> <br /> <a href="hoodie.php">Custom Zip Hoodie</a> <br />$0.00</p>
<p> <img src="images/sitebottomsthumb.jpg" /> <br /> <a href="bottoms.php">Custom Bootleg Sweats</a> <br />$0.00</p>
</div>
<div id="workshopright">
<p> <img src="images/siteskinnythumb.jpg" /> <br /> <a href="skinny.php">Custom Skinny Sweats</a> <br />$0.00</p>
<p> <img src="images/siteshortsthumb.jpg" /> <br /> <a href="shorts.php">Custom Shorts</a> <br />$0.00</p>
</div>
</tr>
<!-- END CONTENT //-->


Any help with this would be much appreciated. I have been literally been Googling for HOURS. :confused:

Excavator
Mar 14th, 2009, 10:59 PM
Hello NapaStyle,
You have a float:left; on your :active attribute.


A:active {
text-decoration: none;
color: #F582FF;
font-weight:bold;
float: left;
}

delete that bit in red.


Also, your attribute order is wrong. It should be link,visited,hover,active. It really only makes a difference when there is different styling on each one but there is an order for them. LoVe/HAte is a good way to remember it.

Yours, since there is not a lot of differenence between them all, can be condensed like this-

a:link,
a:visited,
a:active {
text-decoration: none;
color: #F582FF;
font-weight:bold;
}
a:hover {
text-decoration: underline;
color: #CD82FF;
font-weight:bold;
}

NapaStyle
Mar 15th, 2009, 10:51 PM
Thank you so much! It was right under my nose. :) And thanks, as well, for the tip on the attribute order. I appreciate it!