links changing positioning at active stage

[kingkol]

hi,
I have 4images,linked to different pages of the site.Hover position is fine, but moment i clicked it the picture goes below vertically.Please help me to solve this problem.

Thanks in advance
kingkol

[swa66]

The relevant bit of the CSS might be helpful in seeing the problem.

Just a guess: you're styling a
#whatever a:link
#whatever a:visited
#whatever a:hover
and
#whatever a:active

and are not styling the
#whatever a
itself ?

In that case you need to repeat all the common stuff in each of the states (or move them out of there and into the "#whatever a" and just override what needs to change in the different states.

Very misunderstood area of CSS.

[kingkol]

At first I didn't apply any style in links.But link was taking a blue border around the image and some padding/margin.So I gave style to links and images. my codes are -

<div class= "home_content">

<img src="images/product_titilebar.png" width="476" height="32" />

<div class="product_name">FEATURED PRODUCT</div>

<img src="images/spacer.gif" width="476" height="20" />

<div class="featured_product">
<a href="enterprise_pbx.html"><img src="images/fp_01.png" width="229" height="183" /></a>
<a href="dome_camera.html"><img src="images/fp_02.png" width="229" height="183" /></a>
<a href="access_control.html"><img src="images/fp_03.png" width="229" height="183" /></a>
<a href="set_top.html"><img src="images/fp_04.png" width="229" height="183" /></a>
</div><!--featured_product-->
</div><!-- home_content>

.home_content {
margin: 0px;
padding: 0px;
float: right;
width: 476px;
border: 1px solid #666;
background-color: #FFF;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #000;
font-weight: normal;
line-height: 20px;
}

.product_name {
position: absolute;
height: 19px;
width: 228px;
left: 417px;
top: 238px;
font-size: 16px;
color: #333;
text-align: left;
font-weight: bold;
}

.featured_product {
margin: 0px;
padding: 0px;
width: 458px;
}
.featured_product img {
float: left;
}
.featured_product a img {
margin: 0px;
padding: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

[D_Blackwell]

and are not styling the
#whatever a
itself ?

I see it often enough, but have never understood the need or use for a:link. Presumably it has some practical use, but have always simply used:

a {
a:visited {
a:hover {
and sometimes a:active { - though can't say much for its practical use. It is activated for the length of the click. How many people notice; and its gone when they let go of the button.
..................................

1) I'm not seeing anything in the sample to make the images jump. I started by adding a DTD and validating the markup. The DTD is the first thing that I would look at.

2) The only big potential problem that I see is the absolute positioning of .productname. The rendering of the page becomes dependent on the viewport size. It does not do well in anything smaller than a large viewport area. Narrow your window and take a look.

3) Might consider shorthand on the font in .homecontent. Makes no functional difference, but a lot easier to work with IMO.
{font: normal 12px/20px Verdana, Geneva, sans-serif;}

4) Same with .featured_product a img
{border: none;} is a whole lot simpler.

5)</div><!-- home_content>
Closing comment is missing.

[kingkol]

Thank you for reply.
I found the problem.Once I used a:link,a:visited,a:active in a different class. and this class links were targeted by that class.I just removed the ":link,a:visited,a:active" from that style name and this class is working fine.I am not very sure why that was happening,but probably because i explicitly applied a:link,a:visited,a:active to a different class so all links (even from different classes)were expecting a:link,a:visited,a:active.Is this the case?

[D_Blackwell]

Hard to tell for sure, but sounds like you removed a conflicting and over-riding declaration. This would have freed up the problem links to work correctly.

[swa66]

I think I got it on rereading kingkol's last message:
if you use something like:

.foobar a:link, a:visited, a:hover, a:link { /* settings */ }

The settings get applied to:
.foobar a:link
a:visited
a:hover
a:link

not
.foobar a:link
.foobar a:visited
.foobar a:hover
.foobar a:link

for which you have to repeat it in the selector.