XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Falsche Darstellung im Internet Explorer (http://xhtmlforum.de/showthread.php?t=55654)

rw1981 05.02.2009 13:48

Falsche Darstellung im Internet Explorer
 
Hallo an alle,

ich hoffe, dass ihr mir helfen könnt, denn selbst nach stundenlangem Suchen im Internet komme ich hier nicht weiter.

Ich möchte eine horizintale Navigationsleiste im Browserfenster zentrieren.
Ich habe mich aus verschiedenen Gründen gegen "display: inline" entschieden und wählte "float: left".
Über den Außenabstand des linken Navigationsbuttons habe ich die Buttons zentriert.

Sowohl im Firefox als auch bei Opera wird alles perfekt angezeigt, so wie es mir Dreamweaver in der Vorschau auch zeigt.

Der Internet Explorer amcht mir aber Probleme: und zwar verrückt er die Navigationsleiste noch weiter nach rechts, sodass sie nicht mehr zentriert aussieht!

Wieso amcht er das? Ok, weil er falsch interpretiert, aber womit genau hat er ein Problem und wie löse ich das?

Anbei der Code...

Ich danke euch vielmals für eure Hilfe!!!!

Viele Grüße
Rene

HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>

<style type="text/css">
@import 'stil.css';
</style>

</head>

<body>



<div id="container">
        <div id="header"></div>
                        <div id="navigation">
                                <ul>
                                        <li id="home"><a href="#" class="home"></a></li>
                                        <li id="aboutme"><a href="#" class="aboutme"></a></li>
                                        <li id="gallery"><a href="#" class="gallery"></a></li>
                                        <li id="guestbook"><a href="#" class="guestbook"></a></li>
                                        <li id="links"><a href="#" class="links"></a></li>
                                </ul>
                        </div>
                       
                </div>
</body>
</html>


CSS:

Code:

@charset "utf-8";

* {
        margin: 0 auto;
        padding: 0;
        background-repeat: no-repeat;
        background-position: center center;
}


body {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 100,01%;
        text-align: center;
}

#container {
        width: 750px;
        height: 750px;
        margin-top: 25px;
        text-align: left;
        background-color: #FFF7F3;
}

#header {
        background-color: #ff2244;
        height: 120px;
        width: 700px;
        margin-top: 25px;
}






/*Navigation:*/




#navigation {
        width: 700px;
        height: 38px;
        text-align: center;
        margin-top: 25px;
}
       
#navigation ul {
    width: auto;
        height: 38px;
        display: block;
        list-style: none;
        white-space: nowrap;
        background-color: #FFFF11;
}

#navigation ul li {
    float: left;
        display: block;
        width: 100px;
        height: 38px;
}




#navigation ul li a{
        width: 100px;
        height: 38px;
}




#home {
        margin-left: 80px; /* dieser Wert zentriert*/
        margin-right: 5px;
}

#aboutme {
        margin-left: 5px;
        margin-right: 5px;
}

#gallery {
        margin-left: 5px;
        margin-right: 5px;
}

#guestbook {
        margin-left: 5px;
        margin-right: 5px;
}

#links {
        margin-left: 5px;
}





/*Navigation: Anzeige der Hintergrundbilder in a*/

#navigation ul li a.home:link, #navigation ul li a.home:visited {
        display: block;
        background-color: #444444;
}
#navigation ul li a.home:hover, #navigation ul li a.home:focus, #navigation ul li a.home:active {
        display: block;
        background-color: #FF6666;
}




#navigation ul li a.aboutme:link, #navigation ul li a.aboutme:visited {
        display: block;
        background-color: #444444;
}
#navigation ul li a.aboutme:hover, #navigation ul li a.aboutme:focus, #navigation ul li a.aboutme:active {
        display: block;
        background-color: #FF6666;
}




#navigation ul li a.gallery:link, #navigation ul li a.gallery:visited {
        display: block;
        background-color: #444444;
}
#navigation ul li a.gallery:hover, #navigation ul li a.gallery:focus, #navigation ul li a.gallery:active {
        display: block;
        background-color: #FF6666;
}




#navigation ul li a.guestbook:link, #navigation ul li a.guestbook:visited {
        display: block;
        background-color: #444444;;
}
#navigation ul li a.guestbook:hover, #navigation ul li a.guestbook:focus, #navigation ul li a.guestbook:active {
        display: block;
        background-color: #FF6666;
}




#navigation ul li a.links:link, #navigation ul li a.links:visited {
        display: block;
        background-color: #444444;
}
#navigation ul li a.links:hover, #navigation ul li a.links:focus, #navigation ul li a.links:active {
        display: block;
        background-color: #FF6666;
}


fricca 05.02.2009 14:07

Du redest von IE < 7, ja? Das ist der doubled float-margin bug.
Du kannst dir deine Margin-Sonderangaben sparen, wenn du dem ul-Element ein passendes Padding gibst.

rw1981 05.02.2009 20:48

Ich danke dir und werde das mal prüfen!

Gruß

rw1981 06.02.2009 13:51

Danke Fricca, das war die Lösung!

Gruß


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:09 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023