Otóż mam cosik takiego:
http://staszek27.fm.interia.pl/zwykle.html
W FF i IE nie ma żadnego odstępu pomiędzy przyciskami (przylegają do siebie) a Opera swoje... :/
Jest na to jakiś sposób??
[CSS] Kolejny problem: marginesy
Moderator: Pomocy?!
Posty: 4
• Strona 1 z 1
[CSS] Kolejny problem: marginesy
Przeglądarka: Mozilla/5.0 (Windows; U; Win 9x 4.90; pl; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3
- Gość
Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3
Moim zdaniem to "ul" i "li" można wyrzucić i zamiast tego dać same "a".
Oto cały kod:
We wszystkich przeglądarkach wygląda tak samo.
Oto cały kod:
- Kod: Zaznacz cały
<?xml version="1.0" encoding="ISO-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<style>
body {
background: #bbbbbb;
font-family: verdana;
color: #ffffff;
font-weight: 700;
font-size: 10pt;
}
img {
border: 2px;
border-style: dotted;
border-color: #000000;
padding: 2px;
}
.linki {
width: 150px;
padding: 0px;
}
.linki a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 2px 0px 2px 4px;
background: #444444;
}
.linki a:hover {
background: #0000aa;
}
.linki a:active {
background: #0000ff;
}
</style>
</head>
<body>
<div class="linki">
<a href="zwykle.html">Zwykłe</a>
<a href="bmw.jpg">Sam obraz</a>
<a href="#">Nigdzie</a>
<a href="http://www.mozillapl.org">MozillaPL.org</a>
</div>
<br />
<img src="bmw.jpg" />
</body>
</html>
We wszystkich przeglądarkach wygląda tak samo.
- Michał 1234
- Posty: 57
- Z nami od: 12 listopada 2005, 13:43
- Lokalizacja: Mielec
Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3
A wystarczy zamiast 'display: table-cell' dać 'display: block;' dla 'a.zdjecho'. Ja bym ograniczył klasy i zrobił tak:
CSS
HTML
Poza tym przyjrzyj się ile błędów zrobiłeś w kodzie
. Skorzystaj z walidatora na W3C.
CSS
- Kod: Zaznacz cały
ul.lista,
ul.lista li {
margin: 0;
padding: 0;
list-style-type: none;
}
ul.lista a {
display: block;
padding: 2px 4px;
width: 150px;
text-decoration: none;
color: #fff;
background-color: #444;
}
ul.lista a:hover {
color: inherit;
background-color: #00a;
}
ul.lista a:active {
color: inherit;
background-color: #00f;
}
HTML
- Kod: Zaznacz cały
<ul class="lista">
<li><a href="zwykle.html">Zwykłe</a></li>
<li><a href="bmw.jpg">Sam obraz</a></li>
<li><a href="#">Nigdzie</a></li>
<li><a href="http://www.mozillapl.org">MozillaPL.org</a></li>
</ul>
Poza tym przyjrzyj się ile błędów zrobiłeś w kodzie
- Gedi
- Posty: 324
- Z nami od: 10 sierpnia 2003, 17:36
Posty: 4
• Strona 1 z 1
Kto jest online
Zarejestrowani użytkownicy: Baidu [Spider], Google [Bot]