Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Back Button Screws Up List

    Hello everyone,

    This forum looks filled with knowledgeable people, and I was hoping perhaps somebody would be savvy enough to figure out this problem I'm having. I'm well versed with CSS, PHP, and HTML, but I have yet to figure out just wtf is causing this problem.

    Basically, I have a horizontal navigation that is built by nested unordered lists. The problem I'm having is that when using the back and forward buttons in Ffox, the lists will go from displaying horizontally to displaying vertically. This causes each image to stack on top of eachother, making the design look terrible. If you refresh the page with the stacked images, it will go back to the correct and intended way. It is very confusing because this does not happen whatsoever when browsing the site, only when using the back button.

    The following CSS is what drives the dropdowns:

    Code:
    #dropdown div {
    	float: left;
    }
    
    #dropdown ul {
    	padding: 1px;
    	margin: 0;
    	list-style: none;
    }
    
    #dropdown li {
    	float: left;
    	position: relative;
    	width: 10em;
    	
    	background: <?=$firstLayer?>;
    }
    
    #dropdown li a {
    	display: block;
    	text-decoration: none;
    	color: <?=$navColor?>;
    	padding: 5px;
    }
    
    #dropdown li a:hover {
    	background: <?=$secondLayer?>;
    }
    
    #dropdown li ul { 
    	display: none;
    	position: absolute;
    	top: 1.8em;
    	left: 0;
    	
    }
    
    #dropdown li ul li {
    	background-color: <?=$dropDownColor?>;
    	
    }
    
    #dropdown li>ul { 
    	top: auto;
    	left: auto;
    }
    
    #dropdown li:hover ul, #dropdown li.over ul { 
    	display: block;
    }
    Attached is a little image of what happens.


    Any help is greatly appreciated!!! Thanks in advance!

    -Chris
    Attached Thumbnails Attached Thumbnails Back Button Screws Up List-navbug_after.gif   Back Button Screws Up List-navbug_before.gif  
    "The true...goal of SeeD... To spread... seeds all over the world... ...Flower... Fill the world with flowers." - Squall

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Sounds interesting... Do you have a live link?

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah, I can't link you to the original page because it requires authentication. This is a bit of a private project so I'm unable to give any sort of login information, but I have created new pages under my personal directory. You can access them here: http://www.threegroup.net/personal/c...ebug/index.php.

    Now heres my problem... It doesn't happen on these test pages. This is probably because there is no real php work or database work at all like there is in the original version. Could it be that somehow PHP is messing up my page?

    Additionally, I have verified that the source code is exactly the same normal as it is when its messed up... this is extremely confusing.
    Last edited by exio; 07-24-2007 at 02:56 AM.
    "The true...goal of SeeD... To spread... seeds all over the world... ...Flower... Fill the world with flowers." - Squall

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    How are you integrating the server-side code into the stylesheet? You're going to run into some issues there.

  • #5
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Everything works properly with the stylesheet. Basically I have a value passed by querystring and in the stylesheet php file I load some data from the DB and depending on that I select colors to use within the stylesheet... Thats all for the style sheet. I've run into no problems with it except for what I'm currently encountering now.

    I copied the php style sheet over when I put up the sample page, and it still works there so I was ruling that out as a possibility.

    If it helps, the following code is what I use to generate the nav:

    Code:
    while( $navItems = mysql_fetch_array( $navData ) )
    {
    	
    	$query = "SELECT * FROM WEBSITE_NAV WHERE ParentID = $navItems[ID]";
    	$subNavData = mysql_query( $query );
    	
    	if( mysql_num_rows( $subNavData ) == 0 )
    	{
    		// if there are no sublinks, print this
    		print("<div id=\"dropdown\"><ul>");
    		print("<li><a href=\"$navItems[URL]\">$navItems[Name]</a></li>");
    		print("</ul></div>");
    	}
    	else
    	{
    		
    		print("<div id=\"dropdown\"><ul>");
    		print("<li><a href=\"$navItems[URL]\">$navItems[Name]</a>");
    		
    		print("<ul>");
    		
    		while( $subNavItems = mysql_fetch_array( $subNavData ) )
    		{
    			print("<li><a style=\"font-size: 12px;\" href=\"$subNavItems[URL]\">$subNavItems[Name]</a></li>");
    		}
    		
    		print("</ul>");
    		print("</li>");
    		print("</ul></div>");
    	}
    }
    //print("</ul></div>");
    ?>
    Last edited by exio; 07-24-2007 at 04:01 AM.
    "The true...goal of SeeD... To spread... seeds all over the world... ...Flower... Fill the world with flowers." - Squall

  • #6
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by exio View Post
    Now heres my problem... It doesn't happen on these test pages. This is probably because there is no real php work or database work at all like there is in the original version. Could it be that somehow PHP is messing up my page?
    I do know that Firefox exhibits a class of occasional rendering bugs which disappear after a page refresh. David Baron has confirmed that such bugs exist in Firefox.

    That class of bugs are just so hard to deal with because they may not be easy to reproduce and only occur in something like 1/100 page loads. Also, they are apparently only seen when the page is uploaded to a server and not locally on a machine. Apparently, factors are load speed, and in which order the packets arrive in.

    I have only run into the bug in conjunction with table elements or elements having one of the table display values. I don't know if this is a necessary condition. If you are just looking for a fix I would try to eliminate the table element you have around your menu.

    Look at this recent Firefox 2.0.0.5 screenshot I captured. Notice how the small images below Aerospace_Eng's avatar are overlapping the text. Anyone seen something similar? The rendering issue was gone after a refresh. Also in this example is there a table element involved.

  • #7
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Awesome, thank you so much! I'll try getting rid of the table surrounding the code.

    I'll respond when I see the result.
    "The true...goal of SeeD... To spread... seeds all over the world... ...Flower... Fill the world with flowers." - Squall

  • #8
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I removed the table data, and I realized that the reason I had put it there was to center align the divs in the navigation area. Now that I have removed it, the unordered list items are left aligned.

    I tried to google some methods of doing this, but I didn't find anything. If anyone knows how I might be able to solve this, let me know.

    Also, the question boils down to: how do I center align the unordered list that has list items with float: left?
    Last edited by exio; 07-24-2007 at 08:32 AM.
    "The true...goal of SeeD... To spread... seeds all over the world... ...Flower... Fill the world with flowers." - Squall

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #10
    New Coder
    Join Date
    Jun 2006
    Location
    Graz, Austria
    Posts
    81
    Thanks
    2
    Thanked 1 Time in 1 Post
    Quote Originally Posted by koyama View Post
    Look at this recent Firefox 2.0.0.5 screenshot I captured. Notice how the small images below Aerospace_Eng's avatar are overlapping the text. Anyone seen something similar? The rendering issue was gone after a refresh. Also in this example is there a table element involved.
    I have seen such an issue before, where a paragraph overlapped the following one, and after a refresh it was gone. I tried it once again with the same page, but it seems to work properly every time with the new FF version.
    webmaster and member of
    http://cashfromchaos.net


  •  

    Posting Permissions

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