Dodatkowe px w IE ?

**plain** · 07-11-2007, 11:01

Witam
Bawie sie z takim przypadkowym layem zrobionym na szybko dla celow edukacyjnych

no i oczywiscie problem z wyswietlaniem w IE i FF w tym drugim OK odstepy miedzy pozycjami menu 1 px za to w ie juz nie wesolo. Moglbym prosic o pomoc ? Ponizej wrzucam screeny problemu i kod.

widok z FF

http://img77.imageshack.us/img77/3364/ffhr1.jpg

i widok z IE

http://img217.imageshack.us/img217/4583/ievy1.jpg

a tutaj kod

Kod HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
    <title>Porsche Śląsk</title>
    <META http-equiv=Content-Type content="text/html; charset=windows-1250">
    <style type="text/css" media="all">@import url(style.css);</style>
    
</head>
    
<body>
    
    <div id="container">
        <div id="main_container">
            <div id="left_container">
                <div id="top_margin"></div>
                <div id="logo"></div>
                <div id="tlo_lewe"></div>
            </div>
            <div id="menu_container">
                <div id="top_top_margin"></div>
                <div id="top"></div>
                <div id="menu">
                    <div id="menu_galeria"></div>
                    <div class="menu_przerwa"></div>
                    <div id="menu_wstap"></div>
                    <div class="menu_przerwa"></div>
                    <div id="menu_dystrybutorzy"></div>
                    <div class="menu_przerwa"></div>
                    <div id="menu_ofirmie"></div>
                    <div class="menu_przerwa"></div>
                    <div id="menu_kontakt"></div>
                    <div id="menu_down"></div>
                </div>
            </div>
            <div id="right_container">
                <div id="klub">
                    <div id="left_margin"></div>
                    <div id="klub_porsche"></div>
                </div>
                <div id="right_text">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS

Kod:

body {
    
    padding              : 0;
    margin                : 0;
}

#container {
    
    background            : url(tlo.jpg); 
    background-repeat     : repeat-x;
    width                 : auto;
    height                : 700px;
    }

#main_container {
    
    margin               : auto;
    width                : 834px;
    height               : 670px;
    }

#left_container {
            
    width               : 171px;
    height              : 670px;
    float                : left;
    }


#top_margin {
    
    width                : 171px;
    height                : 48px;
}

#logo {
        
    background       : url(logo.jpg); 
    width               : 171px;
    height              : 175px;
    float                : left;
    
}

#tlo_lewe {
    
    background       : url(tlo_lewe.jpg); 
    width               : 171px;
    height              : 390px;
    float                : left;
    
}

#menu_container {
        
    width               : 379px;
    height              : 670px;
    float                : left;
    }

#top_top_margin {
    
    width                : 379px;
    height              : 48px;

}

#top {
    
    background       : url(top.jpg); 
    width               : 379px;
    height              : 289px;
    float                : left;
    
}

#menu {
    
    width               : 379px;
    height              : 360px;
    float                : left;
    
}

#menu_galeria {
    
    background       : url(menu_galeria.jpg);
    width               : 379px;
    height              : 48px;
    float                : left;
}

#menu_wstap {
    
    background       : url(menu_wstap.jpg);
    width               : 379px;
    height              : 48px;
    float                : left;
}

#menu_dystrybutorzy {
    
    background       : url(menu_dystrybutorzy.jpg);
    width               : 379px;
    height              : 48px;
    float                : left;
}

#menu_ofirmie {
    
    background       : url(menu_o_firmie.jpg);
    width               : 379px;
    height              : 48px;
    float                : left;
}

#menu_kontakt {
    
    background       : url(menu_kontakt.jpg);
    width               : 379px;
    height              : 48px;
    float                : left;
}

#menu_down {
    
    background       : url(menu_down.jpg);
    width               : 379px;
    height              : 115px;
    float                : left;
}

.menu_przerwa {
    
    background       :url(menu_przerwa.jpg);
    width               : 379px;
    height              : 1px;
    float                : left;

}

#right_container {
            
    width               : 284px;
    height              : 670px;
    float                : right;
    }

#klub {
    
    height                : 174px;
    
}

#left_margin {
    
    width               : 45px;
    height              : 174px;
    float                : left;
}

#klub_porsche {
    
    background       : url(klub_porsche.jpg); 
    width               : 190px;
    height              : 174px;
    float                : left;

}

#right_text {
    
    background       : url(tlo_prawe.jpg); 
    width               : 284px;
    height              : 450px;
    float                : left;
}

img {
        border                    : 0pt none;
}

**kobylinski** · 07-11-2007, 12:18

Polecam zacząć od zaimportowania tej biblioteki:
http://developer.yahoo.com/yui/reset/

**Łukasz Macuga** · 09-11-2007, 14:00

Może to kwestia braku w pozycjach menu określonej wartości marginesów top i bottom. I Chyba IE wtedy sobie sam dodaje standardowo odstępy. Zrób margin-bottom:0 i margin-top:0, może zadziała. Sam obrazek 1pixelowy sprawy nie załatwi.

Temat: Dodatkowe px w IE ?

Przybornik

Widok

Dodatkowe px w IE ?

Reguły pisania