Problémák Mozilla Firefoxban

[Danny]

meg kéne nézni, hogy nem pozicionálja-e el. Amúgy valószínűleg az IE jeleníti meg hibásan, csak véletlen egybeesés, hogy az jó

Kód: CSS

1. #page {
2.         background: url(images/img04.jpg) no-repeat;
3.         width: 808px;
4.         padding: 0 76px 70px 76px;
5. }

Nincs benne semmi position sem. Nincs margin. Semmi ötletem nincs, és most már 3 napja ezzel szenvedek.

Az érdekes, hogy ha a height:et berakom 300px-re, akkor meg a teljeset megjeleníti, csak éppen olyan 70px-el lejebb mint kéne...

[<madbence />]

meg kéne nézni, hogy nem pozicionálja-e el. Amúgy valószínűleg az IE jeleníti meg hibásan, csak véletlen egybeesés, hogy az jó

[Danny]

Sziasztok!

most csinálok egy oldalat, és közvetlenül a <header> rész alatt van egy ilyen csíkozás, ami IE-ben rendesen, de FF-ben meg a div alján jelenik meg (Képek mellékelve)

Itt a CSS kód (nem raktam be az egészet, csak a #content részig):

Kód: CSS

1. body {
2.         background: #F6F6F6 url(images/img01.jpg) repeat-x;
3.         font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
4.         font-size: 12px;
5.         color: #6B6B6B;
6. }
7.  
8. form {
9. }
10.  
11. input, textarea {
12.         padding: 2px 5px;
13.         border: 1px solid #EBEBEB;
14.         font: bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
15.         color: #6B6B6B;
16. }
17.  
18. h1, h2, h3, h4 {
19.         margin: 0;
20. }
21.  
22. h2, h3, h4 {
23.         margin-bottom: 20px;
24.         padding-bottom: 9px;
25.         border-bottom: 1px solid #F2F2F2;
26.         letter-spacing: -0.035em;
27.         font-weight: normal;
28.         color: #37404C;
29. }
30.  
31. h2 {
32.         font-size: 28px;
33. }
34.  
35. h3 {
36.         font-size: 16px;
37.         font-weight: bold;
38. }
39.  
40. h4 {
41.         font-size: 14px;
42.         font-weight: bold;
43. }
44.  
45. p, ul, ol {
46.         margin-bottom: 1.5em;
47.         line-height: 170%;
48.         text-align: justify;
49. }
50.  
51. ul, ol {
52.         margin-left: 3em;
53. }
54.  
55. dl.list1 {
56.         margin: 0;
57.         padding: 0;
58.         list-style: none;
59. }
60.  
61. dl.list1 dt {
62.         float: left;
63.         width: 70px;
64. }
65.  
66. dl.list1 dd {
67.         margin-bottom: 10px;
68. }
69.  
70. dl.list1 a {
71.         color: #666666;
72. }
73.  
74. ul.list2 {
75.         margin: 0;
76.         padding: 0;
77.         list-style: none;
78.         line-height: normal;
79. }
80.  
81. ul.list2 li {
82.         float: left;
83.         margin: 0 18px 18px 0;
84. }
85.  
86. ul.list2 li.nopad {
87.         margin-right: 0;
88. }
89.  
90. blockquote {
91.         margin-left: 3em;
92.         margin-right: 3em;
93. }
94.  
95. /**/
96.  
97. a img {
98.         border: none;
99. }
100.  
101. img.left {
102.         float: left;
103.         margin: 5px 20px 0 0;
104. }
105.  
106. img.right {
107.         float: right;
108.         margin: 5px 0 0 20px;
109. }
110.  
111. /* Wrapper */
112.  
113. #wrapper {
114.         width: 960px;
115.         margin: 0 auto;
116.         background: url(images/img02.jpg) repeat-y;
117. }
118.  
119. #wrapper2 {
120.         background: url(images/img10.jpg) no-repeat left bottom;
121. }
122.  
123. /* Header */
124.  
125. #header {
126.         height: 140px;
127.         background: #087FE7 url(images/img03.jpg) no-repeat;
128. }
129.  
130. /* Logo */
131.  
132. #logo {
133.         float: left;
134.         width: 435px;
135. }
136.  
137. #logo h1 {
138.         margin: 0;
139.         padding: 30px 0 20px 78px;
140.         letter-spacing: -2px;
141.         font-size: 27px;
142.         color: #FFFFFF;
143.         font-family: Arial, Helvetica, sans-serif;
144.         text-align: center;
145.        
146. }
147.  
148. #logo h1 a {
149.         text-decoration: none;
150.         color: #FFFFFF;
151. }
152.  
153. /* Menu */
154.  
155. #menu {
156.         float: right;
157. }
158.  
159. #menu ul {
160.         margin: 0;
161.         padding: 112px 78px 0 0;
162.         list-style: none;
163.         line-height: normal;
164. }
165.  
166. #menu li {
167.         display: inline;
168. }
169.  
170. #menu a {
171.         padding-left: 40px;
172.         text-decoration: none;
173.         font-size: 15px;
174.         font-weight: bold;
175.         color: #FFFFFF;
176. }
177.  
178. #menu a:hover {
179.         text-decoration: underline;
180. }
181.  
182. /* Page */
183.  
184. #page {
185.         background: url(images/img04.jpg) no-repeat;
186.         width: 808px;
187.         padding: 0 76px 70px 76px;
188. }
189. #nevnap {
190.         text-align: center;
191.         margin: 50px 0 30px 0;
192. }
193.  
194. /* Content */

Ez meg a html(itt sem ment az egész):

Kód: HTML

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
5. <title>Szt. Orsoyla Dök</title>
6. <meta name="keywords" content="" />
7. <meta name="description" content="" />
8. <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
9. </head>
10. <body>
11. <div id="wrapper">
12.         <div id="wrapper2">
13.                 <div id="header">
14.                         <div id="logo">
15.                                 <h1>Szent Orsolya Iskola<br />Diákönkormányzat</h1>
16.                         </div>
17.                         <div id="menu">
18.                                 <ul>
19.                         <li><a href="?action=fo">Főoldal</a></li>
20.                     <li class="first"><a href="#">Hírek</a></li>
21.                     <li><a href="?action=sources/video">Videók</a></li>
22.                     <li><a href="?action=admin/video">Admin_Video</a></li>
23.  
24.                                 </ul>
25.                         </div>
26.                 </div>
27.                 <!-- end #header -->
28.                 <div id="page">
29.          <div id="nevnap">Ma Elza napja van. Sok boldogságot kívánunk!</div>
30.                         <div id="content">
31.            
32.                                 <div class="post">
33.                                         <h2 class="title"><a href="#">Legfrissebb hírünk</a></h2>
34.                                         <div class="entry">

Maga a csíkozás az a #page részben az img04.jpg

[Gabesz08]

Köszi szépen, frankón működik!

[Danny]

Hello

Ezt:

Kód: PHP

1. <link href="themes/style.css" type="text/css">

Cserél ki ezzel, és működni fog:

Kód: PHP

1. <link rel="stylesheet" title="text/css" href="themes/style.css" />

[Gabesz08]

Hello!

Az lenne a problémám, hogy a cms rendszeremhez tartozó css file minden gond nélkül működik Apple Safari alatt, viszont IE és Mozilla firefox alatt nem. Mintha nem is létezne a css file.

Valakinek ha lenne tanácsa ezzel kapcsolatban, akkor kérlek írjatok.

Köszönöm!

main.php

Kód: PHP

1. <?php
2. include ("system/config.php");
3. ?>
4. <html>
5. <head>
6. <link href="themes/style.css" type="text/css">
7. </head>
8. <body>
9. <div class="kozepresz">
10.                 <div class="fejlec">
11.                         <? echo $sitename; ?>
12.                 </div>
13.                
14.                
15.                 <div class="balsav">
16.                                 <div class="cimke">
17.                                         Menü<br>
18.                                
19.                                         <a href="index.php?get=news">Hírek</a><br>
20.                                         <a href="index.php?get=articles">Cikkek</a>
21.                                 </div>
22.                        
23.                                 <div class="cimke">
24.                                         Bejelentkezés
25.                                 </div>
26.                                
27.                                 <div class="cimke">
28.                                         Remklám
29.                                 </div>
30.                                
31.                                                
32.                 </div>
33.                
34.                 <div class="tartalom">
35.                         A container szélessége alapvetően az egész oldal szélességét határozza meg. Látszik,
36.                         hogy az oldal ki fogja tölteni a teljes ablakszélességet. A margin és border tulajdonságok
37.                         már ismerősek, csak erre a dobozra lesznek hatással, míg a line-height öröklődni fog a
38.                         tartalmazott dobozok irányába. Ehhez hasonlóan színeket, betűtípusokat szokás ilyen
39.                         módon, egységesen megadni.
40.                 </div>
41.                
42.                 <div class="lablec">
43.                         Minden jog fenntartva! 2008 Magyar Gábor | Siteversion: <? echo $sitever; ?>
44.                 </div>
45.  
46. </div>
47. </body>
48. </html>
49.  
50.  
51.  
52.  
53.  

és a css:

Kód: CSS

1. body {
2.         background-color: black;
3.         font-family: tahoma;
4.         color: white;
5. }
6.  
7. .kozepresz {
8.         width: 100%;
9.         margin: 0px;
10.         border: 1px solid white;
11.         line-height: 150%;
12. }
13.  
14. .fejlec {
15.         padding: 0.5em;
16.         color: white;
17.         background-color: gray;
18.         clear: left;
19. }
20.  
21. .tartalom {
22.         margin-left: 180px;
23.         padding: 1em;
24.         font-size: 11px;
25.        
26.        
27. }
28.  
29. .balsav {
30.         float: left;
31.         width: 180px;
32.         margin: 0;
33.         text-align: center;
34.         font-size: 14px;
35. }
36.  
37. .cimke {
38.         margin: 0;
39.         padding: 1em;
40.         text-align: center;
41.         font-size: 11px;
42.         background-color: gray;
43. }
44.  
45. .lablec {
46.         padding: 0.5em;
47.         color: white;
48.         background-color: gray;
49.         clear: left;
50.         font-size: 11px;
51. }

[Suttogó]

Köszönöm!

[Warner]

Voálá:

Kód: CSS

1. #also{
2.         clear: both;
3.         float: none;
4.         width: 750px;
5.         background-color: yellow;
6.         }

Így meggyőződik róla, hogy az adott elem mellett semmi ne legyen, ergo a többi alá kerül.

[Suttogó]

Segítsetek hogy oldjam meg hogy Ezt jól jelenítse meg a Firefox is:
Body rész:

Kód: HTML

1.         <body>
2.                 <div id="keret">
3.                         <div id="fejlec">
4.                         Fejléc része
5.                         </div>
6.                         <div id="kozep">
7.                         <div id="menu">
8.                         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum tincidunt, nunc et pharetra adipiscing, risus metus molestie pede, a volutpat.
9.                         </div>
10.                         <div id="tartalom">
11.                         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor risus non leo. Praesent non quam. Integer rhoncus nisl varius sem. Morbi consectetuer rhoncus lacus. Suspendisse ut leo. Quisque ultricies nisi ut dolor. Maecenas arcu orci, tincidunt nec, adipiscing rhoncus, dapibus ut, magna. Donec malesuada. Suspendisse quis turpis ut velit molestie dignissim. Nulla nisi erat, luctus at, aliquam id, gravida nec, libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed pede massa, sagittis sit amet, viverra at, gravida laoreet, nunc. Donec vel ante molestie magna pellentesque hendrerit. Nunc faucibus, est posuere aliquam aliquet, enim urna vestibulum dolor, quis mattis nisi lorem vel nunc.
12.  
13. Etiam aliquet, nunc sed bibendum euismod, ipsum eros pharetra leo, eu posuere nulla libero sed magna. Fusce est arcu, elementum vel, volutpat non, tempus eu, ipsum. Phasellus elementum pede a pede. Sed ultrices pretium quam. Ut porta. In euismod ultrices ligula. Cras et tortor. Aenean eros augue, consequat sed, semper eget, porttitor a, sapien. Sed quam. Morbi quis lectus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur tincidunt mauris et tortor. Nulla facilisi. Donec ultrices lorem non felis. Suspendisse sagittis lacus a lectus. Nunc tempor. Nam pellentesque.
14.  
15. Duis eget nunc. Suspendisse velit lacus, pellentesque sit amet, iaculis vel, pharetra quis, odio. Vivamus a arcu sed tortor cursus ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla mauris mi, sodales vel, ullamcorper ut, varius et, sem. Sed magna purus, eleifend feugiat, egestas a, mattis vel, neque. Nulla facilisi. Aliquam erat volutpat. In dignissim suscipit tortor. Aenean libero ante, pulvinar quis, bibendum nec, elementum at, elit. Vestibulum venenatis orci ut lacus. Mauris interdum enim non justo.
16.  
17. Nullam lectus nisl, tempor ac, vehicula sed, viverra eu, sem. Maecenas eget tortor eget quam eleifend dapibus. Fusce ultrices sapien at arcu. Nunc ligula. Aliquam id urna non est pharetra posuere. Vivamus porttitor libero quis sem. Integer sed turpis. Suspendisse semper, odio a rhoncus facilisis, lacus sapien pellentesque purus, ac ornare velit nisi non odio. Quisque aliquet augue vel turpis. Praesent tempus purus porta sem. Fusce tincidunt. In hac habitasse platea dictumst. Nulla felis libero, euismod at, congue ac, posuere non, lectus. In hac habitasse platea dictumst. Nam pretium, magna non adipiscing mollis, magna dolor facilisis tellus, vitae tempus magna pede sed diam. Nulla facilisi. Integer fermentum quam non orci. Suspendisse potenti.
18.  
19. Curabitur molestie augue. Mauris sagittis dolor vel tortor. Quisque vitae nisi non risus sodales dignissim. Vivamus imperdiet tortor non orci. Maecenas rhoncus, velit id luctus interdum, est ipsum porttitor sapien, vel aliquet erat nisi vel nulla. Praesent congue, mauris at pellentesque hendrerit, dolor eros ultricies velit, id ullamcorper nisl quam ut magna. Aliquam erat volutpat. Praesent porta pellentesque nisl. Pellentesque luctus. Quisque aliquet auctor justo. Vestibulum nibh nisi, fermentum a, porttitor sit amet, viverra ut, sem. Sed eu velit.
20.                         </div>
21.                         </div>
22.                         <div id="also">
23.                         Copyright szöveg vagy ilyesmi;
24.                         </div>
25.                 </div>

ÉS a css hozzá:

Kód: CSS

1. body{
2.         /* Oldal alapbeállításai*/
3.         padding: 0px;
4.         margin: 0px;
5.         text-align: center;
6.         }
7. #keret{
8.         width: 750px;
9.         background-color: red;
10.         text-align: left;
11.         margin-left: auto;
12.         margin-right: auto;
13.         }
14. #fejlec{
15.         width: 750px;
16.         height: 100px;
17.         background-color: orange;
18.         }
19. #kozep{
20.         padding-left: 15px;
21.         padding-right: 15px;
22.         }
23. #menu{
24.         padding: 0px;
25.         width:150px;
26.         float: left;
27.         background-color: green;
28.         }
29. #tartalom{
30.         padding: 0px;
31.         float: right;
32.         width: 570px;
33.         background-color: blue;
34.         }
35. #also{
36.         float: none;
37.         width: 750px;
38.         background-color: yellow;
39.         }

Azt szeretném ha úgy nézne ki mint ahogy az IE7 jeleníti meg.