?
Solved

CSS unwanted borders

Posted on 2007-09-27
8
Medium Priority
?
546 Views
Last Modified: 2008-02-26
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
0
Comment
Question by:svp28
8 Comments
 
LVL 13

Assisted Solution

by:R7AF
R7AF earned 120 total points
ID: 19977233
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
 
LVL 6

Assisted Solution

by:TheKyle
TheKyle earned 120 total points
ID: 19981127
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
 
LVL 6

Expert Comment

by:TheKyle
ID: 19981185
Nevermind... the fix above didn't help.  I still think the problem is that IE is rendering the space characters, though.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 6

Expert Comment

by:TheKyle
ID: 19981241
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
 

Author Comment

by:svp28
ID: 19988414
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
 
LVL 6

Expert Comment

by:TheKyle
ID: 19988597
Firefox does have it's own (however rare) bugs.  IE just has about 50x the number of bugs.  What doctype did you use?
0
 
LVL 29

Accepted Solution

by:
Göran Andersson earned 135 total points
ID: 20317982
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
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20452874
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

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn how to count occurrences of each item in an array.
Suggested Courses
Course of the Month14 days, 10 hours left to enroll

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question