2 replies [Last post]
Emma's picture
Last seen: 1 year 32 weeks ago
Timezone: GMT+1
Joined: 2005-04-19
Posts: 150
Points: 37

I have created a list for navigation (from a tutorial) for the top navigation of my page, however in FF it is displayed as if broken, with half the list appearing below the rest. This div is called #navcontainer.

As for the rest of the problems in presentation, I am hoping there is a solution!

I also have a left hand logo displayed in an H1 tag but would like a list to appear directly across from this (called #pipe_menu ), as well as a search box.

Is this possible or - because a header tag and list tag are block level elements - will one have to go underneath the other?

Is there a workaround?

Many thanks

Untitled Document

/* CSS Document */ html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{ margin:0; padding:0; border:0; border-collapse:separate; border-spacing:0;}


body{ font-family: verdana, arial, helvetica, sans-serif;
font-size:100.1%; /*** Don't change this setting. Make all otherfont-sizes in % (preferred) or ems ***/
color: #2E005B;
background:#fff; /*** Background colour of page ***/
min-width:960px; /*** Content Width ***/

a {
font-size: 12px;
color: #130B44;

input,select{ margin:0; padding:0;}

strong,b{ font-weight:bold;}

.floatcontainer{display: inline-block;}/* Hides from IE Mac \*/
* html .floatcontainer {height:1%}
.floatcontainer{display:block}/* End Hack */

#fullheightcontainer{ margin:0 auto; text-align:left; position:relative; width:960px; /*** Content Width ***/ display:table; height:100%; margin-bottom:-24px; /*** NEGATIVE TOTAL Height of Footer Rows ***/ font-size:78%; line-height:1.1em;}

#col1, #col2, #col3, #col4 { float:left; display:inline; width:222px; padding-bottom:24px; /*** Footer height, must use padding because of IE collapsing margins. Margins also cause problems for all browsers with column jumping ***/}

* html #col2, * html #col3, * html #col4 {margin-left:-3px} /*** Fix for IE6 float bug, don't set left margins on these floated columns in the normal css, add the margin you want to the right margin of the div to the left of it instead. ***/

#col1 { width:170px; margin-left:2px; margin-right:12px;}
#col2 { width:300px; margin-right:12px;}
#col3 { margin-right:12px;}
#col4 ul { list-style-type: square;}/* ::::: http://www.errolfisher.com/layout.css ::::: */

p { padding: 4px; }
#header { background: url(images/topbar.jpg) no-repeat scroll center top; height: 92px; width: 960px; }

#header h1 {
background: url( url(../images/logo1.jpg)) no-repeat;
background-image: url(../images/logo1.jpg);

h3 {font-size:100%}

ul#pipe_menu {
float: right;
margin: 0px -0.4em 0 30px;
padding: 0;
overflow: hidden;
line-height: 1.3em;
ul#pipe_menu li {
border-left: 1px solid #094FA3;
float: left;
list-style-type: none;
padding: 0 0.4em;
margin-left: -1px;
ul#pipe_menu a {
text-decoration: none;
color: #130B44;
ul#pipe_menu a:hover {
color: #024e5b;
float :right;
clear: both;
width: 250px;
border: 1px solid #666;
margin-top: 0px;

#navcontainer ul li
list-style-type: none;
padding: 0;
margin: 0;
display: block;
float: right;
background: url("../images/navBarBg.gif") repeat-x 22px;
font: 12px/22px "Lucida Grande", verdana, sans-serif;
text-align: center;

#navcontainer a
color: #130B44;
text-decoration: none;
display: block;
width: 156px;
border-top: 1px solid #727272;
border-bottom: 1px solid #727272;
border-left: 1px solid #727272;
border-right: 1px solid #727272;

#navcontainer li#active { background: url("../images/navBarBgHover.gif") repeat-x 22px; }
#navcontainer a:hover { background: url("../images/navBarBgHover.gif") repeat-x 22px; }

/**.menu { height: 29px; width: 960px; }

.cssnav { padding: 0px; background: url(overbtn.jpg) no-repeat; overflow: hidden; position: relative; float: right; margin-right: 1px; width: 122px; height: 29px; font-weight: bold; }
.cssnav a { overflow: hidden; font-size: 78%; width: 122px; height: 29px; display: block; float: right; color: white; text-decoration: none; }
.cssnav a:hover { color: #FFF; }
.cssnav img { border: 0pt none ; width: 122px; height: 29px; }
* html a:hover { visibility: visible; }
.cssnav a:hover img { visibility: hidden; }
.cssnav span { position: absolute; left: -2px; top: 8px; text-align: center; width: 122px; cursor: pointer; }**/

#bar { background: url(images/barback.jpg) repeat; height: 24px; }

#sidebar { border: 1px solid #CCC; background: #A4C9E8; color: #FFF; margin-top: 8px; }

#sidebar ul { margin: 0pt; padding: 0pt; list-style-type: none; }
#sidebar ul li { margin: 0pt; padding: 0pt; }
#sidebar ul li a { border-bottom: 1px solid #FFF; padding: 6px 0px 6px 7px; background: #0395AF; color: #FFF; display: block; font-weight: bold; text-decoration: none;} /*** why was this set to height 1%? For IE6? IF so use the css like this: * html #sidebar ul li a {height:1%} ***/

#sidebar ul li a:hover { border-right: 1px solid #FFF; border-bottom: 1px solid #FFF; background: #011A63; color: #FFF); }

#sidebar h3, #popular h3 {background: url(images/wback.jpg); height: 20px; color: #FFF; font-weight: bold; padding-top: 4px; padding-left: 6px; }

#thought { padding: 4px; background: #C1D9DD; margin-left: 1px; margin-top: 8px; }

#popular { border: 1px solid #CCC; margin-left: 1px; margin-top: 8px;}

#popular h3 {padding: 3px 0px 0px 5px; background: url(../images/grback.jpg); height: 21px; color: #FFF; font-weight: bold; }

#popular li{
list-style-position: inside;
padding: 4px;

#centerleft { border: 1px solid #CCC; margin: 8px 0px;}
#othernews { border: 1px solid #CCC; margin: 8px 0;}

#centerleft h3, #othernews h3 { padding: 3px 0px 0px 5px; background: url(images/puback.jpg); height: 21px; color: #FFF; font-weight: bold; }

#bulletin { border: 1px solid #CCC; margin: 8px 0; }

#bulletin h3 { padding: 3px 0px 0px 5px; background: url(images/grback.jpg); height: 21px; color: #FFF; font-weight: bold; }

#rightside, #travel { border: 1px solid #CCC; margin: 8px 0; }

#rightside li, #travel li{ margin-left: 18px; padding: 4px; }

#rightside h3, #travel h3 { padding: 3px 0px 0px 5px; background: url(images/puback.jpg); height: 21px; color: #FFF; font-weight: bold; }

#footer{ z-index:1; position:relative; width:100%; height:0px;}

#footer-inner{ width: 960px; margin:0 auto; height:0px;}

#copyright{ margin:0px; background: url(images/footer.jpg) repeat;text-align:center;height:24px;overflow:hidden;font-size:65%;}

.lftflt { margin: 0px 15px 5px 10px; float: left; }

wolfcry911's picture
Last seen: 8 years 40 weeks ago
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

you haven't validated this

you haven't validated Sad
this line has an error

  • Home

    Emma's picture
    Last seen: 1 year 32 weeks ago
    Timezone: GMT+1
    Joined: 2005-04-19
    Posts: 150
    Points: 37

    Sorry I had got this menu

    Sorry I had got this menu from a tutorial so thought it was okay. I have validated the code now and have got my menu working in FF. The list above was putting it out of line.

    However the problem still remains...how do I add another list of links for navigation and a search box (div) across from my H1 (background image) as these would be block level elements? Is is possible??

    n.b. I am working to replicate a set design from the clients own layout.

    Here is the new HTML, troublesome list removed,

    Many thanks

    Untitled Document