CSS unwanted borders

I am having trouble with my css-based web page.  In IE 7 i have unwanted border around the images.  I have tried everything that I could and nothing made the borders disappear.

Here is the code
<html>
<head>
<style type="text/css">
body {
background-color: yellow
}

div.container
{
width: 916px;
}



div.left
{
float:left;
width:100px;
}

div.content
{
Height: 514px;


 
background-image: url('/images/lesstall_home.jpg');
background-repeat: no-repeat;
background-position:  center;  
background-color: #272727

}

div.footer
{
font-family: verdana;
font-size: 12px;
font-weight: bold;
color: #E7B33B;
text-align: right;
}

</style>
</head>
<body>

<div class="container">
  <div class="header"><img src="images/header.jpg" width="916" height="121" border="0">
  </div>
  <div class="left"><img src="images/leftnav.jpg" border="0"></div>
  <div class="content" align="top">Home</div>
<div class="footer">Site Design: Laura Pixley</div>
</div>

</body>
</html>


Here is the link - http://www.lesstallguitars.com/test2.htm
svp28Asked:
Who is Participating?
 
Göran AnderssonCommented:
The page still renders in quirks mode, eventhough you have a recent dcotype. Try to correct some of the errors in the page:

Change
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
to
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

In div.left change
top:121;
to
top:121px;
(This will fix the problem with the placement of the left menu in Firefox)

Change
<img src="images/header.jpg" width="916px" height="121px" border="0">
to
<img src="images/header.jpg" width="916" height="121" border="0" />

Change
<img src="images/leftnav.jpg" width="174" height="514">
to
<img src="images/leftnav.jpg" width="174" height="514" />

Change
<IMG class="displayed" src="images/lesstall_home.jpg" width="599" height="419" border="0"></Div>
to
<img class="displayed" src="images/lesstall_home.jpg" width="599" height="419" border="0" /></div>

Change
<font color="#FFFFFF">Site Design By:</font>
to
<span style="color:#fff">Site Design By:</span>
(or make a css class for it.)

Now, let's see how it renders... :)
0
 
R7AFCommented:
1) Use a doctype to specify what type of html you're using.
http://www.alistapart.com/stories/doctype/

2) If that doesn't help, link to the real images, or upload them (or similar sized ones) to tinypic.com and link to that.
http://tinypic.com/
0
 
TheKyleCommented:
I think the problem is that IE is rendering the space between your image and the closing div tag.

You can probably fix the horizontal border by changing your code to look like this:

    <div class="header"><img src="images/header.jpg" width="916" height="121" border="0"></div>

I haven't been able to figure out how to get rid of the vertical border yet, though.  I'll let you know if I do.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
TheKyleCommented:
Nevermind... the fix above didn't help.  I still think the problem is that IE is rendering the space characters, though.
0
 
TheKyleCommented:
Oops.... :) I was still looking at your version when I said that my fix didn't work.  I just checked my version of your page, and my fix did work for the horizontal space.  Sorry!

    <div class="header"><img src="images/header.jpg" width="916" height="121" border="0"></div>
0
 
svp28Author Commented:
I did add the doc type.  It solved the problem in IE7, but not in Firefox?  I thought Firefox would have less trouble.  Am I missing somethig?
0
 
TheKyleCommented:
Firefox does have it's own (however rare) bugs.  IE just has about 50x the number of bugs.  What doctype did you use?
0
 
Göran AnderssonCommented:
Checking back to see if you had any progress. Did you get the page to render in standards compliant mode after doing the corrections?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.