2 replies [Last post]
Emma
Emma's picture
Offline
Enthusiast
Last seen: 1 year 48 weeks ago
Timezone: GMT+1
Joined: 2005-04-19
Posts: 148
Points: 34

Hi
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
Em

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;}

html,body{height:100%}

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 ***/
text-align:center;}

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

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

strong,b{ font-weight:bold;}

.floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px}
.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;
width:179px;
height:92px;
position:relative;
text-indent:-99999em;
font-size:0px;
line-height:0px;
overflow:hidden;
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;
}
#searchbox{
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-type:square;
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
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 22 weeks ago
MA, USA
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
    Emma's picture
    Offline
    Enthusiast
    Last seen: 1 year 48 weeks ago
    Timezone: GMT+1
    Joined: 2005-04-19
    Posts: 148
    Points: 34

    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
    Em

    Untitled Document