Hi folks

I'm trying to get the link colour round the 3 images at the foot of the page to look the same. The colour is correct in Firefox (white) but in IE7 it is purple.

Thanks

Browser: IE7

The link you provided with this post is different than your last post. I assume that it is a test page of some kind. I can't get it to connect to anywhere. I tried several mutations of the URL but nothing worked. Did you figure out your problem and move it? Or is there an error in the link?

Browser: Firefox, Netscape, Sea Monkey, Internet Explorer, .....

OS: Solaris (Sparc,x86), Linux, XP

Sorry Philo

My mistake, it was a wrong link. The proper one is
http://www.blackhorsekawasaki.com/index1.html

Thank-you

Browser: IE7

Would it be possible to do it in the back end of the site once the links are up?

Can anyone please assist?
New page is http://www.blackhorsekawasaki.com/index.html

Browser: IE7

I only see a box around the first two photos and the colour is purple in every browser I look it. It is set that way in your style.css file and would need to be changed there.

Sorry this took so long. I don't get very much time to answer questions lately.

First let me describe what I see and list some of my assumptions. I am using Firefox 3.6 and IE 7 for browsers. And, I am working with a copy of your page that I made when you first posted the link. If you have changed it, there may be some differences between what I have and what you have. However, that shouldn't affect the fix. It took a lot longer to clean up the code and write the explanation, than it did to actually find and fix the problems.

To make it easier to see some of the changes I made, I uploaded the original and fixed pages to one of my web sites. They can be accessed through these links -Original Blackhorse Test Page and New Blackhorse Test Page.

With Firefox, I see linked images on the left and at the bottom. The images on the left do not have boarders around them, until the cursor is hovering over them. The images at the bottom, except for the one one on the right, have white-ish borders (#fdb1fd) that change slightly (#fdfdfd), when the cursor is hovering over them.

With IE, all of the linked images have a blue border around them, except for the one on the bottom right. The borders do not change when the cursor is hovering over them.

A slight oddity with the linked image in the upper left is, the hover border color (#383838) is different than the other linked images {#000000} on the left. This issue is due to a small error in the style sheet. The style looks like the following code.


But it should look like the following code. Note the "ul" that I added to the "#extraContent" hover definition. Changing this will let all of the linked images have the same border color when the cursor is hovering.


The issue with the image at the bottom right is pretty straight forward. The image simply is not wrapped in a link. The code for the images looks like the following. It's a bit messy, which sort of hides the problem.


Below is the same code, cleaned up and set to link all the images correctly. The link URL for the third image may be incorrect. I didn't know what it should be, so I made it up. It could be done better, but it works as-is.


The borders, and why they don't act the same in all browsers, is a slightly different issue.

With IE, I don't see anything but a bright blue border around any of the images. This seems to be due to a standards compliance issue, and a little misconception. When you wrap a image in a link, the default behaviour is to put a border around the image. To turn this off, you can set the "image" border, in your CSS, to "0". Note that, you manage this from the "image" tag, not the link tag.

This also holds true if you want to turn the border on/off, or change it. The best approach is to manipulating the "image" tag properties, not the link properties. Firefox will let you do it from either the "image" tag or the link tag, but some versions of IE will not. Therefore, if you want it to work the same, do it with a method that works for both.

The CSS code below, will make the image borders operate the same in Firefox and IE. The code initially sets the link background to transparent. It then defines that, the image within the link will have a green border. A cursor hover would change the image border to red. I used bold colors simply for visibility. Change them to suite your needs.


Will this cause a issue with linked images that you don't want to have the border change? Yes. But that's relatively easy to handle on a case by case basis. Just add a "border:0;" style definition directly to the image you don't want a border on. I'm not going to list the original code. It's a bit messy and hard to follow. But the code below shows how you should do the images and links for your "Contact Details" and "Team Guestbook".

First, this code needs to be added to your style sheet. For the most part, your using "span" for grouping everything. I think that's an editor issue. The correct way is to use a paragraph tag. This code sets the coloring to match your page.


Then use this code for your "Contact Details" and "Team Guestbook". The border is turned off and a small margin is added, to space the text away from the image.


You may have to adjust some of the image references. I used a local folder named "index1_files" to store the CSS and images. That will probably be different on your web site.

Browser: Firefox, Netscape, Sea Monkey, Internet Explorer, .....

OS: Solaris (Sparc,x86), Linux, XP

Thank-you Philo for your valued assistance.
Much appreciated

Browser: IE7