Member Avatar for acediamond

I am using an image on a background with the same color as the image. The image border is turned off but I still see a line where the colors should mesh seamlessly.
Just a little background, I am a first year CS student and have only taken an introductory class to HTML. I am trying to build a website using frames for my fiance. The navigation page is what I am working on which will have her logo from a business card image.

<html>
  <head>
     <title>
            Greta Conrad
     </title>
  </head>

  <body bgcolor = "#1f1a17">
      <table align = "center">
         <tr>
            <td>
               <img border = "" alt = "Greta Conrad - Home" src = "businessimages/gc_front.jpg">
               <img src = "futon2.jpg"><br />
               <img src = "futon3.jpg">

            </td>
         </tr>
      </table>

  </body>
</html>
  • 5 Contributors
  • 10 Replies
  • 272 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by sreein1986

Dani AI

Generated

A thin "hairline" where an image should meet a same‑colored background is usually one of four causes: table cell spacing/padding or collapsed borders; the image itself carrying a 1px matte or antialiased edge from scanning/re-export; the image being displayed scaled (fractional pixels cause interpolation lines); or inline-image whitespace (baseline/line-height gaps). ’s use of the table background explains why the vertical seams went away, and ’s note about photo houses adding white edges is a common real-world cause. ’ browser remark is a useful reminder that rendering differences can make a seam visible in some browsers, and ’s long-term advice to avoid frames/tables is sound.

Useful diagnostics (in order): open the JPG/PNG at 100% in an editor and look for any 1px matte or edge pixels; crop tightly and resave. Sample the edge color with the eyedropper to confirm an exact match to the page color. Verify the image is not being scaled in HTML/CSS (displayed width/height should match the bitmap pixels). A temporary high‑contrast outline around the image will show whether the seam is inside the image or caused by layout.

Suggested CSS (put in a stylesheet rather than inline):

.container { background-color: #1f1a17; line-height: 0; }
table     { border-collapse: collapse; border-spacing: 0; }
td        { padding: 0; margin: 0; }
img       { display: block; vertical-align: top; max-width: 100%; height: auto; }

If cropping and exact color matching don’t remove the line, the cause is almost always bitmap antialiasing at the edge — the cleanest fix is to re-export the logo with a matching background (or use a transparent PNG placed over the page color), and prefer a single combined image for the nav area instead of multiple adjacent images to eliminate seam risk. Frames/tables increase complexity; modern CSS layouts avoid many of these pitfalls.

Recommended Answers

All 10 Replies

Member Avatar for DGStudios 
<img style="border: 0px;" src="url" />

use the style ability within most tags and use the CSS call to get rid of borders. if it still isn't working... .delete IE download firefox and try again on a real browser.
Thank you.

Member Avatar for sreein1986

above code is correct,
i am helping one more option for not this problem what is that means please take one image in only one TD and also give your background color in style properties

check this code

<html>
<head>
<title>
         Greta Conrad
</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"><STYLE TYPE="text/css">
<!--
body {
	background-color: #1f1a17;
}
-->
</STYLE></head>
  <body>
      <table align = "center">
         <tr>
            <td> <img alt = "Greta Conrad - Home" src = "businessimages/gc_front.jpg" STYLE="border: 0px;"></TD>
              <TD><img src = "futon2.jpg" STYLE="border: 0px;"></TD>
			  <TD><img src = "futon3.jpg" STYLE="border: 0px;"></TD> 
         </tr>
      </table>

</body>
</html>
Member Avatar for acediamond

Thank you for your time Sreekanth. I was able to use my css to table(background-color: #1f1a17 to blend away the left and right vertical lines but the top and bottom horizontal lines are still there. I could make it work but I know there has to be a way to blend away those lines. Is there a style for the 3D background color? I am not good at css so please spell out the code for me.
And I am running firefox 3 and have been running firefox for years.
On a side note, changing your browser is not going to fix the problem for those IE users. I did not care for DGstudios reply about browsers. I feel your code should work for all types of browsers and devices because today's audience is using all types of browsers and devices.

Member Avatar for sreein1986

if you want 3d Background then you will design in Photoshop using with filters and add as a background with using css ...

Member Avatar for acediamond

Would you please show me the code to accomplish this is css. I understand the background image concept and love the idea but I don't know css except how to link them and a couple basic attributes. Will the image auto size to fit each frame?

Member Avatar for sreein1986 
.mainstylesheet{
	background-image: background url; /*give your location of the image background*/
	background-repeat:no-repeat; /*if you want repeat then instead of no-repeat put repeat*/
	border:0 px;  /*give the border size*/
}

post this code between head tag in Style tag

Member Avatar for DGStudios

Just my own little note in my defense.

My joke was not about IE in general as it runs pretty much as well as the other bowsers as far as CSS. However the Javascript and CSS support in IE7 is terrible and as such things that work in previous versions of IE and are standard W3C compliant css and JS do not work in IE7.

I too believe in universal compatibility there are sometimes when it is not possible however, as CSS and JS are both handled differently by each browser. You can do browser detection for it, however, IE7 is a whole new monster that even by Microsofts own admission FAILED when it comes to CSS and JS rendering and execution.

My statement was simply a joke based on that.

Member Avatar for casper_wang

if you want your site to be seamless try using css to set your tables rather than use frames.
Frames are a thing of the past and most people today dont like them because most new web developers dont know how to render it properly to allow the user to break out of the frame.

Member Avatar for MidiMagic

I had this happen several years ago.

It turned out that the photo processing company had placed white edges on the digital files. This happened because my camera exposed the negatives in an area slightly undersized, compared to their scanner. I had to use a photo editor to crop the photo.

Member Avatar for sreein1986

add all add as reputation

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.