Przylegające Divy, W Chromie jest OK, W IE już nie Opcje

[Barcelona]

Witam, mam taki problem, który rozwiązałem połowicznie. Jak zwykle zawieszam się na IE (IMG:style_emoticons/default/thumbsdownsmileyanim.gif)

Otóż mam zrobione takie coś:

(IMG:http://iv.pl/images/86426546452617796642.jpg)

Tutaj wygląda to tak jak należy

Teraz wycinek z IE (IMG:style_emoticons/default/closedeyes.gif)

(IMG:http://iv.pl/images/94753748637183591850.jpg)

Zakładam że widać gdzie jest błąd (IMG:style_emoticons/default/Lkingsmiley.png)

Dodaje kod divów, oraz css

[HTML] pobierz, plaintext 
<div id="zbiornik">
 
<div id="logowanie" >
<div class="jeden">Logowanie</div>
<div class="log">
 
<form action="index.php?strona=logowanie" method="post">
<table border="0">
<tr>
  <td align="right"><u>L</u>ogin: </td>
  <td><input type="text" name="login" /></td>
</tr>
<tr>
  <td align="right"><u>H</u>asło: </td>
  <td><input type="password" name="haslo" /></td>
</tr>
<tr>
  <td colspan="2" align="right">
  <div class="buttons">
    <button type="submit" class="positive">
        <img src="images/tick.png" alt=""/> 
        Zaloguj
    </button>    
</div></td>
</tr>
</table>
</form>
 
</div>
</div>
<div id="rejestracja">   
<div class="dwa">Rejestracja</div>
<div class="rej">
<form action="?strona=rejestracja" method="post">
<input type="hidden" name="opcja" value="test" />
<input type="hidden" name="email" value="barcelona1313@gmail.com" />
<table>
<tr>
  <td><u>L</u>ogin:*</td>
  <td><input type="text" name="login" /></input></td>
</tr>
<tr>
  <td><u>H</u>asło:*</td>
  <td><input type="password" name="haslo" /></td>
</tr>
<tr>
  <td><u>I</u>mie i <u>N</u>azwisko:</td>
  <td><input type="text" name="imie" /></td>
</tr><tr>
  <td><u>B</u>rygada:</td>
  <td><input type="text" name="brygada" /></td>
</tr>
<tr>
  <td colspan="2" align="right">
  <div class="buttons">
    <button type="submit" class="positive">
        <img src="images/tick.png" alt=""/> 
        Rejestruj
    </button>    
</div></td>
</tr>
</table>
</form>
</div>
 </div>
 
</div>
 
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
#zbiornik { 
		width: 452px; 
		position: relative;
		padding: 0;
		margin-top: 1px;
		margin-left: 50px; 
		margin-right: auto;
		vertical-align: top;  
}
#logowanie { 
		width: 225px;
		overflow: hidden;
		height: 100%;
		float: left;
}
#rejestracja {
		width: 225px;
		height: 100%;
		overflow: hidden;
		float: left;
}
.log {
		border-bottom: black 1px dotted;
		border-left: black 1px solid;
		position: relative; top: -10px;
}
.rej {
		border-right: black 1px solid;
		border-bottom: black 1px dotted;
		border-left: black 1px solid;
		position: relative; top: -10px;
}
 
[CSS] pobierz, plaintext 

Proszę o pomoc, pozdrawiam (IMG:style_emoticons/default/headsetsmiley.png)

P.S. Nie wiem również jak zrobić przerwę między "Logowanie" a "Rejestracja"

Ten post edytował Barcelona 19.12.2011, 15:54:27

[ShadowD]

Daj to na live, nie zechce się nikomu tego zapisywać i sprawdzać.

Polecam firebuga lub podobne narzędzie, można tam najechać na bloki i sprawdzić jaką ma wielkość, margines i padding. Ponadto zamiast table daj label, nie wiem w jakim calu tak mieszasz, ale to Twój kod.

Ja bym dał, dla łatwego lay "display:inline-block", a dla trudniejszego float:left, nie wiem po co kombinujesz tak, poczytaj o css. :-)

[Barcelona]

live: Live (IMG:style_emoticons/default/smile.gif)

Hmm dopiero teraz zacząłem przeskakiwać z tabeli na divy. Może zacznę od zera ten kod pisać, może wyjdzie wtedy tak jak należy.
Muszę właśnie pomóżdzyć nad css, siedziałem cały czas nad kursem i udało mi się ustawic poprawnie diva od logowania (IMG:style_emoticons/default/smile.gif) A drugiego już nie daje rady (IMG:style_emoticons/default/closedeyes.gif)

[mortus]

Masz jeszcze taki CSS:

[CSS] pobierz, plaintext 
.info, .success, .warning, .dwa, .jeden, .error, .validation {
    background-position: 10px center;
    background-repeat: no-repeat;
    border: 1px solid;
    margin: 10px 0;
    padding: 15px 10px 15px 50px;
}
[CSS] pobierz, plaintext 

i winę za te odstępy ponosi atrybut margin: 10px 0;. Elementy o klasie jeden i dwa (są to u ciebie div-y z nagłówkami "Logowanie" i "Rejestracja") raczej nie powinny mieć w ogóle górnego i dolnego marginesu. Wtedy nie trzeba będzie używać dla klas .rej i .log atrybutów position i top.

[Barcelona]

Masz jeszcze taki CSS:

[CSS] pobierz, plaintext 
.info, .success, .warning, .dwa, .jeden, .error, .validation {
    background-position: 10px center;
    background-repeat: no-repeat;
    border: 1px solid;
    margin: 10px 0;
    padding: 15px 10px 15px 50px;
}
[CSS] pobierz, plaintext 

i winę za te odstępy ponosi atrybut margin: 10px 0;. Elementy o klasie jeden i dwa (są to u ciebie div-y z nagłówkami "Logowanie" i "Rejestracja") raczej nie powinny mieć w ogóle górnego i dolnego marginesu. Wtedy nie trzeba będzie używać dla klas .rej i .log atrybutów position i top.

Usunąłem margin: 10px, position i top, i faktycznie w chromie divy przylegają do siebie, jednak w IE cały czas jest duży odstęp (IMG:style_emoticons/default/closedeyes.gif)

[mortus]

Problem występuje pod IE7 lub w trybie zgodności z tą przeglądarką. Dodaj div-om o klasach log (.log) i rej (.rej) atrybut CSS: overflow: hidden;. Powinno pomóc.

[Barcelona]

Git Majonez, działa jak należy. Własnie na IE7 mi rozwalało. Dzięki (IMG:style_emoticons/default/smile.gif)

Witam ponownie,
Otóż mój problem powrócił na przeglądarce IE6. Na moje nieszczęście ta strona będzie działała głównie na tej wersji IE, więc koniecznie muszę to poprawić.
Korzystałem z browsershots'a aby sprawdzić jak to wygląda na innych i jedynie w tej jednej divy się rozłączają. Teraz to wygląda tak:

(IMG:http://iv.pl/images/44684759082741309617.jpg)

Dam ponownie linka do wersji live: Live

Pozdro

[mortus]

Nie mam IE6, wypróbuj ie6fixer.

[Barcelona]

I znowu spisałeś się na 5+ (IMG:style_emoticons/default/smile.gif) Dzięki