Wed, 2007-06-13 05:39
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.
Wed, 2007-06-13 05:55
#1
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
Wed, 2007-06-13 06:24
#2
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.
Wed, 2007-06-13 06:30
#3
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!