Permabanned
- Joined
- 25 Oct 2004
- Posts
- 9,078
Hiya folks,
Been working on a site for a while now and while everything displays fine in IE6 and Firefox I cant seem to get it working correctly in IE7 (usually its IE6 that causes problems).
Anyway I've made a quick mockup of the problem im getting as you can see if you display the page in FF it looks fine, in IE7 the left hand corner graphic is gone (displayed in the wrong location).
Ive tried all i can think of but cant seem to solve it.
Any help is much appreciated.
HTML Code.
CSS Code
The images used and html/css code used are contained in the rar file listed below.
OCUk-HelpMePlz.rar
Been working on a site for a while now and while everything displays fine in IE6 and Firefox I cant seem to get it working correctly in IE7 (usually its IE6 that causes problems).
Anyway I've made a quick mockup of the problem im getting as you can see if you display the page in FF it looks fine, in IE7 the left hand corner graphic is gone (displayed in the wrong location).
Ive tried all i can think of but cant seem to solve it.
Any help is much appreciated.
HTML Code.
Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en">
<head>
<title>Testing</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="site-styles.css" rel="stylesheet" type="text/css" />
<link rel="icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
</head>
<body>
<br />
<br />
<br />
<table width="50%" style="margin-left: auto; margin-right: auto;" cellspacing="0" cellpadding="0">
<tr>
<td>
<div class="content-box">
<!-- STOREFRONT LIST STARTS -->
<div class="content-container">
<div class="content-header">
<!-- MAIN COLUMN CONTENT START -->
<div class="content-innertube">
<span>Recently Listed</span>
</div>
<!-- MAIN COLUMN CONTENT END -->
</div>
</div>
<div class="content-leftcolumn">
<!-- LEFT COLUMN CONTENT START -->
<div class="content-innertube">
</div>
<!-- LEFT COLUMN CONTENT START -->
</div>
<div class="content-rightcolumn">
<!-- RIGHT COLUMN CONTENT START -->
<div class="content-innertube">
</div>
<!-- RIGHT COLUMN CONTENT START -->
</div>
<!-- MAIN CONTENT ENDS -->
</div>
<table class="box_content_1" width="100%" style="clear: both; text-align: left; margin-left: auto; margin-right: auto;">
<tr>
<td><table cellpadding="3" cellspacing="1" style="border-style: none; margin: 0 auto; text-align: left; width: 100%">
<tr class="newest_1_result_table_body_even_bold">
<td class="newest_1_result_table_body_even_bold" style="white-space: nowrap;"><img src="images/misc/class_list.gif" alt="classified" width="16" height="16" /></td>
<td class="newest_1_result_table_body_even_bold"><a href=/user_images/3616072.gif rel="lightbox" /><img src="images/misc/photo_icon2.gif" alt="" style="border-style: none;" /></a></td><td class="newest_1_result_table_body_even_bold" style="width:100%;">
<a href="index.php?a=2&b=152" class="newest_1_result_table_body_even_bold">Windows XP Pro</a>
<img src="images/attn_gtrs/wow.gif" alt="" style="border-style: none; margin: 0px 2px;" /></td>
</tr>
<tr class="newest_1_result_table_body_odd_bold">
<td class="newest_1_result_table_body_odd_bold" style="white-space: nowrap;"><img src="images/misc/class_list.gif" alt="classified" width="16" height="16" /></td>
<td class="newest_1_result_table_body_odd_bold"><a href=/user_images/6571160.jpg rel="lightbox" /><img src="images/misc/photo_icon2.gif" alt="" style="border-style: none;" /></a></td><td class="newest_1_result_table_body_odd_bold" style="width:100%;">
<a href="index.php?a=2&b=151" class="newest_1_result_table_body_odd_bold">A Red Van</a>
<img src="images/attn_gtrs/hot_rod.gif" alt="" style="border-style: none; margin: 0px 2px;" /></td>
</tr>
<tr class="newest_1_result_table_body_even">
<td class="newest_1_result_table_body_even" style="white-space: nowrap;"><img src="images/misc/class_list.gif" alt="classified" width="16" height="16" /></td>
<td class="newest_1_result_table_body_even"><a href=/demo/user_images/8468985.gif rel="lightbox" /><img src="images/misc/photo_icon2.gif" alt="" style="border-style: none;" /></a></td><td class="newest_1_result_table_body_even" style="width:100%;">
<a href="index.php?a=2&b=131" class="newest_1_result_table_body_even">ATi 2900XT PCi-Express 512Mb</a>
</td>
</tr>
<tr class="newest_1_result_table_body_odd ">
<td class="newest_1_result_table_body_odd " style="white-space: nowrap;"><img src="images/misc/class_list.gif" alt="classified" width="16" height="16" /></td>
<td class="newest_1_result_table_body_odd "><a href=/demo/user_images/7070064.jpg rel="lightbox" /><img src="images/misc/photo_icon2.gif" alt="" style="border-style: none;" /></a></td><td class="newest_1_result_table_body_odd " style="width:100%;">
<a href="index.php?a=2&b=128" class="newest_1_result_table_body_odd ">Sam's Teach Yourself CSS in 24 Hours</a>
</td>
</tr>
<tr class="newest_1_result_table_body_even">
<td class="newest_1_result_table_body_even" style="white-space: nowrap;"><img src="images/misc/class_list.gif" alt="classified" width="16" height="16" /></td>
<td class="newest_1_result_table_body_even"><a href=user_images/3830525.jpg rel="lightbox" /><img src="images/misc/photo_icon2.gif" alt="" style="border-style: none;" /></a></td><td class="newest_1_result_table_body_even" style="width:100%;">
<a href="index.php?a=2&b=123" class="newest_1_result_table_body_even">A Book!</a></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Code:
/* CSS Document */
/* anchor properties */
a { font-family:Tahoma; text-decoration: none;}
a:hover {text-decoration: underline;}
.box_content_1 {
background-color: #EDEDED;
border-left: 1px solid #666666;
border-right: 1px solid #666666;
border-bottom: 1px solid #666666;
padding: 0px;
font-size: 12px;
text-decoration: none;
}
/* CONTENT BOX START */
.content_box {
padding: 0;
margin: 0;
width: 100%;
}
.content-innertube{
margin: 0; /*Margins for inner DIV inside each column (to provide padding)*/
}
.content-container {
text-align: left;
float: left;
width: 100%;
}
.content-header{
height: 27px;
margin: 0 10px 0 10px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
background-color: #336699;
color:#FFFFFF;
font-family:Tahoma;
font-size:12px;
line-height: 27px;
font-weight:bold;
}
.content-leftcolumn{
float: left;
background: url(images/hb51.gif) no-repeat bottom left;
width: 10px; /*Width of left column in percentage*/
height: 27px;
margin-left: -100%;
}
.content-rightcolumn{
float: left;
background: url(images/hb11.gif) no-repeat bottom right;
width: 10px; /*Width of right column in pixels*/
height: 27px;
margin-left: -10px; /*Set margin to that of -(RightColumnWidth)*/
}
/* CONTENT BOX END */OCUk-HelpMePlz.rar