FF2 vs FF1 vs IE

Pri tvorbe stranky som chcel vyskusat metodu vyhradne prostrednictvom div a css. avsak narazil som na problem hned pri zaciatku.. Zatial na nej nic nie je ale hodil som ju na svoju staru stranku aby ste si to mohli pozriet http://www.morb.pacienti.sk. Na Firefox 2.0.0.1 sa mi to zobrazuje ako chcem. Na FF 1.0.3 je to uz ale ine a na IE este horsie. Poradte prosim..dik
Kod - default.css

body{

background: url("bg_body.gif")repeat-x 0px 55px;

background-color:#3f3f3f;

margin: 0;

padding-top: 5px;

}

#container {

	margin: 0 auto;

	padding: 0;

	position: relative;

	width: 800px;

	text-align: left;

}

#top{

background: url("top.gif") no-repeat;

width: 800px;

height: 50px;

}

#logo{

background: url("mid.gif") no-repeat;

width: 800px;

height: 186px;

}

.invisible{ display:none; visibility:hidden;}



#navlist {

    margin: 0;

	width: 800px;

	height: 30px;

	list-style: none;

	padding: 20px 0 0 375px;

}

#navlist li {

	list-style-type: none;

	display: inline;

        margin: 0;

        padding: 0;

}



#navlist li a {

	text-decoration: none;

	float: left;

	height: 30px;

	overflow: hidden;

	padding-left: 5px;

}

#navlist li a span{ visibility:hidden;}

#about{ width: 98px; height: 30px; background: url("about.gif") no-repeat; }

#about:hover{ background: url("about_hover.gif") no-repeat; }

#about:active, #about:focus, #about #active { background: url("about_hover.gif") no-repeat; }

index.htm

<body>

<div id="container">

  <div id="top"><h1 class="invisible">Top</h1>

  	<ul id="navlist">

	  <li><a id="about" href="#"><span>About me</span></a></li>

	  <li><a id="about" href="#"><span>About me</span></a></li>

	  <li><a id="about" href="#"><span>About me</span></a></li>

	  <li><a id="about" href="#"><span>About me</span></a></li>

	</ul>

  </div>

  <div id="logo"><h1 class="invisible">Logo</h1></div>

</div>

</body>

Nahlásit jako SPAM

IP: ...–

www.milankohut.com

Martin 0

Návštěvník

7. 2. 2007 #2

Nejsem si jisty, co je konkretne spatne, ale v IE mas layout zarovnany doleva => zkus pridat do CSS k body { text-align: center; }

Nahlásit jako SPAM

IP: ...–

Milan0

Stálý člen

7. 2. 2007 #3

To nickJartin: skusal som to ale nefachalo mi to.. v IE sa mi nechcel zobrazovat ani background ale to som tiez upravil.. v IE sa mi nepaci ze tie tlacitka este nejak zvlastne blikaju ked na ne prechadzam.. vo FF1.0.3 ak kliknem na tlacitko tak sa mi cely container nejak posunie dolava a potom spat...neviem no.. vo FF2 to fici ako ma... aj v opere.. akurat ze tu nefunguje nejak :hover tusim...

Nahlásit jako SPAM

IP: ...–

www.milankohut.com

Martin 0

Návštěvník

7. 2. 2007 #4

To mORb:
tak jsem se na to mrknul a vytvoril toto (i s komentarem):



  body {

    background: url("bg_body.gif") repeat-x 0px 55px; /* chybela mezera pred repeat-x */

    background-color: #3f3f3f;

    margin: 0;

    padding-top: 5px;

    text-align: center;

  }

  #container {

    margin-left: auto;

    margin-right: auto;

    margin-top: 0px;

    margin-bottom: 0px;

    padding: 0px;

    width: 800px;

    text-align: left;

  }

  #top{

    background: url("top.gif") no-repeat;

    width: 800px;

    height: 50px;

    position: relative;

  }

  #logo{

    background: url("mid.gif") no-repeat;

    width: 800px;

    height: 186px;

  }

  .invisible{ display:none; visibility:hidden;}



  /* ten padding 375px nahrazeno za absolutni pozici.. nevim IE to nejak vadilo */

  #navlist {

    margin: 0;

    height: 30px;

    list-style: none;

    /*padding: 20px 0 0 375px;*/

    text-align: right;

    position: absolute;

    top: 20px;

    left: 375px;

  }

  #navlist li {

    list-style-type: none;

    display: inline;

    margin: 0;

    padding: 0;

  }

  #navlist li a {

    text-decoration: none;

    padding-left: 5px;

  }

  #navlist li a span{ display: none;}



  /* mensi zmeny, ktere nejspis nemaji na nic vliv ;-) */

  a#about:active, a#about:link, a#about:visited {

    width: 98px;

    height: 30px;

    float: left;

    background: url("about.gif") no-repeat;

  }

  a#about:hover{

    background: url("about_hover.gif") no-repeat;

  }

kdyztak si to douprav dle libosti.. melo by to resit problem s layoutem stranky.. bohuzel to "problikavani" se mi vyresit nepodarilo (taky by me zajimalo cim by to mmohlo byt)

Nahlásit jako SPAM

IP: ...–

Martin 0

Návštěvník

7. 2. 2007 #5

Jeste k tomu problikavani.. pokazde kdyz najedu nad ten odkaz tak se mi ten obrazek znovu stahne, coz chvili trva => odkaz problikne... Zkusil jsem preload obrazku, ale nepomohlo to, takze uz nevim :-(

Nahlásit jako SPAM

IP: ...–

olgo0

Věrný člen

8. 2. 2007 #6

nickJartin píše:#
# Jeste k tomu problikavani.. pokazde kdyz najedu nad ten odkaz tak se mi ten obrazek znovu stahne, coz chvili trva => odkaz problikne... Zkusil jsem preload obrazku, ale nepomohlo to, takze uz nevim :-(

http://www.jakpsatweb.cz/odkazy.html#menici

Nahlásit jako SPAM

IP: ...–

"Boze, dopraj mi, prosim ta, petdesiat rokov prace a zabavy, a potom nahlu smrt v spanku." J. Grisham

Milan0

Stálý člen

10. 2. 2007 #7

To olgo: vyskusal som vselico mozne ale stale to nejako preblikava. v style mam definovane <a id="about" takto:

#about{ width: 103px; height: 30px; background: url("images/about.gif") no-repeat; }

#about:hover{ background: url("images/about_hover.gif") no-repeat; }

vyskusal som aj preload ale stale to nejako nejde.. na mojom kompe to na IE ide v poho ale akonahle to hodim na net a IEckom to pozriem tam tak to preblikava.. a pomocou JS (onmouseover, onmouseout) by som to riesit nechcel..

Nahlásit jako SPAM

IP: ...–

www.milankohut.com

Milan0

Stálý člen

10. 2. 2007 #8

tak nakoniec som to spravil pomocou onmouseover a onmouseout.. uz to tak nepreblikava ale stale to nie je to prave orechove.. ale aj tak by ma zaujimalo preco to jende tym hoverom.. ja to kodujem podla vzoru jednej stranky (kde to ficalo v poho) a snazim sa pochopit ako to funguje pretoze predtym som css moc nepouzival a layout bol pomocou tabuliek..

Nahlásit jako SPAM

IP: ...–

www.milankohut.com

olgo0

Věrný člen

12. 2. 2007 #9

To mORb: keby sis to precital tak ti o funguje.
pr.:
takto ma vyzerat obrazok (obydva stavy v jednom obrazku)
http://www.7591.wz.cz/textures/button_main.png
a potom ich len posunes



.main{

  width: 68px;

  height: 25px; /*polovica vysky obrazku*/

  background: #000000 url(textures/button_main.png) 0px 0px; /*zobraz vrchnu polovicu*/

}

.main:hover{

  background-position: 0px 25px; /*posun na spodnu polovicu*/

}

Nahlásit jako SPAM

IP: ...–

"Boze, dopraj mi, prosim ta, petdesiat rokov prace a zabavy, a potom nahlu smrt v spanku." J. Grisham

← Zpět na seznam vláken ← Zpět do Fóra