Отображение сайта в разных браузерах

@Анна87 · Регистрация: 29.01.2013

Студворк — интернет-сервис помощи студентам

Здравствуйте! Прошу помощи, потому что боюсь, что сама не разберусь.
Сделала сайт на ucoz.ru. Все было нормально, все нравилось и вроде получалось. Но дело в том, что все это время я просматривала сайт в браузере Firefox. Когда случайно открыла сайт в Explorer, то увидела, что сайт отображается некорректно в некоторых частях. Прочитала, что действительно есть такая проблема, в разных браузерах сайты по-разному отображаются и нужно сделать кроссбраузерную верстку.
Вообще все не так плохо, за исключением:
1. Заглавная картинка сайта с красиво мерцающим текстом в Firefox, дергается в Explorer как от электрошока. Подумала, что все дело в не совпадающем размере, размер подправила, на компьютере картинка в Explorer стала такой же как в Firefox, но вот на ноутбуке ее также "трясет".
2. Текст в заголовках разделов не выравнивается в Explorer по ширине, хотя теги указаны правильно.
3. Между картинками на компьютере в обоих браузерах допустимый пробел, а вот в ноутбуке одна картинка на другую наскакивает (только в Explorer).
4. Есть раздел тесты. При прохождении теста в Explorer стенка дизайна прыгает и некрасиво оттягивается.
Прошу помочь решить перечисленные проблемы.
Заранее спасибо!

Donald28 · 29.01.2013, 22:19

Мы конечно, можем провести мозговой штурм и теоретически выявить все возможные причины проблем. Но, думаю, мы друг другу значительно сократим время, когда увидим либо html/css код этой страницы, либо её адрес в интернете

@Анна87 · 30.01.2013, 18:43 **[ТС]**

Прошу прощения.
Вот, код одной из страниц:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Site Title</TITLE>
<META content=Всё name=Description Насте Бедной о>
<META content=Всё name=Keywords Насте Бедной о>
<META content=Dynamic name=Document-state>
<META content="5 days" name=revizit-after>
<META http-equiv=Content-Type content="text/html; charset=windows-1251"><LINK 
href="ols.css" type=text/css rel=stylesheet>
<META content="MSHTML 6.00.2600.0" name=GENERATOR></head>
<BODY bgColor=#66ccff>
<TABLE class=Lines style="BORDER-COLLAPSE: collapse" cellSpacing=0 width=700 
align=center border=0>
 <TBODY>
 <TR>
 <TD bgColor=#0066ff>
 <CENTER>
 <TABLE borderColor=#0066ff <CENTER> 
 
 <TBODY>
 <TR>
 
 
 <TD align=middle bgColor=#0033cc colSpan=2><FONT color=#ffffff><IMG 
 height=251 width=700 src="http://example.com/logo1-2.gif" 
 
 
 <SCRIPT language=JavaScript>
 
<marquee behavior="scroll" scrollAmount="3" width="400" height="20" onMouseOver="this.scrollAmount=0" onMouseOut="this.scrollAmount=3">
 Добро пожаловать!
</marquee> 
<!--
document.write(datastr);
-->
</SCRIPT>
 &nbsp;</FONT></TD></TR> 
 <TR>
 <TD vAlign=top width=170 bgColor=#99ccff>
 <TABLE width=155 align=center border=0>
 <TBODY>
 
<TR>
 <TD onmouseover="this.style.backgroundColor='#33ccff';" 
 onmouseout="this.style.backgroundColor='#3399cc'" align=middle 
 width=150 bgColor=#3399cc><A 
href="http://example.com/"><FONT 
 class=a2>на главную</FONT></A></TD></TR> 
 
<TR>
 <TD onmouseover="this.style.backgroundColor='#33ccff';" 
 onmouseout="this.style.backgroundColor='#3399cc'" align=middle 
 width=150 bgColor=#3399cc><A 
href="http://example.com/load/"><FONT 
 class=a2>рабочие программы</FONT></A></TD></TR>
 
 <TR>
 <TD onmouseover="this.style.backgroundColor='#33ccff';" 
 onmouseout="this.style.backgroundColor='#3399cc'" align=middle 
 width=150 bgColor=#3399cc><A 
href="http://example.com/publ/"><FONT 
 class=a2>конспекты уроков</FONT></A></TD></TR>
 
<TR>
 <TD onmouseover="this.style.backgroundColor='#33ccff';" 
 onmouseout="this.style.backgroundColor='#3399cc'" align=middle 
 width=150 bgColor=#3399cc><A 
href="http://example.com/index/uchebniki/0-13"><FONT 
 class=a2>электронные учебники</FONT></A></TD></TR>
 
 <TR>
 <TD onmouseover="this.style.backgroundColor='#33ccff';" 
 onmouseout="this.style.backgroundColor='#3399cc'" align=middle 
 width=150 bgColor=#3399cc><A href="http://example.com/blog/"><FONT 
 class=a2>презентации</FONT></A></TD></TR>
 
 <TR>
 <TD onmouseover="this.style.backgroundColor='#33ccff';" 
 onmouseout="this.style.backgroundColor='#3399cc'" align=middle 
 width=150 bgColor=#3399cc><A href="http://example.com/video/"><FONT 
 class=a2>видеоматериалы</FONT></A></TD></TR> 
 
 
 <TR>
 <TD onmouseover="this.style.backgroundColor='#33ccff';" 
 onmouseout="this.style.backgroundColor='#3399cc'" align=middle 
 width=150 bgColor=#3399cc><A href="http://example.com/index/materialy/0-10"><FONT 
 class=a2>исследовательские проекты</FONT></A></TD></TR>
 
 <TR>
 <TD onmouseover="this.style.backgroundColor='#33ccff';" 
 onmouseout="this.style.backgroundColor='#3399cc'" align=middle 
 width=150 bgColor=#3399cc><A href="http://example.com/tests/"><FONT 
 class=a2>тесты</FONT></A></TD></TR>
 <TR>
 <TD onmouseover="this.style.backgroundColor='#33ccff';" 
 onmouseout="this.style.backgroundColor='#3399cc'" align=middle 
 width=150 bgColor=#3399cc><A href="http://example.com/dir/"><FONT 
 class=a2>полезные ссылки</FONT></A></TD></TR>
 
<TR>
 <TD onmouseover="this.style.backgroundColor='#33ccff';" 
 onmouseout="this.style.backgroundColor='#3399cc'" align=middle 
 width=150 bgColor=#3399cc><A
href="http://example.com/news/"/><FONT 
 class=a2>раздел новостей</FONT></A></TD></TR>
 
 
<TR>
 <TD onmouseover="this.style.backgroundColor='#33ccff';" 
 onmouseout="this.style.backgroundColor='#3399cc'" align=middle 
 width=150 bgColor=#3399cc><A
href="http://example.com/index/karta_sajta/0-14"><FONT 
 class=a2>карта сайта</FONT></A></TD></TR>
 
 
 <TR>
 <TD onmouseover="this.style.backgroundColor='#33ccff';" 
 onmouseout="this.style.backgroundColor='#3399cc'" align=middle 
 width=150 bgColor=#3399cc><A
href="http://example.com/index/kontaktnaja_informacija/0-11"><FONT 
 class=a2>контакты</FONT></A></TD></TR>
 <TR>
 <TD onmouseover="this.style.backgroundColor='#33ccff';" 
 onmouseout="this.style.backgroundColor='#3399cc'" align=middle 
 width=150 bgColor=#3399cc><A
href="http://example.com/search/"><FONT 
 class=a2>поиск</FONT></A></TD></TR>
 <TR>
 <TD onmouseover="this.style.backgroundColor='#33ccff';" 
 onmouseout="this.style.backgroundColor='#3399cc'" align=middle 
 width=150 bgColor=#3399cc><A
href="http://example.com/gb/"><FONT 
 class=a2>гостевая</FONT></A></TD></TR>
 
 
</TABLE></TD>
<TD vAlign=top bgColor=#33ccff>
 <TABLE width=500 align=center border=0> <p class=MsoNormal>
 
<p align="center"><strong>Учебники по географии</strong> </p> 
 
 
<IMG SRC="http://example.com/078_small.jpg"
align="left" hspace="10px" WIDTH="193" HEIGHT="250"> 
 
 
<p class=MsoNormal style='margin-top:0cm;margin-right:8.5pt;margin-bottom:0cm;
margin-left:8.5pt;margin-bottom:.0001pt;text-align:justify'> Баринова И.И.
 <p class=MsoNormal style='margin-top:0cm;margin-right:8.5pt;margin-bottom:0cm;
margin-left:8.5pt;margin-bottom:.0001pt;text-align:justify'> География России. Природа. 8 класс.
 
<p class=MsoNormal style='margin-top:0cm;margin-right:8.5pt;margin-bottom:0cm;
margin-left:8.5pt;margin-bottom:.0001pt;text-align:justify'> 17-е изд., стер. - М.: 2011 - 304 с.
 
<p class=MsoNormal style='margin-top:0cm;margin-right:8.5pt;margin-bottom:0cm;
 margin-left:8.5pt;margin-bottom:.0001pt;text-align:justify'> Размер: 44,1 МБ
 
 
<p class=MsoNormal style='margin-top:0cm;margin-right:8.5pt;margin-bottom:0cm;
margin-left:8.5pt;margin-bottom:.0001pt;text-align:justify'> Формат: pdf 
 
 
<p class=MsoNormal style='margin-top:0cm;margin-right:8.5pt;margin-bottom:0cm;
margin-left:8.5pt;margin-bottom:.0001pt;text-align:justify'><a
 
href="http://rusfolder.com/34005584" title=Скачать>Скачать</a><span
style="mso-spacerun: yes"> </span> </p> 
 
 
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
 
<IMG SRC=" [url]http://example.com/051_small.jpg[/url] "
align="left" hspace="10px" WIDTH="193" HEIGHT="250"> 
 
 
<p class=MsoNormal style='margin-top:0cm;margin-right:8.5pt;margin-bottom:0cm;
margin-left:8.5pt;margin-bottom:.0001pt;text-align:justify'> Дронов В.П., Ром В.Я. 
 
 <p class=MsoNormal style='margin-top:0cm;margin-right:8.5pt;margin-bottom:0cm;
margin-left:8.5pt;margin-bottom:.0001pt;text-align:justify'> География России. Население и хозяйство. Учебник для 9 класса.
 
<p class=MsoNormal style='margin-top:0cm;margin-right:8.5pt;margin-bottom:0cm;
margin-left:8.5pt;margin-bottom:.0001pt;text-align:justify'> 18-е изд., стереотип. - М.: Дрофа, 2011 - 288 с.
 
<p class=MsoNormal style='margin-top:0cm;margin-right:8.5pt;margin-bottom:0cm;
 margin-left:8.5pt;margin-bottom:.0001pt;text-align:justify'> Размер: 100 МБ
 
 
<p class=MsoNormal style='margin-top:0cm;margin-right:8.5pt;margin-bottom:0cm;
margin-left:8.5pt;margin-bottom:.0001pt;text-align:justify'> Формат: pdf 
 
 
<p class=MsoNormal style='margin-top:0cm;margin-right:8.5pt;margin-bottom:0cm;
margin-left:8.5pt;margin-bottom:.0001pt;text-align:justify'><a
 
href="http://olga1960.rusfolder.net/files/34349597" title=Скачать>Скачать</a><span
style="mso-spacerun: yes"> </span> </p>
 
 
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<IMG SRC="http://example.com/037_small.jpg"
align="left" hspace="10px" WIDTH="193" HEIGHT="250"> 
 
 
<p class=MsoNormal style='margin-top:0cm;margin-right:8.5pt;margin-bottom:0cm;
margin-left:8.5pt;margin-bottom:.0001pt;text-align:justify'> Максаковский В.П.
 
 
 <p class=MsoNormal style='margin-top:0cm;margin-right:8.5pt;margin-bottom:0cm;
margin-left:8.5pt;margin-bottom:.0001pt;text-align:justify'> География. Экономическая и социальная география мира. Учебник для 10 класса.
 
<p class=MsoNormal style='margin-top:0cm;margin-right:8.5pt;margin-bottom:0cm;
margin-left:8.5pt;margin-bottom:.0001pt;text-align:justify'> 17-е изд. - М.: Просвещение, 2009 - 397 с.
 
<p class=MsoNormal style='margin-top:0cm;margin-right:8.5pt;margin-bottom:0cm;
 margin-left:8.5pt;margin-bottom:.0001pt;text-align:justify'> Размер: 12,3 МБ
 
 
<p class=MsoNormal style='margin-top:0cm;margin-right:8.5pt;margin-bottom:0cm;
margin-left:8.5pt;margin-bottom:.0001pt;text-align:justify'> Формат: djvu
 
 
<p class=MsoNormal style='margin-top:0cm;margin-right:8.5pt;margin-bottom:0cm;
margin-left:8.5pt;margin-bottom:.0001pt;text-align:justify'><a
 
href="http://example.com/geografija-ehkonom-i_soc-geografija_mira-uchebnik_.djvu" title=Скачать>Скачать</a><span
style="mso-spacerun: yes"> </span> </p>
 
<br>
<br>
<br>
<br>
<br>
<br>
<br>
 
<IMG SRC="http://example.com/044_small.jpg"
align="left" hspace="10px" WIDTH="193" HEIGHT="250"> 
 
 
<p class=MsoNormal style='margin-top:0cm;margin-right:8.5pt;margin-bottom:0cm;
margin-left:8.5pt;margin-bottom:.0001pt;text-align:justify'> Атлас. Экономическая и социальная география мира. 10 класс.
 
 
<p class=MsoNormal style='margin-top:0cm;margin-right:8.5pt;margin-bottom:0cm;
margin-left:8.5pt;margin-bottom:.0001pt;text-align:justify'> М.: АСТ-Пресс, 2002 - 48 с.
 
<p class=MsoNormal style='margin-top:0cm;margin-right:8.5pt;margin-bottom:0cm;
 margin-left:8.5pt;margin-bottom:.0001pt;text-align:justify'> Размер: 38,8 МБ
 
 
<p class=MsoNormal style='margin-top:0cm;margin-right:8.5pt;margin-bottom:0cm;
margin-left:8.5pt;margin-bottom:.0001pt;text-align:justify'> Формат: pdf 
 
<p class=MsoNormal style='margin-top:0cm;margin-right:8.5pt;margin-bottom:0cm;
margin-left:8.5pt;margin-bottom:.0001pt;text-align:justify'><a
 
href="http://rusfolder.com/34563099" title=Скачать>Скачать</a><span
style="mso-spacerun: yes"> </span> </p>
 
 
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
 
 
 
<IMG SRC="http://example.com/055_small.jpg"
align="left" hspace="10px" WIDTH="193" HEIGHT="250"> 
 
 
<p class=MsoNormal style='margin-top:0cm;margin-right:8.5pt;margin-bottom:0cm;
margin-left:8.5pt;margin-bottom:.0001pt;text-align:justify'> Тесты по географии. 10 класс. К учебнику Максаковского В.П. - Баранчиков Е.В.
 
 
<p class=MsoNormal style='margin-top:0cm;margin-right:8.5pt;margin-bottom:0cm;
margin-left:8.5pt;margin-bottom:.0001pt;text-align:justify'> 3-е изд., стер. - М.: Экзамен, 2011 - 96 с.
 
<p class=MsoNormal style='margin-top:0cm;margin-right:8.5pt;margin-bottom:0cm;
 margin-left:8.5pt;margin-bottom:.0001pt;text-align:justify'> Размер: 2,37 МБ
 
 
<p class=MsoNormal style='margin-top:0cm;margin-right:8.5pt;margin-bottom:0cm;
margin-left:8.5pt;margin-bottom:.0001pt;text-align:justify'> Формат: pdf 
 
<p class=MsoNormal style='margin-top:0cm;margin-right:8.5pt;margin-bottom:0cm;
margin-left:8.5pt;margin-bottom:.0001pt;text-align:justify'><a
 
href="http://example.com/testy_po_geografii-10kl-k_uch-maksakovskogo_baranc.pdf " title=Скачать>Скачать</a><span
style="mso-spacerun: yes"> </span> </p>
 
<br>
<br>
<br>
<br>
<br>
<br>
<br>
 <TBODY></TBODY></TABLE></TD></TR>
 <TR><!--nen-->
 <TD class=td1 align=middle bgColor=#0033cc colSpan=2><FONT 
 color=#ffffff> </FONT></TD></TR>
 <TR><!--nen--></TD></TR></TBODY></TABLE></CENTER></TD></TR></TBODY></TABLE></BODY></HTML>

$SEARCH_FORM$
$POWERED_BY$

Адрес в интернете {нерабочая ссылка удалена}

@xaus · 30.01.2013, 20:18

попробуй вставить в <head><head/> этот код в спойлере

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
<!--[if IE 6]>
<link href="default_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<style type="text/css">
body,td,th {
    font-family: "Open Sans", sans-serif;
}
h1,h2,h3,h4,h5,h6 {
    font-family: "Archivo Narrow", sans-serif;
}
</style>

@!Omega · 31.01.2013, 03:13

вопрос а если к примеру етот же сайт будет не коректно отображаться в опере?
как тогда зделать подключения стилей чисто для опери?

@Songo · 31.01.2013, 07:10

Сообщение от Анна87

Вот, код одной из страниц:

Мои знания в HTML и CSS не так велики, но ваш конструктор сайтов, в котором написан ваш сайт - просто ужасен, это со времён 90 его наверно не обновляли. Много косяков по коду, несуществующие классы, а про CSS я вообще молчу.
Сам переписывал сайт написанный в конструкторе, index.htm весил 500 килобайт, а после переписывания 5,2 килобайта и глюков вразы меньше. Конструктор это зло, может и есть более менее нормальные, но точно не тот в котором написан ваш сайт.
Как вариант, переписать его в другом (нормальном) конструкторе (в каком не знаю, может кто подскажет, или тема есть), или попросить того, кто понимает в вёрстке и поможет написать вам сайт. Ну или ждать, покуда кто нибудь сможет разобраться в этом коде и даст решение.
И уточняйте версию IE, так как то что работает в 8, может совсем по другому работать в 7-6.

Добавлено через 2 часа 8 минут

Сообщение от Анна87

2. Текст в заголовках разделов не выравнивается в Explorer по ширине, хотя теги указаны правильно.

Можете заменить в строке 138

Сообщение от Анна87

table на div

HTML5
1
<div width=500 align=center border=0> <p class=MsoNormal>

и в строке 317

Сообщение от Анна87

table на div

HTML5
1
<TBODY></TBODY></div></TD></TR>

Но это только для данной страницы и не решает все проблемы, а может еще чего и нового появится.

@xaus · 31.01.2013, 13:25

вот css под разные версии IE

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    <!-- CSS -->
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
        <!--[if IE 6]>
            <link rel="stylesheet" type="text/css" media="screen" href="css/ie-hacks.css" />
            <script type="text/javascript" src="js/DD_belatedPNG.js"></script>
            <script>
                /* EXAMPLE */
                DD_belatedPNG.fix('*');
            </script>
        <![endif]-->
        <!--[if IE 7]>
            <link rel="stylesheet" href="css/ie7-hacks.css" type="text/css" media="screen" />
        <![endif]-->
        <!--[if IE 8]>
            <link rel="stylesheet" href="css/ie8-hacks.css" type="text/css" media="screen" />
        <![endif]-->
        <!-- ENDS CSS -->

@!Omega · 31.01.2013, 14:30

Сообщение от xaus

вот css под разные версии IE

Кликните здесь для просмотра всего текста

Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    <!-- CSS -->
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
        <!--[if IE 6]>
            <link rel="stylesheet" type="text/css" media="screen" href="css/ie-hacks.css" />
            <script type="text/javascript" src="js/DD_belatedPNG.js"></script>
            <script>
                /* EXAMPLE */
                DD_belatedPNG.fix('*');
            </script>
        <![endif]-->
        <!--[if IE 7]>
            <link rel="stylesheet" href="css/ie7-hacks.css" type="text/css" media="screen" />
        <![endif]-->
        <!--[if IE 8]>
            <link rel="stylesheet" href="css/ie8-hacks.css" type="text/css" media="screen" />
        <![endif]-->
        <!-- ENDS CSS -->

а если надо сделать для опери или FireFox??? как тогда должен вигледить код?

@Songo · 31.01.2013, 14:38

Сообщение от !Omega

а если надо сделать для опери или FireFox??? как тогда должен вигледить код?

Обычно подключают стили для IE (и то как правило для IE 6-7), а для всего остального просто пишут нормально код и всё работает.

@!Omega · 31.01.2013, 15:54

у меня бил случай с анимацией: в опере она почемуто глючила...
и я хотел отключить ее только для опери... но не получилось(((
вот как сделать для других бравзеров разниє стили???

@Анна87 · 31.01.2013, 18:47 **[ТС]**

Всем спасибо за ответы! Попробую сделать как посоветовали!

Сообщение от Songo

Мои знания в HTML и CSS не так велики, но ваш конструктор сайтов, в котором написан ваш сайт - просто ужасен, это со времён 90 его наверно не обновляли. Много косяков по коду, несуществующие классы, а про CSS я вообще молчу.

Наверное. Просто этот дизайн мне давно помогали делать, я скопировала его с другого сайта. Просто я во всем этом не сильна.

Добавлено через 15 минут
К сожалению не получается

@xaus · 31.01.2013, 23:10

Сообщение от !Omega

а если надо сделать для опери или FireFox??? как тогда должен вигледить код?

Проще всего определить нужный браузер с помощью JavaScript, после чего загрузить для него требуемый файл со стилями. Этот способ хорош еще тем, что позволяет узнать версию браузера, а не просто его название. Сам стилевой файл подключается через метод document.write, который в данном случае будет использоваться так:

Кликните здесь для просмотра всего текста

Code
1
document.write("<link rel='stylesheet' href='style.css' type='text/css'>")

где style.css представляет собой файл для конкретного браузера.

В общем случае определение браузера и ссылка на файл CSS для него происходит, как показано в примере 1.

Пример 1. Добавление стиля через JavaScript

Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
<script type="text/javascript">
 
 
DOM = document.getElementById;
 Netscape4 = document.layer;
 Netscape6 = Mozilla = (navigator.appName == "Netscape") && DOM;
 Netscape7 = navigator.userAgent.indexOf("Netscape/7") >= 0;
 Opera5 = window.opera && DOM;
 Opera6 = Opera5 && window.print;
 Opera7 = Opera5 && navigator.userAgent.indexOf("Opera 7") >= 0;
 IE = document.all && !Opera5;
 Firefox = navigator.userAgent.indexOf("Firefox") >= 0;
 
 if(IE) document.write("<link rel='stylesheet' href='/ie.css' type='text/css'>");
 else document.write("<link rel='stylesheet' href='/style.css' type='text/css'>"); 
 
 </script>
 </head>
 <body> 
 
...
 </body>
 </html>

Не стоит считать, что придется писать отдельные стили для всех браузеров. Например, Netscape (версии 6 и старше), Mozilla и Firefox основаны на одном ядре под названием Gecko, поэтому работают c сайтами примерно одинаково. В какой-то мере по своему подходу близки браузеры Internet Explorer 6 и Opera 7, и в большинстве случаев они отображают результат в равной мере правильно. Получается, что обычно требуется создать всего два разных стиля, предназначенных для браузеров, принадлежавших к разным «лагерям».

@!Omega · 01.02.2013, 01:27

что делаєт вот єта строка:

JavaScript
1
IE = document.all && !Opera5;

@Songo · 01.02.2013, 02:43

Сообщение от Анна87

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

Или пользуйтесь как есть (под IE не так много сидят, да и баги не критичны), или переписывать сайт, так как в этом коде что есть - чёрт ноги сломает.

@newJS · 01.02.2013, 08:08

Сообщение от !Omega

что делаєт вот єта строка:

это разборки, кто есть кто, опера или осел

да этот код уже несколько лет как не актуален, таких браузеров давно нет, непонятно откуда этот код вылез и кто им сегодня будет пользоваться

Добавлено через 6 минут
Меню должно "нажиматься" все, иначе зачем делать подсветку-обманку, если нажимается только ссылка.

Добавлено через 1 час 24 минуты
как вариант менюхи, данные использовал из поста №3, контраст между фоном и текстом отвратительный, не читабельно

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Левое вертикальное меню</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
 
<style type="text/css">
.schoolmistress {margin:0; padding:0; width:155px;}
.schoolmistress li {list-style-type:none; background:#3399cc; font-size:17px;}
.schoolmistress li {margin:2px 0; padding:1px 5px 3px 5px; text-align:center;}
.schoolmistress a {display:block; text-decoration:none;}
.schoolmistress li:hover {background:#33ccff;}
</style>
</head>
 
<body>
 
<ul class="schoolmistress">
<li><a href="http://example.com/">на главную</a></li>
<li><a href="http://example.com/load/">рабочие программы</a></li>
<li><a href="http://example.com/publ/">конспекты уроков</a></li>
<li><a href="http://example.com/index/uchebniki/0-13">электронные учебники</a></li>
<li><a href="http://example.com/blog/">презентации</a></li>
<li><a href="http://example.com/video/">видеоматериалы</a></li>
<li><a href="http://example.com/index/materialy/0-10">исследовательские проекты</a></li>
<li><a href="http://example.com/tests/">тесты</a></li>
<li><a href="http://example.com/dir/">полезные ссылки</a></li>
<li><a href="http://example.com/news/">раздел новостей</a></li>
<li><a href="http://example.com/index/karta_sajta/0-14">карта сайта</a></li>
<li><a href="http://example.com/index/kontaktnaja_informacija/0-11">контакты</a></li>
<li><a href="http://example.com/search/">поиск</a></li>
<li><a href="http://example.com/gb/">гостевая</a></li>
</ul>
 
</body>
</html>

Добавлено через 1 минуту

Сообщение от Songo

так как в этом коде что есть - чёрт ноги сломает.

а валидатор зубы

@Antares-75 · 01.02.2013, 08:29

Не по теме:

Songo, не надо ругать ucoz!
Это, может, шаблон старый - табличная верстка

Анна87, лучше приводить страницу из конструктора, а не код, который уже браузер показывает.

Все описанные проблемы с Explorer похоже действительно от версии IE зависят. На ноуте, наверное, версия меньше. Надеюсь, приведенные заплатки помогут.

Проходил тест по географии

, дествительно, левая часть, где меню, растягивается - очень похоже что некорректно сверстан шаблон (или, скорее, подправили в нем). Дайте код Тестов из Конструктора.
Кстати, в Опере тот-же тест абсолютно нормально!

@Songo · 01.02.2013, 12:58

Сообщение от newJS

а валидатор зубы

Я валидатором смотрел, там одно правишь - 5 других вылазит, или дизайн едет куда-то.

Добавлено через 3 минуты

Сообщение от Antares-75

Songo, не надо ругать ucoz!
Это, может, шаблон старый - табличная верстка

Я заходил на ucoz, вроде ничего так выглядит ресурс и форум есть, просто этот сайт очень давно походу писали, а сейчас уже наверно обновлён ucoz и напишет по другому. И дело вовсе не в табличной вёрстке, а в том, что язык старый

HTML5
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

и много ошибок по коду.

Добавлено через 21 минуту
Я вот смотрю и не понимаю, где сам файл стилей для сайта, не один class что есть на странице Учебники по географии не могу найти в стилях, а то что есть в стилях - нет на странице.

Для чего тогда нужен файл стилей layer1.css?

@newJS · 01.02.2013, 14:33

Сообщение от Songo

Я валидатором смотрел, там одно правишь - 5 других вылазит, или дизайн едет куда-то.

а я это увидел, и не стал над валидатором изгаляться, жалко мне его, а вдруг крышу сорвет...

HTML5
1
2
<CENTER>
 <TABLE borderColor=#0066ff <CENTER>

такое только с нуля писать, быстрее будет

@Songo · 01.02.2013, 19:53

Анна87
Выкладывайте шаблон сайта, тогда можно что-то посмотреть.
А как вы добавляете новую инфу на сайт?

@Анна87 · 06.02.2013, 18:37 **[ТС]**

Здравствуйте!
Я к сожалению не очень сильна в создании сайтов, и многое из того что говорится мне не понятно.
Так значит нет способ справить существующие проблемы
Обновляю я сайт так: открываю код главной страницы и прям пишу обновления. Для ссылок использую тег <а

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Анна87 0 / 0 / 0 Регистрация: 29.01.2013 Сообщений: 14

	Отображение сайта в разных браузерах 29.01.2013, 20:58. Показов 10923. Ответов 32 Метки нет (Все метки) Здравствуйте! Прошу помощи, потому что боюсь, что сама не разберусь. Сделала сайт на ucoz.ru. Все было нормально, все нравилось и вроде получалось. Но дело в том, что все это время я просматривала сайт в браузере Firefox. Когда случайно открыла сайт в Explorer, то увидела, что сайт отображается некорректно в некоторых частях. Прочитала, что действительно есть такая проблема, в разных браузерах сайты по-разному отображаются и нужно сделать кроссбраузерную верстку. Вообще все не так плохо, за исключением: 1. Заглавная картинка сайта с красиво мерцающим текстом в Firefox, дергается в Explorer как от электрошока. Подумала, что все дело в не совпадающем размере, размер подправила, на компьютере картинка в Explorer стала такой же как в Firefox, но вот на ноутбуке ее также "трясет". 2. Текст в заголовках разделов не выравнивается в Explorer по ширине, хотя теги указаны правильно. 3. Между картинками на компьютере в обоих браузерах допустимый пробел, а вот в ноутбуке одна картинка на другую наскакивает (только в Explorer). 4. Есть раздел тесты. При прохождении теста в Explorer стенка дизайна прыгает и некрасиво оттягивается. Прошу помочь решить перечисленные проблемы. Заранее спасибо! 0

Donald28 странник 810 / 481 / 108 Регистрация: 28.05.2012 Сообщений: 1,518 Записей в блоге: 2
	29.01.2013, 22:19
	Мы конечно, можем провести мозговой штурм и теоретически выявить все возможные причины проблем. Но, думаю, мы друг другу значительно сократим время, когда увидим либо html/css код этой страницы, либо её адрес в интернете 0

@!Omega 14 / 14 / 3 Регистрация: 14.02.2010 Сообщений: 293
	31.01.2013, 03:13
	вопрос а если к примеру етот же сайт будет не коректно отображаться в опере? как тогда зделать подключения стилей чисто для опери? 0

@!Omega 14 / 14 / 3 Регистрация: 14.02.2010 Сообщений: 293
	31.01.2013, 15:54
	у меня бил случай с анимацией: в опере она почемуто глючила... и я хотел отключить ее только для опери... но не получилось((( вот как сделать для других бравзеров разниє стили??? 0

@Antares-75 34 / 34 / 5 Регистрация: 16.11.2012 Сообщений: 138
	01.02.2013, 08:29
	Не по теме: Songo, не надо ругать ucoz! Это, может, шаблон старый - табличная верстка Анна87, лучше приводить страницу из конструктора, а не код, который уже браузер показывает. Все описанные проблемы с Explorer похоже действительно от версии IE зависят. На ноуте, наверное, версия меньше. Надеюсь, приведенные заплатки помогут. Проходил тест по географии , дествительно, левая часть, где меню, растягивается - очень похоже что некорректно сверстан шаблон (или, скорее, подправили в нем). Дайте код Тестов из Конструктора. Кстати, в Опере тот-же тест абсолютно нормально! 0

@Songo 10 / 6 / 0 Регистрация: 25.01.2013 Сообщений: 46
	01.02.2013, 19:53
	Анна87 Выкладывайте шаблон сайта, тогда можно что-то посмотреть. А как вы добавляете новую инфу на сайт? 0

@Анна87 0 / 0 / 0 Регистрация: 29.01.2013 Сообщений: 14
	06.02.2013, 18:37 [ТС]
	Здравствуйте! Я к сожалению не очень сильна в создании сайтов, и многое из того что говорится мне не понятно. Так значит нет способ справить существующие проблемы Обновляю я сайт так: открываю код главной страницы и прям пишу обновления. Для ссылок использую тег <а 0