1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Problema ao criar menu em CSS

Discussão em 'Web Development' iniciada por chantas, 24 de Agosto de 2007. (Respostas: 9; Visualizações: 1018)

  1. chantas

    chantas Power Member

    Boas.

    Tou com um daqueles problemas irritantes para qq webdesigner...Estou a criar um menu em css e no IE apareçe tudo bem, mas no Firefox aparece um border superior maior do que devia!Penso que seja um problema qq no padding e na maneira que o Firefox o "lê"

    Se me puderem ajudar agradecia.

    Aqui vai o html:

    Código:
    <div id="wrapper">
    
    <div id="header" class="largura">
    
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="899" height="114">
        <param name="movie" value="images/banner.swf" />
        <param name="quality" value="high" />
        <embed src="images/banner.swf" width="899" height="114" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
      </object>
    </div>
    <div id="menu" class="largura">
    
    <ul>
    <li><a href="http://www.dynamicdrive.com/"style="border-left: 1px solid #DADADA;">Dynamic Drive</a></li>
    <li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
    <li><a href="http://www.cssdrive.com/">CSS Drive</a></li>
    <li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
    <li><a href="http://tools.dynamicdrive.com/favicon/">Favicon Creator</a></li>
    <li><a href="http://tools.dynamicdrive.com/button/" >Button Maker</a></li>
    </ul>
    
    
    </div>
    </div>
    
    E aqui têm o CSS:

    Código:
    .largura {
        margin:0 auto;
        width:899px;
        }
    
    body {
    	background:url(images/fundo.png) repeat-x;
    	margin:0px;
    	padding:0px;
    
    	}
    
    #wrapper {
    	position:absolute;
    	top: 50%; 
    	left: 50%;
    	width: 899px; /* comprimento da tua div/site (teras que ajustar para o teu site) */
    	height: 567px; /* altura da tua div/site (teras que ajustar para o teu site) */
    	margin-top: -283.5px; /* aqui defines com o resultado negativo da divisão por 2 da tua altura neste caso -(500/2)*/
    	margin-left: -449.5px; /* aqui defines com o resultado negativo da divisão por 2 do teu comprimento neste caso -(800/2)*/
    	
    	
    	}
    #header{
    	width:100%;
    	margin:0px;
    	padding:0px;
    	}
    	
    #menu{
    width: 100%;
    font-weight: bold;
    font-size: 90%;
    }
    
    #menu:after{ /*Add margin between menu and rest of content in Firefox*/
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    margin:0;
    }
    
    #menu ul{
    border: 1px solid #DADADA;
    width: auto;
    background: url(images/menu.png) center center repeat-x;
    padding: 5px 0;
    margin: 0;
    text-align: center; /*set value to "right" for example to align menu to the left of page*/
    }
    
    #menu ul li{
    display: inline;
    
    
    }
    
    #menu ul li a{
    color: #494949;
    padding: 5px;
    margin: 0;
    text-decoration: none;
    border-right: 1px solid #DADADA;
    
    
    
    }
    
    #menu ul li a:hover{
    background: url(media/chromebg2.gif) center center repeat-x;
    }
    
    
    
    
    Como já puderam reparar tenho um banner em swf e logo a seguir surge o menu horizontal, o problema é que entre o banner e o menu aparece um border mais grosso do que devia ser. Não liguem aos links que estão no código, pois são os links que segui no tutorial que utilizei para criar o menu.

    Help! :)

    Obrigado.
     
  2. boy.pt

    boy.pt Suspenso

    Boas amigo tenta alterar isto no teu .css


    Código:
    .largura {
        border: 0px;
        margin: 0px auto;
        width: 899px;
        }
     
    
     
    Última edição: 25 de Agosto de 2007
  3. chantas

    chantas Power Member

    Já tentei e não mudou nada! :(

    Mais alguma sugestão??
     
  4. Scarecrow

    Scarecrow Power Member

    Normalmente é ao contrário.. temos problemas no IE e no firefox corre tudo bem :P

    Acho estranho se for o padding, o padding é suposto definir o espaço interior entre um elemento e o "elemento-pai".. não devia afectar em nada o tamanho do border.

    Não sei se não será ali qualquer coisa no menu.. talvez o display:inline ou mesmo qualquer coisa com o width..

    Mas tens o site online para poder ver mesmo a diferença?? Eu entendi o que é através do código.. mas gosto sempre de ver :)

    E só outra coisa, é impressão minha ou a classe largura está a repetir o que o wrapper já faz?


    Cumps
     
  5. chantas

    chantas Power Member

    Online não tenho mas já tirei 2 printscreens, um no FF e outro no IE. Em relação à classe, penso q tens razão e está a repetir o que o wrapper faz...mas será que pode influenciar alguma coisa visto que tem o mesmo valor?

    Aqui vão os printscreens:

    FIREFOX

    [​IMG]


    IE7

    [​IMG]


    Espero que seja útil para me ajudarem a descobrir a pólvora!hehe :)

    Obrigado!
     
  6. shello

    shello Moderador
    Staff Member

    Criei um html com esse código agora, e tanto no IE7 como no Firefox aparecem-me iguais...


    Podes disponibilizar o html e o css por completo?
     
  7. chantas

    chantas Power Member

    Mas criaste com um banner por cima do menu?
     
  8. shello

    shello Moderador
    Staff Member

    Simulei-o, preenchendo aquela div (com o tamanho que estava para o swf) com um azul claro...
    Senão aparecia completamente vazio ;)

    Cheira-me a "conflitos" de css aí.
     
  9. Fil__

    Fil__ Power Member

    E so uma sugestao mas comigo resultou num portal que tou a fazer

    Faz com que fike tudo direitinho em firefox e dps corriges no IE

    Usa os haks

    Por exemplo:
    widht: 100px;
    _width:0px;

    O _ e interpretado pelo IE mas pelos outros browsers nao ou seja no firefox ele mete a largura a 100px e no IE ele mete a 0px

    Sao valores de exemplo ao calhas mas axo k da para perceber o conceito

    Espero que te ajude

    Abraço :)
     
  10. Scarecrow

    Scarecrow Power Member

    Tenta remover o border mesmo, eu sei que fica sem border, mas vê se fazendo isso, eles ficam iguais:

    Assim sabe-se logo se o problema é daí :)

    Cumps
     

Partilhar esta Página