Глюк в IE 6 при адаптации шаблона rhuk_solarflare_ii к сайту

Адаптировал шаблон rhuk_solarflare_ii к сайту. Сам пользуюсь FireFox 3.0.3 В фаерфоксе все отбражается нормально.



Недавно открыл в сайт в интернет эксплорере и увидел что основной модуль сполз вниз. На скриншоте это видно



Подскажите пожалуйста как это исправить. Сам уже излазил весь CSS - ничего не получилось.

Вот мой CSS

Код (CODE):

1. /* CSS Document */
2.  
3. html {
4.     height: 100%;
5.        
6.        
7. }
8.  
9. body {
10.     height: 100%;
11.         margin-bottom: 1px;
12. }
13.  
14. .clr {
15.     clear: both;
16. }
17.  
18. .outline {
19.   border: 1px solid #cccccc;
20.   background: #ffffff;
21.     padding: 2px;
22. }
23.  
24. #buttons_outer {
25.     width: 635px;
26.     margin-bottom: 2px;
27.     margin-right: 2px;
28.     float: left;
29.  
30. }
31.  
32. #buttons_inner {
33.     border: 1px solid #cccccc;
34.     height: 21px !important;
35.     height: 23px;
36. }
37.  
38. #pathway_text {
39.   overflow: hidden;
40.     display: block;
41.     height: 25px;
42.     line-height: 25px !important;
43.     line-height: 22px;
44.     padding-left: 4px;
45.     border: 1px solid #ccc;
46.     margin-bottom: 2px;
47. }
48.  
49. #pathway_text img {
50.     margin-left: 5px;
51.     margin-right: 5px;
52.     margin-top: 6px;
53. }
54.  
55. #buttons {
56.     float: left;
57.     margin: 0px;
58.     padding: 0px;
59.     width: auto;
60. }
61.  
62.  
63. ul#mainlevel-nav
64. {
65.     list-style: none;
66.     padding: 0;
67.     margin: 0;
68.     font-size: 0.8em;
69. }
70.  
71. ul#mainlevel-nav li
72. {
73.     background-image: none;
74.     padding-left: 0px;
75.     padding-right: 0px;
76.     float: left;
77.     margin: 0;
78.     font-size: 11px;
79.     line-height: 21px;
80.     white-space: nowrap;
81.     border-right: 1px solid #cccccc;
82. }
83.  
84. ul#mainlevel-nav li a
85. {
86.     display: block;
87.     padding-left: 15px;
88.     padding-right: 15px;
89.     text-decoration: none;
90.     color: #333333;
91.     background: transparent;
92. }
93.  
94. #buttons>ul#mainlevel-nav li a { width: auto; }
95.  
96.     ul#mainlevel-nav li a:hover
97. {
98.     color: #fff;
99.     background: #c64934;
100. }
101.  
102.  
103. #search_outer {
104.     float: left;
105.     width: 165px;
106. }
107.  
108. #search_inner {
109.   border: 1px solid #cccccc;
110.     padding: 0px;
111.   height: 21px !important;
112.   height: 23px;
113.   overflow: hidden;
114. }
115.  
116. #search_inner form {
117.   padding: 0;
118.   margin: 0;
119. }
120.  
121. #search_inner .inputbox {
122.     border: 0px;
123.     padding: 3px 3px 3px 5px;
124.     font-family: arial, helvetica, sans-serif;
125.     font-size: 11px;
126.     color: #c64934;
127. }
128.  
129. #header_outer {
130.     text-align: left;
131.     border: 0px;
132.     margin: 0px;
133. }
134.  
135. #header {
136.      float: left;
137.          padding: 0px;
138.          margin-right: 2px;
139.          width: 800px;
140.          height: 150px;
141.     background: url(../images/header_short.jpg) no-repeat;
142. }
143.  
144. #top_outer{
145.     float: left;
146.     width: 165px;
147. }
148.  
149. #top_inner {
150.   border: 1px solid #cccccc;
151.     padding: 2px;
152.   height: 144px !important;
153.   height: 150px;
154.   overflow: hidden;
155.   float: none !important;
156.   float: left;
157. }
158.  
159. #left_outer {
160.         float: left;
161.     margin-top: 2px;
162.     width: 20%;
163. }
164.  
165. #left_inner {
166.   border: 1px solid #cccccc;
167.     padding: 2px;
168.   width: 99%;
169.   float: none !important;
170.   float: left;
171. }
172.  
173. #content_outer {
174.     padding: 0px;
175.     margin-top: 0px;
176.     margin-left: 2px;
177.     /** border: 1px solid #cccccc; **/
178.     float: left;
179.     width: 75%;
180. }
181.  
182. #content_inner{
183.   float: none !important;
184.   /**float: left; **/
185.   padding: 0;
186.   padding-top: 1px;
187.   margin: 0;
188. }
189.  
190. table.content_table {
191.   width: 100%;
192.     padding: 0px;
193.     margin: 0px;
194. }
195.  
196. table.content_table td {
197.     padding: 0px;
198.     margin: 0px;
199. }
200.  
201.  
202. #banner_inner {
203.     float: left;
204.     padding: 0px;
205.     height: 70px;
206. }
207.  
208. #poweredby_inner {
209.     float: right;
210.     padding: 0px;
211.     margin-left: 0px;
212.     height: 70px;
213. }
214.  
215. #right_outer {
216.     margin-left: 2px;
217.     width: 165px;
218. }
219.  
220. #right_inner {
221.   float: none !important;
222.   float: left;
223.   border: 1px solid #cccccc;
224.   padding: 2px;
225. }
226.  
227.  
228. .user1_inner {
229.     border: 1px solid #cccccc;
230.   float: none !important;
231.   float: left;
232.        
233.     margin: 0px;
234.     padding: 2px;
235. }
236.  
237. .user2_inner {
238.     border: 1px solid #cccccc;
239.   float: none !important;
240.   float: left;
241.     margin: 0px;
242.  
243.     padding: 2px;
244. }
245.  
246. table td.body_outer {
247.     padding: 2px;
248.     border: 1px solid #cccccc;
249. }
250.  
251. .maintitle {
252.     color: #ffffff;
253.     font-size: 40px;
254.     padding-left: 15px;
255.     padding-top: 20px;
256. }
257.  
258. .error {
259.   font-style: italic;
260.   text-transform: uppercase;
261.   padding: 5px;
262.   color: #cccccc;
263.   font-size: 14px;
264.   font-weight: bold;
265. }
266.  
267. /** old stuff **/
268.  
269. .back_button {
270.     float: left;
271.   text-align: center;
272.   font-size: 11px;
273.   font-weight: bold;
274.   border: 3px double #cccccc;
275.   width: auto;
276.   background: url(../images/button_bg.png) repeat-x;
277.   padding: 0px 10px;
278.   line-height: 20px;
279.   margin: 1px;
280. }
281.  
282. .pagenav {
283.   text-align: center;
284.   font-size: 11px;
285.   font-weight: bold;
286.   border: 3px double #cccccc;
287.   width: auto;
288.   background: url(../images/button_bg.png) repeat-x;
289.   padding: 0px 10px;
290.   line-height: 20px;
291.   margin: 1px;
292. }
293.  
294. .pagenavbar {
295.     margin-right: 10px;
296.     float: right;
297.  
298.  
299.  
300.  
301. }
302.  
303. #footer {
304.     text-align: center;
305.     padding: 3px;
306.  
307.  
308.  
309.  
310.  
311.  
312.  
313. }
314.  
315. ul
316. {
317. margin: 0;
318. padding: 0;
319. list-style: none;
320. }
321.  
322. li
323. {
324. line-height: 15px;
325. padding-left: 15px;
326. padding-top: 0px;
327. background-image: url(../images/arrow.png);
328. background-repeat: no-repeat;
329. background-position: 0px 2px;
330. }
331.  
332.  
333. td {
334.     text-align: left;
335.     font-size: 11px;
336. }
337.  
338.  
339.  
340. body {
341.     margin: 0px;
342.     height: 100%;
343.     padding: 0px;
344.         width:99%;
345.     font-family: Arial, Helvetica, Sans Serif;
346.     line-height: 120%;
347.     font-size: 11px;
348.     color: #333333;
349.     background: #ffffff;
350. }
351.  
352. /* Joomla core stuff */
353. a:link, a:visited {
354.     color: #c64934; text-decoration: none;
355.     font-weight: bold;
356. }
357.  
358. a:hover {
359.     color: #900;    text-decoration: none;
360.     font-weight: bold;
361. }
362.  
363. table.contentpaneopen {
364.   width: 100%;
365.     padding: 0px;
366.     border-collapse: collapse;
367.     border-spacing: 0px;
368.     margin: 0px;
369. }
370. table.contentpaneopen td {
371.    padding-right: 5px;
372. }
373. table.contentpaneopen td.componentheading {
374.     padding-left: 4px;
375. }
376.  
377.  
378.  
379. table.contentpane {
380.   width: 100%;
381.     padding: 0px;
382.     border-collapse: collapse;
383.     border-spacing: 0px;
384.     margin: 0px;
385. }
386.  
387. table.contentpane td {
388.     margin: 0px;
389.     padding: 0px;
390. }
391.  
392. table.contentpane td.componentheading {
393.     padding-left: 4px;
394. }
395.  
396. table.contentpaneopen fieldset {
397.     border: 0px;
398.     border-bottom: 1px solid #eee;
399. }
400.  
401. .button {
402.   color: #c64934;
403.   font-family: Arial, Hevlvetica, sans-serif;
404.   text-align: center;
405.   font-size: 11px;
406.   font-weight: bold;
407.   border: 3px double #cccccc;
408.   width: auto;
409.   background: url(../images/button_bg.png) repeat-x;
410.   padding: 0px 5px;
411.   line-height: 18px !important;
412.   line-height: 16px;
413.   height: 26px !important;
414.   height: 24px;
415.   margin: 1px;
416. }
417.  
418. .inputbox {
419.     padding: 2px;
420.     border:solid 1px #cccccc;
421.     background-color: #ffffff;
422. }
423.  
424. .componentheading {
425.     background: url(../images/subhead_bg.png) repeat-x;
426.     color: #666666;
427.     text-align: left;
428.     padding-top: 4px;
429.     padding-left: 4px;
430.     height: 21px;
431.     font-weight: bold;
432.     font-size: 10px;
433.     text-transform: uppercase;
434.  
435. }
436.  
437. .contentcolumn {
438.     padding-right: 5px;
439. }
440.  
441. .contentheading {
442.     height: 30px;
443.  
444.     color: #c64934;
445.     font-weight: bold;
446.     font-size: 14px;
447.     white-space: nowrap;
448. }
449.  
450.  
451.  
452. .contentpagetitle {
453.     font-size: 13px;
454.     font-weight: bold;
455.     color: #cccccc;
456.     text-align:left;
457. }
458.  
459. table.searchinto {
460.     width: 100%;
461. }
462.  
463. table.searchintro td {
464.     font-weight: bold;
465. }
466.  
467. table.moduletable {
468.     width: 100%;
469.     margin-bottom: 5px;
470.     padding: 0px;
471.     border-spacing: 0px;
472.     border-collapse: collapse;
473. }
474.  
475. div.moduletable {
476.     padding: 0;
477.     margin-bottom: 2px;
478. }
479.  
480. table.moduletable th, div.moduletable h3 {
481.     background: url(../images/subhead_bg.png) repeat-x;
482.     color: #666666;
483.     text-align: left;
484.     padding-left: 4px;
485.     height: 21px;
486.     line-height: 21px;
487.     font-weight: bold;
488.     font-size: 10px;
489.     text-transform: uppercase;
490.     margin: 0 0 2px 0;
491. }
492.  
493. table.moduletable td {
494.     font-size: 11px;
495.     padding: 0px;
496.     margin: 0px;
497.     font-weight: normal;
498. }
499.  
500. table.pollstableborder td {
501.   padding: 2px;
502. }
503.  
504. .sectiontableheader {
505.   font-weight: bold;
506.   background: #f0f0f0;
507.   padding: 4px;
508. }
509.  
510. .sectiontablefooter {
511.  
512. }
513.  
514. .sectiontableentry1 {
515.     background-color : #ffffff;
516. }
517.  
518. .sectiontableentry2 {
519.     background-color : #f9f9f9;
520. }
521.  
522. .small {
523.     color: #999999;
524.     font-size: 11px;
525. }
526.  
527. .createdate {
528.     height: 15px;
529.     padding-bottom: 10px;
530.     color: #999999;
531.     font-size: 11px;
532. }
533.  
534. .modifydate {
535.     height: 15px;
536.     padding-top: 10px;
537.     color: #999999;
538.     font-size: 11px;
539. }
540.  
541. table.contenttoc {
542.   border: 1px solid #cccccc;
543.   padding: 2px;
544.   margin-left: 2px;
545.   margin-bottom: 2px;
546. }
547.  
548. table.contenttoc td {
549.   padding: 2px;
550. }
551.  
552. table.contenttoc th {
553.   background: url(../images/subhead_bg.png) repeat-x;
554.   color: #666666;
555.     text-align: left;
556.     padding-top: 2px;
557.     padding-left: 4px;
558.     height: 21px;
559.     font-weight: bold;
560.  
561.  
562.  
563.  
564.     font-size: 10px;
565.     text-transform: uppercase;
566. }
567.  
568. a.mainlevel:link, a.mainlevel:visited {
569.     display: block;
570.     background: url(../images/menu_bg.png) no-repeat;
571.     vertical-align: middle;
572.     font-size: 11px;
573.     font-weight: bold;
574.     color: #ccc;
575.     text-align: left;
576.     padding-top: 5px;
577.     padding-left: 18px;
578.     height: 20px !important;
579.     height: 25px;
580.     width: 100%;
581.     text-decoration: none;
582. }
583.  
584. a.mainlevel:hover {
585.     background-position: 0px -25px;
586.     text-decoration: none;
587.     color: #fff;
588. }
589.  
590. a.mainlevel#active_menu {
591.  
592.     color:#fff;
593.     font-weight: bold;
594. }
595.  
596. a.mainlevel#active_menu:hover {
597.     color: #fff;
598. }
599.  
600. a.sublevel:link, a.sublevel:visited {
601.     padding-left: 1px;
602.     vertical-align: middle;
603.     font-size: 11px;
604.     font-weight: bold;
605.     color: #c64934;
606.     text-align: left;
607. }
608.  
609. a.sublevel:hover {
610.     color: #900;
611.     text-decoration: none;
612. }
613.  
614. a.sublevel#active_menu {
615.     color: #333;
616. }
617.  
618. .highlight {
619.     background-color: Yellow;
620.     color: Blue;
621.     padding: 0;
622. }
623. .code {
624.     background-color: #ddd;
625.     border: 1px solid #bbb;
626. }
627.  
628. form {
629. /* removes space below form elements */
630.     margin: 0;
631.     padding: 0;
632. }
633.  
634. div.mosimage {
635.   border: 1px solid #ccc;
636. }
637.  
638. .mosimage {
639.   border: 1px solid #cccccc;
640.   margin: 5px
641. }
642.  
643. .mosimage_caption {
644.   margin-top: 2px;
645.   background: #efefef;
646.   padding: 1px 2px;
647.   color: #666;
648.   font-size: 10px;
649.   border-top: 1px solid #cccccc;
650. }
651.  
652. span.article_seperator {
653.     display: block;
654.     height: 1.5em;
655. }

 

ну по второму скриншоту видно, что правая колонка не вмещается в ширину сайта, поэтому и ушла вниз. Посмотрите ширину сайта, ширину левой колонки и ширину правой колонки

 

В том то и дело что вроде бы уже все что можно поменял. ширину вообще в процентах поставил. Хотя конечно мог и ошибиться в CSS разбираюсь не очень хорошо

 

как у вас называются левая и правая колонка?

 

Левая left_outer
Правая content_outer

 

А можно вопрос - почему вообще в % ширину задали? Сайт статичен - ширина фиксирована - я бы задавал в px.
Вот например так: http://savrox-models.art-od.com/

#container { width: 950px; margin: 0 auto; padding-left:50px;}
div#leftColumn { width:162px; margin:5px; padding:10px; float:left;}
div#infoColumn { width:163px; margin:5px; padding:10px; float:left;}
div#contentColumn { width:505px; padding:20px; float:left;}

Умный броузер ИЕ 6 немного иначе считает отступы (надо погуглить, тема не раз обсуждалась) Потому:
<!--[if lte IE 6]>
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/ie6only.css" rel="stylesheet" type="text/css" />
<![endif]-->

div#contentColumn { width:500px; color:#FFFFFF; font-size:1.2em; padding:20px;}

 

Ну, я ваще прописываю поболее, потому как 7-й Осёл тоже с div-ами не дружит:

Код (PHP):

1. <!--[if IE 6]>
2. <style type="text/css">
3. img { behavior: url(<?php echo JURI::base();?>templates/<?php echo $mainframe->
4. getTemplate(); ?>/css/iepngfix.htc); }
5. </style>
6. <link rel="stylesheet" href="<?php echo JURI::base();?><?php echo $templateUrl; ?>/css/ie6_css.css" type="text/css" media="screen" /><![endif]-->
7.  <!--[if IE 7]><link rel="stylesheet" href="<?php echo JURI::base();?><?php echo $templateUrl; ?>/css/ie7_css.css" type="text/css" media="screen" /><![endif]-->

кстати, файл исправления глюков Осла при отображении png (не показывается прозрачность) прилагаю - весьма полезная хрень для старых Осликов!