CSS Forum

**silverglade** · 07-07-2009, 07:29 PM

hi, in internet explorer 6, this strange text is showing up "ap" on my page, i was wondering if anyone knows how to get rid of it. any help greatly appreciated. thanks. derek.

here is the page. the text is to the bottom right. "ap" text

http://derekvanderven.com/computer_ecommerce/index.html

**orionoreo** · 07-07-2009, 08:01 PM

poor structuring of your codes... the "ap!" is from your last div quoting This one is cheap! change that to cheaper! and the letters change to er!

**LadynRed** · 07-07-2009, 08:25 PM

Duplicated character bug:
http://www.positioniseverything.net/...haracters.html

**silverglade** · 07-07-2009, 09:20 PM

thanks ladynred. i tried to get rid of it using that page and i can't . i tried using -3 margin on practically everything, as well as adding 3px margin after that didnt work. any more help greatly appreciated. thanks. derek

here is the css to the page..

Code:

@charset "utf-8";
/* CSS Document */
 
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #71838A;
}
#wrapper {
    overflow: auto;
     
    overflow-x: hidden;
    overflow-y: hidden;
    width: 750px;
    background-color: #B0BBBF;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}
#header {
margin: 0 auto 0 auto;
background-image: url(slice_front_images/header.jpg);
background-repeat: no-repeat;
width: 750px;
height: 81px;
}
#left_nav_container{
float: left;
margin: 0 auto 0 21px;
width: 175px;
border: 1px solid #999999;
background-color: #C0C0C0;
padding-top: 20px;
}
 
/**********************************left links code************************/
#left_links {
width: 175px;
height: 700px;
margin: 0 auto 0 auto;
border-right: 1px solid #618EFD/*#6792FD*/;
    border-left: 1px solid #618EFD/*#6792FD*/;
}
 
#left_links ul li a:link, #left_links ul li a:visited {
font-weight:bold;
color:#375B97;
text-decoration:none;
font-size:84%;
display:block;
height:1.8em;
}
#left_links ul li a:hover, #left_links ul li a:active{
color: #000;
text-decoration:none;
}
#left_links ul li {
position:relative;
left:-20px;
list-style-type:none;
}
/*************************************end left links*********************/
 
#header_image {
    float: left;
    width: 380px;
    height: 188px;
    background-image: url(images/header_image.jpg);
    background-repeat: no-repeat;
    border: 2px solid gray;
}
/*****************************front sales*******************************/
#front_sales_container {
    float: left;
    width: 380px;
    height: auto;
    border: 2px solid gray;
    background-color: white;
    margin: auto;
}
 
.front_sales_divs {
    float: left;
    width: 133px;
    margin-top: 20px;
    margin-right: -3px;
    margin-bottom: 20px;
    margin-left: 27px;
    border: 1px solid gray;
    padding-bottom: 5px;
}
 
 
.front_sales_divs img {
float: right;
padding-top: 5px;
padding-right: 5px;
 
}
.front_sales_text {
float: left;
width: 130px;
padding-top: 5px;
padding-right: 5px;
padding-left: 5px;
padding: bottom: 5px;
font-size:70%;
line-height: 90%;
    
 
}
 
 
 
   /*******************************footer************************/
 #footer {
margin: 0 auto 0 auto;
width: 750px;
color: white;
background-color: gray;
text-align: center;
}
 
 #footer a:link , #footer a:visited  {
text-decoration: none;
color: white;
}
#footer a:active, #footer a:hover {
text-decoration: none;
color: blue;
}
 
/************************************right content****************************/
#right_container{
    float: right;
    clear: right;
    width: 200px;
    border: 1px solid #999999;
    background-color: #fff;
    padding-top: 20px;
    padding-right: 0px;
    font-size: small;
    padding-left: 10px;
    margin-left: auto;
    font-size: 70%;
    line-height: 90%;
    height: 720px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
}
 
 
 
 
.right_content {
    float: left;
    width: 160px;
    border: 1px solid #999999;
    margin-top: 20px;
    margin-right: -3px;
    margin-bottom: 0;
    padding-top: 10px;
    line-height: 105%;
    padding-left: 0px;
}
 
.right_content img {
float: left;
padding-right: 10px;
}
/*************************************top links*****************************/
 
#toplinks {
    font-weight:bold;
    width:530px;
    height: 25px;
    float:right;
    margin-top: 55px;
    margin-right: 20px;
    margin-bottom: 0;
    margin-left: 0;
    text-align: right;
}
#toplinks ul {
list-style-type:none;
margin:0;
padding:0;
font-size: 70%;
}
#toplinks ul li {
display:inline;
margin:0 3px;
line-height:1.5em;
}
#toplinks ul li a:link, #toplinks ul li a:visited {
color:#fff;
text-decoration:none;
height:1.8em;
}
#toplinks ul li a:hover, #toplinks ul li a:active{
color:#59B942;
text-decoration:none;
}
/***************************computers code**************************/
 
#computers_content {
margin: 0 auto 0 auto;
width: 350px;
 
border: 1px solid #999999;
 
 
}
#computers_content p {
padding: 20px ;
}
#computers_content img {
float: right;
padding: 20px;
border: 2px solid gray;
}
 
#computers_content h4 {
font-size: large;
padding: 10px;
}
 
#checkout {
float: left;
width: 100px;
}
#checkout img {
padding: 20px;
}
 
/******************************** LEFT NAV***************************/
 
.navlist { /*needs images/borders on sides*/
    /*background: url('images/nav.png') repeat-x 0 -70px;*/
    width: 120px;
    list-style: none;
    padding: 10px 10px 0 0;
    margin: 0 0 0 4px;
    float: left;
        clear: left;
    border-right: 1px solid #618EFD/*#6792FD*/;
    border-left: 1px solid #618EFD/*#6792FD*/;
}
 
.navlist li
{
    display: block;
    margin: 0;
    padding: 0;
}
 
.navlist li a
{
    display: block;
    width: 100%;
    margin: 0;
    padding: 4px 6px 9px 4px;
    border-top: #618EFD solid 1px;
    color: #000;
    text-decoration: none;
    text-align: center;
}
 
.navlist a:hover
{
    color: #fff;
    background: #618EFD;
}
 
.navlist h3 {
    width: 100%;
    padding: 8px 4px 8px 4px;
    margin: 0;
    text-align: center;
    background: #fff;
}
/*******************************cart container*********************/
 
#cart_container {
    float: left;
    width: 340px;
    border: 2px solid gray;
    background-color: white;
    height: 545px;
}
 
#header_image_cart {
    float: left;
    width: 385;
    height: 188px;
    background-image: url(images/header_image.jpg);
    background-repeat: no-repeat;
    border: 2px solid gray;
}

and here is the html for the page

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" /> <![endif]--> 
<link href="computer.css" rel="stylesheet" type="text/css"/>
<title>Computer Ecommerce home</title>
<style type="text/css">
 
.style2 {
    color: #CC6600;
    font-weight: bold;
}
.style3 {
    color: #00CC33;
    font-weight: bold;
}
</style>
</head>

<body>


<div id="wrapper">
    <div id="header"><div id="toplinks">
      <ul>
<li><a href="index.html">Home</a></li>
<li><a href="computers.html">| Computers</a></li><li><a href="notebooks.html">| Notebooks </a></li>
<li><a href="pda.html">| PDA</a></li>
<li><a href="cart.html">| Your Cart</a></li>
<li><a href="support.html">| Support</a></li>
</ul>
    </div><!--end toplinks-->
    
    
  </div><!--end header-->
     
    
     
 <ul class="navlist">
             
            <li><h3>Our Products</h3></li>
            <li><a href="motherboards.html">Motherboards</a></li>
            <li><a href="processors.html">Processors</a></li>
            <li><a href="memory.html">Memory</a></li>
            <li><a href="hard_drives.html">Hard Drives</a></li>
            <li><a href="monitors.html">Monitors</a></li>
            <li><a href="case.html">Case</a></li>
            <li><a href="ups.html">UPS</a></li>
            <li><a href="video_cards.html">Video Cards</a></li>
            <li><a href="cd.html">CD/CDR</a></li>
            <li><a href="data.html">Data Storage</a></li>
            <li><a href="devices.html">I/O Devices</a></li>
            <li><a href="multimedia.html">Multimedia</a></li>
            <li><a href="removable.html">Removable Storage</a></li>
            <li><a href="scanners.html">Scanners &amp; Printers</a></li>
            <li><a href="hubs.html">Hubs and Routers</a></li>
             <li><a href="speakers.html">Speakers</a></li>
            <li><a href="scanners.html">Scanners</a></li>
            <li><a href="hubs.html">Hubs and Routers</a></li>
        </ul>
        <!--end of left nav-->
          
          <div id="header_image"></div><!--end header image-->
          
          <div id="right_container">
            <p><img src="slice_front_images/intel_image.jpg" width="173" height="86" /></p>
            <p>&nbsp;</p>
            <p><span class="style1"><span class="style2"> 15% discount</span>, <a href="discount.html">click here</a></span></p>
            <p>0 items in your :</p>
            <p align="center"><a href="cart.html">Shopping Cart</a></p>
           
           
            <div class="right_content"><img src="slice_front_images/learning_center_hands.jpg"/><span class="style3">Learning Center</span><br />
            <br />
            <br />
            <a href="learning.html">start learning!<br />
            <br />
            </a></div>
            <!--end right content-->
            
            
            <div class="right_content">
              <p><img src="slice_front_images/warrantees_smile.jpg" width="64" height="68" /> <span class="style3">Warrantees</span><br />
               </p>
              <p><a href="warantees.html">Check out our warantees!</a>                </p>
            </div><!--end right content-->
         
          <div class="right_content">
              
              <p align="center"><a href="customer_service.html">Customer Service Home</a>                <br />
              </p>
              <p align="center"><a href="account_info.html">Account Info</a></p>
              <p align="center"><a href="downloads.html">Downloads</a></p>
              <p align="center"><a href="registration.html">Product Registration</a></p>
              <p align="center">&nbsp;</p>
          </div><!--end right content-->
         
         
         
          </div><!--end right container-->
          
<div id="front_sales_container">
          
          <div class="front_sales_divs"> 
          <img src="slice_front_images/computer.jpg" width="59" height="62"/> 
          
          <div class= "front_sales_text">
            <strong>Dell Computer</strong> &nbsp;&nbsp;&nbsp;&nbsp;<strong>&nbsp;$999             </strong>   <br />
            <br />
            Maybe better to build<br />
            your own.<br />
            </div><!--end front sales text-->
          
          </div><!--end front sales divs-->
          
          <div class="front_sales_divs"> <img src="slice_front_images/headphones.jpg" height=           "56" />
            
            <div class= "front_sales_text">
            <strong>Cool Headphones</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong><br />
            <br />
            &nbsp;$99              </strong>   <br />
            <br />
            Quality headphones!!!<br />
            </div><!--end front sales text--></div>
         
          <div class="front_sales_divs"><img src="slice_front_images/video_card.jpg" height=         "54"/> 
            
            <div class= "front_sales_text">
               <strong>Nvidea video card </strong>&nbsp;&nbsp;&nbsp;&nbsp;<strong><br />
              <br />
&nbsp;$299 <br />
<br />
              </strong> Hottest fastest card!!</div>
            <!--end front sales text--></div>
          
          <div class="front_sales_divs"><img src="slice_front_images/monitor.jpg" height="59" /           > 
            <div class= "front_sales_text">
               <strong>Awesome Monitor </strong>&nbsp;&nbsp;&nbsp;&nbsp;<strong><br />
              <br />
&nbsp;$1299<br />
<br />
            </strong> Incredible monitor!!!</div>
            <!--end front sales text--></div>
          
          <div class="front_sales_divs"><img src="slice_front_images/dvd_rw.jpg" width="55"          height="61"  /> 
            <div class= "front_sales_text">
               <strong>Uber DVD drive!!! </strong>&nbsp;&nbsp;&nbsp;&nbsp;<strong><br />
              <br />
&nbsp;$125.99<br />
               <br />
               </strong>This one is amazing!</div>
            <!--end front sales text--></div>
           <div class="front_sales_divs">
           
           <img src="slice_front_images/Seagate_Hard_Disk.jpg"width="74" height="62"   />
          
           <div class= "front_sales_text">
               <strong>Ultimate uber drive!</strong>&nbsp;&nbsp;&nbsp;<strong><br />
              <br />
&nbsp;$9999999,99999.00<br />
               <br />
            </strong>This one is the best!</div>
           </div>
          
          
          <div class="front_sales_divs">
           
           <img src="slice_front_images/Seagate_Hard_Disk.jpg"width="74" height="62"   />
          
           <div class= "front_sales_text">
               <strong>Cheap drive!</strong>&nbsp;&nbsp;&nbsp;<strong><br />
              <br />
&nbsp;$1<br />
               <br />
            </strong>This one is cheap!</div>
           </div>
          
          
          
          </div>
          <!--end front sales container-->
          
          
        
          

</div><!--end wrapper-->
<div id="footer">&copy; site design by<a href="http://derekvanderven.com"> derekvanderven.com </a></div>
<!--end footer-->
<!-- Start of StatCounter Code -->
<script type="text/javascript">
sc_project=3569481; 
sc_invisible=1; 
sc_partition=39; 
sc_security="7e526e75"; 
</script>

<script type="text/javascript" src="http://www.statcounter.com/counter/counter.js"></script><noscript><div class="statcounter"><a title="free hit counter" href="http://www.statcounter.com/free_hit_counter.html" target="_blank"><img class="statcounter" src="http://c40.statcounter.com/3569481/0/7e526e75/1/" alt="free hit counter" /></a></div></noscript>
<!-- End of StatCounter Code -->
</body>
</html>

**LadynRed** · 07-08-2009, 10:01 AM

Get rid of the comments or use the conditional comment method for the comments, as mentioned on that page I sent you.

**silverglade** · 07-08-2009, 10:11 AM

ya i didnt understand that part. but removing the comments worked! very WEIRD! THANK YOU LADYNRED!! you are awesome. i spent like an hour or more trying to get rid of that duplicated text. so thanks. derek

**LadynRed** · 07-08-2009, 02:59 PM

It is definitely one of IE's weirder bugs.