SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy horizontal menus - having problems:(

    Hi all,
    Im trying to create a menu like the 2nd example on this page of tutorials in CSSplay:

    http://www.cssplay.co.uk/menus/drop_examples.html

    It looks fine when i post it into a new HTML page:
    (services link does dropdown to reveal a gew different options)Here:
    http://bluecrushdesign.co.za/first/dropdown.html

    BUT as soon as i stick it into the webpage, the dropdown (ie services) doesnt work
    Is there something in the CSS or html code that overrides it? Here(scroll to bottom):
    http://bluecrushdesign.co.za/first/about_us.htm

    Any ideas??
    dee
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works ok for me (although a dropdown at the bottom of the page isn't a good idea).

  3. #3
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It doesnt work in IE.
    It does work in firefox..

    So its an IE specific problem then..

    ps Lol was that a serious comment?
    I just put it at the bottom for testing purposes to show u guys..;-)
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works in IE6 for me.

  5. #5
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A big difference between those two pages is that the second one does not have a doctype, therefore dropping IE into quirks mode - this may be an issue with the menu in IE7.

  6. #6
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE 7 ;-))))))
    sorry i figured most have all browsers that they test with..

    And if it works for you in IE7 then i need a few other testers out there as mine definately doesnt work in IE7..:
    http://bluecrushdesign.co.za/first/about_us.htm
    (menu at bottom of page)
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  7. #7
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh my gosh youre a star..
    Ive been brought in to update this awful tables based site and im cringing looking at the code.. good spot ;-)))
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  8. #8
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by escapedf View Post
    IE 7 ;-))))))
    sorry i figured most have all browsers that they test with..
    Yes, but my main machine has IE6 installed as it is the browser that usually requires the most testing, and IE7 is on a networked machine that I didn't have on until you mentioned the problem was with IE.

  9. #9
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok guys i might need your help again
    adding a transitional doctype - means the dropdown actually works in IE, but in Firefox the whole page is messed up...

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    Then I tried that doctype too

    Heres the page:
    http://bluecrushdesign.co.za/first/about_us.htm

    also any ideas how to fix the height of this menu?
    when i change the line height or height in:
    menu2 ul li a
    it gives a strange gap between the menu and the dropdown items
    Last edited by escapedf; Mar 29, 2009 at 11:37.
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,711
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    That's not a full DTD so IE is still in quirks mode. Google a real one (HTML 4.01 strict).
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    On the <img> "images/FF generic layout hdr 01 FLAT_r4_c2.jpg" change teh colspan to 5

    PS: Really you should NOT be using tables for this. :/.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  11. #11
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    An Xhtml doctype is no use here either, as the syntax is not xhtml. Due to the way the page is formatted, a full html 4.01 transitional would be most appropriate :
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    Next, you have a few issues in the <head> section of the page, like two closing </head tags>. two calls to the stylesheet (which makes live debugging rather difficult), and javascript between the <head> and <body> :
    Code:
    <head>
    <title>About Us</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="description" content="Leadership training cape town">
    <meta name="keywords" content="Leadership Development, Leadership Training, Facilitation, Leadership training capetown" />
    <link href="css/css_frontend.css" rel="stylesheet" type="text/css">
    </head>
    
    </style>
    <link href="css/css_frontend.css" rel="stylesheet" type="text/css">
    <script src="../scripts/AC_RunActiveContent.js" type="text/javascript"></script>
    </head>
    
    <script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script type="text/javascript">
    try {
    var pageTracker = _gat._getTracker("UA-8128695-1");
    pageTracker._trackPageview();
    } catch(err) {}</script>
    </head>
    <body bgcolor="#ffffff">
    Fix that up first, then see what happens.

    PS: I thought you were updating the whole page from table layout.

  12. #12
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, ok 2 different answers with doctypes -
    I will give each one a try..
    thanks guys!!!

    Yeah as mentioned i didnt design or code this site - and i was cringing coz it was in tables..they just want some things added to their site..

    Firstly, if anyone has any suggestions for changing the height of nav menu without putting a strange gap, shout ???

    Secondly, is there a standard answer/document that you guys tell/give to clients to try convince to stay away from tables layout?? this has been such a pain
    Last edited by escapedf; Mar 30, 2009 at 10:49.
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  13. #13
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok guys ;-)
    Ive tried ryan reeses solution to changing the colspan to 5,
    And then i cleaned the topcode up
    And i changed the doctype..

    http://bluecrushdesign.co.za/first/about_us.htm

    now in IE it looks pushed out too
    Firefox looks a bit worse

    And i took off line height and height off the menu to show you the funny gap when you hover over "about us"

    argh we have been sitting here for 2 hours looking at this code..

    Any ideas pls let me know ;(
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  14. #14
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can anyone help?
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  15. #15
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Changing the colspan to 5 won't help as that row then has 10 columns instead of 9. The problem is the first row is being pushed to 95px wide instead of 18px, but not sure why. You also have a lot of invalid code in the menu due to not removing all the correct stuff when removing the second level dropdowns from the original code.

    This whole table would be much easier if replaced by a div with one unsliced background image - will play with this tomorrow.

  16. #16
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry about delay - work commitments plus one of my kids who has managed to get Whooping Cough has consumed some time ....

    Anyway, looking at the header section of the page, all that is there is a heading, the menu, and an email link, so the whole of the header table can be replaced with this :
    Code:
    <div id="header">
    	<h1 class="page_title">about us</h1>
    	<ul>
    		<li><a href="#nogo">Home</a></li>
    		<li><a href="#nogo">About us
    			<!--[if IE 7]><!--></a><!--<![endif]-->
    			<table><tr><td>
    				<ul>
    					<li><a href="#nogo">The Company</a></li>
    					<li><a href="#nogo">The People</a></li>
    				</ul></td></tr>
    			</table>
    			<!--[if lte IE 6]></a><![endif]-->
    		</li>
    		<li><a href="#nogo">Services</a></li>
    		<li><a href="#nogo">What we do
    			<!--[if IE 7]><!--></a><!--<![endif]-->
    			<table><tr><td>
    				<ul>
    					<li><a href="#nogo">Training Programmes</a></li>
    					<li><a href="#nogo">Consulting & Facilitation Services</a></li>
    					<li><a href="#nogo">Elearning</a></li>
    				</ul></td></tr>
    			</table>
    			<!--[if lte IE 6]></a><![endif]-->
    		</li>
    		<li><a href="#nogo">Contact us</a></li>
    		<li><a href="#nogo">References</a></li>
    		<li><a href="#nogo">Articles</a></li>
    		<li><a href="#nogo">Forum</a></li>
    	</ul>
    	<a href="mailto:info@firstfacilitation.co.za" class="topEmail">info@firstfacilitation.co.za</a>
    </div>
    Much simpler than all that table rubbish and image slices I have also got rid of some of the invalid left over stuff in the menu and stripped out some class names that are not required here. I retained the class names for the heading and the email link, and the styling for these will need to be changed for positioning. The menu itself will now be referenced by the header div id rather than by the original menu2 class name.

    As mentioned, the graphics in the header do not need to be sliced at all, but can simply he one background image to the #header div. I reassembled the slices and the resultant image can be found here.

    Css described next post so this one doesn't get as long.

  17. #17
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you rock!!
    Awaiting CSS code..

    And in the meantime I played around with another setup of divs for the wholepage - with a working horizontal menu that i found (stu nicholls) (background image can be added in)
    .. in case the client goes for DIVS in the whole site eventually!

    Heres the link::http://www.beyondyourdreams.co.uk/first_home.html
    although for some reason after uploading here the dropdowns have more space between the LIs hmmmmm

    Ps hope your kid gets better!
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  18. #18
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As mentioned, some current styling needs to be changed for the heading and email link, and a style rule also needs to be added for the #header div itself (main changes highlighted) :
    Code:
    a.topEmail {
    	font-size: 12px;
    	color: #99CC66;
    	text-decoration: none;
    	margin: 10px 0 0 110px;
    	float: left;
    	display: inline;
    }
    a.topEmail:visited {
    	color: #99CC66;
    }
    a.topEmail:hover {
    	color: #99CC66;
    	text-decoration: underline;
    }
    .page_title {
    	font-size: 36px;
    	color: #CCCCCC;
    	height: 89px;
    	line-height: 65px;
    	margin: 0 0 0 70px;
    	font-weight: normal;
    	padding: 20px 0 0;
    }
    #header {
    	width: 780px;
    	height: 181px;
    	background-image: url(images/header_bak.jpg);
    }
    This sets the #header div to the correct size, and sets the composite image as the background.

    The .page_title (now a more semantic h1 element) is sized so that it determines the location of the menu which follows it, and the margins, padding and line height place the text. The topEmail link is floated below the menu and again the margins determine its position.

    All of the css you have now for the menu (.menu2 classes) can be removed, and the lot replaced with this:
    Code:
    /* --------------- dropdown menu --------------- */
    
    #header ul {
    	padding: 0 0 0 20px;
    	margin: 0;
    	font-size: 11px;
    	height: 27px;
    }
    #header ul li {
    	float: left; 
    	position: relative;
    	list-style: none;	
    }
    #header ul li a {
    	float: left;
    	text-decoration: none;
    	color: #fff;
    	padding: 0 4px;
    	height: 25px;
    	line-height: 25px;
    	white-space: nowrap;
    }
    #header ul li a:hover, #header ul li:hover a, 
    #header ul li li a:hover, #header ul li li:hover a {
    	background: #1F8E0F; 
    	color:#fff;
    }
    #header a:hover li a, #header li:hover li a {
    	background: #186507; 
    	color: #fff;
    }
    #header ul li li {
    	float: none;
    }
    #header ul li li a {
    	height: auto;
    	line-height: 1.6em;
    	float: none;
    	display: block;
    	width: 120px;
    	white-space: normal;
    }
    #header ul li ul {
    	position: absolute;
    	top: 25px;
    	left: 0px;
    	width: 128px;
    	background-color: #186507;
    	margin: 0 0 0 -999em;
    	padding: 5px 0;
    	height: auto;
    }
    #header table {
    	margin:0; 
    	border-collapse:collapse; 
    	font-size:11px; 
    	position:absolute; 
    	top:0; 
    	left:0;
    }
    #header ul li:hover ul, #header ul li a:hover ul {
    	margin-left: 0px;
    	z-index: 10;
    }
    The original Stu Nicholls' menu, along with a number of suckerfish menu tutorials on the net, suffers from a few issues which the code above corrects. Hiding the dropdowns using display:none is not a good idea as it makes it inaccessible to screen readers, and a better way is to shove it off the left of the screen until wanted. Some versions use the "left" property to do this, but that can trip up IE7, so a large negative left margin is used instead. On hover of the <li>s (or the top level <a>s for IE6), the dropdown is brought back into view by resetting the left margin. I have also set specific heights and line heights on the top level <a>s as that makes it less susceptible to font size changes, and gives a known height for positioning the dropdowns. I also removed a lot of extraneous styles that where in the Stu Nicholls' version that are not needed here.

    Have a play with that and see how you go.

  19. #19
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    scroll up for my post, but again, thanku!
    ill have a play and hope I dont get too stuck!
    If you have the working HTML page up pls send me the link ;-)
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  20. #20
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I do have a working demo of just the header / menu section online here.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •