[CSS]Strona zle sie wyswietla na IE6 i IE7 Opcje

[obiwanek]

Witam, jak w temacie. Stosowalem rozne fixy javascript oraz css, nic nie pomaga. link do strony : www.obiwanek.pl

zdjecia z przegladarek :

ie6 : http://www.wiader.pl/ftp/ie6.jpg
ie7 : http://obiwanek.pl/ftp/ie7.png
poprawne wyswietlanie : http://obiwanek.pl/ftp/opera.png

css :

CODE

body {
font-family : Helvetica, Arial, sans-serif;
line-height : 1.3em;
font-size : 12px;
color : #333;
text-align: center;
}
p {
margin-top : 0;
margin-bottom : 5px;
margin-left: 10px;
}
ul {
margin-left: 10px;
}
#page_bg {
padding : 10px 0;
margin-bottom : 1px;
background : #333333;
}
div#wrapper {
display: table;
height: 500px;
background : #333333 url(images/black/mw_shadow_l.png) repeat-y 0 0;
position : relative;
width: 768px;
margin: 0 auto;
text-align: left;
}
div#wrapper_r {
background : url(images/black/mw_shadow_r.png) repeat-y 100% 0;
}
body.width_medium div#wrapper {
width : 950px;
}
body.width_small div#wrapper {
width : 773px;
}
body.width_fmax div#wrapper {
min-width : 750px;
max-width : 1050px;
}
div#header {
background : url(images/black/mw_header_t.png) repeat-x 0 0;
}
div#header_l {
position : relative;
background : url(images/black/mw_header_t_l.png) no-repeat 0 0;
}
div#header_r {
height : 90px;
padding-left : 370px;
padding-right : 30px;
padding-top : 25px;
overflow : hidden;
text-align : left;
background : url(images/black/mw_header_t_r.png) no-repeat 100% 0;
}
div#logo {
position : absolute;
left : 0;
top : 0;
float : left;
width : 298px;
height : 75px;
background : url(images/mw_joomla_logo.png) no-repeat 0 0;
margin-left : 30px;
margin-top : 25px;
}
div#tabarea {
background : #333333 url(images/mw_header_b.png) repeat-x 0 0;
margin : 0 11px;
}
div#tabarea_l {
background : url(images/mw_header_l_b.png) no-repeat 0 0;
padding-left : 32px;
}
div#footer {
background : #333333 url(images/black/mw_footer_b.png) repeat-x 0 100%;
}
div#footer_l {
background : url(images/black/mw_footer_b_l.png) no-repeat 0 0;
}
div#tabarea_r {
height : 42px;
background : url(images/mw_header_r_b.png) no-repeat 100% 0;
padding-right : 1px;
}
div#footer_r {
padding-top : 10px;
height : 47px;
overflow : hidden;
background : url(images/black/mw_footer_b_r.png) no-repeat 100% 0;
}
div#footer_r div {
text-align : center;
font-size : 0.9em;
color : #adff2f;
}
div#footer_r a:link, div#footer_r a:visited {
color : #999;
}
div#footerspacer {
height : 10px;
}
#whitebox {
margin : 0 21px 0 21px;
background : #000;
width : auto;
height : 550px;
border : 1px solid #adff2f;
}
#whitebox div {
text-align : left;
}
#power_by {
float : right;
padding-right : 25px;
color : #adff2f;
}
#outer {
position : relative;
top : 50%;
left : 0;
width : 100%;
height : 1px;
}
#inner {
margin-left : -250px;
position : relative;
top : -200px;
left : 50%;
width : 500px;
height : 300px;
}
div#inner a span {
display : none;
}
div#inner a:visited span {
display : none;
}
div#inner a {
text-decoration : none;
color : white;
}
div#inner a:hover span {
display : block;
position : relative;
background : none;
font-size : 14px;
}
div#inner a:link, div#inner a:visited {
text-decoration : none;
}
div#inner a:hover {
text-decoration : none;
}
div#text1, div#text2, div#text3, div#text4, div#text5, div#text6, div#text7, div#text8 {
color : #222;
font-family : verdana, helvetica, "sans serif";
position : absolute;
}
div#text1 {
font-size : 50px;
top : 130px;
left : -100px;
}
div#text1 a:hover span {
top : 17px;
left : 0;
}
div#text3 {
font-size : 50px;
top : 130px;
left : 500px;
}
div#text3 a:hover span {
top : 25px;
left : 0;
}
div#text4 {
font-size : 39px;
top : 330px;
left : 180px;
}
div#text4 a:hover span {
top : 10px;
left : 0;
}
div#text5 {
font-size : 26px;
top : 300px;
left : 450px;
}
div#text5 a:hover span {
top : 6px;
left : 0;
}
div#text6 {
font-size : 32px;
top : 300px;
left : -100px;
}
div#text6 a:hover span {
top : 6px;
left : 0;
}
div#text7 {
font-size : 38px;
top : 180px;
left : 200px;
}
div#text7 a:hover span {
top : 10px;
left : 0;
}
div#text8 {
font-size : 80px;
top : 10px;
left : 130px;
}
div#text8 a:hover span {
top : 28px;
left : 0;
}
div#urltext, div#inner div#content a:link, div#inner div#content a:visited, div#inner a:hover, div#inner a:hover span {
color : #adff2f;
}
div#urltext {
font-family : verdana, helvetica, "sans serif";
font-size : 30px;
position : absolute;
top : 0px;
left : -69px;
}
div#content {
position : absolute;
top : 0px;
left : -70px;
width : 635px;
height : 400px;
overflow : auto;
font-family : verdana, helvetica, "sans serif";
font-size : 13px;
color : white;
text-align : justify;
margin: 2px;
padding-right : 8px;
}
div#content2 {
position: absolute;
top: -50px;
left: -70px;
width: 700px;
height: 700px;
overflow: auto;
font-family: verdana, helvetica, "sans serif";
font-size: 13px;
color: white;
text-align: justify;
margin: 3px;
padding-right: 8px;
}
#urltext a:link {
color : #9dab41;
}
#urltext a:visited {
color : #9dab41;
}
#urltext a:hover {
color : #9dab41;
}
#urltext a:active {
color : #9dab41;
}
.titleblock {
font-family: verdana, helvetica, "sans serif";
font-size: 12px;
color: #adff2f;
margin-right: 6px;
margin-top: 50px;
margin-bottom: 10px;
margin-left: 2px;
border: 1px solid #222;
padding: 4px;
}
.titleblock span {
color: #adff2f;
}

index.php

[PHP] pobierz, plaintext 
<?php
<!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" lang="pl" xml:lang="pl">
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>obiwanek.pl :: strona glowna</title>
     <link rel="stylesheet" type="text/css" href="style.css" />
   </head>
   <body>
 <body id="page_bg" class="color_black bg_black width_medium">
     <div id="wrapper">
            <div id="wrapper_r">
                <div id="header">
                    <div id="header_l">
                        <div id="header_r">
                            <div id="logo"></div>
                        </div>
                    </div>
                </div>
            <div id="tabarea">
                <div id="tabarea_l">
                    <div id="tabarea_r">
                    </div>
                </div>
            </div>
            <div id="whitebox">
        <div id="outer">
        <div id="inner">                    
            <div id="text1"><a href="home.html">o mnie<span>&raquo; takie tam bzdety</span></a></div>
            <div id="text3"><a href="ftp">ftp<span>&raquo; maybe. *sniff* maybe.</span></a></div>
            <div id="text4"><a href="mailto:obiwanek@obiwanek.pl">kontakt<span>&raquo; DAAJ KAMJENIAA!</span></a></div>
            <div id="text5"><a href="myepisodes.html">myepisodes<span>&raquo; sygnaturka myepisodes</span></a></div>
            <div id="text6"><a href="http://www.steamcommunity.com/id/obiwanek">steam<span>&raquo; moj profil steam</span></a></div>
            <div id="text7"><a href="http://www.lastfm.pl/user/obiwanek123">last.fm<span>&raquo; moj last.fm</span></a></div>
            <div id="text8"><a href="newsy.html">newsy<span>&raquo; guess what?</span></a></div>
</div></div>
                    <div class="clr"></div>
                    <div class="clr"></div>
            </div>
            <div id="footerspacer"></div>
        </div>
        <div id="footer">
            <div id="footer_l">
                <div id="footer_r">
                    <p id="power_by">
                      &copy; by obiwanek.pl | odwiedzin
                    </p>
                </div>
            </div>
        </div>
    </div>
    </div>
</div>
</body>
</html>
?>
[PHP] pobierz, plaintext 

Ten post edytował obiwanek 16.07.2009, 11:33:02

[erix]

Zacznij od tego: http://kurs.browsehappy.pl

i od tego, że IE inaczej interpretuje wymiary.

[Skie]

IE inaczej liczy marginy i paddingi i Bóg wie jeszcze co w "chorym" silniku IE się kotłuje

Radziłbym Ci napisanie całej tej strony od nowa jeśli koniecznie musi działać na IE - tak będzie łatwiej.
Podczas tworzenie strony sprawdzaj ją co jakiś czas na wszystkich liczących się przeglądarkach, czy wszystko jest OK:

IE, FireFox, Opera, Google Chrome, Safari

[obiwanek]

wydaje mi sie ze index.html jest poprawny [na wszelki wypadek go przepisalem] wiec wina lezy tu po stronie css [usunalem tez wszystkie nieuzywane divy] - niestety z tej strony nie moge nic zrozumiec, css to dla mnie czarna magia, dalej nie rozumiem co mam zrobic :/ jak mam zamienic marginy i paddingi ?

na ie dalej bledy :[

Ten post edytował obiwanek 16.07.2009, 11:34:55

[erix]

na ie dalej bledy - i dodalo nowe :

Gdyby to było jedyne Twoje pytanie, wątek poleciałby do zamknięcia.

Było tysiące razy na forum!

edit, gwoli ścisłości: było cannot add header information.

[Crozin]

[HTML] pobierz, plaintext 
<div id="footer">
           <div id="footer_l">
               <div id="footer_r">
                   <p id="power_by">
                     &copy; by obiwanek.pl | odwiedzin
                   </p>
               </div>
           </div>
       </div>
[HTML] pobierz, plaintext 

To nazywasz poprawnym kodem? Chociaż w sumie powinienem wrzucić cały od BODY włącznie.

[krzychu0808]

Co do podstaw polecam ten kurs div bardzo fajnie opisane:
Kurs
a co do IE 6 on inaczej interpretuje piksele ale wystarczy dodać linijkę do css:

[HTML] pobierz, plaintext 
display: inline;
[HTML] pobierz, plaintext 

i powinno być dobrze

[obiwanek]

niestety

[HTML] pobierz, plaintext 
display: inline;
[HTML] pobierz, plaintext 

nie pomaga - strona rozciaga sie na caly ekran i w ie wyglada jeszcze gorzej

zamiast krytykowac, moglibyscie napisac jakies porady, a nie linki do gotowcow, nie kazdy uczy sie php i css od kilku lat, pamietajcie o tym ze sa nowicjusze
sama nazwa dzialu to przedszkole - chcialbym jakies porady, co jest zle i na co to poprawic, a nie link do poradnika i "napisz od nowa"

zauwazylem, ze po poprawnieniu css poprawil sie takze wyglad strony - wyswietlaja sie obrazki, ale nadal tekst na srodku strony jest schowany

z http://obiwanek.pl/ftp/ie7.png na http://obiwanek.pl/ftp/ie7x.png

divy odpowiadajace za tekst :

CODE

#outer {
position : relative;
top : 50%;
left : 0;
width : 100%;
height : 1px;
}
#inner {
margin-left : -250px;
position : relative;
top : -200px;
left : 50%;
width : 500px;
height : 300px;
}
div#inner a span {
display : none;
}
div#inner a:visited span {
display : none;
}
div#inner a {
text-decoration : none;
color : white;
}
div#inner a:hover span {
display : block;
position : relative;
background : none;
font-size : 14px;
}
div#inner a:link, div#inner a:visited {
text-decoration : none;
}
div#inner a:hover {
text-decoration : none;
}
div#text1, div#text2, div#text3, div#text4, div#text5, div#text6, div#text7, div#text8 {
color : #222;
font-family : verdana, helvetica, "sans serif";
position : absolute;
}
div#text1 {
font-size : 50px;
top : 130px;
left : -100px;
}
div#text1 a:hover span {
top : 17px;
left : 0;
}
div#text3 {
font-size : 50px;
top : 130px;
left : 500px;
}
div#text3 a:hover span {
top : 25px;
left : 0;
}
div#text4 {
font-size : 39px;
top : 330px;
left : 180px;
}
div#text4 a:hover span {
top : 10px;
left : 0;
}
div#text5 {
font-size : 26px;
top : 300px;
left : 450px;
}
div#text5 a:hover span {
top : 6px;
left : 0;
}
div#text6 {
font-size : 32px;
top : 300px;
left : -100px;
}
div#text6 a:hover span {
top : 6px;
left : 0;
}
div#text7 {
font-size : 38px;
top : 180px;
left : 200px;
}
div#text7 a:hover span {
top : 10px;
left : 0;
}
div#text8 {
font-size : 80px;
top : 10px;
left : 130px;
}
div#text8 a:hover span {
top : 28px;
left : 0;
}

[krzychu0808]

Google: Kurs HTML + CSS lub masz tutaj w krokach jak się stawia szablon html za pomocą div + css Kurs Div CSS

[obiwanek]

poprawilem troche strone - troche bledow zniknelo, niestety pojawil sie nowy w ie6 [ie7, ie8 jest ok]

http://obiwanek.pl/ftp/ie6.png

za ta kreske odpowiada div#wrapper_r

index.php

CODE

<!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" lang="pl" xml:lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>obiwanek.pl :: strona glowna</title>
<!--[if lt IE 8]><link rel="stylesheet" type="text/css" href="ieonly.css" /> <![endif]-->
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="png_fix.css" /> <![endif]-->
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body id="page_bg" class="color_black bg_black width_medium">
<div id="wrapper">
<div id="wrapper_r">
<div id="logo"></div>
<div id="whitebox">
<div id="outer">
<div id="inner">
<div id="text1"><a href="home.html">o mnie<span>&raquo; takie tam bzdety</span></a></div>
<div id="text3"><a href="ftp">ftp<span>&raquo; maybe. *sniff* maybe.</span></a></div>
<div id="text4"><a href="mailto:obiwanek@obiwanek.pl">kontakt<span>&raquo; DAAJ KAMJENIAA!</span></a></div>
<div id="text5"><a href="myepisodes.html">myepisodes<span>&raquo; sygnaturka myepisodes</span></a></div>
<div id="text6"><a href="http://www.steamcommunity.com/id/obiwanek">steam<span>&raquo; moj profil steam</span></a></div>
<div id="text7"><a href="http://www.lastfm.pl/user/obiwanek123">last.fm<span>&raquo; moj last.fm</span></a></div>
<div id="text8"><a href="newsy.html">newsy<span>&raquo; guess what?</span></a></div>
</div></div></div>
<div id="footerspacer"></div>
<div id="footer">
<p id="power_by">
&copy; by obiwanek.pl | <?php echo $counter; ?> odwiedzin
</p>
</div></div></div>
</body>
</html>

style.css

CODE

* { margin: 0; padding: 0; }
body {
font-family : Helvetica, Arial, sans-serif;
line-height : 1.3em;
font-size : 12px;
color : #333;
text-align: center;
}
p {
margin-top : 0;
margin-bottom : 5px;
margin-left: 10px;
}
div {
margin : 0px;
border : none;
padding : 0px;
}
ul {
margin-left: 10px;
}
#page_bg {
padding : 10px 0;
margin-bottom : 1px;
background : #333333;
}
div#wrapper {
display : block;
background : #333333 url(images/black/mw_shadow_l.png) repeat-y 0 0;
position : relative;
width: 768px;
margin: 0 auto;
text-align: left;
}
div#wrapper_r {
background : url(images/black/mw_shadow_r.png) repeat-y 100% 0;
margin: 0 auto;
}
body.width_medium div#wrapper {
width : 950px;
}
body.width_small div#wrapper {
width : 773px;
}
body.width_fmax div#wrapper {
min-width : 750px;
max-width : 1050px;
}
div#logo {
padding-left : 370px;
padding-right : 30px;
padding-top : 25px;
width : 950px;
height : 123px;
background : url(images/mw_joomla_logo-trans.png) no-repeat 0 0;
margin : 0 0px;
overflow : hidden;
}
div#footer {
padding-top : 10px;
height : 57px;
width : 950px;
overflow : hidden;
background : #333333 url(images/black/mw_footer_b.png) no-repeat 100% 0;
margin : 0 0px;
}
div#footer div {
text-align : center;
font-size : 0.9em;
color : #adff2f;
}
div#footer a:link, div#footer a:visited {
color : #999;
}
div#footerspacer {
height : 10px;
}
#whitebox {
margin : 0 21px 0 21px;
background : #000;
width : auto;
height : 550px;
border : 1px solid #adff2f;
}
#whitebox div {
text-align : left;
}
#power_by {
float : right;
padding-right : 25px;
color : #adff2f;
}
#outer {
position : relative;
top : 50%;
left : 0;
width : 100%;
height : 1px;
}
#inner {
margin-left : -250px;
position : relative;
top : -200px;
left : 50%;
width : 500px;
}
div#inner a span {
display : none;
}
div#inner a:visited span {
display : none;
}
div#inner a {
text-decoration : none;
color : white;
}
div#inner a:hover span {
display : block;
position : relative;
background : none;
font-size : 14px;
}
div#inner a:link, div#inner a:visited {
text-decoration : none;
}
div#inner a:hover {
text-decoration : none;
}
div#text1, div#text2, div#text3, div#text4, div#text5, div#text6, div#text7, div#text8 {
color : #222;
font-family : verdana, helvetica, "sans serif";
position : absolute;
}
div#text1 {
font-size : 50px;
top : 130px;
left : -100px;
line-height : 50px;
}
div#text1 a:hover span {
top : -20px;
left : 0;
}
div#text3 {
font-size : 50px;
top : 130px;
left : 500px;
line-height : 60px;
}
div#text3 a:hover span {
top : -20px;
left : 0;
width : 300px;
}
div#text4 {
font-size : 39px;
top : 330px;
left : 180px;
line-height : 39px;
}
div#text4 a:hover span {
top : -10px;
left : 0;
}
div#text5 {
font-size : 26px;
top : 300px;
left : 450px;
line-height : 26px;
}
div#text5 a:hover span {
top : -5px;
left : 0;
width : 300px;
}
div#text6 {
font-size : 32px;
top : 300px;
left : -100px;
line-height : 32px;
}
div#text6 a:hover span {
top : -10px;
left : 0;
}
div#text7 {
font-size : 38px;
top : 180px;
left : 200px;
line-height : 38px;
}
div#text7 a:hover span {
top : -12px;
left : 0;
}
div#text8 {
font-size : 80px;
top : 10px;
left : 130px;
line-height : 80px;
}
div#text8 a:hover span {
top : -35px;
left : 0;
}
div#urltext, div#inner div#content a:link, div#inner div#content a:visited, div#inner a:hover, div#inner a:hover span {
color : #adff2f;
}
div#urltext {
font-family : verdana, helvetica, "sans serif";
font-size : 30px;
position : absolute;
top : 0px;
left : -69px;
}
div#content {
position : absolute;
top : 0px;
left : -70px;
width : 635px;
height : 400px;
overflow : auto;
font-family : verdana, helvetica, "sans serif";
font-size : 13px;
color : white;
text-align : justify;
margin: 2px;
padding-right : 8px;
}
div#content2 {
position: absolute;
top: -50px;
left: -70px;
width: 700px;
height: 700px;
overflow: auto;
font-family: verdana, helvetica, "sans serif";
font-size: 13px;
color: white;
text-align: justify;
margin: 3px;
padding-right: 8px;
}
#urltext a:link {
color : #9dab41;
}
#urltext a:visited {
color : #9dab41;
}
#urltext a:hover {
color : #9dab41;
}
#urltext a:active {
color : #9dab41;
}
.titleblock {
font-family: verdana, helvetica, "sans serif";
font-size: 12px;
color: #adff2f;
margin-right: 6px;
margin-top: 50px;
margin-bottom: 10px;
margin-left: 2px;
border: 1px solid #222;
padding: 4px;
}
.titleblock span {
color: #adff2f;
}

Ten post edytował obiwanek 16.07.2009, 21:21:39

[skrypta]

budujac strukture html zastosuj sie do tych wskazowek, tu masz kilka hackow dla ie6
http://skrypta.pl/style-css/prosty-hack-ie...ak-oszukac-ie6/