Jump to content


Photo

Links and image borders


  • Please log in to reply
5 replies to this topic

#1 mattachoo

mattachoo
  • Members
  • PipPip
  • Member
  • 21 posts

Posted 26 July 2006 - 07:05 PM

This is pissing me off so much.  I have a client who wants an image of the week.  No problem with that, but the border in IE doesn't come out right.  It is that stupid blue border.  Mozilla works fine. 

This is what I have so far:
/* CSS Document */
body {
	background-color: #000000;
}
.style2 {
	font-size: 10px;
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
}
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
}
a {
	font-size: 10px;
	color: #FF0000;
}
a:link {
	text-decoration: none;
	color: #FF0000;
}
a:visited {
	text-decoration: none;
	color: #990000;
}
a:hover {
	text-decoration: none;
	color: #FF0000;
}
a:active {
	text-decoration: none;
	color: #FF0000;
}

/*a.band:link img{border-color: #FF0000; border-width:2px ; border: solid;}
a.band:visited img{border-color: #990000; border-width:2px ; border: solid;}
a.band:hover img{border-color: #FF0000; border-width:2px ; border: solid;}
a.band:active img{border-color: #FF0000; border-width:2px ; border: solid;}*/

a.band img{border-width:2px ;border-style: solid;}

The commented stuff was me trying to figure out how to make it work.  This is how it is now, and it works in Mozilla, but not Internet Explorer. 

Here is the code in the PHP file (the .... stuff isn't in the file, I wrote that to show that I'm not showing you the whole file):
.....THE CSS STYLESHEET......
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
.....other code.....

.....now php code....
<?
  $imageq = mysql_query('SELECT * FROM `image_of_week` WHERE `id` = 1 LIMIT 0, 1') or die(mysql_error());
	
	$row = mysql_fetch_row($imageq);
	
	echo'
  <a class="band" href="'.$row[1].'" target="_blank"><img src="resize.php?id='.$row[1].'"><br>
      <br>
  CLICK FOR FULL IMAGE </a>';
  
  ?>


Don't worry too much about the php code, that all works.  The resize.php simply resize the images width and height.  I'm so stuck right now.  Please help, thank you.



#2 cmgmyr

cmgmyr
  • Members
  • PipPipPip
  • Advanced Member
  • 1,278 posts
  • LocationUSA

Posted 26 July 2006 - 08:08 PM

try changing it to: (.band a img)

-Chris

#3 nogray

nogray
  • Members
  • PipPipPip
  • Advanced Member
  • 930 posts
  • LocationSan Francisco CA

Posted 26 July 2006 - 09:55 PM

you gotta set the border property to 0 in the image, and add the alternative text to make it XHTML valid tag
<img src="resize.php?id='.$row[1].'" border="0" alt="Alt text" />

NoGray.com


#4 mattachoo

mattachoo
  • Members
  • PipPip
  • Member
  • 21 posts

Posted 26 July 2006 - 11:37 PM

Tried both of those, and neither worked in IE.

**EDIT**

God, this is so stupid, but I got it to work.


Curent Code:
/* CSS Document */
body {
	background-color: #000000;
}
.style2 {
	font-size: 10px;
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
}
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
}
a {
	font-size: 10px;
	color: #FF0000;
}
a:link {
	text-decoration: none;
	color: #FF0000;
}
a:visited {
	text-decoration: none;
	color: #990000;
}
a:hover {
	text-decoration: none;
	color: #FF0000;
}
a:active {
	text-decoration: none;
	color: #FF0000;
}

a.rollover img{border:2px solid  #FF0000;}
a.rollover:visited img{border:2px solid  #990000;}
a.rollover:hover img{border:2px solid  #FF0000;}


<?
  $imageq = mysql_query('SELECT * FROM `image_of_week` WHERE `id` = 1 LIMIT 0, 1') or die(mysql_error());
	
	$row = mysql_fetch_row($imageq);
	
	echo'
  <a class="rollover" href="'.$row[1].'" target="_blank"><img src="resize.php?id='.$row[1].'" border="0" alt="Image of the Week" /><br>
      <br>
  CLICK FOR FULL IMAGE </a>';
  
  ?>

Stupid IE

#5 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 27 July 2006 - 01:31 AM

I'm curious about something here:
a.band img{border-width:2px ;border-style: solid;}
Why is there no border-color: attribute?
Disclaimer: No matter how harsh I may be, I'm always IMO only.

#6 killerb

killerb
  • Members
  • PipPipPip
  • Advanced Member
  • 48 posts

Posted 27 July 2006 - 01:09 PM

I like the shorthand, saves typing and bandwidth (if that even counts!)

.className{border:solid 1px red;}

or

.className{border-right:solid 1px #FF0000;}
Experience is something you get just after you need it.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users