Image Borders in HTML - DPChallenge Forums

Nikon AF-S Nikkor 70-200mm f/2.8G ED VR II

12/28/2006 01:32:31 AM · #1

I am currently working on building an online photo album and am stumped. I am using style sheets but IE 7 doesn't display the image borders properly. What am I doing wrong? If you look at it in Firefox it works perfectly.

//www.skylercall.com/hobbies/photography/

Please understand that I am still deep in the design process so you will encounter many broken links and un-finished areas. I am not yet asking for a critique on my pages.

aliqui

Nikon D300s

12/28/2006 01:38:10 AM · #2

What are you wanting the borders to do? You want them off?

12/28/2006 01:41:24 AM · #3

The stylesheets cause links to be black and when you hover your mouse they change to yellow. This works on the textual links in both browsers but the image links are not working this way in IE 7.

Edit: Textual; is that a word? Did I just make that up?

Message edited by author 2006-12-28 01:43:00.

Nikon AF-S Nikkor 70-200mm f/2.8G ED VR II

12/28/2006 02:17:19 AM · #4

Sometimes I think it would just be easier to convert everyone to the Mozilla side!

aliqui

Nikon D300s

12/28/2006 02:34:54 AM · #5

My stylesheet skills are very weak, but I'm playing with a few things. I copied your source to a text file and I noticed that since I don't have your images I get the broken image X which is to be expected. However the "alt" tag inside the broken image is changing colors from black to yellow like you want.

What I'm gathering from that is that your code as it is works. So maybe there's some kind of special code for image borders changing colors and IE isn't as forgiving as Firefox in this case.

That's where I'm at.. and that's where I'm looking at a bunch of website code going crosseyed. I'll figure it out! I swear!

TechnoShroom

Canon EOS-30D

Canon EF 100mm f/2.8 USM Macro

12/28/2006 02:47:09 AM · #6

Originally posted by aliqui:

What I'm gathering from that is that your code as it is works.

Yep, the link is styled but the image is not. Try adding something like this.

img {
border: 2px solid #000000;
}

a img:hover {
border: 2px solid #ffcc00;
}

And while you're at it add a proper DTD so you're not in quirks mode, fix the other code errors, move the script and style into the head where they belong, and tidy up the code by indenting with tabs where appropriate.

EDIT: Also, rather than sprinkling class attributes everywhere you can put everything in a DIV and give it an ID. Then just change the CSS to match.

Message edited by author 2006-12-28 02:51:14.

aliqui

Nikon D300s

Nikon AF-S Nikkor 70-200mm f/2.8G ED VR II

12/28/2006 02:58:41 AM · #7

Originally posted by TechnoShroom:

Originally posted by aliqui:
What I'm gathering from that is that your code as it is works.

Yep, the link is styled but the image is not. Try adding something like this.

img {
border: 2px solid #000000;
}

a img:hover {
border: 2px solid #ffcc00;
}

And while you're at it add a proper DTD so you're not in quirks mode, fix the other code errors, move the script and style into the head where they belong, and tidy up the code by indenting with tabs where appropriate.

EDIT: Also, rather than sprinkling class attributes everywhere you can put everything in a DIV and give it an ID. Then just change the CSS to match.

Yay! Someone that knows what's going on! So does this mean I don't need to embarrass myself by posting the MySpace.com link I found??

Canon EF 100mm f/2.8 USM Macro

12/28/2006 03:05:37 AM · #8

Originally posted by TechnoShroom:

And while you're at it add a proper DTD so you're not in quirks mode, fix the other code errors, move the script and style into the head where they belong, and tidy up the code by indenting with tabs where appropriate.

What does DTD mean?

I prefer not to tab the code in. I know that it can make the code easier to dig through but I have found that it can sometimes add unintentional line breaks.

TechnoShroom

Canon EOS-30D

12/28/2006 03:10:03 AM · #9

DTD = Document Type Declaration

It lets the browser know how to properly render the page. For example if you're writing HTML 4 you could have something like...

I've never experienced tabbing adding unintentional line breaks. If you're using a text editor with line wrapping it might be confusing if you don't turn that feature off.

Message edited by author 2006-12-28 03:10:25.