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
    Regular Coder
    Join Date
    Jun 2009
    Posts
    121
    Thanks
    22
    Thanked 3 Times in 3 Posts

    CSS Float order problem

    I have this demo page i'm working on for the redesign of our website.
    http://digitaledgecc.com/Demo/d_index.php

    In firefox, the moving menu works great.
    In safari or IE, the menu fails.

    if I add float: left; into the CSS, it works in safari and IE, but fails in firefox, on top of no longer being centered.

    Anyone have any ideas??
    Last edited by Alith7; 06-11-2009 at 09:46 PM. Reason: Resolved. Thank you!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Try
    Code:
    #miniflex li {
    		margin: 0;
            padding: 0;
            /*display: inline;*/
    		height:1%;
    		float:left;
            list-style: none;
            position: relative;
            }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Alith7 (06-10-2009)

  • #3
    Regular Coder
    Join Date
    Jun 2009
    Posts
    121
    Thanks
    22
    Thanked 3 Times in 3 Posts
    Ok, that worked great!
    now, any ideas how to center it?

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Jun 2009
    Posts
    121
    Thanks
    22
    Thanked 3 Times in 3 Posts
    ah! I can't win!
    I fix one problem and create another. fix that problem....
    and now it's centered beautifully, however the floating bar doesn't line up now!

  • #6
    Regular Coder
    Join Date
    Jun 2009
    Posts
    121
    Thanks
    22
    Thanked 3 Times in 3 Posts
    This is not my day for CSS. I'll keep fiddling see if I can figure it out.

  • #7
    Regular Coder
    Join Date
    Jun 2009
    Posts
    121
    Thanks
    22
    Thanked 3 Times in 3 Posts
    Anyone have any ideas?
    this is really irritating me, and I ned to get past this os I can start working on the other parts of the site.

  • #8
    Regular Coder
    Join Date
    Jun 2009
    Posts
    121
    Thanks
    22
    Thanked 3 Times in 3 Posts
    one last ask for help.

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Quote Originally Posted by Alith7 View Post
    one last ask for help.
    I understand your frustration , just forget my above posts and try the following...
    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"><title>Web Design Tips and Tricks - Animated Mini-Tabs</title>
    
    <script language="javascript" type="text/javascript" src="http://www.pittstop.com/tipstricks/miniTab.js"></script>
    <style base="/tipstricks/" type="text/css">
    
    body {
    font-family: verdana, sans-serif;
    font-size: 11px;
    text-align:center;
    }
    
    #container {
    padding: 30px;
    margin: 20px 0;
    width:80%;
    margin:40px auto;
    }
    #miniflex {
    width:32.5em;
    margin:0 auto;
    font-size: medium; /* could be specified at a higher level */
    padding: 0 10px 0 10px;
    border-bottom: 1px solid #696;
    position:relative;
    z-index:2;
    overflow:auto;
    }
    #miniflex li {
    float: left;
    margin: 0;
    padding: 0;
    display: inline;
    list-style: none;
    position:relative;
    width:6.5em;
    }
    #miniflex a{
    margin: 0 .5em 0 0.5em;
    }
    #miniflex a:link, #miniflex a:visited {
    float: left;
    font-size: 85%;
    line-height: 20px;
    font-weight: bold;
    text-decoration: none;
    color: #9c9;
    }
    #miniflex a.active:link, #miniflex a.active:visited, #miniflex a:hover {
    border-bottom: 4px solid #696;
    padding-bottom: 2px;
    color: #696;
    }
    #animated-tab {
    position: absolute;
    z-index: 1;
    font-size: 85%;
    line-height: 20px;
    padding-bottom: 2px;
    border-bottom: 4px solid #696;
    }
            </style></head><body>
    
    
    
    
    <div id="content"> 
      <h1>Animated Mini-Tabs Demo</h1>
      <ul id="miniflex">
    	<li><a class="active" href="/this-page/" title="">This Page</a></li>
    	<li><a href="/page2/" title="">Page Two</a></li>
    	<li><a href="/page3/" title="">Page Three</a></li>
    	<li><a href="/page4/" title="">Page Four</a></li>
    	<li class="last"><a href="/page5/" title="">Page Five</a></li>
      </ul>
    </body></html>
    (you may tweak some margins/paddings/widths for your needs)
    Last edited by abduraooft; 06-11-2009 at 04:00 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #10
    Regular Coder
    Join Date
    Jun 2009
    Posts
    121
    Thanks
    22
    Thanked 3 Times in 3 Posts
    I win!! oh this stupid NAV has had me banging my head against the wall for days!!

    thank you soo much for your help!

    the final working demo is here...
    Working Demo

    Your CSS worked with my Java, but either the bottom border pf the list wasn't scalable then, or the nav was floating on the left. either way didn't work for me.
    after much frustration, I had a "DUH" moment,dropped the boarder off the centered list, and wrapped the list in a DIV with a scalable bottom border. ok, done with that part, now I get to try to make the next java part work too....the drop down menu.

    thank you again!


  •  

    Posting Permissions

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