Hi all,

 

I'm a total web design novice and I'm hoping someone here can help me out.

 

My girlfriend runs an online store at www.thelbd.co.uk. It's run via the Big Cartel online retail system. Recently I put together a new homepage by creating four images in Photoshop (a logo banner, an image and two image links reading 'SHOP' and 'BLOG') - you can see all this at www.thelbd.co.uk. The homepage displays perfectly on Safari, but on Firefox and IE it has these awful purple/blue lines around the edge of each picture.

 

Does anyone know how I can fix this? I'd be so grateful for any help. And once the site has more than a penny to its name, there may be a fair bit of paid web design work for anyone who helps out now!

 

Thanks in advance,

 

Louis

Your page is seriously lacking in some important codes.

 

The blue border is the image link border and can be got rid of by inserting

img { border: none; }

in a stylesheet, except that you don't have a stylesheet, nor a doctype, nor html tags, nor a charset, nor a title, nor body tags.

 

As a quick fix, put this inside the head section between the <head> and </head> tags:-

style type="text/css">
img { border: none; }
</style>

 

Then learn about the other items.

 

Your code needs to be more like:-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<meta http-equiv="content-type" content="text/html;  charset=utf-8">
<title>Test</title>    
<meta name="google-site-verification" content="UzoDb9F10R3DLrM7IIchBxhO-YdGqm68eK_va6J_4vo">
<meta name="generator" content="Big Cartel">
<style type="text/css">
img { border: none; }
</style>
</head>
<body>
<CENTER><a href="http://www.thelbd.bigcartel.com/products" target="_blank"><IMG SRC="http://cache1.bigcartel.com/product_images/19479971/bigcaretl_site_header.jpg" ALT=theLBD logo></a></CENTER>
<CENTER><a href="http://www.thelbd.co.uk/products" target="_blank"><IMG SRC="http://cache0.bigcartel.com/product_images/19479931/3polaroids1.jpg" ALT=Home Splash></a></CENTER>
<CENTER><a href="http://www.thelbd.co.uk/products" target="_blank"><IMG SRC="http://cache0.bigcartel.com/product_images/19480011/SHOP_LBD_button.jpg" ALT=Shop></a><a href="http://www.thelbd.co.uk/little-black-blog" target="_blank"><IMG SRC="http://cache1.bigcartel.com/product_images/19480051/BLOG_button.jpg" ALT=Blog></a></CENTER>
</body>
</html>

 

but even then, I haven't cured all the problems.

I've used wickham43's code and made it validate. Also fixed some pretty major layout bugs on larger screens like mine:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<meta http-equiv="content-type" content="text/html;  charset=utf-8">
<title>Test</title>    
<meta name="google-site-verification" content="UzoDb9F10R3DLrM7IIchBxhO-YdGqm68eK_va6J_4vo">
<meta name="generator" content="Big Cartel">
   <style type="text/css">
       img { border: none; }
   </style>
</head>
<body>
<div style="text-align:center;"><a href="http://www.thelbd.bigcartel.com/products"><img src="http://cache1.bigcartel.com/product_images/19479971/bigcaretl_site_header.jpg" alt="theLBD logo"></a></div>
<div style="text-align:center;"><a href="http://www.thelbd.co.uk/products"><img src="http://cache0.bigcartel.com/product_images/19479931/3polaroids1.jpg" alt="Home Splash"></a></div>
<div style="text-align:center;"><a href="http://www.thelbd.co.uk/products"><img src="http://cache0.bigcartel.com/product_images/19480011/SHOP_LBD_button.jpg" alt="Shop"></a><a href="http://www.thelbd.co.uk/little-black-blog"><img src="http://cache1.bigcartel.com/product_images/19480051/BLOG_button.jpg" alt="Blog"></a></div>
</body>
</html>

Thank you both of you guys, this works perfectly! I have noted your details as the go-to guys when we do a more major site upgrade in the (hopefully near) future.

 

Cheers again!