PDA

View Full Version : Image in list problem, Pls help


gsxr1000au
10-17-2010, 04:03 AM
Hi all..

I have inserted a shopping cart gif image in my menubar.

When viewing in liveview it look as i want it. When in explorer it gets a white box around the image which I dont want.

Cant anyone help?

Link to page: http://www.fluidelectrical.com.au/camerashop/pages/accessories.html

Source Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd (http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="http://www.w3.org/1999/xhtml (http://www.w3.org/1999/xhtml)">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="../styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="banner">
<img src="../images/banner1.jpg" width="970" height="173" alt="banner" />
</div>

<div id="topnav">
<div id="topnavleft">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="../index.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="software.html">FAQs</a></li>
</ul>
</div>
<div id="topnavright">
<ul>
<li><a href="../index.html">Log In</a></li>
<li><a title="Complete your order" href="../index.html">Checkout</a></li>
<li><a title="View items in your cart" href="contact.html"><div id="topnavrightimg"><img src="../images/Shopping_Cart_Button.gif" width="21" height="15" /></div>My Cart </a></li>
<li><a href="software.html">My Account</a></li>
</ul>
</div>
</div>

<div id="content-wrapper">

<p>Search Button Here</p>

<div id="leftnav">
<ul>
<div id="leftnavlabel"><li>Categories:</li></div>
<li><a href="specials.html">Specials</a></li>
<li><a href="compact.html">Digital Compact Cameras</a></li>
<li><a href="dslr.html">Digital SLR Cameras</a></li>
<li><a href="lenses.html">Lenses</a></li>
<li><a href="filters.html">Lens Filters</a></li>
<li><a href="flashes.html">Flashes</a></li>
<li><a href="studio.html">Studio Lighting</a></li>
<li><a href="tripods.html">Tripods</a></li>
<li><a href="bags_cases.html">Bags &amp; Cases</a></li>
<li><a href="memory.html">Memory</a></li>
<li><a href="software.html">Software</a></li>
<li><a href="print.html">Printers</a></li>
<li><a href="frames.html">Digital Photo Frames</a></li>
<li><a href="accessories.html">Accessories</a></li>
<li><a href="warranty.html">Extended Warranty</a></li>
</ul>
</div>

<div id="content">
<h2>Article Heading</h2>
<p>Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. Contect goes here. </p>
</div>
</div>

<div id="footer">
Page footer here</div>
</div>
</body>
</html>


css:
@charset "utf-8";
/* CSS Document */
body {
margin:0px;
font-family:Tahoma, Geneva, sans-serif
}
#wrapper {
width:970px;
margin:0px auto;
}
#banner {
padding:0px;
margin:0px;
}
#topnav {
width:970px;
float:left;
background-image: url(images/menubar.jpg);
font-size: 14px;
}
#topnavleft ul {
margin:0px;
padding:0px;
}
#topnavleft ul li {
list-style-type:none;
display:inline;
}
#topnavleft ul li a {
display:block;
padding:6px 17px;
float:left;
text-decoration:none;
color: #FFF;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #3A41B1;
}
#topnavright ul {
margin:0px;
padding:0px;
}
#topnavright ul li {
list-style-type:none;
display:inline;
}
#topnavright ul li a {
display:block;
padding:6px 17px;
float:right;
text-decoration:none;
color: #FFF;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #2E338D;
}
#topnav a:hover {
color:#E0AC1B;
background-color:#00008A;
}
#topnavrightimg {
float:left;
display:inline;
padding: 0px 5px 0px 0px;
}
#content-wrapper {
float:left;
width:970px;
}
#leftnav {
float:left;
width:160px;
font-family:Tahoma, Geneva, sans-serif;
font-size: 12px;
}
#leftnavlabel li {
display:block;
list-style-type:none;
margin:0px;
padding:8px 0px 8px 10px;
width: 150px;
color: #006;
text-align: left;
border: 1px solid #D7D7D7;
font-size: 15px;
}
#leftnav ul {
padding:0px;
margin:0px;
list-style-type:none;
}
#leftnav a {
display:block;
width:140px;
text-decoration:none;
color: #26296A;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-color:#D7D7D7;
margin-bottom: -1px;
padding: 5px 10px 5px 10px;
}
#leftnav a:hover {
border-left-width: 5px;
border-left-style: solid;
border-left-color: #00008A;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
width: 145px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-color: #00008A;
border-bottom-color: #00008A;
color: #1A1AFF;
border-right-width: 1px;
border-right-color: #00008A;
background-image: url(images/button.jpg);
padding-top: 4px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 6px;
}
#content {
float:left;
width:760px;
margin:0px 10px 0px 20px;
background-color:#FFF;
padding:10px;
text-align: justify;
height: 500px;
}
#footer {
clear:both;
padding:5px;
text-align:center;
color:#FFF;
background-image: url(images/menubar.jpg);
}

Corrosive
10-17-2010, 08:07 AM
Hi and welcome to the forum. The border round a linked image is a browser default in IE. Just add;

a img {border: none;}

To your stylesheet and it should go away.

gsxr1000au
10-17-2010, 08:23 AM
I spent hours trying to get rid of that bloody thing.. lol..

So easy when you know what you to do hey..

Thanks Corrosive. :)

Corrosive
10-17-2010, 08:26 AM
It gets easier I promise... eventually ;)

gsxr1000au
10-17-2010, 12:57 PM
One can only hope.. :confused: