GoldenLine
Zaloguj się
Łukasz D.

Łukasz D. Klikam trochę tu i
tam...

Temat: Problem - padding dla <a> w ie7

Witam!

Mały problem, którego nie mogę rozwiązać. Pod IE7 nie działa padding (bottom)
[img]
Obrazek
[img]

link do css

Dziękuje za pomoc
Pozdrawiam
Link do wypowiedziLink

konto usunięte

Temat: Problem - padding dla <a> w ie7

zgaduję: overflow: hidden; ?
Link do wypowiedziLink
Łukasz D.

Łukasz D. Klikam trochę tu i
tam...

Temat: Problem - padding dla <a> w ie7

Niestety, nie działa, ani dla a, ani a:hover... ehh
Link do wypowiedziLink
Adam O.

Adam O. webdeveloper,
migomedia

Temat: Problem - padding dla <a> w ie7

Nadawanie pionowych paddingów elementom liniowym (display:inline) nie jest dobrym pomysłem. Trochę to przeczy ich "liniowości".

Najłatwiej i chyba najpoprawniej będzie zamiast paddingów ustawić odpowiednią wysokość linii (line-height : ##px).

Możesz też dać 


li{display: block; float: left;}

a{display: block;}

ale line-height raczej jest poprawniej.Adam O. edytował(a) ten post dnia 21.02.11 o godzinie 13:21
Link do wypowiedziLink
Sebastian Płocki

Sebastian Płocki stronyrobie.pl

Temat: Problem - padding dla <a> w ie7

Można też spróbować wstawić do #navi { *padding: 10px 21px;}
Link do wypowiedziLink
Krzysztof Kurzawa

Krzysztof Kurzawa Web / Mobile
Developer

Temat: Problem - padding dla <a> w ie7

<ul li> lub <a> powinno być na block lub inline-block i wtedy powinno być wszystko ok. Zawsze tak robię i na IE w tym względzie problemu nie ma.
Link do wypowiedziLink
Łukasz D.

Łukasz D. Klikam trochę tu i
tam...

Temat: Problem - padding dla <a> w ie7

Działa :) dziękuje...
Link do wypowiedziLink

konto usunięte

Temat: Problem - padding dla <a> w ie7

Krzysztof Kurzawa:
<ul li> lub <a> powinno być na block lub inline-block i wtedy powinno być wszystko ok. Zawsze tak robię i na IE w tym względzie problemu nie ma.

IE nie wie co to "inline-block" :)
Link do wypowiedziLink
Adam O.

Adam O. webdeveloper,
migomedia

Temat: Problem - padding dla <a> w ie7

Andrzej Winnicki:
Krzysztof Kurzawa:
<ul li> lub <a> powinno być na block lub inline-block i wtedy powinno być wszystko ok. Zawsze tak robię i na IE w tym względzie problemu nie ma.

IE nie wie co to "inline-block" :)
Nie do końca jest to prawdą. IE 6/7 wie co to jest "inline-block", ale tylko wtedy, gdy nadamy tą wartość elementowi, który natywnie dla właściwości "display" posiada wartość "inline". IE 8 powinien prawidłowo interpretować "inline-block" dla każdego elementu.Adam O. edytował(a) ten post dnia 21.02.11 o godzinie 14:21
Link do wypowiedziLink

konto usunięte

Temat: Problem - padding dla <a> w ie7

Andrzej Winnicki:
Krzysztof Kurzawa:
<ul li> lub <a> powinno być na block lub inline-block i wtedy powinno być wszystko ok. Zawsze tak robię i na IE w tym względzie problemu nie ma.

IE nie wie co to "inline-block" :)

wie co to, ale tylko dla elementów domyślnie liniowych

[edit] heh Adam mnie wyprzedził[/edit]Cezary H. edytował(a) ten post dnia 21.02.11 o godzinie 14:22
Link do wypowiedziLink
Krzysztof Kurzawa

Krzysztof Kurzawa Web / Mobile
Developer

Temat: Problem - padding dla <a> w ie7

Andrzej Winnicki:
Krzysztof Kurzawa:
<ul li> lub <a> powinno być na block lub inline-block i wtedy powinno być wszystko ok. Zawsze tak robię i na IE w tym względzie problemu nie ma.

IE nie wie co to "inline-block" :)

Nie wie, wie. U mnie WIE ! :-)
Link do wypowiedziLink

konto usunięte

Temat: Problem - padding dla <a> w ie7

Czyli interpretuje to "w kratke". Warto zalozyc ze po prostu nie wie i tyle :)
Link do wypowiedziLink

konto usunięte

Temat: Problem - padding dla <a> w ie7

Adam O.:
Andrzej Winnicki:
Krzysztof Kurzawa:
<ul li> lub <a> powinno być na block lub inline-block i wtedy powinno być wszystko ok. Zawsze tak robię i na IE w tym względzie problemu nie ma.

IE nie wie co to "inline-block" :)
Nie do końca jest to prawdą. IE 6/7 wie co to jest "inline-block", ale tylko wtedy, gdy nadamy tą wartość elementowi, który natywnie dla właściwości "display" posiada wartość "inline". IE 8 powinien prawidłowo interpretować "inline-block" dla każdego elementu.Adam O. edytował(a) ten post dnia 21.02.11 o godzinie 14:21

Możliwość ustawienia wymiarów/paddingów pionowych elementom inline'owym daje złudzenie działania inline-block.
Link do wypowiedziLink
Adam O.

Adam O. webdeveloper,
migomedia

Temat: Problem - padding dla <a> w ie7

rafał krupiński:

Możliwość ustawienia wymiarów/paddingów pionowych elementom inline'owym daje złudzenie działania inline-block.

Ok, zgadza się, ale IE właśnie nie radzi sobie z tymi pionowymi wymiarami dla elementów liniowych, dlatego trzeba im nadać inline-block.

Nie bardzo wiem jak mam rozumieć Twój post. Wygląda jak korekta mojego - jeśli tak, to nie mogę się zgozić :)
Link do wypowiedziLink

konto usunięte

Temat: Problem - padding dla <a> w ie7

Jako taki merge wypowiedzi Twojej i A.W. :)
Link do wypowiedziLink
Artur Kwiatkowski

Artur Kwiatkowski Front-end developer

Temat: Problem - padding dla <a> w ie7

Tego rodzaju menu nawigacyjne powinno już od samego początku być skonstruowane tak:

xhtml:


<div id="menu">

<ul>

<li><a href="#">pozycja 1</a></li>

<li><a href="#">pozycja 2</a></li>

<li><a href="#">pozycja X</a></li>

</ul>

</div>


css:


#menu ul {list-style:none;padding:0px;margin:0px;}

#menu ul li, #menu ul li a {dispaly:block;float:left;}

#menu ul li {padding:0px 3px 0px 0px;}

#menu ul li a {height:30px;line-height:30px;text-align:center;padding:0px 10px;background:grey;color:white;}


I wtedy nie ma żadnych problemów pod którąkolwiek z przeglądarek :)
Link do wypowiedziLink

konto usunięte

Temat: Problem - padding dla <a> w ie7

Artur Kwiatkowski:
#menu ul li, #menu ul li a {dispaly:block;float:left;}

float: left implikuje display: block
Link do wypowiedziLink
Rafał S.

Rafał S. Front-end Developer

Temat: Problem - padding dla <a> w ie7

...a jak już się czepiamy to jednostki przy zerowych wartościach są zbędne ;)
Link do wypowiedziLink

konto usunięte

Temat: Problem - padding dla <a> w ie7

Mam podobny problem:

Witam wszystkich. Jeśli ktoś ma chwilkę i wie jak rozwiązać problem, byłabym wdzięczna.

1. Sprawa dot. tekstów na całej witrynie, ale jako przykład podaję tylko stopkę-żeby było krócej.
2. Mam DIV:
<code>
<div id="footer">
<img src="images10/bottom-menu.png" class="img">O MNIE
<img src="images10/bottom-menu.png" class="img">MOJE AUKCJE
<img src="images10/bottom-menu.png" class="img">KONTAKT
</div>
</code>

i style do niego (będzie jeszcze a href):

<code>
#footer {
background-color: #99cccc ;
width: 1000px;
min-height:30px;
font-family: tahoma, Verdana, Helvetica, sans-serif;
font-size: 12px;
font-weight: bolder;
color:#fff;
text-align:right;
}
#footer .img{
width:22px;
height:33px;
}
</code>

3. Problem jest taki, że na wyrazy nie działa padding. Już nawet bezsensownie próbowałam z margin.
Jako lista przyszłe menu też nie wychodzi (na innych szablonach, gdzie nie ma .img nie ma problemu)
Przed <footer> mam <div class="clear"></div>.

<img>

Obrazek

</img>

Nie wiem co robię źle, od wczoraj "przerzuciłam" dodatkowo 2 książki i rozwiązania nie znalazłam.
Link do wypowiedziLink
Krzysztof Florkowski

Krzysztof Florkowski Front-end Developer
@ DocPlanner

Temat: Problem - padding dla <a> w ie7

Lenka Wroc:

Nie wiem co robię źle, od wczoraj "przerzuciłam" dodatkowo 2 książki i rozwiązania nie znalazłam.

Przede wszystkim konstrukcja kodu jest zła, jeśli ma to być lista to używamy <ul>



<ul id="footer">

	<li><a href="#">o mnie</a></li>

	<li><a href="#">moje aukcje</a></li>

	<li><a href="#">kontakt</a></li>

</ul>



<style>

#footer { 

	background-color: #99cccc;

	font-family: tahoma, Verdana, Helvetica, sans-serif;

	font-size: 12px;

	font-weight: bolder;

	list-style: none;

	text-align:right;

	text-transform: uppercase;

	width: 1000px;

}

#footer li {

	background: url(images10/bottom-menu.png) 0 50% no-repeat;

	display: inline-block;

	line-height: 30px;

	padding: 0 10px;

}

#footer li a {

	color: #fff;

	text-decoration: none;

}

</style>
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

Float right i problem pod IE7




Wyślij zaproszenie do
Anuluj