SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot skipdawg95's Avatar
    Join Date
    Oct 2004
    Location
    Strasburg, VA
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Table Problem with FF

    I have a drop down menu that is set in a table cell at the top of my page. The problem I'm having is that when I display it in IE7 or Opera it's fine, but in FF it shrinks the content because the table width is not set. When I set the table width my content is left justfied to the far left of my screen. I don't want that. I want it centered on the screen with the root and submenus left justified. Funny thing is that FF will display it properly only after a page refresh, and that's only if it was displayed wrong in the first place. It's hit and miss. Any suggestions?

    Here's my code. I don't have the CSS or JS code listed, but I will if needed.
    HTML Code:
    <div id="menuwrapper">
    <table border="0" cellpadding="0" cellspacing="0" height="35" align="center" >
    	<tr>
    		<td valign="top">
    			<ul id="p7menubar">
    				<li><a class="notrigger" href="http://www.bloodletting.org/login.php">Home</a></li>
    				<li><a class="trigger" href="http://www.bloodletting.org/profiles/profile.php">Profile</a>
    					<ul>
    						<?php echo $links->profile; ?>
    						<li><a href="http://www.bloodletting.org/profiles/char_search.php">Character Search</a></li>
    					</ul>
    				</li>
    				<?php echo $links->admin; ?>
    				<li><a class="trigger" href="#">Forums</a>
    					<ul>
    						<li><a href="#">Realm</a></li>
    						<?php echo $links->city_forum; ?>
    						<?php echo $links->crew_forum; ?>
    						<li><a href="#">Mortal Thoughts</a></li>
    					</ul>
    				</li>
    				<?php echo $links->crew; ?>
    				<li><a class="trigger" href="#">City Life</a>
    					<ul>
    						<li><a href="#">City Search</a></li>
    						<li><a href="#">Forbidden Deeds</a></li>
    						<li><a href="#">Dark Alley Travel</a></li>
    						<li><a href="#">Half Moon Bank</a></li>
    						<li><a href="#">Races</a></li>
    						<li><a href="#">Minion Battles</a></li>
    						<li><a href="#">Forgotten Market</a></li>
    						<li><a href="#">Local Dungeon</a></li>
    						<li><a href="#">Underworld</a></li>
    					</ul>
    				</li>
    				<?php echo $links->msg; ?>
    				<li><a class="trigger" href="#">Help</a>
    					<ul>
    						<li><a href="#">F.A.Q.</a></li>
    						<li><a href="#">Rules of Survival</a></li>
    					</ul>
    				</li>
    				<li><a class="notrigger" href="#">Donate</a>
    				<li><a class="notrigger" href="#">Contact Us</a>
    				<?php echo $links->signout; ?>
    			</ul>
    			<br class="clearit"></td>
    	</tr>
    </table>
    </div>
    It may look incomplete, but I'm using the file through SSI to make it easier to modify site link changes/additions. Any ideas are appriciated!

  2. #2
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You don't need either the table or the wrapper DIV.

    Just apply the width to your <ul id="p7menubar"> and margin:0 auto and it should center AFAIK. If that doesn't work for you then post your whole page here along with CSS and someone (me if I'm round) will be able to show you exactly what to do. Or even better just upload the page (preferably with just the menu - less complicated that way) to the web and post a link for us.

    Ryan,

  3. #3
    SitePoint Zealot skipdawg95's Avatar
    Join Date
    Oct 2004
    Location
    Strasburg, VA
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, that didn't work. I got rid of the table and the whole thing adjusted left. Margin is set as you said with the width set on the proper id. Here's the page coding:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="keywords" content="RPG, Vampires, Forums, Game, Slayer, Role Playing Game, Gaming, MMO, MMORPG, PBBG" />
    <link  href="CSS/vampire.css" rel="stylesheet" type="text/css" />
    <title>Bloodletting - Your Destiny Awaits!</title>
    <link href="CSS/p7exp.css" rel="stylesheet" type="text/css">
    
    <script language="JavaScript">
    <!--
    
    function SymError()
    {
      return true;
    }
    
    window.onerror = SymError;
    
    var SymRealWinOpen = window.open;
    
    function SymWinOpen(url, name, attributes)
    {
      return (new Object());
    }
    
    window.open = SymWinOpen;
    
    //-->
    </script>
    
    <script type="text/javascript" src="CSS/p7exp.js"></script>
    <!--[if lte IE 7]>
    <style>
    #menuwrapper, #p7menubar ul a {height: 1&#37;;}
    a:active {width: auto;}
    </style>
    <![endif]-->
    </head>
    
    <body onLoad="P7_ExpMenu()">
    <div id="menuwrapper">
    	<ul id="p7menubar">
    		<li><a class="notrigger" href="http://www.bloodletting.org/login.php">Home</a></li>
    		<li><a class="trigger" href="http://www.bloodletting.org/profiles/profile.php">Profile</a>
    			<ul>
    								<li><a href="http://www.bloodletting.org/profiles/char_search.php">Character Search</a></li>
    			</ul>
    
    		</li>
    				<li><a class="trigger" href="#">Forums</a>
    			<ul>
    				<li><a href="#">Realm</a></li>
    												<li><a href="#">Mortal Thoughts</a></li>
    			</ul>
    		</li>
    
    				<li><a class="trigger" href="#">City Life</a>
    			<ul>
    				<li><a href="#">City Search</a></li>
    				<li><a href="#">Forbidden Deeds</a></li>
    				<li><a href="#">Dark Alley Travel</a></li>
    				<li><a href="#">Half Moon Bank</a></li>
    
    				<li><a href="#">Races</a></li>
    				<li><a href="#">Minion Battles</a></li>
    				<li><a href="#">Forgotten Market</a></li>
    				<li><a href="#">Local Dungeon</a></li>
    				<li><a href="#">Underworld</a></li>
    			</ul>
    
    		</li>
    				<li><a class="trigger" href="#">Help</a>
    			<ul>
    				<li><a href="#">F.A.Q.</a></li>
    				<li><a href="#">Rules of Survival</a></li>
    			</ul>
    		</li>
    
    		<li><a class="notrigger" href="#">Donate</a>
    		<li><a class="notrigger" href="#">Contact Us</a>
    			</ul>
    	<br class="clearit">
    </div>
    </body>
    
    </html>
    This is the CSS coding:

    Code:
    /* 
      ------------------------------------
      PVII Menu CSS Express Drop-Down Menu
      by Project Seven Development
      www.projectseven.com
      ------------------------------------
    
    Container for the menu. We set top and bottom borders only because the menu container
    stretches the entire window width. Note that this container can go inside a fixed width
    element that is centered on the page, if you so desire. It can even go inside a table cell.
    It carries a background image for aesthetics.
    */
    #menuwrapper {
    	background-color: #330000;
    	background-image:url(../Library/Slices/Home-Slices/images/top-menu-bg.gif);
    	background-repeat: repeat-x;
    	
    }
    /*Clears the floated menu items.
    Assigned to a BR tag placed just before
    menuwrapper's closing DIV tag*/
    .clearit {
    	clear: both;
    	height: 0;
    	line-height: 0.0;
    	font-size: 0;
    }
    /*
    p7menubar is the root UL and p7menubar ul applies to all the sub-menu ULs.
    We set padding and margin to zero to eliminate all indentation, turn bullets off,
    and set a font-family different from the global font-family declared for the
    body element above. This sets font for just the menu. Do not add a font-size here.
    */
    #p7menubar, #p7menubar ul {
    	padding: 0;
    	margin: 0 auto;
    	list-style: none;
    	font-family:Georgia, "Times New Roman", Times, serif;
    }
    /*
    Root-Level Links.  Do not change the first two properties.
    Adjust padding values to make the root links taller and to offset them
    from the left and right edges of the link box. The border right creates a
    separator between links. Font-size is set here and will apply to all menu levels.
    Font color is set to white.
    */
    #p7menubar a {
    	display: block;
    	text-decoration: none;
    	padding: 5px 10px 5px 10px;
    	font-size: .85em;
    	color: #FFFFFF;
    }
    /*
    Class assigned to those Root-Level links that have associated Sub-Menus.
    The top and bottom padding assigned this element must be the same as
    that assigned to the p7menubar a element. The right padding is increased
    to accomodate the display of background image depicting a downward
    pointing arrow.
    */
    #p7menubar a.trigger {
    	padding: 5px 16px 5px 20px;
    	background-image:url(../Library/Slices/Home-Slices/images/arrow.gif);
    	background-repeat: no-repeat;
    	background-position: right center;
    }
    
    #p7menubar a.notrigger {
    	padding: 5px 16px 5px 20px;
    	}
    	
    /*
    The Root-Level list items. Floating left allows
    them to appear horizontally. Width is for IE5 Mac. The last rule in
    this style sheet will set the width for this element to auto for all
    other browsers - hiding it from IE5 Mac. The width is proportional.
    As you add and edit root menu items, you will need to test this width
    to ensure it is wide enough to accomodate all text.
    */
    #p7menubar li {
    	float: left;
    	width: 9em;
    }
    /*
    Sets width for Sub-Menu box and the List Items inside - in proportional em units. 
    This allows the sub-menu width to expand if users resize the text in their browsers.
    */
    #p7menubar li ul, #p7menubar ul li  {
    	width: 12em;
    }
    /*
    The sub-menu links. We set color and turn off the right border, which
    would otherwise be inherited from the root link rule. We set top and 
    bottom padding less than the root items and increas the left padding
    to indent the sub-menu links a small amount in from the root links.
    */
    #p7menubar ul li a  {
    	color: #FFFFFF;
    	border-right: 0;
    	padding: 3px 12px 3px 16px;
    }
    /*
    Sub-Menu Unordered Lists describes each dropdown sub-menu grouping. 
    Positioned Absolutely to allow them to appear below their root trigger.
    Set to display none to hide them until trigger is moused over.
    Background Color must be set or problems will be encountered in MSIE.
    Right and bottom borders are set to simulate a raised look.
    A gradient background image is assigned.
    */
    #p7menubar li ul {
    	position: absolute;
    	display: none;
    	background-color: #454342;
    	border-right: 1px solid #333333;
    	border-bottom: 1px solid #333333;
    	background-repeat: repeat-x;
    }
    /*
    Changes the Text color and background color when the Root-Level
    menu items are moused over. The second selector sets color and background
    when Root-Level items are accessed with the keyboard tab key. The third
    selector sets an active state to support keyboard access in MSIE. The fourth 
    selector is assigned to IE5 and IE6 Windows via the P7_ExpMenu script.
    Note that IE7 supports hover on elements other than links and so behaves
    like Firefox, Opera, and Safari - making the menu operable even if JavaScript
    is not enabled.
    */
    #p7menubar li:hover a, #p7menubar a:focus,
    #p7menubar a:active, #p7menubar li.p7hvr a {
    	color: #FFFFFF;
    	background-color: #999999;
    }
    /*
    Set the Sub-Menu UL to be visible when its associated
    Root-Level link is moused over. The second selector is 
    assigned to IE5 and IE6 via the P7_ExpMenu script.
    */
    #p7menubar li:hover ul, #p7menubar li.p7hvr ul {
    	display: block;
    }
    /*
    Sets the Text color of the Sub-Level links when the Root-Level
    menu items are moused over. The second selector is 
    assigned to IE5 and IE6 via the P7_ExpMenu script.
    The color set should march the normal Sub-Level link color
    in the rule: #p7menubar ul li a. The background color must be
    transparent to allow the underlying gradient background on the UL
    to show through.
    */
    #p7menubar li:hover ul a, #p7menubar li.p7hvr ul a {
    	color: #FFFFFF;
    	background-color: transparent;
    }
    /*
    The normal hover class for Sub-Level links. The Important directive
    is required for older browsers. We set a background color, which shows
    over the gradient background. We set text color to white.
    */
    #p7menubar ul a:hover {
    	background-color: #606060!important;
    	color: #FFFFFF!important;
    }
    /* The single backslash \ character inside this comment
    causes IE5 Mac to ignore the following rule, which allows other
    browsers to render top-level menu items to their natural width.
    Do not edit this rule in any way. */
    #p7menubar li {width: auto;}
    The wrapper div is where my background is located.

  4. #4
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Validate your html and css and fix those errors. You are missing end tags and other things.

  5. #5
    SitePoint Zealot skipdawg95's Avatar
    Join Date
    Oct 2004
    Location
    Strasburg, VA
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for pointing it out. They're fixed now. Any suggestions on a fix to my problem becuase missing closing tags didn't fix the problem (as I didn't expect it to).

  6. #6
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Post the new code. Got link?

  7. #7
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This fixes it in Firefox2.0 and IE7, I haven't tested it in anything else though.

    Code:
    #menuwrapper {margin: 0 auto}
    #p7menubar, #p7menubar ul {width:38em}
    Your code still doesn't validate though, you'll probably get more help round here if you fix those errors before posting.

    Ryan,

  8. #8
    SitePoint Zealot skipdawg95's Avatar
    Join Date
    Oct 2004
    Location
    Strasburg, VA
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I'll give it a try. I did fix the errors but didn't repost as they were minor fixes. I don't usually post to the HTML/CSS forums so I'll keep that in mind the next time I do. Thanks again!


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
  •