Results 1 to 4 of 4

Thread: Space problem in Firefox

  1. #1
    Join Date
    May 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Space problem in Firefox

    My Menu in Left side have White-spaces in FireFox Browser. In IE work's perfectly.


    My page :

    http://www.hollobyte.com.br


    My Css :

    Code:
    body {
    	font: normal 8px arial;
    	}
    
    ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	width: 118px; /* Width of Menu Items */
    	border-bottom: 1px solid #FFFCB7;
    	clear: both;
    	overflow: auto;
    	}
    
    ul li {
    	position: relative;
    	overflow: auto;
    	clear: both;
    	
    
    	}
    	
    li ul {
    	position: relative;
    	left: 0px; /* Set 1px less than menu width */
    	top: 0;
    	display: none;	
    	overflow: auto;
    	clear: both;
    	
    	}
    
    /* Styles for Menu Items */
    ul li a {
    	display: block;
    	text-decoration: none;
    	color: #006600;
    	background: #FBF000; /* IE6 Bug */
    	padding: 5px;
    	border: 1px solid #FFFCB7;
    	border-bottom: #B9B500;	
    	clear: both;
    	overflow: auto;
    
    	}
    
    /* Fix IE. Hide from IE Mac \*/
    * html ul li { float: left; height: 1%; }
    * html ul li a { height: 1%; }
    /* End */
    
    ul li a:hover { color: #003366; background: #DFD700; } /* Hover Styles */
    		
    li ul li a { padding: 1px 3px; } /* Sub Menu Styles */
    		
    li:hover ul, li.over ul { display: block; } /* The magic */
    My Html for Menu :

    Code:
    <ul id="nav">
    							    <li><p class="disc"><a target="view" href="home.asp">:: Home</a></li>
    								<li><p class="disc"><a target="view" href="empresa.asp">:: Empresa</a></li>
    								<li><p class="disc"><a target="view" href="produtos.asp">:: Produtos</a></li>
    								<li><p class="disc"><a target="view" href="home.asp">:: Promoções</a></li>
    								<li><p class="disc"><a target="view" href="servicos2.asp">:: Serviços</a></li>
    								<li><p class="disc"><a target="view" href="Cadastro.asp">:: Cadastro</a></li>
    								<li><p class="disc"><a target="view" href="contato.asp">:: Contato</a></li>
    								<li><p class="disc"><a target="view" href="galeria.asp">:: Galeria de Fotos</a></li>
    							</ul>
    What problem ?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    This seems to fix it:

    Code:
    .disc	{
    	font-family: arial, geneva, helvetica, sans-serif;
    	font-size:11px;
    	color:#6D6E71;
            display:inline;
    }
    But, you have <p> tags with no closing </p> tags in your markup:

    Code:
    <li><p class="disc"><a target="view" href="home.asp">:: Home</a></li>
    								<li><p class="dis
    And rather than change the display to inline, you could make them inline elements like <span> to begin with:

    Code:
    <li><span class="disc"><a target="view" href="home.asp">:: Home</a></span></li>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    May 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Very Thx jscheuer1 !!!

    Not needed Add display:inline;

    Only <span class="disc">xxxxx</span> solved the problem

    This menu its ok but my HV Menu in Right Side having White Space in Right (FireFox). Html of Div HV Menu :

    Code:
    <td class="msubt2" height="147" valign="top"><div id="MenuPos" style="position:relative"></div></td>
    http://www.hollobyte.com.br/

    Thx

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Well, this kind of thing can be very hard to track down because it involves a third party script. However, since upon resizing the page in FF things looked OK, I would just add this to the end of the page (right before the </body> tag):

    Code:
    <script type="text/javascript">
    if ( typeof window.addEventListener != "undefined" )
        window.addEventListener( "load", function(){onresize();}, false );
    </script>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •