3 replies [Last post]
nathan_canada
Offline
newbie
Canada
Last seen: 12 years 26 weeks ago
Canada
Joined: 2007-06-13
Posts: 3
Points: 0

Hello,

The site I am working on has an annoying 12px gap between the top navigation bar and the left bar in Firefox. It appears fine in IE.

This is the css I am using:

body {
background-color: #FFE14F;
font-size: 12px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#000000;
padding:0px;
margin:0px;
}
.bullet {
	font-size: 14px;
	font-weight: bold;
	color: #000000;
}

A:link {
	COLOR: #0000CC; text-decoration: none
}
A:visited {
	COLOR: #C86000; text-decoration: none
}
A:active {
	COLOR: #C86000; text-decoration: none
}
A:hover {
	COLOR: #C86000; text-decoration: underline
}


h1 {
font-size: 11px;
text-transform:uppercase;
background-color: #00AEEF;
border-top:1px solid #564b47;
border-bottom:1px solid #564b47;
padding:5px 15px;
margin:0px }

h2 {
font-size:20px;
font-weight: normal;
padding: 5px 10px;
margin:0px;}

h3 {
font-size:18px;
font-weight: normal;
padding: 0px 5px;
color:#FF0202;
margin:5px;}

img.download {vertical-align:middle;}

/* ----------container to center the layout-------------- */
#container {
width: 900px;
margin-bottom: 0px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
background-color: #FFFFFF;
}

/* ----------banner for logo-------------- */
#banner {
	background-color: #1B4298;
	text-align: center;
	padding: 0px;
	margin: 0px;
	width: 900px;
	height: 150px;
}
#banner img {
	padding-right: 0px;
	padding-left: 0px;
} 

/* -----------------content--------------------- */
#content {
	background-color: #ffffff;
	padding: 0px;
	margin-left: 200px;
	font-size: 14px;
	white-space: normal;
	line-height: 1.5;
}
div#content { 
min-height:600px;
height:expression(this.scrollHeight > 600 ? "auto":"600px"); 
}

p, pre{
padding: 5px 10px;
margin:0px;
}

/* --------------left navi------------- */
#left {
	float: left;
	width: 200px;
	margin: 0px;
	padding: 0px;
	color: #FFFFFF;
	background-color: #FF0000;
	height: 650px;
}
#left ul {
	padding-left: 0;
	margin-left: 0;
	margin-top:0px;
	background: #FF0000;
	color: white;
	float: left;
	width: 100%;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	text-align: left;
	height: 20px;
	padding-top: 20px;
	line-height: 1.8;
}
#left ul li {
	text-align: left;
}

#left ul li a {
	padding-top: 3px;
	padding-bottom: 3px;
	background-color: transparent;
	color: #FFE14F;
	float: none;
	padding-right: 10px;
	padding-left: 10px;
}

#left ul li a:hover {
  background: #FF0000 repeat-x left top; 
  color: #FFE14F;
}

/*---------menu------------ */
#navcontainer ul {
	padding-left: 0;
	margin-left: 0;
	margin-top:0px;
	background: #00AEEF no-repeat center top;
	color: White;
	float: left;
	width: 100%;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	text-align: center;
	height: 20px;
	padding-top: 5px;
}

#navcontainer ul li {
	display: inline;
	text-align: center;
}

#navcontainer ul li a {
	padding-top: 3px;
	padding-bottom: 3px;
	background-color: transparent;
	color: White;
	text-decoration: none;
	float: none;
	border-right: 1px solid #FFFFFF;
	padding-right: 10px;
	padding-left: 10px;
}

#navcontainer ul li a:hover {
  background: #00AEEF repeat-x left top; 
  color: #EF3523;
}

#linklist {
  padding-left: 0;
  margin-left: 0;
  border-bottom: 1px solid #D1D9C4;
  width: 140px;
}

#linklist li {
  list-style: none; 
  margin: 0;
  line-height:20px;
  border-top: 1px solid #D1D9C4;
  font-family:verdana;
  font-size:10px;
}

#linklist li a { text-decoration: none; }

/* -----------footer--------------------------- */
#footer {
	clear: both;
	margin: 0px;
	text-align: right;
	height: 30px;
	background-color: #00AEEF;
	color: #FFFFFF;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	padding-top: 10px;
}
#feature_box2 {
	color: #FFFFFF;
	background-color: #00a79c;
	width: 200px;
	float: right;
	padding: 0px 5px 5px;
	line-height: 18px;
	position: relative;
	margin-right: 10px;
}
a.basic:link {color: #FFFFFF; text-decoration: none; }
a.basic:visited {color: #FFFFFF; text-decoration: none; }
a.basic:hover {color: #FFFFFF; text-decoration: underline; }
a.basic:active {color: #FFFFFF; }

a.basic1:link {color: #FFFFFF; font-size: 16pt; font-weight: bold; }
a.basic1:visited {color: #FFFFFF; font-weight: bold; }
a.basic1:hover {
	color: #000099;
	text-decoration: none;
}
a.basic1:active {color: #FFFFFF; } 

a.basic2:link {color: red; text-decoration: none; }
a.basic2:visited {color: purple; text-decoration: none; }
a.basic2:hover {color: orange; text-decoration: underline; }
a.basic2:active {color: blue; }

a.basic3:link {color: #0000ff; font-size: 18pt; font-weight: bold; }
a.basic3:visited {color: #894f7b; font-weight: bold; }
a.basic3:hover {text-decoration: overline; background-color: #003399; }
a.basic3:active {color: red; } 
.bold_red {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #FF0000;
	font-weight: bold;
}
.right_column_bold {
	font-size: 14px;
	font-weight: bold;
}

Help! What am I doing wrong?

Thanks for your help.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 7 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

Hard to say without the html

I can only guess, as you didn't give us the html or a link. Have you tested whether it's a collapsed margin?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

nathan_canada
Offline
newbie
Canada
Last seen: 12 years 26 weeks ago
Canada
Joined: 2007-06-13
Posts: 3
Points: 0

HTML

Thanks for the quick reply!

Here's the HTML I'm using:

http://www.wallaceimedia.com/test/test.html

Does that help? I'm trying to get rid of the space between the blue top bar and the side red bar.

nathan_canada
Offline
newbie
Canada
Last seen: 12 years 26 weeks ago
Canada
Joined: 2007-06-13
Posts: 3
Points: 0

Oops, looks like it's fixed!

Sorry to waste your time, looks like while preparing the test I found out what was going on. It was the image pushing down, making that space.

Thanks again for the quick reply.

Solved!