Forum PHP.pl > [XHTML] Problem z IE

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML

spit

27.11.2005, 19:25:05

Cześć
Ostatnio postanowiłem nauczyć się XHTML, i jakoś tam idzie. Złożyłem już stronę, nawet gładko poszło, ale właśnie mam taki problem, iż pod Operą wszystko wygląda b. dobrze a w IE to wogóle wszystko się rozlatuje :|
Tu kod:
(strona)

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
 
<title>[ aftersound.info ]</title>
 
<link href="style.css" rel="stylesheet" type="text/css" />
 
</head>
 
 
<body>
 
<div id="main_div">
 
  <div id="upper_menu"><img src="images/img_01.jpg" alt="" width="302" height="70" /><img src="images/img_02.jpg" alt="" width="97" height="70" /><img src="images/img_03.jpg" alt="" width="124" height="70" /><img src="images/img_04.jpg" alt="" width="127" height="70" /></div>
 
  <div id="logo"><img src="images/img_05.jpg" alt="" width="399" height="77" /></div>
 
  <div id="navigator">
 
    <div id="nav_up"><img src="images/img_06.jpg" alt="" width="251" height="34" /></div>
 
    <div id="nav_back"><img src="tytul.jpg" alt="" width="220" height="200" /></div>
 
  </div>
 
  <div id="forum">
 
    <div id="forum_up"><img src="images/img_08.jpg" alt="" width="399" height="26" /></div>
 
    <div id="forum_left"><img src="images/img_09.jpg" alt="" width="17" height="149" /></div>
 
    <div id="forum_bg">
 
      <p class="strzalka"><a href="#">Nie lubie kaczora</a> przez <a href="#">spit </a></p>
 
      <p class="strzalka"><a href="#">Nie lubie kaczora</a> przez <a href="#">spit </a></p>
 
      <p class="strzalka"><a href="#">Nie lubie kaczora</a> przez <a href="#">spit </a></p>
 
      <p class="strzalka"><a href="#">Nie lubie kaczora</a> przez <a href="#">spit</a></p>
 
      <p class="strzalka"><a href="#">Nie lubie kaczora</a> przez <a href="#">spit</a></p>
 
      <p class="strzalka"><a href="#">Nie lubie kaczora</a> przez <a href="#">spit</a></p>
 
      <p class="strzalka"><a href="#">Nie lubie kaczora</a> przez <a href="#">spit</a></p>
 
    </div>
 
  </div>
 
  <div id="left"><img src="images/img_11.jpg" alt="" width="11" height="478" /></div>
 
  <div id="menu">
 
    <div id="menu_up"><img src="images/img_12.jpg" alt="" width="205" height="41" /></div>
 
    <div id="menu_main">
 
      <p class="strzalka_imp">Strona</p>
 
      <p class="strzalka"><a href="#">Wiadomości</a></p>
 
      <p class="strzalka"><a href="#">Ekipa</a></p>
 
      <p class="strzalka"><a href="#">Historia strony</a></p>
 
      <p class="strzalka"><a href="#">Ciekawe odnośniki</a></p>
 
      <p>&nbsp;</p>
 
      <p>&nbsp;</p>
 
      <p class="strzalka_imp">Zespoły</p>
 
      <p class="strzalka"><a href="#">A Perfect Circle</a></p>
 
      <p class="strzalka"><a href="#">At The Drive-In</a></p>
 
      <p class="strzalka"><a href="#">Bjork</a></p>
 
      <p class="strzalka"><a href="#">Cire</a></p>
 
      <p class="strzalka"><a href="#">Coldplay</a></p>
 
      <p class="strzalka"><a href="#">Dredg</a></p>
 
      <p class="strzalka"><a href="#">Day One Symphony</a></p>
 
      <p class="strzalka"><a href="#">Feeder</a></p>
 
      <p class="strzalka"><a href="#">Lenny Valentino</a></p>
 
      <p class="strzalka"><a href="#">Marilyn Manson</a></p>
 
      <p class="strzalka"><a href="#">Mars Volta, The</a></p>
 
      <p class="strzalka"><a href="#">Mass Hysteria</a></p>
 
      <p class="strzalka"><a href="#">Mayan Factor, The</a></p>
 
      <p class="strzalka"><a href="#">Mindless Self Indulgence</a></p>
 
      <p class="strzalka"><a href="#">Muse</a></p>
 
      <p class="strzalka"><a href="#">Myslovitz</a></p>
 
      <p class="strzalka"><a href="#">Nine Inch Nails</a></p>
 
      <p class="strzalka"><a href="#">Orgy</a></p>
 
      <p class="strzalka"><a href="#">Placebo</a></p>
 
      <p class="strzalka"><a href="#">Radiohead</a></p>
 
      <p class="strzalka"><a href="#">Team Sleep</a></p>
 
      <p class="strzalka"><a href="#">Tool </a></p>
 
      <p>&nbsp;</p>
 
      <p>&nbsp;</p>
 
      <p class="strzalka_imp">Interakcja</p>
 
      <p class="strzalka"><a href="#">Forum</a></p>
 
      <p class="strzalka"><a href="#">Księga Gości</a></p>
 
      <p>&nbsp;</p>
 
      <p>&nbsp;</p>
 
      <p class="strzalka_imp">Multimedia</p>
 
      <p class="strzalka">Galerie</p>
 
      <p class="strzalka">Audio</p>
 
      <p class="strzalka">Wideo</p>
 
      <p class="strzalka">Inne</p>
 
      <p>&nbsp;</p>
 
      <p>&nbsp;</p>
 
      <p class="strzalka_imp">Wspólpracujemy z...</p>
 
      <p class="link_button"><a href="http://dredg.fan.pl/" onclick="target='_blank';"><img src="http://www.dredg.inside.net.pl/pics/bannery/button.gif" alt="" width="88" height="31" border="0" class="button_img" longdesc="http://dredg.fan.pl" /></a></p>
 
      <p class="link_button"><a href="http://dredg.fan.pl/" onclick="target='_blank';"><img src="http://www.dredg.inside.net.pl/pics/bannery/button.gif" alt="dredg" width="88" height="31" border="0" class="button_img" longdesc="http://dredg.fan.pl" /></a></p>
 
      <p class="link_button"><a href="http://dredg.fan.pl/" onclick="target='_blank';"><img src="http://www.dredg.inside.net.pl/pics/bannery/button.gif" alt="" width="88" height="31" border="0" class="button_img" longdesc="http://dredg.fan.pl" /></a></p>
 
    </div>
 
  </div>
 
  <div id="odstep"><img src="images/img_13.jpg" alt="" width="20" height="478" /></div>
 
  <div id="content">
 
    <div id="content_up"><img src="images/img_14.jpg" alt="" width="410" height="41" /></div>
 
    <div id="content_main">
 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc id felis at elit aliquam ullamcorper. Phasellus arcu tellus, varius ac, bibendum id, rutrum id, sem. Mauris pretium mollis nisi. Cras ut eros. Ut sed mauris vitae risus euismod bibendum. Nulla facilisi. In malesuada ullamcorper tellus. Vivamus sed pede. Vestibulum elementum urna quis sapien. Quisque egestas, massa vehicula tempor mollis, metus nisl eleifend velit, eget laoreet leo tellus nec lacus. Pellentesque eu metus sed metus placerat nonummy. Praesent mollis, purus vitae dapibus ornare, velit libero eleifend erat, quis egestas leo purus vitae est. </p>
 
      <p>Sed lobortis, massa non interdum ornare, quam orci venenatis augue, scelerisque porttitor metus libero vel augue. Aenean non enim non libero mollis hendrerit. Suspendisse potenti. Maecenas elementum, tellus ut tincidunt ultricies, ipsum urna vulputate leo, id tristique leo quam id justo. Nunc et eros sed neque laoreet varius. Nulla in nunc ut pede nonummy imperdiet. Suspendisse quis quam. Nulla in dui vitae felis viverra laoreet. In hac habitasse platea dictumst. Aliquam ligula turpis, eleifend eu, sodales sed, semper sed, purus. Phasellus egestas egestas erat. </p>
 
      <p>Nulla blandit. Duis ut augue. Fusce pharetra. Sed orci. Nulla nisl. Morbi sapien. In at pede. Maecenas sit amet tortor vel justo adipiscing eleifend. Nunc nec orci. Nullam arcu. Vivamus elementum magna sed nulla. Cras quis neque. Sed vestibulum, risus non convallis rhoncus, velit justo porttitor dolor, iaculis porttitor enim erat a risus. Proin justo. In at enim. Sed enim risus, sagittis id, pellentesque at, auctor et, eros. Morbi pharetra lacus a pede. Curabitur lobortis ipsum nec augue. Duis accumsan. </p>
 
      <p>Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed et justo non lectus commodo tempor. Vestibulum quis nulla pretium diam elementum laoreet. Morbi ullamcorper, nibh vitae interdum congue, sem nisi semper elit, ac bibendum ligula odio ac nulla. Morbi auctor, lorem vel sodales tristique, pede lacus luctus ipsum, in hendrerit tellus tellus ut arcu. Maecenas cursus cursus nulla. Ut tincidunt, tellus cursus tempor varius, sapien tellus sodales augue, in interdum nisl leo quis neque. Maecenas libero ligula, viverra et, vehicula quis, lacinia sed, urna. Vivamus arcu. Nam pharetra. Nullam in lectus. Quisque ac diam. Sed dolor felis, dapibus vitae, gravida sed, venenatis ut, tellus. Nunc elementum nonummy lectus. Nulla facilisi. Pellentesque semper purus pellentesque risus. Cras venenatis leo quis urna. Quisque quam sem, euismod nec, pretium vitae, rhoncus nec, felis. Phasellus ullamcorper posuere quam. </p>
 
      <p>Aliquam eu leo. Mauris arcu justo, interdum sed, laoreet nec, laoreet sed, turpis. Praesent ipsum mi, rhoncus at, placerat et, gravida at, purus. Maecenas aliquet ligula tincidunt leo. Nullam a quam. In placerat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed venenatis, neque ac posuere auctor, nisi risus facilisis augue, eu ornare ligula lectus ac ipsum. In aliquet dictum dui. Suspendisse non eros. Maecenas iaculis mauris sed tellus. In eros arcu, vehicula non, luctus a, accumsan vel, nibh. Vivamus quam.</p>
 
    </div>
 
  </div>
 
  <div id="righ"><img src="images/img_15.jpg" alt="</span>" /><<span style='color:blue'>/div>
 
  <div id="footer">[ w3c buttons ]</div>
 
</div>
 
</body>
 
</html>
[HTML] pobierz, plaintext

(css)

[HTML] pobierz, plaintext 
body {
 
margin: 0px;
 
padding: 0px;
 
background-image: url(images/bg.gif);
 
}
 
#content_up {
 
height: 41px;
 
width: 401px;
 
margin: 0px;
 
padding: 0px;
 
}
 
#content_main {
 
width: 400px;
 
padding-right: 5px;
 
padding-left: 5px;
 
text-align: justify;
 
vertical-align: top;
 
margin: 0px;
 
padding-top: 0px;
 
padding-bottom: 0px;
 
}
 
 
 
#main_div {
 
margin: auto;
 
width: 650px;
 
overflow: auto;
 
border-right-width: 15px;
 
border-left-width: 15px;
 
border-right-style: solid;
 
border-left-style: solid;
 
border-right-color: #3F3D36;
 
border-left-color: #3F3D36;
 
background-color: #000;
 
padding: 0px;
 
}
 
#left {
 
width: 11px;
 
float: left;
 
margin: 0px;
 
padding: 0px;
 
}
 
#menu {
 
float: left;
 
width: 205px;
 
background-image: url(images/img_18.jpg);
 
border-bottom-width: 1px;
 
border-bottom-style: solid;
 
border-bottom-color: #4C483F;
 
overflow: auto;
 
height: auto;
 
z-index: auto;
 
margin: 0px;
 
padding: 0px;
 
}
 
#menu_main {
 
background-image: url(images/img_16.jpg);
 
background-repeat: no-repeat;
 
overflow: auto;
 
z-index: auto;
 
visibility: visible;
 
height: auto;
 
margin: 0px;
 
padding: 0px;
 
}
 
 
#menu_up {
 
height: 41px;
 
width: 205px;
 
float: none;
 
margin: 0px;
 
padding: 0px;
 
}
 
#odstep {
 
float: left;
 
width: 20px;
 
}
 
#content {
 
float: left;
 
width: 410px;
 
margin: 0px;
 
overflow: auto;
 
background-image: url(images/img_19.jpg);
 
border-bottom-width: 1px;
 
border-bottom-style: solid;
 
border-bottom-color: #4C483F;
 
padding-top: 0px;
 
padding-right: 0px;
 
padding-bottom: 10px;
 
padding-left: 0px;
 
}
 
#righ {
 
float: right;
 
width: 4px;
 
}
 
#forum_left {
 
float: left;
 
width: 17px;
 
height: 149px;
 
}
 
#forum_bg {
 
background-image: url(images/img_10.jpg);
 
float: right;
 
height: 149px;
 
width: 382px;
 
}
 
 
 
#logo {
 
float: left;
 
height: 77px;
 
width: 399px;
 
}
 
#navigator {
 
float: right;
 
width: 251px;
 
height: 252px;
 
}
 
#nav_up {
 
height: 34px;
 
width: 251px;
 
clear: none;
 
float: none;
 
}
 
#nav_back {
 
background-image: url(images/img_07.jpg);
 
height: 218px;
 
width: 251px;
 
text-align: center;
 
vertical-align: middle;
 
}
 
#forum {
 
float: left;
 
height: 175px;
 
width: 399px;
 
}
 
#forum_up {
 
height: 26px;
 
}
 
 
#upper_menu {
 
width: 650px;
 
height: 70px;
 
}
 
.strzalka_imp {
 
margin-top: 2px;
 
padding-top: 2px;
 
background-image: url(images/arrow.gif);
 
background-repeat: no-repeat;
 
background-position: 10px 4px;
 
text-indent: 22px;
 
font-weight: bolder;
 
border-bottom-width: 1px;
 
border-bottom-style: dotted;
 
border-bottom-color: #5C5B52;
 
margin-bottom: 2px;
 
padding-bottom: 2px;
 
width: 95%;
 
border-top-width: 1px;
 
border-top-style: dotted;
 
border-top-color: #5C5B52;
 
font-variant: normal;
 
text-transform: none;
 
font-family: Verdana, Arial, Helvetica, sans-serif;
 
font-size: 10px;
 
cursor: default;
 
}
 
#footer {
 
height: 50px;
 
width: 650px;
 
clear: both;
 
float: none;
 
vertical-align: middle;
 
text-align: center;
 
margin-top: 15px;
 
padding-top: 15px;
 
}
 
 
img {
 
border: 0px;
 
}
 
.link_button {
 
background-repeat: no-repeat;
 
border-bottom-width: 1px;
 
border-bottom-style: dotted;
 
border-bottom-color: #5C5B52;
 
width: 95%;
 
text-align: center;
 
}
 
.button_img {
 
margin-top: 5px;
 
margin-bottom: 5px;
 
padding-top: 5px;
 
padding-bottom: 5px;
 
border-top-width: 0px;
 
border-right-width: 1px;
 
border-bottom-width: 1px;
 
border-left-width: 1px;
 
border-right-style: none;
 
border-bottom-style: none;
 
border-left-style: none;
 
border-color: #5C5B52;
 
}
 
.screen_wideografia {
 
margin: 5px;
 
padding: 5px;
 
}
 
.punkt {
 
background-image: url(images/arrow.gif);
 
background-repeat: no-repeat;
 
background-position: 2px 2px;
 
text-indent: 14px;
 
margin-bottom: 2px;
 
padding-bottom: 2px;
 
width: 95%;
 
}
 
td, div {
 
vertical-align: top;
 
font-family: Verdana, Arial, Helvetica, sans-serif;
 
font-size: 10px;
 
color: #787669;
 
}
 
.strzalka {
 
margin-top: 1px;
 
padding-top: 1px;
 
background-image: url(images/arrow.gif);
 
background-repeat: no-repeat;
 
background-position: 2px 3px;
 
text-indent: 14px;
 
border-bottom-width: 1px;
 
border-bottom-style: dotted;
 
border-bottom-color: #5C5B52;
 
margin-bottom: 2px;
 
padding-bottom: 2px;
 
width: 95%;
 
}
 
a {
 
color: #827260;
 
text-decoration: none;
 
}
 
p {
 
margin: 0px;
 
padding: 0px;
 
}
[HTML] pobierz, plaintext

I screeny:
Opera
Internet Explorer

revyag

28.11.2005, 09:56:17

Proponuję najpierw zopytmalizowanie cssa

Kod

//ustawiasz wartości margin i padding dla wszystkich elementow - nie trzeba osobno dla kazdego
* {
    margin:0;
    padding:0;
}
//zamiast ustawiac paddingi i marginy osobno dla top,bottom,left,right mozna tak:
padding: 0 5px 0 5px;  -->(top,right,bottom,left), margin tak samo

//border można ustawić prościej
border-right: 15px solid #3F3D36;

Nie musisz ustawiac np. float:none, bo domyślnie dla elementu jest już to już ustawione.
Masz dużo niepotrzebnych rzeczy, np.z-index, visibility, text-transform, overflow po co to ?
Ustawiasz width dla border, a potem jego styl na none, ta operacja nie ma sensu bo bordera nie będzie widać, a produkuje to tylko dodatkowy niepotrzebny kod css.
Według mnie sprawa layoutu powinna być jeszcze raz przemyślana, bo są małe szanse żeby udało Ci się to zrobić w tej formie jaka jest. Wszechobecne paski przewijania po prostu zabiją tą stronę.
Poprawiłem Ci to, nie wiem czy wszystko:

Kod

* {
    margin: 0;
    padding: 0;
}
body {
    background-image: url(images/bg.gif);
}

#content_up {
    height: 41px;
    width: 401px;
}

#content_main {
    width: 400px;
    text-align: justify;
    vertical-align: top;
    background-color: blue;
}
#main_div {
    margin: auto;
    width: 650px;
    border-right: 15px solid #3F3D36;
    border-left: 15px solid #3F3D36;
    background-color: red;
}
#left {
    width: 11px;
    float: left;
}

#menu {
    float: right;
    width: 205px;
    background-image: url(images/img_18.jpg);
    border-bottom-width: 1px solid #4C483F;
    background-color: green;
}

#menu_main {
    background-image: url(images/img_16.jpg);
    background-repeat: no-repeat;
}

#menu_up {
    height: 41px;
    width: 205px;
}

#odstep {
    float: left;
    width: 10px;
}

#content {
    float: left;
    width: 410px;
    background-image: url(images/img_19.jpg);
    border-bottom-width: 1px solid #4C483F;
    padding-bottom: 10px;
}

#right {
    float: right;
    width: 4px;
}

#forum_left {
    float: left;
    width: 17px;
    height: 149px;
}

#forum_bg {
    background-image: url(images/img_10.jpg);
    float: right;
    height: 149px;
    width: 382px;
}

#logo {
    float: left;
    height: 77px;
    width: 399px;
}

#navigator {
    float: right;
    width: 251px;
    height: 252px;
}

#nav_up {
    height: 34px;
    width: 251px;
}

#nav_back {
    background-image: url(images/img_07.jpg);
    height: 218px;
    width: 251px;
    text-align: center;
    vertical-align: middle;
}

#forum {
    float: left;
    height: 175px;
    width: 399px;
}

#forum_up {
    height: 26px;
}

#upper_menu {
    width: 650px;
    height: 70px;
}

.strzalka_imp {
    margin: 2px 0 2px 0;
    padding: 2px 0 2px 0;
    background-image: url(images/arrow.gif);
    background-repeat: no-repeat;
    background-position: 10px 4px;
    text-indent: 22px;
    font-weight: bolder;
    border-bottom: 1px dotted #5C5B52;
    width: 95%;
    border-top-width: 1px dotted #5C5B52;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
}

#footer {
    height: 50px;
    width: 650px;
    clear: both;
    vertical-align: middle;
    text-align: center;
    margin-top: 15px;
    padding-top: 15px;
}

img {
    border: 0px;
}

.link_button {
    background-repeat: no-repeat;
    border-bottom-width: 1px dotted #5C5B52;
    width: 95%;
    text-align: center;
}

.button_img {
    margin: 5px 0 5px 0;
    padding-top: 5px 0 5px 0;
    border-color: #5C5B52;
}

.screen_wideografia {
    margin: 5px;
    padding: 5px;
}

.punkt {
    background-image: url(images/arrow.gif);
    background-repeat: no-repeat;
    background-position: 2px 2px;
    text-indent: 14px;
    margin-bottom: 2px;
    padding-bottom: 2px;
    width: 95%;

}

td, div {
    vertical-align: top;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #787669;
}

.strzalka {
    margin: 1px 0 2px 0;
    padding: 1px 0 2px 0;
    background-image: url(images/arrow.gif);
    background-repeat: no-repeat;
    background-position: 2px 3px;
    text-indent: 14px;
    border-bottom: 1px dotted #5C5B52;
    width: 95%;
}

a {
    color: #827260;
    text-decoration: none;

}

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>[ aftersound.info ]</title>
<link href="st.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main_div">
    <div id="upper_menu"><img src="images/img_01.jpg" alt="" width="302" height="70" /><img src="images/img_02.jpg" alt="" width="97" height="70" /><img src="images/img_03.jpg" alt="" width="124" height="70" /><img src="images/img_04.jpg" alt="" width="127" height="70" /></div>
    <div id="logo"><img src="images/img_05.jpg" alt="" width="399" height="77" /></div>
    <div id="navigator">
        <div id="nav_up"><img src="images/img_06.jpg" alt="" width="251" height="34" /></div>
        <div id="nav_back"><img src="tytul.jpg" alt="" width="220" height="200" /></div>
    </div>
    <div id="forum">
        <div id="forum_up"><img src="images/img_08.jpg" alt="" width="399" height="26" /></div>
        <div id="forum_left"><img src="images/img_09.jpg" alt="" width="17" height="149" /></div>
        <div id="forum_bg">
            <p class="strzalka"><a href="#">Nie lubie kaczora</a> przez <a href="#">spit </a></p>
            <p class="strzalka"><a href="#">Nie lubie kaczora</a> przez <a href="#">spit </a></p>
            <p class="strzalka"><a href="#">Nie lubie kaczora</a> przez <a href="#">spit </a></p>
            <p class="strzalka"><a href="#">Nie lubie kaczora</a> przez <a href="#">spit</a></p>
            <p class="strzalka"><a href="#">Nie lubie kaczora</a> przez <a href="#">spit</a></p>
            <p class="strzalka"><a href="#">Nie lubie kaczora</a> przez <a href="#">spit</a></p>
            <p class="strzalka"><a href="#">Nie lubie kaczora</a> przez <a href="#">spit</a></p>
        </div>
    </div>
    <div id="menu">
        <div id="menu_up"><img src="images/img_12.jpg" alt="" width="205" height="41" /></div>
        <div id="menu_main">
            <p class="strzalka_imp">Strona</p>
            <p class="strzalka"><a href="#">Wiadomości</a></p>
            <p class="strzalka"><a href="#">Ekipa</a></p>
            <p class="strzalka"><a href="#">Historia strony</a></p>
            <p class="strzalka"><a href="#">Ciekawe odnośniki</a></p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p class="strzalka_imp">Zespoły</p>
            <p class="strzalka"><a href="#">A Perfect Circle</a></p>
            <p class="strzalka"><a href="#">At The Drive-In</a></p>
            <p class="strzalka"><a href="#">Bjork</a></p>
            <p class="strzalka"><a href="#">Cire</a></p>
            <p class="strzalka"><a href="#">Coldplay</a></p>
            <p class="strzalka"><a href="#">Dredg</a></p>
            <p class="strzalka"><a href="#">Day One Symphony</a></p>
            <p class="strzalka"><a href="#">Feeder</a></p>
            <p class="strzalka"><a href="#">Lenny Valentino</a></p>
            <p class="strzalka"><a href="#">Marilyn Manson</a></p>
            <p class="strzalka"><a href="#">Mars Volta, The</a></p>
            <p class="strzalka"><a href="#">Mass Hysteria</a></p>
            <p class="strzalka"><a href="#">Mayan Factor, The</a></p>
            <p class="strzalka"><a href="#">Mindless Self Indulgence</a></p>
            <p class="strzalka"><a href="#">Muse</a></p>
            <p class="strzalka"><a href="#">Myslovitz</a></p>
            <p class="strzalka"><a href="#">Nine Inch Nails</a></p>
            <p class="strzalka"><a href="#">Orgy</a></p>
            <p class="strzalka"><a href="#">Placebo</a></p>
            <p class="strzalka"><a href="#">Radiohead</a></p>
            <p class="strzalka"><a href="#">Team Sleep</a></p>
            <p class="strzalka"><a href="#">Tool </a></p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p class="strzalka_imp">Interakcja</p>
            <p class="strzalka"><a href="#">Forum</a></p>
            <p class="strzalka"><a href="#">Księga Gości</a></p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p class="strzalka_imp">Multimedia</p>
            <p class="strzalka">Galerie</p>
            <p class="strzalka">Audio</p>
            <p class="strzalka">Wideo</p>
            <p class="strzalka">Inne</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p class="strzalka_imp">Wspólpracujemy z...</p>
            <p class="link_button"><a href="http://dredg.fan.pl/" onclick="target='_blank';"><img src="http://www.dredg.inside.net.pl/pics/bannery/button.gif" alt="" width="88" height="31" border="0" class="button_img" longdesc="http://dredg.fan.pl" /></a></p>
            <p class="link_button"><a href="http://dredg.fan.pl/" onclick="target='_blank';"><img src="http://www.dredg.inside.net.pl/pics/bannery/button.gif" alt="dredg" width="88" height="31" border="0" class="button_img" longdesc="http://dredg.fan.pl" /></a></p><p class="link_button"><a href="http://dredg.fan.pl/" onclick="target='_blank';"><img src="http://www.dredg.inside.net.pl/pics/bannery/button.gif" alt="" width="88" height="31" border="0" class="button_img" longdesc="http://dredg.fan.pl" /></a></p>
        </div>
    </div>
    <div id="odstep"><img src="images/img_13.jpg" alt="" width="10" /></div>
    <div id="content">
        <div id="content_up"><img src="images/img_14.jpg" alt="" width="410" height="41" /></div>
        <div id="content_main">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc id felis at elit aliquam ullamcorper. Phasellus arcu tellus, varius ac, bibendum id, rutrum id, sem. Mauris pretium mollis nisi. Cras ut eros. Ut sed mauris vitae risus euismod bibendum. Nulla facilisi. In malesuada ullamcorper tellus. Vivamus sed pede. Vestibulum elementum urna quis sapien. Quisque egestas, massa vehicula tempor mollis, metus nisl eleifend velit, eget laoreet leo tellus nec lacus. Pellentesque eu metus sed metus placerat nonummy. Praesent mollis, purus vitae dapibus ornare, velit libero eleifend erat, quis egestas leo purus vitae est. </p>
            <p>Sed lobortis, massa non interdum ornare, quam orci venenatis augue, scelerisque porttitor metus libero vel augue. Aenean non enim non libero mollis hendrerit. Suspendisse potenti. Maecenas elementum, tellus ut tincidunt ultricies, ipsum urna vulputate leo, id tristique leo quam id justo. Nunc et eros sed neque laoreet varius. Nulla in nunc ut pede nonummy imperdiet. Suspendisse quis quam. Nulla in dui vitae felis viverra laoreet. In hac habitasse platea dictumst. Aliquam ligula turpis, eleifend eu, sodales sed, semper sed, purus. Phasellus egestas egestas erat. </p>
            <p>Nulla blandit. Duis ut augue. Fusce pharetra. Sed orci. Nulla nisl. Morbi sapien. In at pede. Maecenas sit amet tortor vel justo adipiscing eleifend. Nunc nec orci. Nullam arcu. Vivamus elementum magna sed nulla. Cras quis neque. Sed vestibulum, risus non convallis rhoncus, velit justo porttitor dolor, iaculis porttitor enim erat a risus. Proin justo. In at enim. Sed enim risus, sagittis id, pellentesque at, auctor et, eros. Morbi pharetra lacus a pede. Curabitur lobortis ipsum nec augue. Duis accumsan. </p>
            <p>Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed et justo non lectus commodo tempor. Vestibulum quis nulla pretium diam elementum laoreet. Morbi ullamcorper, nibh vitae interdum congue, sem nisi semper elit, ac bibendum ligula odio ac nulla. Morbi auctor, lorem vel sodales tristique, pede lacus luctus ipsum, in hendrerit tellus tellus ut arcu. Maecenas cursus cursus nulla. Ut tincidunt, tellus cursus tempor varius, sapien tellus sodales augue, in interdum nisl leo quis neque. Maecenas libero ligula, viverra et, vehicula quis, lacinia sed, urna. Vivamus arcu. Nam pharetra. Nullam in lectus. Quisque ac diam. Sed dolor felis, dapibus vitae, gravida sed, venenatis ut, tellus. Nunc elementum nonummy lectus. Nulla facilisi. Pellentesque semper purus pellentesque risus. Cras venenatis leo quis urna. Quisque quam sem, euismod nec, pretium vitae, rhoncus nec, felis. Phasellus ullamcorper posuere quam. </p>
            <p>Aliquam eu leo. Mauris arcu justo, interdum sed, laoreet nec, laoreet sed, turpis. Praesent ipsum mi, rhoncus at, placerat et, gravida at, purus. Maecenas aliquet ligula tincidunt leo. Nullam a quam. In placerat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed venenatis, neque ac posuere auctor, nisi risus facilisis augue, eu ornare ligula lectus ac ipsum. In aliquet dictum dui. Suspendisse non eros. Maecenas iaculis mauris sed tellus. In eros arcu, vehicula non, luctus a, accumsan vel, nibh. Vivamus quam.</p>
        </div>
    </div>
    <div id="left"><img src="images/img_11.jpg" alt="" width="11" height="478" /></div>
    <div id="righ"><img src="images/img_15.jpg" alt="" /><span style='color:blue'></span></div>
    <div id="footer">[ w3c buttons ]</div>
</div>
</body>
 
</html>
[HTML] pobierz, plaintext

spit

28.11.2005, 15:27:15

Dzieki wielkie za odpowiedz i zainteresowanie, ale to niestety nie to.. tzn. działa prawie że dobrze, ale wszystkie elementy sie posypały... Ogólnie to zauwazyłem, że pod IE między div'ami pojawiają się niepotrzebne odstępny... jak temu zaradzić?

popo

28.11.2005, 17:30:17

powinno pomoc

jest tam maly przykladzik jak obejsc w css'ie problemy ie i wczesniejszych wersji opery z obsluga box model (problemy z marginesami i borderami)

spit

28.11.2005, 19:08:42

No tak, z tym że ja, gdy mam padding, to zaznaczam różnicę w wymiarze div'a. Ale to przy dwóch czy trzech warstwach tylko, a dziś sklejałem strone od nowa, i w miejscach gdzie jeszcze nie wspominałem o paddingu były odstępy (linijka od linijki).

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.