ďťż

[XHTML + JS] Dziwne zachowanie IE Problem z div'ami

Podstrony

telcocafe

Mój problem wygląda następująco: mam sobie prosty panel użytkownika z zakładkami. Za wyświetlanie poszczególnych paneli z danymi odpowiada JS. I wszystko pięknie wygląda w firefoxie i operze ale w IE pojawia sie problem gdy wybiorę jedną z zadkładek (ale tylko tą jedną ,reszta działa normalnie) -> screen

Kod źródłowy strony (oczywiście roboczy ;) ):
<?xml version="1.0" encoding="iso-8859-2"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <link type="text/css" rel="stylesheet" href="../../css/styl_1/user/profile.css" /> <script type="text/javascript" src="../../js/profil_funkcje.js"></script> <title>Profil użytkownika</title> </head> <body xml:lang="pl"> <div class="podstawa"> <div class="tlo"> <div class="pasek_opcji"> <div class="opcja" id="opcja6" onclick="podswietl(6);">O sobie</div> <div class="opcja" id="opcja5" onclick="podswietl(5);">Dodatkowe pytania</div> <div class="opcja" id="opcja4" onclick="podswietl(4);">Gusta</div> <div class="opcja" id="opcja3" onclick="podswietl(3);">Zainteresowania</div> <div class="opcja" id="opcja2" onclick="podswietl(2);">Ważne daty</div> <div class="opcja" id="opcja1" onclick="podswietl(1);">Dane osobowe</div> </div> <div class="okno_main"> <div class="dane_basic"> <b class="nick">.:DzIuDeK:. T</b> </div> <div class="dane_dynamic" id="panel6">panel o sobie</div> <div class="dane_dynamic" id="panel5">panel z dodatkowymijj hjhhjhjhj pytaniami</div> <div class="dane_dynamic" id="panel4">panel z gustami</div> <div class="dane_dynamic" id="panel3">panel z zainteresowaniami</div> <div class="dane_dynamic" id="panel2">panel z ważnymi datami</div> <div class="dane_dynamic" id="panel1">panel z danymi osobowymi</div> </div> </div> </div> </body> </html>
Skrypt JS:
function podswietl(i){ var x; for(x=1;x<7;x++){ if(x==i){ var op=document.getElementById('opcja'+i); op.style.height = '20px'; op.style.marginTop = '4px'; op.style.marginLeft = '-1px'; op.style.marginRight = '-1px'; op.style.color = '#696969'; op.style.background = '#D7E2FB'; } else{ var op=document.getElementById('opcja'+x); op.style.height = '18px'; op.style.marginTop = '6px'; op.style.marginLeft = '1px'; op.style.marginRight = '1px'; op.style.color = '#D3D3D3'; op.style.background = '#FFFFFF'; } if(x==i){ var panel=document.getElementById('panel'+i); panel.style.display = 'block'; } else{ var panel=document.getElementById('panel'+x); panel.style.display = 'none'; } } }
Styl CSS (wersja bardzo robocza :) ):
/* Wygląd okna profilu */ /* wyśrodkowanie dla IE */ body{ text-align: center; scrollbar-3dlight-color: #D3D3D3; scrollbar-arrow-color: #D3D3D3; scrollbar-base-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-face-color: #EEF3FD; scrollbar-shadow-color: #D3D3D3; scrollbar-track-color: #FFFFFF; } /* ramka dookoła okna */ div.podstawa { border: 1px solid #D3D3D3; width: 600px; height: 250px; margin: 0 auto; /* wyśrodkowanie dla Opery i Firefoxa */ } /* zawartość okna */ /* tlo */ div.tlo{ margin-top: 6px; margin-bottom: 6px; margin-left: 6px; margin-right: 6px; max-width: 100%; max-height: 100%; } /* pasek wyboru opcji */ div.pasek_opcji{ width: 586px; height: 24px; background-color: #EEF3FD; border-left: 1px solid #D3D3D3; border-right: 1px solid #D3D3D3; border-top: 1px solid #D3D3D3; } div.opcja{ background: #FFFFFF; border-top: 1px solid #D3D3D3; border-left: 1px solid #D3D3D3; border-right: 1px solid #D3D3D3; height: 18px; margin-top: 6px; margin-left: 1px; margin-right: 1px; float: right; cursor: pointer; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10px; color: #D3D3D3; padding-left: 8px; padding-right: 8px; } /*div.opcja:hover{ background: #D7E2FB; border-top: 1px solid #D3D3D3; border-left: 1px solid #D3D3D3; border-right: 1px solid #D3D3D3; height: 20px; margin-top: 4px; margin-left: -1px; margin-right: -1px; float: right; cursor: pointer; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10px; color: #696969; font-weight: bold; padding-left: 8px; padding-right: 8px; }*/ /* treść okna (najważniejsza :P) */ div.okno_main{ width: 586px; height: 211px; border-left: 1px solid #D3D3D3; border-right: 1px solid #D3D3D3; border-top: 1px solid #D3D3D3; border-bottom: 1px solid #D3D3D3; } /* część okna z danymi usera podstawowymi wyświtlana zawsze */ div.dane_basic{ width: 150px; height: 209px; float: left; background-color: #F4F8FD; border-right: 2px dotted #D3D3D3; } /* dane dynamiczne */ div.dane_dynamic{ width: 432px; height: 209px; float: right; background-color: #FFFFFF; overflow: auto; display: none; } /* formanty textu */ b.nick{ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #696969; text-align: center; } div.pytanie{ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; color: #154DB1; font-weight: bold; text-align: left; border-bottom: 2px dotted #D3D3D3; border-top: 2px dotted #D3D3D3; } div.odp{ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; color: #696969; text-align: left; }

Starałem sie ten profil robić tylko i wyłącznie na div'ach żeby było zgodne ze standartami ale myślę ,że to one to powodują. Tylko jak to poprawić :unsure: .Z góry dzięki za pomoc. Pozdrawiam ;)

napisz konkretnie o co chodzi, bo np ja nie wiem z czym masz problem :)

napisz konkretnie o co chodzi, bo np ja nie wiem z czym masz problem :)

rzuć adresem do strony :)

Daję link do stronki obrazującej cały problem ->Link (oczywiście trzeba otworzyć w IE bo Opera i Firefox problemu nie mają ;) ). Jak zapewne da sie zauważyć po kliknięciu na przedostatnią zakładkę "dodatkowe pytania" całe okienko z profilem rozszerza sie na dole i pojawia sie kawałek tekstu z normalnego diva.

Sitedesign by AltusUmbrae.

Darmowy hosting zapewnia PRV.PL