[HTML] Wer hat Plan von CSS?

[rellek]

Tach,

ich hätte mal kurz eine Frage *g*

Im Anhang befindet sich ein Screenshot von einer Webanwendung - einmal im Firefox 2, im IE7 und im Opera 9.1.
Im Firefox sieht das ganze "am richtigsten" aus...
Daher erste Frage:
- Wie bekomme ich den IE dazu, das genauso darzustellen (zumindest das der Balken über den Dummy-Buttons verschwindet)?
- Warum zeigt der Opera das so Kacke an? Wie erklär ich dem das?

So... Aber ich möchte auch sehr gern, dass die Dummy-Buttons am unteren Rand vom Header sind, damit man so einen "Tab"-Effekt realisieren könnte...
Was müsste ich hierfür tun?

Hier mal der aktuelle Quellcode:

<div class="outborder">
    <div class="userinfo">
        $header_usr_login
    </div>
    <div class="header">
        
        <div class="searchbox">
            <form name="search" action="action.php" method="post">
                <input type="text" name="keyword" value="Suche" onfocus="if(this.value=='Suche')this.value=''" onblur="if(this.value=='')this.value='Suche'" /> <input type="submit" value="Go!" /><br />
                <input type="radio" name="where" value="1" checked="checked" /> Nur hier <input type="radio" name="where" value="0" /> &Uuml;berall
                <input type="hidden" name="action" value="search" />
            </form>
        </div>
        
                <a href="index.php"><img src="style/images/header.png" border="0" /></a>

    </div>
    
    <div class="mainmenu">
        
        <div id="mainnav">
            <ul>
                <li><a href="#">Dummy</a></li>
                <li><a href="#">Dummy 2</a></li>
                <li><a href="#">Dummy 3</a></li>
            </ul>
        </div>
        
    </div>
</div>

CSS:

body {
    background: #e3d7b8;
    color: #000000;
    font: 9px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif, 'Bitstream Vera Sans';
}

a:link, body_alink {
    color: #000000;
    text-decoration: underline;
}

a:visited, body_avisited {
    color: #000000;
    text-decoration: underline;
}

a:hover, a:active, body_ahover {
    color: #000000;
    text-decoration: none;
}

td, th, p, li {
    font: 12px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif, 'Bitstream Vera Sans';
}

.outborder {
    margin: 0 auto;
    padding: 0;
    width: 800px;
    border: #000000 1px solid;
    background: #ffffff;
}

.searchbox {
    float: right;
    margin: 5px 5px 0px 0px;
    background: #E6D9CA url('images/header-bg-gradient.png') repeat-y top left;
    background: #E6D9CA url('images/header-bg.png') repeat-y top left;
}

.header {
    padding: 0;
    margin: 0;
    float: left;
    background: #E6D9CA url('images/header-bg.png') repeat-x top left;
    border-top: #000000 1px solid;
}

.mainmenu {
    padding: 0;
    margin: 0;
    background: #E6D9CA url('images/header-bg-gradient.png') repeat-y top left;
    border-bottom: #000000 1px solid;
}


.content {
    padding: 2px;
    margin: 2px;
    font: 12px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif, 'Bitstream Vera Sans';
}

.userinfo {
    padding: 2px;
    margin: 2px;
    text-align: right;
}


input, select, textarea {
    font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif, 'Bitstream Vera Sans';
    color: #000000;
    background-color: #ffffff;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
}

#mainnav {
    
}

#mainnav ul {

}
#mainnav ul li {
    display: inline;
    list-style-type: none;
    color : #E6D9CA;
    font-size : 12px;
    text-align: justify;
}
#mainnav ul li a {
    font-size: 13px;
    text-decoration: none;
    padding: .2em 1em;
    color: #000000;
    background-color: #E6D9CA;
    background-image: none;
}
#mainnav ul li a:hover{
    color: #000000;
    background-color: #ffffff;
}

[Oli]

nicht so wirklich. *g* Eigentlich verhalten sich Opera und FF ziemlich gleich, der IE mehr der Sonderbrowser..
Schon mal was mit den Angaben clear versucht?

[rellek]

Hm... Hatte mal mit <br style="clear: both" /> probiert, immer da, wo ne Zeile zu ende war... Sah dann aus wie im Anhang (Reihenfolge FF, IE, Opera)

[Oli]

Du überforderst mich damit zu 300%

Es gibt doch aber bestimmt sehr nette CSS Foren o.ä. die du kennst.