Forum Moderators: not2easy
The index link classes are generated dynamically so that the class of the link for the current page becomes .i-link-here. All others are .i-link. The only difference should be a change in colours.
In Opera, when I click a link (which changes the class to i-link-here) the height of that link increases by a pixel or two, and the previously-clicked link reverts to its former height. It doesn't happen on the top two links but on the third and subsequent links.
Have odd effects with complex CSS been seen before in Opera?
I have included the Doctype just in case this has something to do with it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head>
<meta http-equiv="Content-Language" content="zh" />
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
CSS
.i-link,.i-link-here{ /* other links share these same styles, omitted here */
display:block;
border:1px solid #000000;
text-decoration:none;
margin:1px 1px 2px 1px;
font-size:92%;
}
.i-link{
padding:2px 0 0 3px;
background-color:#fefcf2;
color:#000000;
}
.i-link-here{
padding:2px 0 0 3px;
background-color:#fefcf2;
color:#ff000a;
}
.i-link:hover,.i-link-here:hover{
color:#ffffff;
background-color:#ff000a;
}
.inail{
width:110px;
height:40px;
margin-bottom:2px;
}
.iguo{
width:40px;
height:40px;
margin-bottom:2px;
}
HTML
(There are 7 links but only 3 shown here)
<a class="i-link" href="domain/page1.php"><img class="inail" src="domain/images/image1a" alt="" /><img class="iguo" src="domain/images/image1b" alt="" /><br />link 1 text<br /></a>
<a class="i-link-here" href="domain/page2.php"><img class="inail" src="domain/images/image2a" alt="" /><img class="iguo" src="domain/images/image2b" alt="" /><br />link 2 text<br /></a>
<a class="i-link" href="domain/page3.php"><img class="inail" src="domain/images/image3a" alt="" /><img class="iguo" src="domain/images/image3b" alt="" /><br />link 3 text<br /></a>
But, I would think the formatting of your links with this additional <br /> might cause some visual issues?
<br />
<a class="i-link" href="domain/page1.php"><img class="inail" src="domain/images/image1a" alt="" /><img class="iguo" src="domain/images/image1b" alt="" />link 1 text[b]<br />[/b]</a>I'd try removing those <br />s that come before the closing </a> just to clean it up a bit and see if that solves the issue. That closing </a> being forced to another line I would think could cause issues with all the various margins and padding you have going on.
I'd also take those opening <br /> and put them outside of the <a href>. But, I can't tell what you're up to forcing those breaks like that.
The bottom margin on the images is to ensure a gap between the images and the text beneath. The text is in Chinese which takes up the full line height.
The margins on the links ensure that there is a gap between adjacent links.
And the padding in the links ensures that the text and the images are clear of the border.
