Menu na <ul> + CSS - Forum PHP.pl

Menu na <ul> + CSS, źle się wyświetla pod IE

angel2953 Zobacz profil	24.08.2006, 10:38:27 Post #1
Grupa: Zarejestrowani Postów: 199 Pomógł: 5 Dołączył: 8.07.2004 Skąd: gdynia Ostrzeżenie: (0%)	Chciałem sobie zrobić górne menu na zasadzie zakładek, i mam taki kod: [HTML] pobierz, plaintext <?xml version="1.0" encoding="utf-8" ?> <?xml-stylesheet href="#internalStyle" type="text/css"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <title>Tabs Top Menu</title> <style type="text/css" media="all"> /* <![CDATA[ / { margin: 0px; padding: 0px; } body { font-family: Verdana, sans-serif; font-size: 12px; text-align: center; overflow: auto; background-color: #F1F3F5; } div#container { text-align: left; margin: 5px 20px; } .clear { clear: both; } div#Tabs { margin: 5px 5px 0px 35px; position: relative; top: +1px; } div#Tabs ul { list-style: none; } div#Tabs li { display: inline; } div#Tabs li#tabSelected { text-transform: uppercase; float: left; font-family: Arial, sans-serif; font-weight: bold; border: 1px solid #BBBBBB; text-decoration: none; text-align: center; padding: 5px; color: #000000; border-bottom: 1px solid #FFFFFF; text-decoration: none; background-color: #FFFFFF; } div#Tabs li a { text-transform: uppercase; float: left; font-family: Arial, sans-serif; font-weight: bold; color: #FFFFFF; border: 1px solid #BBBBBB; background-color: #336699; text-decoration: none; text-align: center; padding: 5px; } div#Tabs li a:hover { color: #DF7000; border: 1px solid #BBBBBB; text-decoration: none; background-color: #FFFFFF; } div#main { padding: 10px; text-align: justify; border: 1px solid #BBBBBB; background-color: #FFFFFF; margin: 0px; } /* ]]> / </style> </head> <body lang="en"> <div id="container"> <div id="Tabs"> <ul> <li><a href=#">First tab</a></li> <li id="tabSelected">Second tab</li> <li><a href="#">Third tab</a></li> <li><a href="#">Fourth tab</a></li> <li><a href="#">Fifth tab</a></li> </ul> </div> <div class="clear"></div> <div id="main"> <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.</p> </div> </div> </body> </html> [HTML] pobierz, plaintext pod firefoxem to menu wyświetla się prawidłowo (IMG:http://img247.imageshack.us/img247/7155/ffokib6.th.jpg) ale niestety pod IE jest nieco odsunięte od zawartości (około 2-3px) (IMG:http://img138.imageshack.us/img138/1856/iewrongol0.th.jpg) Jak to poprawić aby się tak samo wyświetlało ? Ten post edytował angel2953* 24.08.2006, 10:38:54

Odpowiedzi

Zajec Zobacz profil	24.08.2006, 11:50:42 Post #2
Grupa: Zarejestrowani Postów: 1 086 Pomógł: 8 Dołączył: 10.12.2003 Ostrzeżenie: (0%)	Jeśli chcesz obecne rozwiązanie, zamień kod Kod .clear { clear: both; } na Kod .clear { clear: both; font-size: 0; } A jeszcze lepiej wyrzuć Kod .clear { clear: both; } <div class="clear"></div> i do CSSa wrzuć tylko takie coś: Kod #Tabs:after { display: block; content: ""; clear: both; } P.S. Czemu font-size? Przeczytaj temat: http://forum.php.pl/index.php?showtopic=52072 Ten post edytował Zajec 24.08.2006, 11:51:28

angel2953 Zobacz profil	24.08.2006, 13:42:25 Post #3
Grupa: Zarejestrowani Postów: 199 Pomógł: 5 Dołączył: 8.07.2004 Skąd: gdynia Ostrzeżenie: (0%)	Cytat(Zajec @ 24.08.2006, 12:50 ) Jeśli chcesz obecne rozwiązanie, zamień kod Kod .clear { clear: both; } na Kod .clear { clear: both; font-size: 0; } Niestety to nic nie daje. Cytat(Zajec @ 24.08.2006, 12:50 ) A jeszcze lepiej wyrzuć Kod .clear { clear: both; } <div class="clear"></div> i do CSSa wrzuć tylko takie coś: Kod #Tabs:after { display: block; content: ""; clear: both; } P.S. Czemu font-size? Przeczytaj temat: http://forum.php.pl/index.php?showtopic=52072 po tym wyglad jest jeszcze gorszy zakładki wjechaly na diwa z zawartością (pod FF i IE): (IMG:http://img181.imageshack.us/img181/7068/ieerrordh7.th.jpg)

Posty w temacie

angel2953 Menu na <ul> + CSS 24.08.2006, 10:38:27

Ja_Szczur nie wiem, czy to eleganckie rozwiązanie... ale jes... 24.08.2006, 10:58:40

angel2953 Cytat(Ja_Szczur @ 24.08.2006, 11:58 ) nie... 24.08.2006, 11:14:39

Zajec Jeśli chcesz obecne rozwiązanie, zamień kodKod.cle... 24.08.2006, 11:50:42

angel2953 Cytat(Zajec @ 24.08.2006, 12:50 ) Jeśli c... 24.08.2006, 13:42:25

Zajec A jak wygląda w IE strona: http://zajec.net/test/a... 24.08.2006, 14:09:51

angel2953 Cytat(Zajec @ 24.08.2006, 15:09 ) A jak w... 24.08.2006, 14:17:28

revyag Za dużo kombinowania Problem leży w hasLayout ie.... 24.08.2006, 14:21:51

angel2953 Cytat(revyag @ 24.08.2006, 15:21 ) Za duż... 24.08.2006, 14:27:19

revyag Twój kod przeklejony z pierwszego posta z dodaniem... 24.08.2006, 14:31:47

angel2953 Juppi.. zadziałało. No i teraz rodzi sie pytanie: ... 24.08.2006, 14:34:32

revyag No nie przełknie bo to dzieło microsoftu... 24.08.2006, 14:38:09

s_w_ir Przetraw sobie to, żadnych hacków i działa pod IE ... 24.08.2006, 19:43:12

« Następny starszy · CSS · Następny nowszy »

2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)

0 Zarejestrowanych: