[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 176
  • 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
brucegustAuthor 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
 
brucegustAuthor Commented:
That did it!
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

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