Weird box around some images

El_Watcher

El_Watcher

El_Watcher

Soldato
Joined
1 Apr 2004
Posts
2,981
Location
Herts, UK
I have a weird problem that I need some help on. I have created our company website and it displays fine on IE7, and most of it is fine on Firefox. It is just some images which are inside tables have a weird box around them:

displayerror.jpg
.

I am guessing it is something to do with the table layout but as I don't know what that type of box thing is, I can't search for an exact solution.

Please point me in the right direction :).
 
Last edited:
have you changed anything in that image above? the borders are exactly like that? a box and then extra little bit on the side? also the border at the top is missing is this you just missing it when putting it in image or does that not show either?
 
well without seeing the code this isn't the easiest of tasks. as the ears are the heigher of text have you get something there even like a . or maybe a naughty letter typed by accident which is causing the box. have you tried removing the image and seeing what happens?
 
Thanks for the help so far Mammalian
I now think it is something in the css style file I am using, because I have stripped it down to only what is needed for that page, and it displays fine.

Page is:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/transitional.dtd">
<html>
<head>
<title>Semicom Visual - 15" Panel PC </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="description" content="Distributor of display and computer solutions to gaming, POS and industrial markets">
<meta name="keywords" content="POS, industrial computer, book size, Sanyo, open frame monitor, panel mount, LED lighting, digital signage,
OS-CON, POS-CAP, E-CAP, Laser Diode, IC, display, panel PC">
<link rel="stylesheet" type="text/css" href="MainStyle2.css" /> 
<SCRIPT type="text/javascript" LANGUAGE="JavaScript" src="scripts/photo.js"></SCRIPT>
</head>
<body>
<table class="BPC" width="980px" align="center">
 <caption class="BPC">Enclosure Mount Panel PCs</caption>
 <tr>
  <td width="210px"><a class="mainbutton2" href="images/PPC7405.jpg" onClick="show_photo('images/PPC7405.jpg', 'PPC7405', 'PPC-7405'); return false" onMouseOver="window.status='Enlarge Image'; return true"><img class="mainbutimg4" alt="PPC7405" src="images/thumbs/PPC7505_tn.jpg" ></a></td>
  <td width="95px">PPC-7405</td>
  <td width="107px">Celeron, Pentium4<br>(socket 478)</td>
  <td width="349px">High Performance PPC, features optional 1 x PCI + 1 x ISA, or 3 x PCI + 3 x ISA slots, and IP65 front panel.</td>
  <td width="40px"><a class="mainbutton2" href="PPC7405.html"><img class="mainbutimg4" alt="PPC7405" src="images/arrow.jpg" ></a></td>
 </tr>
</table>
<br>
<br>
<hr>
<br>
<br>
</body>
</html>

Bad css file:

Code: 
/* MainStyle.css - Styles for main site */

div.MainHead1 { color:#be3863; font-size: 18px; }
p.indent10 { text-indent: 1.0in; font-family: Arial, Helvetica, sans-serif; }
p.indent5 { text-indent: 0.5in; font-family: Arial, Helvetica, sans-serif; }
p.MainHead { color:#be3863; font-size: 18px; font-family: Arial, Helvetica, sans-serif; }
p.maintext { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
p.maintext2 { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }
p.maintext3 { font-size: 10px; font-family: Arial, Helvetica, sans-serif; }
p.maintextB {color: #000000; text-decoration: none; font-size: 20px; font-family: Arial, Helvetica, sans-serif; }
p.maintextI { color: #000000; font-size: 15px; font-family: Arial, Helvetica, sans-serif; }
p.maintextIB { color: #000000; font-size: 15px; font-family: Arial, Helvetica, sans-serif; font-weight:bold; }
p.maintextC { font-size: 13px; font-family: Arial, Helvetica, sans-serif; }
p.construction { font-size: 20px; font-family: Arial, Helvetica, sans-serif; font-weight:bold; }
p.NewProd { color: #be3863; font-weight: bold; text-decoration: underline; font-family: Arial, Helvetica, sans-serif; }
p.SpecProd { color: #be3863; font-weight: bold; text-decoration: underline; font-family: Arial, Helvetica, sans-serif; }
p.Legal {font-size: 10px; font-family: Arial, Helvetica, sans-serif; }
p.Legal2 {font-size: 12px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; }
h1 { font-size: 18pt; font-family: Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: underline; }
h2 { font-size: 16pt; font-family: Arial, Helvetica, sans-serif; font-weight: bold; }
h6 { font-size: 15pt; font-family: Arial, Helvetica, sans-serif; font-weight: bold; }
h3 { font-size: 14pt; font-family: Arial, Helvetica, sans-serif; font-weight: bold; }
h4 { font-size: 12pt; font-family: Arial, Helvetica, sans-serif; font-weight: bold; }
h5 { font-size: 16pt; font-family: Arial, Helvetica, sans-serif; font-weight: bold; }
hr { color: #bbdff5; height: 1px; width: 980px; position: center; }
hr.Product {color: #bbdff5; height: 1px; width: 742px; position: center;  }
.buttonbg { background-image: url("images/ButtonBar1a.jpg"); padding: 0px; }
.buttonbg2 {background-image: url("images/ButtonBar2.jpg"); padding: 0px; }
.buttonbg3 {background-image: url("images/header4b.png"); padding: 0px; }
a.frontbutton { color: #000000; text-decoration: none; border: 2px black; font-family: Arial, Helvetica, sans-serif; }
a.headbutton {color: black; font-size: 18px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; }
a.headbutton2 {color: red; font-size: 18px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; }
a.mainbutton {color: #be3863; text-decoration: none; border: 2px black; font-family: Arial, Helvetica, sans-serif; }
a.mainbutton2 { color: #FFFFFF; text-decoration: none; border: 0px; font-family: Arial, Helvetica, sans-serif; }
a.mainbutton3 {color: #be3863; text-decoration: none; border: 0px; font-family: Arial, Helvetica, sans-serif; }
a.mainbutton4 {color: #be3863; text-decoration: none; border: 0px; font-family: Arial, Helvetica, sans-serif; }
a.MainHead {color:#be3863; font-size: 18px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; }
a.maintext { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
a.maintext2 { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }
a.maintext3 {color: #000000; text-decoration: none; font-size: 20px; font-family: Arial, Helvetica, sans-serif; border: 0px;}
a.maintext3R {color: #000000; text-decoration: none; font-size: 20px; font-family: Arial, Helvetica, sans-serif; border: 0px;}
a.maintext4 { font-size: 10px; font-family: Arial, Helvetica, sans-serif; }
a.maintext5 { font-size: 12px; font-family: Arial, Helvetica, sans-serif; text-decoration: none; font-weight: bold; }
a.maintext6 { font-size: 15px; font-family: Arial, Helvetica, sans-serif; text-decoration: none; font-weight: bold; }
a.maintextI { color: #000000; font-size: 15px; font-family: Arial, Helvetica, sans-serif; text-decoration: none; }
a.maintextIB { color: #000000; font-size: 15px; font-family: Arial, Helvetica, sans-serif; font-weight:bold; vertical-align:middle; }
a.maintextE { color: blue; font-size: 15px; font-family: Arial, Helvetica, sans-serif; text-decoration: none; }
a.mainhead2 { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }
a.mainhead3 { font-size: 14px; font-family: Arial, Helvetica, sans-serif; text-decoration: underline; text-align: left; }
a.MainText2 { font-size: 10px; font-family: Arial, Helvetica, sans-serif; text-decoration: none; color: #000000;}
a.BackButton {color: #be3863; text-decoration: none; border: 2px black; font-family: Arial, Helvetica, sans-serif; }
a.buttonlabel1 {color: #be3863; text-decoration: none; font-family: Arial, Helvetica, sans-serif; }
a.boldlist {font-size:14px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-weight: bold; }
a.Legal {font-size: 10px; font-family: Arial, Helvetica, sans-serif; }
img.mainbutimgI {border: 5px #36a8ff; text-decoration: none; }
img.mainbutimg {border: 10px white; }
img.mainbutimg2 {border: 2px white; }
img.mainbutimg3 {border: 2px #9dd4ff; }
img.mainbutimg4 {border: 0px; }
img.NewProdimg {border: 10px white; }
table.NewProd { border-style: dashed; }
table.SpecProd { border-style: dashed; }
table.BPC *{ border: 1pt solid black; padding: 5px ; text-align: left;  vertical-align: middle; caption-side: top; font-family: Arial, Helvetica, sans-serif; font-size: 14px;}
table.PPC *{ border: 0px ; padding: 0px ; text-align: center;  vertical-align: middle; }
table.OFM *{ border: 0px ; padding: 0px ; text-align: center; margin: 0px; }
td.Spec1 { border: 3px solid #e7ebee; background-color: #e7ebee; padding: 7px; }
td.Spec2 { border: 3px solid white; padding: 7px; }
caption.BPC {text-align: left; vertical-align: middle; border: 0px; }
.style1 {color: #0066CC}
li.maintext {font-size: 10px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; }
ul.special {font-size: 14px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; text-align: left; }
span.BOLD {font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight:bold; border: 0pt; }
span.codedirection { unicode-bidi:bidi-override; direction: rtl; color:#0000CC; }

Working css file:

Code: 
/* MainStyle2.css - Styles for main site */

table.BPC *{ border: 1pt solid black; padding: 5px ; text-align: left;  vertical-align: middle; caption-side: top; font-family: Arial, Helvetica, sans-serif; font-size: 14px;}
caption.BPC {text-align: left; vertical-align: middle; border: 0px; }
a.mainbutton2 {text-decoration: none; border: 0px; font-family: Arial, Helvetica, sans-serif; }
img.mainbutimg4 {border: 0px; }

Script file:

Code: 
// This script opens a new browser window and writes
// HTML to display an image with a title and caption

function show_photo( pFileName, pTitle, pCaption) {
// specify window parameters
  photoWin = window.open( "", "photo", "width=690,height=370,screenX=20,screenY=40,left=20,top=40");
// wrote content to window
  photoWin.document.write('<html><head><title>' + pTitle + '</title></head>');	
  photoWin.document.write('<BODY BGCOLOR=#FFFFFF TEXT=#FFFFCC LINK=#33CCFF VLINK=#FF6666>');
  photoWin.document.write('<center>');
  photoWin.document.write('<img src="' + pFileName + '"><p>');
  photoWin.document.write('<font face="arial,helvetica">');	
  photoWin.document.write('<p></font></body></html>');
  photoWin.document.close();	
// If we are on NetScape, we can bring the window to the front
	if (navigator.appName.substring(0,8) == "Netscape") photoWin.focus(); }

Hopefully this is enough that someone can see what I have done wrong.
 
haven't really looked into your coding as its a lot of same old same old in that it's all almost same name just with different number and kind of messy, should have said in last post so sorry, but would be much easier if you could get it online for me to mess around directly with working code.

from what i can see if im looking right, you have the left table row with a style, and also the image being shown also has a style. this could be causing the problem but like i say its hard to tel without seeing it online
 
i think think think i got it, i think this bit of the code is causing the problem

table.BPC *{ border: 1px solid black; padding: 0px ; text-align: left; vertical-align: middle; caption-side: top; font-family: Arial, Helvetica, sans-serif; font-size: 14px;}
Click to expand...

i have removed the border 1px which removed borders for every thing in the table, so each table row, each data, each image, and each link, and as you have the images also as a lijnk there is a border around the image, and then a border around the link, which is why you are getting a little ear type thing the height of a line of text.

try moving all this code to the very top of the stlyesheet, which would give everything a border, but then as stylesheets cascade you have further down styled the stuff as having no border so the later styling is the one used.

Code: 
table.NewProd { border-style: dashed; }
table.SpecProd { border-style: dashed; }
table.BPC *{ border: 1pt solid black; padding: 5px ; text-align: left;  vertical-align: middle; caption-side: top; font-family: Arial, Helvetica, sans-serif; font-size: 14px;}
table.PPC *{ border: 0px ; padding: 0px ; text-align: center;  vertical-align: middle; }
table.OFM *{ border: 0px ; padding: 0px ; text-align: center; margin: 0px; }
td.Spec1 { border: 3px solid #e7ebee; background-color: #e7ebee; padding: 7px; }
td.Spec2 { border: 3px solid white; padding: 7px; }

haven't tested in anything other then ff but it works for me
 
You must log in or register to reply here.
Back
Top Bottom