Odstęp między elementami, jak zlikwidować? Opcje

[batman]

Siedzę już jakiś czas na banalnym problemem, ale za Chiny nie potrafię znaleźć rozwiązania.

HTML

[HTML] pobierz, plaintext 
<div id="top">
	<img id="logo" src="img/jag_logo.gif" alt="logo" />
	<div id="menu_wrapper">
		<div id="top_menu">
			<a href="#"><img src="img/nav_tab1_off.jpg" alt="" /></a>
			<a href="#"><img src="img/nav_tab2_off.jpg" alt="" /></a>
			<a href="#"><img src="img/nav_tab8_off.jpg" alt="" /></a>
			<a href="#"><img src="img/nav_tab4_off.jpg" alt="" /></a>
			<a href="#"><img src="img/nav_tab5_off.jpg" alt="" /></a>
			<a href="#"><img src="img/nav_tab6_off.jpg" alt="" /></a>
			<a href="#"><img src="img/nav_tab7_off.jpg" alt="" /></a>
		</div>
		<div id="bottom_menu">
			<a href="#"><img src="img/nav_02_Highlights_off.jpg" alt="" /></a>
			<a href="#"><img src="img/nav_02_Gallery_off.jpg" alt="" /></a>
			<a href="#"><img src="img/nav_02_Models_&_Pricing_off.jpg" alt="" /></a>
		</div>
	</div>
	<div class="cleaner"></div>
</div>
<div id="main_img" style="margin-top: -8px;">
	<embed width="990" height="465" wmode="transparent" quality="high" bgcolor="#ffffff" name="center" id="center" src="img/swf/home_38.swf" type="application/x-shockwave-flash" />
</div>
[HTML] pobierz, plaintext 

CSS

Kod

#top img#logo {
    float: left;
    margin-left: 115px;
}

#menu_wrapper {
    margin-left: 322px;
}

#top_menu {
    padding-top: 21px;
}

#top_menu a {
    margin-right: 15px;
}

#bottom_menu {
    margin-top: 13px;
}

#bottom_menu a {
    margin-right: 11px;
}

.cleaner {
    clear: both;
}

Pod Fx (Win i Lin) i Operą (Win) wygląda tak:
(IMG:http://img215.imageshack.us/img215/5434/zrzutla5.th.gif)

Pod IE (6 i 7) hula aż miło. Dodam, że pod Fx (Win i Lin) nie uwzględnia w ogóle ujemnego marginesu.

Pomożecie?

Kilka uwag.
1. Wiem, że nie tak osadza się flasha. Nie to jest przyczyną.
2. Wiem, że menu robi się na ul - użyłem obecnej metody, ponieważ myślałem, że lista może coś rozwalać.
3. doctype - xhtml1.0 strict
4. Nie mogę udostępnić obrazków.

[Crozin]

Wywal białe znaki spomiędzy linków.

Ten post edytował Crozin 10.06.2008, 20:20:26

[batman]

Wywal białe znaki spomiędzy linków.

Jakie białe znaki?

[Crozin]

Spacje/entery/taby

EDIT: ops... mój błąd - źle zrozumiałem o co Ci chodzi. :]

Ten post edytował Crozin 10.06.2008, 20:41:14

[Pilsener]

- nie widzę screen'a
- nie bardzo rozumiem problem - pomiędzy czym a czym są odstępy?
- spróbuj globalnie wyzerować marginesy i paddingi, to pewnie nie jest cały CSS?
- daj inny background każdemu elementowi - często pozwala to szybko rozwiązać problem, widzisz wtedy wszystko jak na dłoni
- wrzuciłbyś to gdzieś na serwer (jakaś darmocha wystarczy do tego), byłoby łatwiej przeanalizować

[batman]

Screen gdzieś się zapodział. Wczoraj jeszcze był.
Nie mogę tego wrzucić na żaden serwer, ponieważ nie jestem upoważniony do udostępniania strony przed wdrożeniem.

[Shili]

Ale z czymś takim naprawdę ciężko jest pomóc - nie dopisałeś nawet gdzie jest ten odstęp (podejrzewam, że nad #main_img, ale podejrzenia same w sobie nic nie dają). Strona jest maksymalnie niekompletna, w ogóle nie wygląda, poza tym w takiej formie, jaką podałeś jak najpoprawniej interpretuje ujemny margines, przynajmniej na windowsie.

Tak naprawdę ciężko jest strzelać, bo trzeba strzelać nie mając pełnego kodu i pełnego wyglądu.
!important po marginesie ujemnym próbowałeś dopisywać? Może to jeszcze jakoś dziwnie dziedziczy po czymś innym, mimo że na zdrowy rozsądek nijak nie powinno być to możliwe?

[.radex]

Aaa no właśnie - mógłbyś sprawdzić w jakim elemencie tworzy się ten odstęp. W Operze Dragonfly coś takiego było (zakładka DOM) i we wtyczce do Fx (bodajże "Web Developer" się zwie i tam było menu "Outline")

Ten post edytował radex_p 11.06.2008, 18:51:09

[tommy4]

spróbuj do img#logo przypisać 'display: block;'

do linków też. Dodawać marginesy do elementów inline to przeglądarki dziwnie interpretują.

Traktuj linki wtedy jaki bloki, więc pewnie będziesz musiał dodać też float:left, etc.

Ten post edytował tommy4 11.06.2008, 19:23:46

[batman]

Wrzucam jeszcze raz obrazek. Nie wiem dlaczego poprzedni się usunął.
(IMG:http://img73.imageshack.us/img73/5357/zrzutlh2.th.gif)

Co do uwag odnośnie wtyczek sprawdzających co i jak na stronie buczy - zanim napisałem tego posta sprawdziłem co jest nie tak przy ich pomocy, potem poszukałem, czy przypadkiem Fx ma jakiegoś buga.
Koniec końców doszedłem do wniosku, że odstęp musi być we flashu. Jednak nie tłumaczy to braku reakcji Fx i Opery na ujemny margines.

[Shili]

Ale w kodzie, który podałeś Firefox zdecydowanie respektuje ujemny margines. Spróbuj sobie wkleić tylko ten kawałek kodu i sprawdź w razie czego usuwając flasha. Względnie mamy nasze firefoksy nie są kompatybilne (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)


Ustawiać ujemny margines elementu top próbowałeś? Też nie działa?

Ten post edytował Shili 11.06.2008, 22:24:06

[batman]

@Shili
SOA #1 - u mnie działa (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Sprawdzałem na Ubuntu 7.10 oraz XP (pro i home) SP2. Ujemny margines albo u mnie nie działa, ale zadziała dla bardzo dużej wartości (np -200px). Dla topu nie ustawiałem marginesu ujemnego, ponieważ nie ma to sensu.

Przypomniałem sobie jeszcze jedną rzecz.
Jak wywaliłem całe menu i zostawiłem sam obrazek (bez float: left), to wszystko ładnie działało. Podejrzewam, że przeglądarki nieIE mają jakiś ukryty "ficzer" związany z float, ujemnym marginesem i flashem.

[LonelyKnight]

Spróbuj zrobić z...

[HTML] pobierz, plaintext 
<img id="logo" src="img/jag_logo.gif" alt="logo" />
[HTML] pobierz, plaintext 

...div'a z background'em.

[batman]

Takie rzeczy, to robi się zanim napisze się posta (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
Skłaniam się raczej ku błędom we flashu lub przeglądarce.

[Crozin]

Może bardziej ominięcie niż rozwiązanie porblemu:
Dodaj position: relative; i przy pomocy top/bottom (i ew. ujemnych wartości) ustaw pozycje

[Kreton]

Zobacz, gdy wstawiasz tekst, miedzy wierszami znajduje sie przerwa. Tak samo z obrazkami. (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Powiem Ci, że to co wyświtla Firefox czy Opera jest jak najbardziej poprawne. Dlatego, że twój obrazek zachowuje się jak element pływający. Tak ma sie zachowywać, identycznie jak tekst. Wszystkie elementy pływające, o ile nie ustawisz w stylach, że są elementami blokowymi, są umieszczane na lini bazowej. Zauważ, że tekst nie jest wyrównywany do samego dołu. Zostawione jest tam miejsce na ogonki literek.

Rozwiązaniem wcześniejszego problemu było nadanie obrazkowi

Kod

display: block;

Gotowe.

Co do pozycjonowania relatywnego i ujemnego marginesu: Obie te metody sa bez sensu. dlaczego ? Wystarczy, że użytkownik zmieni czcionkę na wiekszą albo na mniejszą. Spowoduje to albo nakładanie się obrazków albo pojawienie sie pustych przestrzeni.

Moge jeszcze autopromocyjnie (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) podać link gdzie jest troszke więcej na ten temat napisane: http://kret.jogger.pl/2007/08/23/doctype-o-co-chodzi/

Ten post edytował Kreton 16.06.2008, 17:13:39

[batman]

No i spawa się wyjaśniła. Dostałem się do źródeł swf-a i okazało się, że ramka znajdująca się w banerze jest przesunięta o kilka pikseli w dół i dlatego robi się odstęp. Dziwne tylko jest to, że margines ujemny w IE wsuwa animację pod górnego div-a, a w Fx na wierzch. W każdym bądź razie zmieniłem ramkę we flashu i wszystko ładnie pasuje.

[Kreton]

Aaaa, ja myślałem, że te odstępy to między tymi obrazkami masz...