Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9

Thread: Borders on Menu

  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Borders on Menu

    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>

  • #2
    New Coder
    Join Date
    Apr 2011
    Location
    California
    Posts
    54
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Use fire bug for checking whats the problem is there.
    App Developer, Front End Designer and Learner at>> Facebook App Development Company - Cygnis Media

  • #3
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    How do I use FireBug to correct the issue? the Issue is with Chrome and Explorer.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Photonerd (10-08-2012)

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Of course that's invalid too.
    Should be something more like this - <div class="home"><a href=="index.htm"></a></div>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Photonerd (10-08-2012)

  • #6
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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.

  • #7
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I supposed I should just start a new thread for the issue with the links?

  • #8
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    wrong value for text-decoration

    This might not impact your problem, but noticed
    a { border: none; text-decoration: off; }
    See http://www.w3schools.com/cssref/pr_t...decoration.asp
    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(_____);
    Last edited by waxdoc; 10-09-2012 at 12:39 AM.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Photonerd View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •