Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Menu na <ul> + CSS, źle się wyświetla pod IE
angel2953
post 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 
  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <?xml-stylesheet href="#internalStyle" type="text/css"?>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">       
  4. <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  6. 	<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
  7. 	<title>Tabs Top Menu</title>
  8. 	<style type="text/css" media="all">
  9. 	/* <![CDATA[ */
  10. 		* { margin: 0px; padding: 0px; }
  11. 		body { font-family: Verdana, sans-serif; font-size: 12px; text-align: center; overflow: auto; background-color: #F1F3F5; }
  12. 		div#container { text-align: left; margin: 5px 20px; }
  13. 		.clear { clear: both; }
  14. 		div#Tabs { margin: 5px 5px 0px 35px; position: relative; top: +1px; }
  15. 		div#Tabs ul { list-style: none; }
  16. 		div#Tabs li { display: inline; }
  17. 		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; }
  18. 		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; }
  19. 		div#Tabs li a:hover { color: #DF7000; border: 1px solid #BBBBBB; text-decoration: none; background-color: #FFFFFF; }
  20. 		div#main { padding: 10px; text-align: justify; border: 1px solid #BBBBBB; background-color: #FFFFFF; margin: 0px; } 
  21. 	/* ]]> */
  22. 	</style>
  23. </head>
  24. <body lang="en">
  25. 	<div id="container">
  26. 		<div id="Tabs">
  27. 		<ul>
  28. 			<li><a href=#">First tab</a></li>
  29. 			<li id="tabSelected">Second tab</li>
  30. 			<li><a href="#">Third tab</a></li>
  31. 			<li><a href="#">Fourth tab</a></li>
  32. 			<li><a href="#">Fifth tab</a></li>
  33. 		</ul>
  34. 		</div>
  35. 		<div class="clear"></div>
  36. 		<div id="main">
  37. <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>
  38. 		</div>
  39. 	</div>
  40. </body>
  41. </html>
[HTML] pobierz, plaintext


pod firefoxem to menu wyświetla się prawidłowo

ale niestety pod IE jest nieco odsunięte od zawartości (około 2-3px)

Jak to poprawić aby się tak samo wyświetlało ?

Ten post edytował angel2953 24.08.2006, 10:38:54


--------------------
Sygnaturkę ukradli
Go to the top of the page
+Quote Post
Ja_Szczur
post 24.08.2006, 10:58:40
Post #2





Grupa: Zarejestrowani
Postów: 115
Pomógł: 0
Dołączył: 4.12.2005
Skąd: Strzyżów

Ostrzeżenie: (0%)
-----

nie wiem, czy to eleganckie rozwiązanie... ale jest skuteczne ;]
[HTML] pobierz, plaintext 
  1. div#main {
  2.    margin-top: -5px;
  3. }
[HTML] pobierz, plaintext


--------------------
"No bo z fasolą to człowiek przynajmniej wie, na czym stoi..."
Pomniejsze bóstwa, Terry Pratchett

php :*
Go to the top of the page
+Quote Post
angel2953
post 24.08.2006, 11:14:39
Post #3





Grupa: Zarejestrowani
Postów: 199
Pomógł: 5
Dołączył: 8.07.2004
Skąd: gdynia

Ostrzeżenie: (0%)
-----

Cytat(Ja_Szczur @ 24.08.2006, 11:58 ) *
nie wiem, czy to eleganckie rozwiązanie... ale jest skuteczne ;]
[HTML] pobierz, plaintext 
  1. div#main {
  2.    margin-top: -5px;
  3. }
[HTML] pobierz, plaintext

Tego już próbowałem ale to nie jest rozwiązanie gdyż w FF div id="main" podnosi się o te 5px a w IE widać czarną ramkę na zaznaczonej zakładce czego z kolei nie widać na FF i własnie taki efekt chciałbym też uzyskać na IE.


--------------------
Sygnaturkę ukradli
Go to the top of the page
+Quote Post
Zajec
post 24.08.2006, 11:50:42
Post #4





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
Go to the top of the page
+Quote Post
angel2953
post 24.08.2006, 13:42:25
Post #5





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):


--------------------
Sygnaturkę ukradli
Go to the top of the page
+Quote Post
Zajec
post 24.08.2006, 14:09:51
Post #6





Grupa: Zarejestrowani
Postów: 1 086
Pomógł: 8
Dołączył: 10.12.2003

Ostrzeżenie: (0%)
-----

A jak wygląda w IE strona: http://zajec.net/test/angel questionmark.gif

Z tym :after napisałem dobrze, musiałeś coś źle dodać. Mój przykład działa na Firefoksie.
Go to the top of the page
+Quote Post
angel2953
post 24.08.2006, 14:17:28
Post #7





Grupa: Zarejestrowani
Postów: 199
Pomógł: 5
Dołączył: 8.07.2004
Skąd: gdynia

Ostrzeżenie: (0%)
-----

Cytat(Zajec @ 24.08.2006, 15:09 ) *
A jak wygląda w IE strona: http://zajec.net/test/angel questionmark.gif

nieciekawie


--------------------
Sygnaturkę ukradli
Go to the top of the page
+Quote Post
revyag
post 24.08.2006, 14:21:51
Post #8





Grupa: Przyjaciele php.pl
Postów: 2 258
Pomógł: 16
Dołączył: 21.09.2004
Skąd: Kielce

Ostrzeżenie: (0%)
-----

Za dużo kombinowania smile.gif
Problem leży w hasLayout ie. Wyjaśnienia na google smile.gif. Do swojego pierwszego kodu który tu podałeś dodaj dla div#Tabs microsoftową właściwość zoom:1. Reszty kodu nie zmieniaj. To powinno rozwiązać problem.


--------------------
-------------

------
Go to the top of the page
+Quote Post
angel2953
post 24.08.2006, 14:27:19
Post #9





Grupa: Zarejestrowani
Postów: 199
Pomógł: 5
Dołączył: 8.07.2004
Skąd: gdynia

Ostrzeżenie: (0%)
-----

Cytat(revyag @ 24.08.2006, 15:21 ) *
Za dużo kombinowania smile.gif
Problem leży w hasLayout ie. Wyjaśnienia na google smile.gif. Do swojego pierwszego kodu który tu podałeś dodaj dla div#Tabs microsoftową właściwość zoom:1. Reszty kodu nie zmieniaj. To powinno rozwiązać problem.

no niestety nie rozwiązało. już nie wiem jak to ugryźć. Jak znam życie błędem jest jakiś banał...


--------------------
Sygnaturkę ukradli
Go to the top of the page
+Quote Post
revyag
post 24.08.2006, 14:31:47
Post #10





Grupa: Przyjaciele php.pl
Postów: 2 258
Pomógł: 16
Dołączył: 21.09.2004
Skąd: Kielce

Ostrzeżenie: (0%)
-----

Twój kod przeklejony z pierwszego posta z dodaniem zoom:1 dla div#Tabs.

http://projekty.producer.pl/rvg/test/

u mnie wygląda ok.


--------------------
-------------

------
Go to the top of the page
+Quote Post
angel2953
post 24.08.2006, 14:34:32
Post #11





Grupa: Zarejestrowani
Postów: 199
Pomógł: 5
Dołączył: 8.07.2004
Skąd: gdynia

Ostrzeżenie: (0%)
-----

Juppi.. zadziałało. No i teraz rodzi sie pytanie: czy walidator CSS'a to przełknie... Chyba nie.


--------------------
Sygnaturkę ukradli
Go to the top of the page
+Quote Post
revyag
post 24.08.2006, 14:38:09
Post #12





Grupa: Przyjaciele php.pl
Postów: 2 258
Pomógł: 16
Dołączył: 21.09.2004
Skąd: Kielce

Ostrzeżenie: (0%)
-----

No nie przełknie bo to dzieło microsoftu dla ie. Coś za coś. Według mnie można sobie na to odstępstwo od standardu pozwolić. Poza tym możesz wywalić to do alternatywnego arkusza styli dla ie, który nie będzie walidowany.


--------------------
-------------

------
Go to the top of the page
+Quote Post
s_w_ir
post 24.08.2006, 19:43:12
Post #13





Grupa: Zarejestrowani
Postów: 315
Pomógł: 1
Dołączył: 6.08.2003
Skąd: Kielce

Ostrzeżenie: (0%)
-----

Przetraw sobie to, żadnych hacków i działa pod IE bez problemu.
Kod
body {
   font: .8em/1.8em verdana, arial, sans-serif;
   background-color: #FFFFFF;
   margin-left: 50px;
   margin-right: 100px;
}
#zawartosc {
   border: 1px solid #711515;
   border-top: none;
   padding: 10px 5px 6px 5px;
}
#zawartosc h1 {
   font-size: 1.2em;
   color: #711515;
   background-color: transparent;
}
ul#zakl_naw {
   list-style-type: none;
   margin: 0;
   padding-left: 40px;
   padding-bottom: 24px;
   border-bottom: 1px solid #711515;
   font: bold 11px verdana, arial, sans-serif;
}
ul#zakl_naw li {
   float: left;
   height: 21px;
   background-color: #B51032;
   color: #FFFFFF;
   margin: 2px 2px 0 2px;
   border: 1px solid #711515;
}
ul#zakl_naw a:link, ul#zakl_naw a:visited {
   display: block;
   color: #FFFFFF;
   background-color: transparent;
   text-decoration: none;
   padding: 4px;
}
ul#zakl_naw a:hover {
   background-color: #F4869C;
   color: #FFFFFF;
}
body#przepisy li.przepisy, body#kontakt li.kontakt,
body#artykuly li.artykuly, body#zakupy li.zakupy {
   border-bottom: 1px solid #fff;
   color: #000000;
   background-color: #FFFFFF;
}
body#przepisy li.przepisy a:link, body#przepisy li.przepisy a:visited, body#kontakt li.kontakt a:link,
body#kontakt li.kontakt a:visited,
body#artykuly li.artykuly a:link,
body#artykuly li.artykuly a:visited, body#zakupy li.zakupy a:link,
body#zakupy li.zakupy a:visited {
   color: #000000;
   background-color: #FFFFFF;
}

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Lista jako menu nawigacyjne</title>
  5. <meta http-equiv="content-type"
  6.     content="text/html; charset=iso-8859-2" />
  7. <link rel="stylesheet" type="text/css" href="zakladki.css" />
  8. </head>
  9. <body id="przepisy">
  10. <ul id="zakl_naw">
  11. 	<li class="przepisy"><a href="#">Przepisy</a></li>
  12. 	<li class="kontakt"><a href="#">Napisz do nas</a></li>
  13. 	<li class="artykuly"><a href="#">Artykuły</a></li>
  14. 	<li class="zakupy"><a href="#">Sklep internetowy</a></li>
  15. </ul>
  16. <div id="zawartosc">
  17. <h1>Przepisy</h1>
  18. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras quis tellus sit amet diam consectetuer scelerisque. Nulla facilisi. Praesent sit amet justo. Sed mattis arcu sed nisl. Vestibulum ante urna, gravida rhoncus, porta vel, sodales id, nisl. Vestibulum lectus velit, dignissim quis, molestie vel, iaculis quis, tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris sollicitudin dolor quis dolor. Donec at nisl ac felis vestibulum placerat. Fusce sollicitudin tristique nibh. Donec aliquam. Proin vitae neque iaculis dolor eleifend rhoncus. Curabitur dictum lobortis arcu. Vivamus tincidunt metus at justo. Aliquam dui. Nulla semper, nunc sit amet viverra placerat, mauris wisi sodales massa, et tincidunt sapien nisl eget nulla. Vivamus a neque vel quam cursus tincidunt. Fusce porttitor justo nec nisl. In vel velit eget tortor feugiat placerat.</p>
  19. <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam nulla nunc, interdum nec, interdum non, hendrerit in, enim. Donec eget risus. In eget neque vel nunc posuere iaculis. In adipiscing justo in enim. Donec commodo, dui ac pharetra interdum, libero wisi tincidunt arcu, sed ornare magna velit vel elit. Sed nec risus a massa imperdiet euismod. Nunc hendrerit. Fusce sit amet eros. Etiam vitae nulla at lectus fermentum rhoncus. </p>
  20. </div>
  21. </body>
  22.  
  23. </html>
[HTML] pobierz, plaintext


Przykład zaczerpnięty z książki CSS Antologia.

edit: A autorka owej ksiązki ów pomysł zaczerpneła z http://unraveled.com/projects/css_tabs/

Ten post edytował s_w_ir 11.09.2006, 20:09:11
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 12.07.2025 - 20:04
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn