• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 183
  • Last Modified:

How can I get this image to lay flush against my menu?

No matter what I've tried, I can't get the header image to lay flat against the top of the black nav bar. At one point, I put in a background image and lined up the orange part of the menu and that worked until I tried it in Safari and the alignment was off.

So, now I'm back to where I was two days ago, only now I've GOT to figure this out. How can I get the header image to lay flat against the top of the menu?

I'm thinking the source code has what you need to determine where I'm blowing it and I've also included my stylesheet.

Thanks!

The page, by the way, is http://www.countryshowdown.com/Chevron 
body {
	font-family: Verdana, Microsoft Sans Serif;
	font-size: 12px;
	color: #000000;
	text-align: center;
	vertical-align: top;
	padding: 0px;
	height: 100%;
	width: 100%;
	margin: 0;
	background-image: url(images/tile.gif);	
}

td {
font-family: Verdana, Microsoft Sans Serif;
	font-size: 12px;
	color: #000000;
	text-align: left;
}

td.top_header {
	text-align: center;
}

td.photo_gallery {
	text-align: center;
	width:100px;
	height:75px;
}

td.marquee_holder {
	font-size: 1px;
}

td.marquee {
font-family: Verdana, Microsoft Sans Serif;
	font-size: 10px;
	color: #000000;
	text-align: left;
	width:935;
}

td.background {
background-image: url(images/filler_huge.jpg);	
background-repeat: repeat-x;
text-align: center;
}

td.tray {
width: 950px;
}

.login_box{
  background-image:url('images/text_field.jpg');
  border:0px;
  width:109px;
  height:21px;
  font-size: 12px;
  color: #b1a18f;
}

form {
      display: inline;
	  margin-top: 2px;
	  margin-bottom: 0;
}

A.marquee
{
	font-family: Verdana, Microsoft Sans Serif;
	font-size: 10px;
	color: #000000;
	text-decoration:underline;
}

A.marquee:Hover {
	font-family: Verdana, Microsoft Sans Serif;
	font-size: 10px;
	color: #000000;
	text-decoration:underline;
}

A.marquee:Visited {
	font-family: Verdana, Microsoft Sans Serif;
	font-size: 10px;
	color: #000000;
	text-decoration:underline;
}

#nav {
		margin: 0;
		padding: 0px 6px 0;
		background: #000000;
		width: 938px;
		height:26px;
		}
	
	#nav li {
		height: 25px;
		margin: 0 5px;
		padding: 0 0 0px;
		display: block;
		float: left;
		position: relative;
		list-style: none;
	}

/* main level link */
	#nav a {
		font-weight: bold;
		color: #e7e5e5;
		text-decoration: none;
		display: block;
		padding:  3px 20px;
		margin: 0;
		height: 20px;
	}
	#nav a:hover {
		background: #000;
		color: #fff;
	}

	/* main level link hover */
	#nav .current a, #nav li:hover > a {
		background: #000000;
		color: #ffffff;
	}

	/* sub levels link hover */
	#nav ul li:hover a, 
	#nav li:hover li a {
		background: none;
		border: none;
		color: #666;
	}
	#nav ul a:hover {
		background: #000000;
		color: #000000 !important;
	}

	/* dropdown */
	#nav li:hover > ul {
		display: block;
	}
	
	/* level 2 list */
	#nav ul {
		display: none;
		margin: 0;
		padding: 0;
		width: 200px;
		position: absolute;
		top: 26px;
		left: 0;
		background: #ffffff;
	}
	
		#nav ul li {
		float: none;
		margin: 0;
		padding: 0;
	}

	#nav ul a {
		font-weight: normal;
		text-shadow: 0 1px 0 #fff;
	}

	/* level 3+ list */
	#nav ul ul {
		left: 200px;
		top: 0px;
	}

	/* clearfix */
	#nav:after {
		content: ".";
		display: block;
		clear: both;
		visibility: hidden;
		line-height: 0;
		height: 0;
	}
	#nav {
		display: block;
	}
	
	#facebook li:hover > ul {
		display: block;
	}
	
	
	#facebook ul {
		display: none;
		margin: 0;
		padding: 0;
		width: 365px;
		height:185px;
		position: absolute;
		top: 26px;
		left: 0;
		background: #ffffff;
	}
	
	#facebook ul a {
		color: #666;
		text-decoration: none;
		display: block;
		padding:  3px 20px;
		margin: 0;
		height: 20px;
		}
	
	#facebook ul a:hover {
		background: #ffffff;
		color: #000000 !important;
	}
	
	#facebook ul.plain a {
		text-decoration: none;
		}
		
	#jukebox li:hover > ul {
	display: block;
	}
		
	#jukebox ul {
		display: none;
		margin: 0;
		padding: 0;
		width: 550px;
		height:200px;
		position: absolute;
		top: 26px;
		left: 0;
		background: #ffffff;
	}
	
	#jukebox ul a {
		color: #666;
		text-decoration: none;
		display: block;
		padding:  3px 20px;
		margin: 0;
		height: 20px;
		}
	
	#jukebox ul a:hover {
		background: #ffffff;
		color: #000000 !important;
	}
	
	#jukebox ul a.photo {
	height:65px;
	width:100px;
	padding:  0px 0px;
	text-decoration: underline;
	}
	
	#jukebox ul a.photo_title {
	height:20px;
	padding:  3px 1px;
	text-decoration:none;
	}
	
	#jukebox ul.plain a {
		text-decoration: none;
		}
		
	
		
	/* main level link hover */
	#nav .music a, #nav li.music:hover > a {
		background: #ee3123;
		color: #ffffff;
		text-decoration:none;
	}

Open in new window

0
brucegust
Asked:
brucegust
  • 3
  • 2
  • 2
  • +1
1 Solution
 
GreggCommented:
Could you please try normalizing the table:

table { border-collapse: collapse; border-spacing: 0; }
td { margin: 0; padding: 0; }

See what impact that has.
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
Set the vertical-align to bottom on your image.
0
 
rgranlundCommented:
Give the Containing <tr> a height 0f 194px.  Also, be advised that the image is 4px's larger than the container and that can push things.
0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
brucegustPHP DeveloperAuthor Commented:
I implemented all of your suggestions and nothing seemed to help. Take a look. What else can I try?

http://www.countryshowdown.com/Chevron
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
You did not give your image a vertical-align property. Set the image to vertical-align: bottom;

<img height="194" src="images/header_image_II.jpg" style="vertical-align: bottom;">

Open in new window

0
 
rgranlundCommented:
Also, The solution to this problem may be to [lace a <br /> immediately following the image.

Also, try setting the cellpadding, cellspacing, and border attributes to zero.
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
The default vertical alignment for an image is baseline. The default display for an image is inline. Compliant browsers will include descender space below the image at whatever font-size is set wherever the image appears (usually the default font-size for a p tag). There are two ways to eliminate the descender space, change the vertical align to anything but baseline or change the display to block. I usually have better success setting the vertical align to bottom.
0
 
brucegustPHP DeveloperAuthor Commented:
That did it!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 3
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now