27 replies [Last post]
hannahm23
Offline
Regular
Last seen: 11 years 8 weeks ago
Joined: 2008-10-13
Posts: 13
Points: 0

I have the same problem: website www.onlinelogs.co.uk
I have just redesigned the website however I cannot get the menu to drop down. Going through the solutions in the post I still haven't managed to solve the problem, I am quite new to javascript...please help:

Menu code

<div id="navbar">
           <ul>
				<li><a href="index.htm">Home</a></li>
				<li><a href="http://www.onlineturf.co.uk/partners/onlinelogs/index.asp">Products</a>
					<ul>
    					<li><a href="http://www.onlineturf.co.uk/partners/onlinelogs/index.asp?step=2&Category=logs">Logs</a>
                        <li><a href="http://www.onlineturf.co.uk/partners/onlinelogs/index.asp?step=2&Category=logs">Kindling Sticks</a>        </li>
 
 
</ul></td></tr></table>
<li><a href="log-supplies.htm">Log Info</a>
	<table><tr><td>
	<ul>
	<li><a href="loguses.htm">Log Tips and Uses</a></li>
	<li><a href="logtypes.htm">Log Types</a></li>
	<li><a href="faqs.htm">FAQ's</a></li>
	<li><a href="terms.htm">Conditions of Sale</a></li>
	</ul>
	</td></tr></table>
</li>
 
 
<li><a href="team.htm">About Us</a>
	<table><tr><td>
	<ul>
	<li><a href="team.htm">Who's Who</a></li>
	<li><a href="history.htm">Our History</a></li>
	<li><a href="cameras.htm">Web Cameras</a></li><li><a href="eshot.htm">Newsletters</a></li>
	</ul>
	</td></tr></table>
</li>
 
<li><a href="contact.htm">Contact Us</a>
	<table><tr><td>
	<ul>
	<li><a href="http://www.onlineturf.co.uk/partners/onlinelogs/feedback.asp">Feedback</a></li>
	<li><a href="links.htm">Links</a></li>
    <li><a href="sitemap.htm">Info</a></li>
	<li><a href="contact.htm">Contact Details</a></li>
	</ul>
	</td></tr></table>
</li>
</ul>
  </div>

CSS

#navbar {
	float:left;
	width:800px;
	font-size:10px;
	border-top:1px solid #996633;
	background-color: #996633;
	position: inherit;
}
#navbar ul {
	padding:0;
	margin:0;
	list-style-type:none;
}
#navbar ul li {
	float:left;
	background-image:url(images/arrow_brown2.gif);
	background-position:left;
	background-repeat:no-repeat;
	position: relative;
	width: 150px;
}
 
#navbar ul li a, #navbar ul li a:visited {
	float:left;
	display:block;
	text-decoration:none;
	color:#FFFFFF;
	padding:0px 30px;
	line-height:25px;
	height:30px;
}
 
#navbar ul li:hover {
	width:150px;
}
 
#navbar ul li a:hover {
	color:#000000;
}
 
#navbar ul li:hover a {
	color:#3E1D14;
}
 
#navbar ul li ul {
display: none;
}
#navbar table {
	margin:0; 
	border-collapse:collapse;
	font-size:11px; 
	position:absolute;
	top:0;
	left:0;
}
 
/* specific to non IE browsers */
#navbar ul li:hover ul {
	display:block;
	position:absolute;
	top:29px;
	margin-top:1px;
	left:0;
	width:140px;
	padding-left: 8px;
}
 
#navbar ul li:hover ul.endstop {
left:-90px;
}
#navbar ul li:hover ul li ul {
display: none;
}
#navbar ul li:hover ul li a {
	display:block;
	color:#fff;
	height:auto;
	line-height:15px;
	width:120px;
	background-color: #351B00;
	padding: 4px 16px;
}
#navbar ul li:hover ul li a:hover {
	color:#FF9900;
	background: #663300;
}
 
#navbar ul li:hover ul li:hover ul {
	display:block; 
	position:absolute; 
	left:153px; 
	top:-15px; 
	color:#000; 
	left:152px; 
	height:138px; 
	width:172px; 
	overflow:auto; 
	background:#888;
}
#navbar ul li:hover ul li:hover ul li a {background:#888;}
#navbar ul li:hover ul li:hover ul li.group {width:152px; padding:5px 0;}
 
 
#navbar ul li:hover ul li:hover ul.left {
left:-172px;
}
#navbar ul li:hover ul li:hover ul li a:hover {
	background:#666;
	color:#996633;
}

Thanks Smile

Mod edit: Please create a new thread for discussions about a new problem and please use correct code tags.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 25 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Nice looking site However

Nice looking site Smile However the first thing folks here do when given a link is to hit the validate button since it is pointless trying to debug error riddled code. If you fix as many of the 74 errors as you can you might well find things start to behave as you expect.

If you still have problems post back but start your own thread. (Tyssen did it for you) Smile

To post code highlight your code in the reply box and press the code button above it.

This will put your code in a scrollable box for the forum - easier for folks to read Smile Thanks.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

hannahm23
Offline
Regular
Last seen: 11 years 8 weeks ago
Joined: 2008-10-13
Posts: 13
Points: 0

Thanks so much, I will do

Thanks so much, I will do and report back Smile

hannahm23
Offline
Regular
Last seen: 11 years 8 weeks ago
Joined: 2008-10-13
Posts: 13
Points: 0

Made All the changes I can

Hi!
Ive been through the w3c validation reports and made all the changes I can, some errors are still there but they are changes that can't be made such as links to other pages specifying categories to go to and some live chat support code that they sent over to me.
None of the current errors are in the navbar section of the code and the drop downs still don't work in IE6.
My navbar code with no errors:

<div id="navbar">
       <ul>
			<li><a href="index.htm">Home</a></li>
			<li><a href="http://www.onlineturf.co.uk/partners/onlinelogs/index.asp">Products</a>
				<ul>
    			<li><a href="http://www.onlineturf.co.uk/partners/onlinelogs/index.asp?step=2&amp;Category=logs">Logs</a></li>
                <li><a href="http://www.onlineturf.co.uk/partners/onlinelogs/index.asp?step=2&ampCategory=logs">Kindling Sticks</a></li>									                </ul>
            </li>
       </ul>
 <ul>      
	<li><a href="log-supplies.htm">Log Info</a>
 
	<ul>
	<li><a href="loguses.htm">Log Tips and Uses</a></li>
	<li><a href="logtypes.htm">Log Types</a></li>
	<li><a href="faqs.htm">FAQ's</a></li>
	<li><a href="terms.htm">Conditions of Sale</a></li>
	</ul>
 
</li></ul>
 
 
<ul>
<li><a href="team.htm">About Us</a>
 
	<ul>
	<li><a href="team.htm">Who's Who</a></li>
	<li><a href="history.htm">Our History</a></li>
	<li><a href="cameras.htm">Web Cameras</a></li>
    <li><a href="eshot.htm">Newsletters</a></li>
	</ul>
 
</li>
</ul>
 
<ul>
<li><a href="contact.htm">Contact Us</a>
 
	<ul>
	<li><a href="http://www.onlineturf.co.uk/partners/onlinelogs/feedback.asp">Feedback</a></li>
	<li><a href="links.htm">Links</a></li>
    <li><a href="sitemap.htm">Info</a></li>
	<li><a href="contact.htm">Contact Details</a></li>
	</ul>
 
</li>
</ul>
 
  </div>

Css is still the same as above

Any ideas?

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 25 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Unfortunately there is no

Unfortunately there is no use looking at the CSS yet as there are still 74 errors. Many of these can be fixed by reading the explanation given below the error e.g.

Quote:

# Error Line 5, Column 72: end tag for "meta" omitted, but OMITTAG NO was specified.

…ype" content="text/html; charset=iso-8859-1">

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".

This error means what it says, you just have to identify the line it's talking about-

and the validator is right, the doctype you are using needs the space/> on the end like the others.

Quote:

Error Line 57, Column 22: end tag for element "table" which is not open.

The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.

Again it means exactly what it says - you may have opened one table and have two closing table tags. Mismatched pairs. You have some similar statements about

    and
  • tags.

Pay attention to the red errors with an "x" - the blue diamond one underneath is a helper saying "this is where you did this" the red one says "but you didn't do this or it needs that"

There is a roll-on effect with many of these and you'll be amazed how fixing one of these sometimes disposes of half a dozen error statements Smile Try again and read the explanations carefully, you'll get the hang of it.

Some of the syntax of the javascript statements appears out of whack but I can't help you with those I'm afraid.

An ampersand (&) needs to be specified as & but again, because I'm not familiar with the statements where they're used, I can't help. However it's worth having a shot at one and seeing what happens.

When the run of the mill stuff is fixed someone will be along to help with the rest.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

hannahm23
Offline
Regular
Last seen: 11 years 8 weeks ago
Joined: 2008-10-13
Posts: 13
Points: 0

Hi, Thanks for your reply,

Hi,

Thanks for your reply, I am a wally I am using http://www.onlinelogs.co.uk/buy-logs.htm as my test page and I will roll the fixes through all the pages when Im done. I have fixed all of the above errors on this page such as the /> closing tags. however the problem still is still in place. I have tried removing the javascript for the online chat but the menus still don't work in IE6 so they can't be the cause of the issue.
I am just testing on this one page because the website is live and has alot of traffic that I don't want to confuse.

Thanks,

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 2 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

If you are going to use a

If you are going to use a table for layout purposes (and you shouldn't), you should specify it's dimensions in the CSS, not the html.

If you are going to specify a width in the html (and this is a bad practice, html should say nothing about style or presentation) then it should not be:

<table width="800px">

but rather:

<table width="800">

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

hannahm23
Offline
Regular
Last seen: 11 years 8 weeks ago
Joined: 2008-10-13
Posts: 13
Points: 0

Me too!!

Thanks Ed but I couldn't agree more, I only occasionally use a table here and there, generally it's to display a table of results etc.
I only used it in this instance so I could have the header as a link back to the homepage (which I have removed for the time being to get the menus working properly)and to have the online live chat on the right (which I have also eliminated in order to narrow down the cause). Thanks for your advice though! Smile

Has anyone else had this problem with menus...I read that IE cannot read a:hover? is this true?

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 2 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

hannahm23 wrote:Has anyone

hannahm23 wrote:

Has anyone else had this problem with menus...I read that IE cannot read a:hover? is this true?

No it isn't. IE6 and above recognize pseudo elements on anchors, but not on anything else. Other more modern browsers recognize them on all elements, as the specification calls for.

a:hover works fine with IE6.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 25 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

I always have problems with

I always have problems with menus :rolleyes: Just in case IE does need a bit of help try putting this scrap of js as the last thing before your closing head tag. Note the function is sfhover so you will need to add that to your styles e.g.

#navbar ul li:hover, #navbar ul li:sfhover { width:150px; }

<script type="text/javascript"><!--//--><![CDATA[//><!--
 
sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
 
//--><!]]></script>

Hope it helps.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

hannahm23
Offline
Regular
Last seen: 11 years 8 weeks ago
Joined: 2008-10-13
Posts: 13
Points: 0

Hi I did try this and I

Hi I did try this and I changed my css to look like this:

#navbar {
	float:left;
	width:800px;
	font-size:10px;
	border-top:1px solid #996633;
	background-color: #996633;
	position: inherit;
}
#navbar ul {
	padding:0;
	margin:0;
	list-style-type:none;
}
#navbar ul li {
	float:left;
	background-image:url(images/arrow_brown2.gif);
	background-position:left;
	background-repeat:no-repeat;
	position: relative;
	width: 150px;
}
 
#navbar ul li a, #navbar ul li a:visited {
	float:left;
	display:block;
	text-decoration:none;
	color:#FFFFFF;
	padding:0px 30px;
	line-height:25px;
	height:30px;
}
 
#navbar ul li:hover, #navbar ul li:sfhover {
	width:150px;
	color:#000000;
}
 
#navbar ul li:hover a, #navbar ul li:sfhover a {
	color:#3E1D14;
}
 
#navbar ul li ul {
display: none;
}
#navbar table {
	margin:0; 
	border-collapse:collapse;
	font-size:11px; 
	position:absolute;
	top:0;
	left:0;
}
 
/* specific to non IE browsers */
#navbar ul li:hover ul, #navbar ul li:sfhover ul {
	display:block;
	position:absolute;
	top:29px;
	margin-top:1px;
	left:0;
	width:140px;
	padding-left: 8px;
}
 
#navbar ul li:hover ul.endstop, #navbar ul li:sfhover ul.endstop {
left:-90px;
}
#navbar ul li:hover ul li ul, #navbar ul li:sfhover ul li ul {
display: none;
}
#navbar ul li:hover ul li a, #navbar ul li:sfhover ul li a {
	display:block;
	color:#fff;
	height:auto;
	line-height:15px;
	width:120px;
	background-color: #351B00;
	padding: 4px 16px;
}
#navbar ul li:hover ul li a:hover, #navbar ul li:sfhover ul li a:hover {
	color:#FF9900;
	background: #663300;
}
 
#navbar ul li:hover ul li:hover ul, #navbar ul li:sfhover ul li:sfhover ul {
	display:block; 
	position:absolute; 
	left:153px; 
	top:-15px; 
	color:#000; 
	left:152px; 
	height:138px; 
	width:172px; 
	overflow:auto; 
	background:#888;
}
#navbar ul li:hover ul li:hover ul li a, #navbar ul li:sfhover ul li:sfhover ul li a {background:#888;}
#navbar ul li:hover ul li:hover ul li.group, #navbar ul li:sfhover ul li:sfhover ul li.group {width:152px; padding:5px 0;}
 
 
#navbar ul li:hover ul li:hover ul.left, #navbar ul li:sfhover ul li:sfhover ul.left {
left:-172px;
}
#navbar ul li:hover ul li:hover ul li a:hover, #navbar ul li:sfhover ul li:sfhover ul li a:hover {
	background:#666;
	color:#996633;
}

However when i uploaded this it stopped the menus working in any browser so I have had to revert back to the old version.
argh?!

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 25 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

I'm so sorry if I've sent

I'm so sorry if I've sent you on a wild goose chase, however all may not be lost.

Weeeeelll...if you're up for one more try...
Since the "cavalry" hasn't arrived yet, I have just implemented a centered menu which comes from "Centering a Drop Down Menu", but csshover.htc from Peterned (which this example uses to make IE hovers work) stopped working for me so I inserted the Suckerfish javascript I gave you above and it works.

I know you don't want a centered menu but the only thing keeping my menu centered is the #navholder that I put in - if you remove that it should sit left and may work for you. All you should need to do is adjust the width of #nav and the "width: 127px" you'll find all over the place (and the colours of course). Ignore the red bit on the end, I'm still tweaking (take background:red out of #nav).

The top items are evenly spaced and the drop downs match the width of the top item. I have changed the widths to px because I needed it to fit in 780px which is the min-width of my liquid page. You can see my adjusted version here and the code is below (anything indented is my changes). It's very messy at the moment, but it validates and it works in IE6 and FF2 - don't know about others yet -

#navholder
{
  text-align: center;
/*  color: blue;  */
  width: 780px;
	   margin: 8px auto;
}
 
 
 
#nav { 
	float: left;
	width: 780px;
	text-align: center; 
	text-transform: uppercase;
	font-size: 0.9em;
	   font-weight: bold;
	   margin: 10px auto;
	   list-style: none;
	   background: red;
}
 
/*
#nav ul { 
  width: 780px;
	margin: 0 auto;
	list-style: none;
}
*/		
 
#nav li { 
	float: left;
	position: relative;
	   width: auto;
}
 
 
#nav a { 
	display: block;
	width: 127px; 
	color: #FFF8DD;
	background-color: #E9A844;
	text-decoration: none;
		  padding: 8px 0;
}
 
#nav ul a {
  background: #E9A844;
  color: #FFF8DD;
  text-transform: none;
  text-decoration: none;
}
 
#nav a:hover { background-color: #C11B1B; }
 
#nav li ul { 
	display: block;
	position: absolute; 
	width: 127px; 
	left: -999em;
} 
 
#nav li:hover ul, #nav li.sfhover ul { left: 0 }
 
#nav li li {  display: block }
 
#nav ul a {padding: 3px 0;}
 
 
	</style>
 
 
<script type="text/javascript"><!--//--><![CDATA[//><!--
 
sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
 
//--><!]]></script>

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

hannahm23
Offline
Regular
Last seen: 11 years 8 weeks ago
Joined: 2008-10-13
Posts: 13
Points: 0

It still hasn't worked, ive

:shrug: It still hasn't worked, ive tried everything.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 25 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

What code is in the test

What code is in the test site now?

ETA:
Never mind I can see you've put your own back. Can you do me a favour and comment out all of your own css menu and then just copy mine into your HTML so I can see what it looks like? It's getting late here but I'll stay online for a while.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 25 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

PS - don't change anything -

PS - don't change anything - just recopy it from the post above and plonk it in there - red, sizing and all.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

hannahm23
Offline
Regular
Last seen: 11 years 8 weeks ago
Joined: 2008-10-13
Posts: 13
Points: 0

Moved test site

Hi,

I have moved to this test location so I wasn't working on the live site anymore and your code is still present here:

http://www.onlineeverything.co.uk/buy-logs.htm

Thanks Smee

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 25 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

okay give me a bit to see if

okay give me a bit to see if I can suss it.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 25 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

I'm still seeing your code -

I'm still seeing your code - I've cleared cache and force refreshed.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

hannahm23
Offline
Regular
Last seen: 11 years 8 weeks ago
Joined: 2008-10-13
Posts: 13
Points: 0

Your code vs My Code

...yours works! Ive compaired both of them

http://www.onlineeverything.co.uk/test.html

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 25 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Yes but we only want one

Yes but we only want one menu in there. If mine will work for you then we can just tweak it. However what I just saw was 3 lots of menu code :?

one lot of mine in the html and one in the css as well as your own naturally.
Now try taking mine out of the css. Comment out your own and let's see if the one in the html still works..

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

hannahm23
Offline
Regular
Last seen: 11 years 8 weeks ago
Joined: 2008-10-13
Posts: 13
Points: 0

Yeyyyyyyyy!!!

Yes it worked!! I think it had to many different different styles to follow!
Thank you sooooo much for your help!!!!
:thumbsup:

hannahm23
Offline
Regular
Last seen: 11 years 8 weeks ago
Joined: 2008-10-13
Posts: 13
Points: 0

Yeyyyyyyyy!!!

Yes it worked!! I think it had to many different different styles to follow!
Thank you sooooo much for your help!!!!
:thumbsup:

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 25 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Well we're getting closer

Laughing out loud Well we're getting closer at any rate Laughing out loud

But I should be seeing your menu items in there - mine are still there. Your html div id is #navbar I can see that but it should be reading the ul/li information into the new menu structure.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 25 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

You need to comment out the

You need to comment out the "non IE specific browser" nav code as well. This menu will take care of that.

ETA:
Sorry just saw the /* underneath the heading. :rolleyes:

I do think it is still being overridden by something since the drop downs should just about line up. You wrapper is 800px the #navholder is 780px. :?

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 25 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Do you have the Firebug

Do you have the Firebug extension? If not I strongly suggest you download it before going further, it's a brilliant little thing which shows you where everything is simply by hovering over the code which appears at the bottom of your screen.

There is still a conflict with the navholder - see how it's pushed over?

Anyway...are you good to go now?

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

hannahm23
Offline
Regular
Last seen: 11 years 8 weeks ago
Joined: 2008-10-13
Posts: 13
Points: 0

No I didnt

No I don't have firebug, but i will download it now. Yeh im good to go now, still a bit of a re-work but at least its displaying correctly!
Thanks for your help smee!!!

:thumbsup: :thumbsup: :thumbsup:

Oh also a GREAT Firefox add on I use is "web developer" its fab!

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 25 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Okay then - pleased I could

Smile Okay then - pleased I could help. You might try taking the nav out of #content and see if that helps with the remaining conflict with the drop downs. Firebug will show you. I have web dev toolbar too but Firebug is a whole other ballgame.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 9 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You need to zero out the

You need to zero out the margins/padding on #nav li ul.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference