IMAGE with border color change on rollover

HTML & CSS
1

I cant post any code to solve the issue because it says I can’t unless I Have 5 post WTF? How can I get help without posting the html code? This site won’t let me post it.

I have a layout I am designing and it looks great in IE8. The images on the left of the screen have borders and when the mouse cursor hovers over the link it lights up yellow. If you click on the picture you will be taken to the link location.

FIREFOX:
Borders will show up but no links can be clicked except the last two which makes no sense at all. Why would the last two work and light up but not the other 10?

Google Chrome:
No links or borders at all; Just the photos. Nothing at all works with chrome. Nothing is clickable at all.

HTML:

This forum will not allow me to post this code. I am sure this helps a lot to solve the issue which is what the forums are for in the first place.

CSS:
All The pictures are setup like this…

#picture2
{
position: absolute;
text-align: center;
/* width: 96px;
height: 96px; */
float: left;
padding: 57px 0px 0px 110px;
}

float: left;
padding: 57px 0px 0px 110px;
}

a.picture2Link:link { color: green; }
a.picture2Link:visited { color: green; }
a.picture2Link:hover { color: yellow ; }

As I said before it works perfectly in IE8 but the others have problems. What can I do to fix this?

NOTE:
I would post a link to the site but these forums refuse to let me post it so I cannot. Kind of silly since how can anyone see what I am talking about without a link?

2

Here is the link maybe this will work:
http://faroutcomputers.dyndns.biz:8083/Yworlds/Default.aspx

3

Hi, I haven’t even looked at the site but you might want to validate your HTMl and CSS> Just from the snipet alone you have a stray bracket

#picture2
{
position: absolute; 
text-align: center;
/* width: 96px;
height: 96px; */
float: left;
padding: 57px 0px 0px 110px;
}

float: left;
padding: 57px 0px 0px 110px;
}

Also, when you float/absolute position something, the float is ignored. You could remove the float:left’s in there and nothing would happen :slight_smile:

4

First, thanks for pressing on. The system is set up to disallow links until a poster has five posts. That is to discourage spammers and other such folks to come in, create a new identity, and inundate the forum with garbage links. I wasn’t aware that there was a similar limitation on posting code, but you seem to have found a way around that.

Secondly, IE, whether it is 6, 7, or 8, does not present sites properly. Usually a designer will code a site to present properly in Firefox, Chrome, Safari, or Opera, then tackle IE. Your site has serious validation problems – 41 errors, including problems with your doctype. When you have problems such as yours – different browsers choking in different ways – your doctype is often contributing to the problem. Fix the validation problems, starting with a proper HTML or XHTML doctype, and see if the problems resolve themselves. If not, post again and we’ll take another look.

5

Actually his doctype is fine, it is an HTML 5 doctype, though he shouldn’t have the XML declarations hanging between the doctype and <html> :slight_smile:

He is also using deprecated elements, and invalid markup (which has been pointed out)

6

Ryan, you’re correct. I wasn’t specific enough. Sorry for the carelessness!

Also worth noting that Tommy sez don’t use HTML 5 doctypes.

7

There is no reason not to…true it is still in development but it is still a way to trigger quirks mode.

Granted I woudln’t use it on any of my pages (except for demos lol) :slight_smile:

8

Hi Guys thanks for the replies… Here is what the two codes look like.

CSS:

#picture1
{
position: absolute;
text-align: center;
/* width: 96px;
height: 96px; */
float: left;
padding: 10px 0px 0px 10px;
}

a.picture1Link:link { color: green; }
a.picture1Link:visited { color: green; }
a.picture1Link:hover { color: yellow ; }

HTML:
<div id=“picture1”><a class=“picture1Link” href=“Construction.aspx”><img class=“PictureStyle” alt=“Picture1” longdesc=“Picture1” width=“96” height=“96” src=“images/pictures/pic1.png”></a></div>

If you load it in IE8 it works as expected. Load it up in that and you can see what i was going for. How can I get that same thing to work in Google and FIrefox?

9

Again, it would be pointless trying to help you because it could be a simple HTML error :slight_smile:

10

Hi,

Ignoring what the others have said for now (as I’m sure you will fix these errors) the main reason that the link borders are not showing is because you have absolutely placed them all on top of each other so only the last one can be clicked.

You have used padding to move them around instead of positioning which means that they are in effectively the same place and on top of each other.

Just use the coordinates you need and then you will be able to click them.

For IE you need to specify the border on the image and not the color on the anchor as Ie won’t inherit that into the link colour.

The code can be much reduced for that section as follows.


#picture1 {
    position:  absolute;
    text-align: center;
    /* width: 96px;
    height: 96px; 
    float: left;
    padding: 10px 0px 0px 10px;*/
    top:10px;
    left:10px;
}
#picture2 {
    position:  absolute;
    text-align: center;
    /* width: 96px;
    height: 96px; 
    float: left;
    padding: 57px 0px 0px 110px;*/
    top:57px;
    left:110px;
}
#picture3 {
    position:  absolute;
    text-align: center;
    /* width: 96px;
    height: 96px;
    float: left;
    padding: 22px 0px 0px 164px; */
    top:22px;
    left:164px;
}
#picture4 {
    position:  absolute;
    text-align: center;
    /* width: 96px;
    height: 96px; 
    float: left;
    padding: 110px 0px 0px 10px;*/
    top:110px;
    left:10px;
}
#picture5 {
    position:  absolute;
    text-align: center;
    /* width: 96px;
    height: 96px;
    float: left;
    padding: 110px 0px 0px 111px; */
    top:110px;
    left:111px;
}
#picture6 {
    position:  absolute;
    text-align: center;
    /* width: 96px;    
    height: 96px;
    float: left;
    padding: 210px 0px 0px 10px; */
    top:210px;
    left:10px;
}
#picture7 {
    position:  absolute;
    text-align: center;
    /* width: 96px;
    height: 96px;
    float: left;
    padding: 210px 0px 0px 78px; */
    top:210px;
    left:78px;
}
#picture8 {
    position:  absolute;
    text-align: center;
    /* width: 96px;
    height: 96px;
    float: left;
    padding: 192px 0px 0px 174px; */
    top:192px;
    left:174px;
}
#picture9 {
    position:  absolute;
    text-align: center;
    /* width: 96px;
    height: 96px;
    float: left;
    padding: 307px 0px 0px 20px; */
    top:307px;
    left:20px;
}
#picture10 {
    position:  absolute;
    text-align: center;
    /* width: 96px;
    height: 96px; 
    float: left;
    padding: 307px 0px 0px 142px;*/
    top:307px;
    left:142px;
}
#picture11 {
    position:  absolute;
    text-align: center;
    /* width: 96px;
    height: 96px; 
    float: left;
    padding: 428px 0px 0px 37px;*/
    top:428px;
    left:37px;
}
#picture12 {
    position:  absolute;
    text-align: center;
    /* width: 96px;
    height: 96px;
    float: left; */
    /*padding: 408px 0px 0px 141px;*/
    top:408px;
    left:141px;
}
#middle_left_Content img{border:2px solid green}
#middle_left_Content a.picture10Link img,
#middle_left_Content a.picture4Link img{border:2px solid #600}
#middle_left_Content a.picture9Link img,
#middle_left_Content a.picture7Link img{border:2px solid #003}

#middle_left_Content a:hover {visibility:visible}
#middle_left_Content a:hover img{border:2px solid yellow}
/* ------ */

The img border styles are all defined at the end in one go and much simplified.

That should save about 80% of the code you were using.

Those images should really be a list structure to make semantic sense though.

11

Wow that is amazing and works perfectly without touching the HTML in the least. I am looking it over now so that I understand what is going on here and learning. I am programmer but mostly VB and C# .net so getting better at CSS and the frontend part of web development.

Thanks a ton for your help :slight_smile:

12

Paul to the rescue, again…! Belcherman, glad we (okay, Paul) could help. That absolute positioning will drive you crazy. :slight_smile: