Szacunek dla tego kto pomoże - 20px

[lomanki66]

Witam nie będę dużo pisał wszystko jest na obrazu, popatrzcie.
Tak to wygląda pod firefoxem - jak zwykle wszystko ok:

http://img501.imageshack.us/img501/2439/problem1wb6.th.jpg (http://img501.imageshack.us/my.php?image=problem1wb6.jpg)

Następnie IE:

http://img152.imageshack.us/img152/6813/problem2sh9.th.jpg (http://img152.imageshack.us/my.php?image=problem2sh9.jpg)

Widać gołym okiem że IE dodaje 20px, nie wiem jak to rozwiązać: strona ma 800px, wkleję kod.

To jest kod tego menu samego:


#top_menu_container {
background-color: #fff;
height: 40px;
width: 800px;
}
#top_menu {
background-color: #fff;
height: 40px;
width: 800px;
margin: auto;
text-align: left;
}
#top_menu ul{
margin: 0px;
padding: 0px 5px;
list-style: none;
}
#top_menu li{
display: inline;
white-space: nowrap;
}
#top_menu li a{
padding: 0px 10px 8px 10px;
font-weight: bold;
}
#top_menu li a:hover{
color: white;
padding: 6px 8px 6px 8px;
background: url(../images/top_menu_hover.png) #D599A1 repeat-x;
border-left: 2px solid #000;
border-right: 2px solid #C8C8C8;
border-bottom: 2px solid #C8C8C8;
}

To jest kod całej strony:



body{
margin:0;
padding:0;
text-align: center;

background: url(../images/bg.jpg);
}

#pagewidth{
width:800px;
text-align:left;
min-width: 500px;
margin-left:auto;
margin-right:auto;
}



#top_menu_container {
background-color: #fff;
height: 40px;
width: 800px;
}
#top_menu {
background-color: #fff;
height: 40px;
width: 800px;
margin: auto;
text-align: left;
}
#top_menu ul{
margin: 0px;
padding: 0px 5px;
list-style: none;
}
#top_menu li{
display: inline;
white-space: nowrap;
}
#top_menu li a{
padding: 0px 10px 8px 10px;
font-weight: bold;
}
#top_menu li a:hover{
color: white;
padding: 6px 8px 6px 8px;
background: url(../images/top_menu_hover.png) #D599A1 repeat-x;
border-left: 2px solid #000;
border-right: 2px solid #C8C8C8;
border-bottom: 2px solid #C8C8C8;
}









#leftcol{
width:170px;
float:left;
position:relative;
margin-left:-190px;
margin-top:10px;
margin-right:1px;
background: url(../images/menu.jpg);
padding: 0.5em;
border: 1px solid #CCCCCC;
}









#outer{
border:solid white 0px;
/*/*/ border-left-width: 200px ; /* left column width. NN4 hack to hide borders */
border-left-color: #FFFFFF ; /* left column colour */
border-left-style: solid;
background-color: #FFFFFF ; /* center column colour */
width: auto;
}

#footer{
height:;
width:100%;
background-color:;
text-align:center;
font-size: 10px;
}

#inner{margin:0; width:100%;}

#maincol{
float: left;
width: 95%;
position: relative;
margin: 0 -8px 0 -2px;
background: url(../images/cont2.jpg);
background-repeat: no-repeat;
border: 1px solid #CCCCCC;
margin-top:10px;

}

#outer>#inner { border-bottom: 1px solid #FFFFFF; }

.clr{clear:both;}
.content {padding: 5px 5px 5px 5px}

#header {
height: 180px;
width: 100%;
background-image: url(../images/head.jpg);
}
#footer {
height: 50px;
width: 100%;


background-image: url(../images/foot.jpg);
}
div {
font-family: Arial,Verdana,Helvetica,sans-serif;
font-size: 12px;
line-height: 20px;
color: #90949E;
}
a {
font-family: Arial,Verdana,Helvetica,sans-serif;
font-size: 11px;
line-height: 20px;
color: #314E9E;
font-weight: bold;
text-decoration: none;
}
a:hover {
font-family: Arial,Verdana,Helvetica,sans-serif;
font-size: 11px;
line-height: 20px;
color: #C4C4C4;
font-weight: bold;
text-decoration: none;

}
#title {
}
.pathway {
font-family: Arial,Verdana,Helvetica,sans-serif;
font-size: 11px;
line-height: 12px;
color: #314E9E;
font-weight: bold;
padding: 5px;
}
.date {
font-family: Arial,Verdana,Helvetica,sans-serif;
font-size: 12px;
line-height: 12px;
color: #253B78;
font-weight: bold;
margin-left: 10px;
}
hr {
background-color: #314E9E;
width: 90%;
}
hr.separator {
width: 40%;
}
a.pnav {
font-family: Arial,Verdana,Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
}
.pnav:hover {
color: #314E9E;
}
.small {
font-family: Arial,Verdana,Helvetica,sans-serif;
font-size: 11px;
font-weight: bold;
}
.smalldark {
font-weight: bold;
}
a.mainlevel {
text-decoration: underline;
}
a.mainlevel:hover {
text-decoration: underline;
}
a.sublevel {
text-decoration: underline;
}
a.sublevel:hover {
text-decoration: underline;
}
.sectiontableentry1 {
background-color: #C4C4C4;
}
.sectiontableentry2 {
}
.button {
}
.inputbox {
}
.ontab {
}
.offtab {
}
.createdate {
font-family: Arial,Verdana,Helvetica,sans-serif;
font-size: 11px;
font-weight: bold;
}
.modifydate {
}
a.readon {
font-family: Arial,Verdana,Helvetica,sans-serif;
color: #314E9E;
font-weight: bold;
}
a.readon:hover {
color: #000000;
font-weight: bold;
}
.contentheading {
font-family: Arial,Verdana,Helvetica,sans-serif;
font-size: 16px;
font-weight: bold;
}
.contentdescription {
font-family: Arial,Verdana,Helvetica,sans-serif;
font-size: 12px;
}
.sectiontableheader {
font-size: 12px;
font-weight: bold;
}
.categorytitle {
font-family: Arial,Verdana,Helvetica,sans-serif;
font-size: 14px;
line-height: 20px;
color: #6D7078;
font-weight: bold;
}
.componentheading {
font-family: Arial,Verdana,Helvetica,sans-serif;
font-size: 14px;
line-height: 20px;
color: #6D7078;
font-weight: bold;
}
a.category {
font-family: Arial,Verdana,Helvetica,sans-serif;
font-size: 12px;
line-height: 14px;
font-weight: bold;
text-decoration: underline;
}
a.category:hover {
color: #314E9E;
text-decoration: underline;
}
table.moduletable {
margin: 10px;
width: 100%;
}
table.moduletable th {
}
table.moduletable td {
}
.poll {
}
.searchintro {
}
table.contact {
}
table.contact td.icons {
}
table.contact td.details {
}
.newsfeedheading {
}
.fase4rdf {
}
a.fase4rdf:link {
}
a.fase4rdf {
text-decoration: underline;
}
a.fase4rdf:hover {
text-decoration: underline;
}
.newsfeeddate {
}
Jeśli ktoś ma jakiś pomysł niech pisze, pozdrawiam.

[zwiastun]

Nie każda IE. Poczytaj o modelu pudełkowym w ie (box model)

[lomanki66]

Hmm, o boxie już czytałem nie raz mimo to skrypty korygujące też nic nie dają próbowałem już z kilku stron i nic

[moje]

Wstaw całą stronę w jednego div'a, i jego wyśrodkuj.

[lomanki66]

Robi się problem, bo div też nie działa, oczywiście żebym błędu nie robił to robie tak jak wszyscy


#nadrzedny {
text-align: center;
}
#test {
width: 800px;
margin: 0 auto;
text-align: left;
}


i później strona w ten div ale to i tak nie działa.

[grabtom]

Mam szkielet strony wyglądajacy tak jak twój:


div NAGŁÓWKa
div MENU
div KOLUMN
div FOOTERaU mnie wszystko się wyświetla prawidłowo zarówno pod FF, IE i Operą.
Wklejam kod html i css. Przeanalizuj i popraw u siebie.


<div id="pagewidth" >
<div id="header" >
NAGŁOWEK
</div>
<div id="pasek_menu">
MENU
</div>
<div id="wrapper">
<div id="sidebar">
LEWA KOLUMNA
</div>
<div id="content">
PRAWA KOLUMNA
</div>
</div>
<div id="footer">
STOPKA
</div>
</div>

body {
margin:0;
padding:0;
}
#pagewidth {
width:950px;
margin-left:auto;
margin-right:auto;
}
#wrapper {
overflow: hidden;
width: 950px;
}
#content {
width: 720px;
float:left;
}
#sidebar {
width: 230px;
float:left;
}
#header{
height:200px;
width:950px;
}
#pasek_menu{
height:27px;
width:950px;
}
#footer{
height:100px;
width:950px;
clear:both;
}

[moje]

Polecam zrobić taki układ:

<div id="main">
<div id="site">
<div id="site_header"></div>
<div id="site_topemnu"></div>
<div id="body_part">
<div id="left_part"></div>
<div id="right_part"></div>
</div>
<div id="site_footer"></div>
</div><!-- koniec site -->
</div><!-- koniec main -->
Do tego takie css:

div#main {
width: 100%;
height: auto;
text-align: center;
padding: 10px auto;
}

div#site {
width: 800px;
height: auto;
text-align: left;
margin: 10px auto;

div {
margin: 0;
padding: 0;
}

div#site_header, div#site_topemnu, div#body_part {
width: 100%
height: auto;
overflow: hidden;
}

div#left_part {
width: 20%;
float: left;
height: auto;
overflow: hidden;
}

div#right_part {
widht: 80%;
float: left;
height: auto;
overflow: hidden;
}
Te kody to tak w opisowo, żebyś skumał ocb. ;)

[Rybik]

jak cos wyłazi to overflow:hidden i już