Borders on Menu

Photonerd · 10-08-2012, 05:39 AM

Hi everyone, this is my first post let me introduce myself, I have had web programing experience in the past and I just recently got back into web design and coding. I knew PHP, XHTML 1.0 and mySQL.

I'm developing a website for my photography company and I need some help.

when I run my page in Internet Explorer or Google Chrome, I get borders around the button on my menu at the top. They do not appear in FireFox so essentially, how do I get rid of the borders. Thanks in advanced! If you open my link, you'll see what I mean: http://beta.AndrewKoberPhotography.com/

and here's my source code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>Andrew Kober Photography</title>
	<meta name="keywords" content="Andrew Kober Photography, Photography, Photos, Studio, Washington D.C., Virginia">
	<style type="text/css">
		img {
		border: none;
		}
		a {
		border: none;
		text-decoration: off;
		}
		#menu{
		width: 1024px;
		height: 68px;
		margin-left: auto;
		margin-right: auto;
		border: 0;
		}
		img.home {
		background: url("images/home.jpg");
		width: 104px;
		height: 68px;
		display: block;
		float: left;
		}
		img.home:hover {
		background: url("images/home_roll.jpg");
		background-postition: -150px 0;
		}
		img.portfolio{
		width: 132px;
		height: 68px;
		background: url("images/portfolio.jpg");
		display: block;
		position: abosulute;
		right: 0px;
		float: left;
		}
		img.portfolio:hover {
		background: url("images/portfolio_roll.jpg");
		}
		img.tears {
		background: url("images/tears.jpg");
		width: 100px;
		height: 68px;
		display: block;
		float: left;
		}
		img.tears:hover {
		background: url("images/tears_roll.jpg");
		}
		#container {
		width: 1024px;
		margin-left: auto;
		margin-right: auto;
		}
		img.bio {
		background: url("images/bio.jpg");
		width: 84px;
		height: 68px;
		display: block;
		float: left;
		}
		img.bio:hover {
		background: url("images/bio_roll.jpg");
		}
		img.contact {
		background: url("images/contact.jpg");
		width: 137px;
		height: 68px;
		display: block;
		float: left;
		}
		img.contact:hover {
		background: url("images/contact_roll.jpg");
		}
		img.spacermenu {
		background: url("images/spacer_menu.jpg");
		width: 467px;
		height: 68px;
		display: block;
		float: left;
		}
		.left{
		width: 404px;
		height: 507px;
		background: #000000;
		float: left;
		color: #FFFFFF;
		font-family: Verdana;
		font-size: 11px;
		
		}
		.right{
		width: 620px;
		height: 507px;
		float: right;
		}
		h1{
		font-family: Verdana;
		font-size: 16px;
		}
	    body {
		}
	
	</style>
</head>

	<body bgcolor=000000>

		<div id="container">
			<div id="menu">
				<a href="index.htm"><img class="home"/></a><a href="portfolio.htm"><img class="portfolio" /></a><a href="tears.htm"><img class="tears" /></a><a href="bio.htm"> <img class="bio" /></a><a href="contact"><img class="contact" /></a><img class="spacermenu" />
			</div>
			<div class="left">
				<img src="images/banner.jpg" />
				<br />
				<h1>
					Welcome
				</h1>
				<br />
				<b>10-08-12</b>-Andrew Kober Photography is currently underconstruction and will be up soon. Thank you for visiting!
			</div>
			<div class="right">
				<img src="images/cam.jpg" />
			</div>
		</div>

	</body>
</html>

kevin619 · 10-08-2012, 05:47 AM

Use fire bug for checking whats the problem is there.

Photonerd · 10-08-2012, 06:13 AM

How do I use FireBug to correct the issue? the Issue is with Chrome and Explorer.

Excavator · 10-08-2012, 06:30 AM

Hello Photonerd,
Your menu is not really made with img 's from your markup. Those are divs in your markup that have background images presented from the CSS.

Try it like this once instead

Code:

		div.home {
		background: url("images/home.jpg");
		width: 104px;
		height: 68px;
		display: block;
		float: left;
		}
		div.home:hover {
		background: url("images/home_roll.jpg");
		background-postition: -150px 0;
		}

and

Code:

			<div id="menu">
	         <a href="index.htm"><div class="home"/></a>
                <a href="portfolio.htm"><img class="portfolio" /></a>
                <a href="tears.htm"><img class="tears" /></a>
                <a href="bio.htm"> <img class="bio" /></a>
                <a href="contact"><img class="contact" /></a>
                <img class="spacermenu" />
			</div>

Excavator · 10-08-2012, 01:37 PM

Of course that's invalid too.
Should be something more like this - <div class="home"><a href=="index.htm"></a></div>

Photonerd · 10-08-2012, 07:41 PM

Quote:

Originally Posted by Excavator

Of course that's invalid too.
Should be something more like this - <div class="home"><a href=="index.htm"></a></div>

Thank you so much for the help, everything seems to be running fine except the links do not work, I don't get the finger pointing cursor when I rollover the menu and the links do not take me anywhere when I click the link.

Photonerd · 10-08-2012, 11:12 PM

I supposed I should just start a new thread for the issue with the links?

waxdoc · 10-09-2012, 12:35 AM

This might not impact your problem, but noticed

Quote:

a { border: none; text-decoration: off; }

See http://www.w3schools.com/cssref/pr_t...decoration.asp

Quote:

none Defines a normal text. This is default
underline Defines a line below the text
overline Defines a line above the text
line-through Defines a line through the text
blink Defines a blinking text
inherit Specifies that the value of the text-decoration property should be inherited from the parent element

Also, unless you use shorthand for a couple of values, it should be background-image: url(_____);

Excavator · 10-09-2012, 04:08 AM

Quote:

Originally Posted by Photonerd

I supposed I should just start a new thread for the issue with the links?

The way you've fixed it, your styling the containing div with attributes that should be applied to the anchor.

Have a look at an menu example of mine that uses an unordered list to present the links. Your links contained in div elements will work fine as well, just look how I've styled the anchors seperately from the li's.