Seite 1 von 1

Box Aufteilung CSS

Verfasst: So 24. Jun 2007, 10:47
von 7UPandDown
Hallo,
Nach langen wollte ich nun mein Outfit ändern. Dazu wollte ich rechts etwas Platz bekommen um die Rechte Box einzufügen für News. Ich weiß, das es gegenüber Firefox und Explorer Unterschiede gibt.
Wenn man es sich Ansieht http://www.MotorsportSlalom.de sieht man, das es im Explorer eigentlich gut Aussieht (ziemlich nah an die linke Navigation), im Firefox dagegen habe ich noch Platz. Habe mal die css angehängt. Vielleicht kann mir jemand helfen oder einen Tipp geben das es im Firefox genauso Aussieht.

------------------------------------------------------------------------------------
html, body {
height : 100%;
}

body {
padding : 0;
margin : 0;
text-align : left;
width : 100%;
font-size : 11px;
font-family : Verdana, Tahoma, Arial, Helvetica, Sans-serif, sans-serif;
color : rgb(0, 0, 0);
background-color : #ffffff;
background-image : url(../upload/bullets/hint.jpg);
}

td {
font-size : 11px;
font-family : Verdana, Tahoma, Arial, Helvetica, Sans-serif, sans-serif;
color : #000000;
margin-bottom : 8px;
}

.input {
font-size : 11px;
font-family : Verdana, Tahoma, Arial, Helvetica, Sans-serif, sans-serif;
color : rgb(0, 0, 0);
width : 240px;
margin-bottom : 8px;
border-top : 1px solid #999999;
border-right : 1px solid #999999;
border-bottom : 1px solid #999999;
border-left : 1px solid #999999;
}

.label {
font-size : 11px;
font-family : Verdana, Tahoma, Arial, Helvetica, Sans-serif, sans-serif;
color : rgb(0, 0, 0);
}

.small {
font-size : 9px;
}

#outer {
height : 100%;
width : 100%;
color : #000000;
text-align : left;
position : absolute;
margin-left : 30px;
}

html > body #outer {
height : auto;
}

#innerwrap {
float : left;
width : 950px;
height : 540px;
background-color : #e5e5e5;
margin-top : 30px;
margin-left : 1.5px;
border-top : 1px solid #000000;
border-right : 1px solid #000000;
border-bottom : 1px solid #000000;
border-left : 1px solid #000000;
}

#header {
width : 925px;
height : 126px;
color : #000000;
z-index : 5;
position : absolute;
left : 42px;
top : 0;
margin-top : 30px;
background-image : url(../upload/logos/blue_banner.jpg);
background-repeat : no-repeat;
background-position : 170px center;
}

#left {
position : absolute;
width : 150px;
float : left;
padding-top : 130px;
padding-bottom : 20px;
left : 5px;
}

#left p {
padding-left : 3px;
padding-right : 2px;
}

#right p {
padding-left : 4px;
padding-right : 2px;
}

#imagecolumn {
margin-top : 0;
position : absolute;
top : 165px;
left : 900px;
width : 90px;
height : 220px;
z-index : 10;
padding-top : 180px;
padding-left : 10px;
padding-right : 10px;
color : rgb(62, 77, 116);
}

#imagecolumn a {
padding : 0;
font-weight : normal;
font-size : 11px;
color : rgb(190, 190, 190);
margin : 0;
}

#imagecolumn h1 {
padding : 0;
font-weight : normal;
font-size : 11px;
color : rgb(0, 0, 0);
margin : 0;
}

#right {
}

clip: rect( )
}

div,p { margin-top:0; }

#centrecontent {
width : 610px;
float : right;
padding-left : 0;
color : #000000;
margin-top : 130px;
padding-bottom : 20px;
overflow : auto;
height : 380px;
margin-right : 80px;
background-color : #efefef;
}

#centrecontent p { padding-left:3px:color:rgb(62,77,116); }

#clearfooter {
width : 780px;
height : 71px;
z-index : -1;
position : absolute;
top : 466px;
}

#bottomnavi {
text-align : center;
color : rgb(210, 210, 210);
height : 10px;
width : 590px;
}

#additionalnavi {
float : none;
margin-top : 1px;
padding-bottom : 2px;
text-align : right;
width : 550px;
color : #ffffff;
z-index : 4;
position : absolute;
margin-left : 360px;
}

#logo {
width : 925px;
padding-top : 20px;
}

#navipath {
padding : 0 10px;
color : rgb(99, 99, 99);
width : 388px;
margin : 2px 10px 5px;
}

.navi {
width : 165px;
border-bottom : 0 solid rgb(170, 170, 170);
}

h1 {
padding-left : 2px;
font-weight : bold;
font-size : 12px;
color : #000000;
margin : 0;
}

h1.content {
margin-bottom : 12px;
padding : 0;
}

hr {
color : #000000;
}

a {
font-size : 11px;
color : #000000;
text-decoration : none;
}

a:hover {
text-decoration : underline;
}

a.newsheadline {
font-weight : bold;
}

a.bottomnavi {
color : #330000;
font-size : 9px;
}

a.additionalnavi {
font-size : 11px;
color : #000000;
}

a.navipath {
font-size : 10px;
color : #000000;
}

a.navileft_passive {
display : block;
padding-top : 6px;
padding-bottom : 6px;
color : #000000;
background-image : url(../upload/bullets/nav.gif);
background-repeat : repeat-x;
background-position : 1px center;
}

a.navileft_active {
display : block;
background : url(../upload/bullets/nav_blau.gif) repeat-x 1px center;
padding-top : 5px;
padding-bottom : 5px;
color : #000000;
}

a.navileft_open {
padding-left : 15px;
display : block;
background : url(../upload/bullets/nav_rot.gif) repeat-x 1px center;
padding-top : 5px;
padding-bottom : 5px;
color : #000000;
}

a.sitemap_level1 {
display : block;
border-bottom : 1px solid #b4a8b4;
color : rgb(0, 0, 0);
font-weight : normal;
padding-bottom : 0.4em;
background : url("../images/navi_pfeil_rechts.gif") no-repeat;
background-position : right 0%;
}

a.sitemap_level2 {
color : rgb(62, 77, 116);
background : url("../images/navi_pfeil_rechts.gif") no-repeat;
background-position : 170px 4px;
display : block;
}

a.sitemap_level3 {
color : #000000;
}

.sitemap_level2_container {
float : left;
width : 50%;
padding-top : 0.3em;
}

.sitemap_level3_container {
float : right;
width : 50%;
padding-top : 0.3em;
}

.input_newsletterselect {
width : 80px;
vertical-align : middle;
font-size : 11px;
margin-right : 8px;
color : #000000;
}

#loginbox {
border-top : 0 solid #aeaeae;
border-bottom : 0 solid #aeaeae;
padding-bottom : 0.6em;
padding-top : 0.6em;
padding-left : 0.3em;
padding-right : 0;
margin-top : 1.5em;
margin-bottom : 1.5em;
background-image : url(../upload/bullets/login-button.jpg);
}

.input_searchbox {
width : 65px;
vertical-align : middle;
font-size : 11px;
}

.label_searchbox {
vertical-align : middle;
position : relative;
padding-left : 3px;
}

#searchbox {
background-color : #dfe0e5;
background-image : url(../upload/bullets/login-button.jpg);
border-top : 1px solid #aeaeae;
border-bottom : 1px solid #aeaeae;
padding-bottom : 0.6em;
padding-top : 0.6em;
padding-left : 0;
padding-right : 0;
margin-top : 1.5em;
margin-bottom : 1.5em;
}

.suche {
border : 1px solid #000080;
background-color : #92dd71;
}

#newsletterbox {
background-color : #dfe0e5;
border-top : 1px solid #aeaeae;
border-bottom : 1px solid #aeaeae;
padding-bottom : 0.6em;
padding-top : 0.6em;
padding-left : 0.5em;
padding-right : 0.5em;
margin-top : 1.5em;
margin-bottom : 1.5em;
}

.hidden {
display : none;
}

.balken {
padding-left : 0;
background-position : 2px 0;
}
-------------------------------------------------------------------------------------

Gruss
Michael

Verfasst: So 24. Jun 2007, 16:15
von Noob
Bin den CSS-Code mal eben schnell überflogen.

Versuche einfach mal bei centercontent float: left, statt float:right.

CSS

Verfasst: So 24. Jun 2007, 16:59
von 7UPandDown
hy,
Das habe ich schon versucht. Habe auch schon Seiten im Netz gefunden wo berichtet wird das der Explorer anders zusammen rechnet. Aber es muss doch möglich sein bis auf ein paar wenige Pixel eine Übereinstimmung zu bekommen.
Trotzdem Danke.
Gruss
Michael