Web Hosting Forum | Lunarpages
News: July 14, 2008 - New Contest! - Submit Your WordPress Theme Designs, Win BIG!
June 30, 2008 - Submit Your Site for the July 08 Site of the Month Award!
 
*
Welcome, Guest. Please login or register.
Did you miss your activation email?
July 23, 2008, 03:04:15 PM


Login with username, password and session length


Pages: [1]   Go Down
  Print  
Author Topic: CSS for borders around images - diff't displays in diff't browsers  (Read 694 times)
HollyKnott
Space Explorer
***
Offline Offline

Posts: 8


« on: March 12, 2008, 12:44:14 PM »

Many websites talk about using code such as the following to insert borders around images:

<IMG SRC="portfolio/yoga/t_0309.jpg" BORDER=0 style="padding:2px; border:1px solid #999;">

It displays fine in Firefox - I see a medium gray line about 2-3 pixels away from the images on this page:

http://www.hollyknott.com/lori/yoga.htm

Yet when viewed in IE 6.0.2, it displays the gray line butted up against the image, no padding. None of the websites that I found with tutorials on this type of code mentioned browser discrepancies. Am I doing something wrong? I've tried reordering the elements, removing "BORDER=0" - nothing works to get IE to display it the way FF does.

Thanks much!
Logged
V-I-R-U-S
Spaceship Navigator
*****
Offline Offline

Posts: 75


I Love Me


WWW
« Reply #1 on: March 12, 2008, 03:21:54 PM »

Well for one the coding you have

<IMG SRC="portfolio/yoga/t_0309.jpg" BORDER=0 style="padding:2px; border:1px solid #999;">

is pulling 2 border references BORDER=0 and border:1px also remove the style="padding:2px;

You can cotrol border size by simply having border=1 border=2 border=3 ect.if i was using that code I would use

<IMG SRC="portfolio/yoga/t_0309.jpg" BORDER=2 color=#hexvalue>
Logged

HollyKnott
Space Explorer
***
Offline Offline

Posts: 8


« Reply #2 on: March 13, 2008, 04:41:41 AM »

Thanks for your reply. I removed the redundant BORDER=0 but I need the padding tag there - it places the border a few pixels away from the image, like a frame with white space between the image and border. Removing BORDER=0 still makes the border appear against the image in IE, as if IE isn't reading the padding at all. Strange.
Logged
scanman20
Master Jedi
*****
Offline Offline

Posts: 1197



WWW
« Reply #3 on: March 13, 2008, 06:42:58 AM »

You need to use both a proper doctype and proper CSS. Try:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<img src="portfolio/yoga/t_0309.jpg" alt="foo" name="foo" width="200px" height="200px" style="padding:12px;border:1px solid #999" />
</body>
</html>
 
Logged

Even a broken clock is right twice a day.
NotOneBit.com
MCSE - MCSA - MCP
HollyKnott
Space Explorer
***
Offline Offline

Posts: 8


« Reply #4 on: March 16, 2008, 07:21:20 PM »

Thanks! Will try it and see what happens.
Logged
Pages: [1]   Go Up
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.3 | SMF © 2006-2007, Simple Machines LLC
Seo4Smf v0.2 © Webmaster's Talks


Valid XHTML 1.0! Valid CSS! Dilber MC Theme by HarzeM