image and ul tag create a gap?

styleBunny · Mar 25, 2005

Hi people,

I have this site

http://www.sminedesign.com/clients/rapidLabels/

when viewed in ie6 or ff1, the menu on the top RHS, has a small gap between the top image and the ul tag (the ul tag holds the menu list items), here is the code

Code:

<div id="head">
		
		<div id="navlist">
			<img src="images/common/rl_menuBG01.gif" />
			<ul>
			
				<li id="uberlink"><a href="about.php">About Us</a></li>
				<li><a href="contact.php">Contact</a></li>
				
			</ul>
			<img src="images/common/rl_menuBG02.gif" />
		</div>		
		
	</div>

the css file is here

http://www.sminedesign.com/clients/rapidLabels/css/rlStyle.css

the styles for the menu are at the bottom of the file.

I have seem similar problems before, but have never been too bothered by it, now its really bugging me!

any suggestions would be grand.
Paul.

DRJ478 · Mar 25, 2005

First of all:
You probably posted in the wrong forum. There is no question here that realted to PHP.

Anyway, here are some ideas:
The printing of the browser info into the HTML happens at an imporper place (must be a print_r()). The browsers will not be able to validate the document in strict mode, as per your doctype declaration.
I would remove that and also redeclare the doctype less strict, maybe as
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"

http://www.w3.org/TR/html4/loose.dtd">

and observe if the gap goes away.
Also, there are specific rules on how a CSS file should be structured. I ran your CSS file through a CSS editor (Bradbury's TopStyle) and it optimized the structure to:

Code:

/* CSS Document */

a:link, a:visited{
	color: #2D1E2D;
}

a:hover{
	text-decoration: none;
}

body {
	background-color: #F1F6FA;
	color: #000000;
	color: #2D1E2D;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	margin: 40px 0;
	text-align: center;
}

h1 {
	border-bottom: 1px solid;
	color: #E5372E;
	font: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: normal;
	width: 330px;
}

img{
	border: 0px;
	margin: 0px;
	padding: 0px;
}

li{
	font-size: 0.8em;
	margin-left: 175px;
}

p,h1{
	font-size: 0.8em;
	margin: 0px 0px 18px 155px;
	text-align: justify;
}

ul,li{
	text-align: left;
}

.clear{
	clear: both;
	display: block;
}

.contact{
	font-size: 0.8em;
	margin-left: 0px;
	margin-right: 0px;
	text-align: left;
}

.textcopyright{
	clear: none;
	color: #999999;
	display: inline;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 0.7em;
	margin: 0px;
	padding: 0px;
}

.textcopyright a:link, .textcopyright a:visited{
	font-family: Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
}

.textcopyright a:hover, .textcopyright a:active{
	font-family: Geneva, Arial, Helvetica, sans-serif;
	text-decoration: underline;
}

#container {
	background-color: #F1F6FA;
	margin: 0 auto;
	padding: 10px;
	text-align: left;
	width: 740px;
}

#content {
	background: url(../images/common/rl_runner.gif) #00FF55 top left repeat-y;
	display: block;
	float: left;
	height: 605px;
	min-height: 605px;
	width: 520px;
}

#copyright {
	border-top: 1px solid #BABCBE;
	margin: 0 auto;
	padding: 5px 0px 0px 10px;
	text-align: left;
	width: 730px;
}

#head {
	background: url(../images/common/rl_mast.gif) #F1F6FA no-repeat;
	clear: both;
	display: block;
	height: 358px;
	min-height: 358px;
	width: 740px;
}

#head p{
	font-size: 13px;
	line-height: 1.3em;
	padding: 225px 200px 0px 0px;
	text-align: right;
}

#images {
	background-color: #D4BFFF;
	display: block;
	float: right;
	margin-left: 10px;
	width: 200px;
}

#menu table{
	border: 1px;
	height: 200px;
	text-align: center;
}

#menu td{
	background-image: url(../images/common/rl_menuBGUp.gif) no-repeat;
	display: block;
	font-size: 0.8em;
	margin: 0px;
	padding: 5px 0px;
	text-align: center;
}

/* menu styles */
#navlist {
	float: right;
	padding-top: 190px;
	width: 160px;
}

#navlist a {
	display: block;
	padding: 8px 8px 8px 30px;
}

#navlist a:link, #navlist a:visited {
	text-decoration: none;
}

#navlist a:hover, #navlist a:active,
#uberlink a:link, #uberlink a:visited,
#uberlink a:hover, #uberlink a:active {
	background-image: url(../images/common/rl_menuBGOver.gif);
	background-repeat: no-repeat;
	color: #2D1E2D;
}

#navlist li {
	background-image: url(../images/common/rl_menuBGUp.gif);
	background-repeat: no-repeat;
	display: block;
	margin: 0px;
	padding: 0px;
	width: 160px;
}

#navlist ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

That's all the help I can offer.
Try the HTML/CSS forum.

styleBunny · Mar 25, 2005

hi there,

thanks for that, yeah i did post to the wrong forum, oops.

thanks again,
paul.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

image and ul tag create a gap?

styleBunny

Technical User

DRJ478

IS-IT--Management

styleBunny

Technical User

Similar threads

Part and Inventory Search

Sponsor