Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css] Problem w FireFoxie
Forum PHP.pl > Forum > Przedszkole
wht
8.01.2007, 15:06:56
Witam,
Piszę właśnie pewną stronkę w IE7 wszystko pięknie, ale postanowiłem sprawdzić jak to wygląda w FireFoxsie i niespodzianka. Elementy są poprzesuwane w dół tzn. nachodzą na siebie. Nie wiem co się dzieje może to wina marginesów. Pomocy nie wiem co robić?
pioch
8.01.2007, 15:10:57
pokaż zródło strony.....
lopik
8.01.2007, 15:15:28
A ja się założę że problem leży po stronie IE, a nie FF smile.gif

Owszem, IE7 już trochę lepiej patrzy na CSS, ale do ideału jeszcze dużo brakuje.
pioch
8.01.2007, 15:20:07
Cytat(lopik @ 8.01.2007, 15:15:28 ) *
A ja się założę że problem leży po stronie IE, a nie FF smile.gif

Owszem, IE7 już trochę lepiej patrzy na CSS, ale do ideału jeszcze dużo brakuje.


zgadza sie, często sie pisze specjalny styl css tylko pod IE....
wht
8.01.2007, 15:38:12
Kod
bgtop {height:230px; width:800px; margin:0px auto; margin-top: -15px;
background: url("../_image/baner1.jpg") no-repeat; position: relative;
padding: 0px;}

#logoae {width: 141px;  height: 50px;
background: url(../_image/aegon.gif)  no-repeat; margin-top:5px; }


#menu {margin-top: 140px; height: 20px; margin-left: 0px;
position:relative; text-decoration: none; background-color:#000000;
font-family: verdana; color:#ffffff; font-size: 75%; border-bottom: 6px  #007ac2 solid; border-top: 6px  #ff0000 solid;}
#menu ul li {display: inline; line-height: 20px;list-style: none;
text-decoration: none; margin-left:0px;}
#menu ul li a { float: left; height: 20px; margin-right:2px;
background: #000000; border-left: 1px dashed  #ffffff;
color: #ffffff; text-decoration:none; padding: 0px 3px 0px 3px;}
#menu ul li a:hover { float: left;; height: 20px;
margin-right:2px; background-color: #ffffff; font-size:12px;
border-left: 1px dashed  #ffffff; color: #000000;
text-decoration:underline; padding: 0px 3px 0px 3px;}

#container { min-height:450px; width:800px; margin:0px auto;
margin-top:-15px; background-color:#eaeaea; position: relative;}

#left { min-height:450px; width:180px; float:left;
background-color:#ffffff;}

#lmenu { width: 180px; overflow: hidden; clear:both;
background-color: #ffffff; float:left}
#lmenu ul{ width: 180px; margin: 0px; padding: 0px; background-color: #ffffff;}
#lmenu li {list-style: none; margin: 0px; padding: 0px;}
#lmenu li.title {background-color:#8e8e8e text-transform: uppercase;
  color: #ffffff; text-decoration: none; font-family: verdana; }
#lmenu li.group a{ display: block; height:auto; text-decoration: none;
font-family: verdana; color:#ffffff; border-left:  #ff0000 3px solid;
font-size: 75%;padding-left: 3px; margin-bottom: 3px; background-color: #007ac2;}
#lmenu li a:hover, #lmenu li a.selected{ display: block; height:auto; text-decoration: none;font-family: verdana; color:#ff0000; border-left: #007ac2 3px solid;
font-size: 75%;padding-left: 3px; margin-bottom: 3px;background-color: #ffffff;}


Proszę o to css dopiero się uczę, więc mogą być trywialne błędy. Chodzi mi jedynie o wskazanie gdzie błąd i dlaczego się tak dzieje.
Dziękuje i Pozdrawiam
Ziels
8.01.2007, 15:44:56
Może się nie znam ale to chyba nie jest źródło strony? ;[
wht
8.01.2007, 16:55:57
Myślałem, że prblem leży w css, a źródło strony proszę bardzo.

[PHP] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.  
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6. <meta http-equiv="Content-Language" content="pl" />
  7. <meta name="keywords" content="" />
  8. <meta name="description" content="" />
  9. <link rel="stylesheet" type="text/css" href="_style/default.css"/>
  10. <link rel="Shortcut icon" href="_image/favicon.ico" />
  11. <title> Fundusze inwestycjne i ubezpiecznia</title>
  12. </head>
  13.  
  14. <body>
  15. <?php
  16. include ('_scripts/scripts_01.php');
  17. ?>
  18.  
  19. 	<div id="bgtop" >
  20.  
  21. 		<div id="logoae"> </div>
  22.  
  23. 	 <div id="menu">
  24.  
  25.  
  26. 		<ul>
  27. 			<li><a href="index.php?_page=main">Strona główna</a></li>
  28. 			<li><a href="#">Oferta Programów Inwestycyjnych</a></li>
  29. 			<li><a href="#">Fundusze Inwestycjne</a></li>
  30. 			<li><a href="">O Aegon</a></li>
  31. 			<li><a href="">Pytania i odpowiedzi</a></li>
  32. 			<li><a href="">O mnie</a></li>
  33. 		</ul>
  34.  
  35. 	</div>	
  36. </div>
  37.  
  38. <?php 
  39. include $_file;
  40. ?>
  41.  
  42. </body>
  43. </html>
[PHP] pobierz, plaintext



To jest tylko pierwsza strona reszta jest dołączana dynamicznie. Mam nadzieję, żę wystarczy.


Dla ciekwostki podam, że w Opera jest jeszcze inaczej. Zgłupiałem, czy ktoś mógłby pomóc?questionmark.gif
Pozdrawiam
dr_NO
8.01.2007, 18:00:57
spróbuj z float'em, ... i jeszcze ważne pytanko, "jak nachodzą na siebie" ? jak możesz pokaż screena, bo nachodzić na siebie mogą w różnoraki sposób ...
lopik
8.01.2007, 19:18:08
Tak tylko zerknąłem z CSS"a i masz błąd w pierwszej linii:

bgtop {...}

ma byś:

#bgtop {...}
wht
8.01.2007, 20:40:20
Cytat(lopik @ 8.01.2007, 19:18:08 ) *
Tak tylko zerknąłem z CSS"a i masz błąd w pierwszej linii:

bgtop {...}

ma byś:

#bgtop {...}


Wiem, ale tylko błąd przy kopiowaniu i wklejaniu.

Hyba wiem w czym problem, funkcje include wżóciłem w div'a po małych modyfikacjach i okazało się, że tylko IE "obszar" jest "łapany". Firefox i Opera nie akceptują wsadzonego pliku w obrzaże container-1?

body { margin: 0px auto; padding:0px;}
#container-1 { width:800px; margin:0px auto; padding:0px;
border: #000000 1px solid;}


#bgtop {height:230px; width:800px; margin:0px auto; margin-top: 50px;
background: url("../_image/baner2.jpg") no-repeat; position: relative;
padding: 0px;}


#logoae {width: 141px; height: 50px; background: url(../_image/aegon.gif) no-repeat; padding:0px; margin:0px auto; clear:both; float:left;}


#menu {margin: 0px auto; height: 20px; margin-top:-90px;
position:relative; text-decoration: none; background-color:#000000;
font-family: verdana; color:#ffffff; font-size: 12px; border-bottom: 6px #007ac2 solid; border-top: 6px #ff0000 solid;}
#menu ul {float: left; width: 800px; margin: 0px auto; padding: 0px; }
#menu li {display: inline; list-style: none; margin: 0px; padding: 0px;}
#menu ul li { line-height: 20px;text-decoration: none; margin-left:0px;}
#menu ul li a { float: left; height: 20px; margin-right:2px;
background: #000000; border-left: 1px dashed #ffffff;
color: #ffffff; text-decoration:none; padding: 0px 3px 0px 3px;}
#menu ul li a:hover { float: left; height: 20px;
margin-right:2px; background-color: #ffffff; font-size:12px;
border-left: 1px dashed #ffffff; color: #000000;
text-decoration:underline; padding: 0px 3px 0px 3px; }



#left { min-height:450px; width:180px; float:left;
background-color:#ffffff;overflow: both; }

#lmenu { width: 180px; overflow: hidden; clear:both;
background-color: #ffffff; float:left; }
#lmenu ul{ float:left; width: 180px; margin: 0px; padding: 0px; background-color: #ffffff;}

#lmenu li {background-color:#8e8e8e text-transform: uppercase;
color: #ffffff; text-decoration: none; font-family: verdana;
list-style: none; margin: 0px; padding: 0px; }
#lmenu li a{ display: block; height:auto; text-decoration: none;
font-family: verdana; color:#ffffff; border-left: #ff0000 3px solid;
font-size: 12px;padding-left: 3px; margin-bottom: 3px; background-color: #007ac2;}
#lmenu li a:hover{ display: block; height:auto; text-decoration: none;font-family: verdana; color:#ff0000 ; border-left: #007ac2 3px solid;
font-size: 75%;padding-left: 3px; margin-bottom: 3px;background-color: #ffffff;}
" title="Zobacz w manualu php" target="_manual
Obszar u góry czyli menu obrazy, działa bez zarzótów. Problem został tylko z bocznym menu, zaraz postaram się powrzócać na rapida prtsc z wszyskich przeglądarek.

PS. Było do przewidzenia, że Opera i Firefox zachowóją się tak samo, chociaż efekt pożądany jest w IE sad.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.