XHTMLforum - Div im IE zu hoch

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Div im IE zu hoch (http://xhtmlforum.de/showthread.php?t=46749)

Div im IE zu hoch

Hallo zusammen

Bei mir werden niedrige Div-Container im IE zu hoch angezeigt, braucht der noch irgend ne eigenschaft im Css zusätzlich, im FF gehts nämlich wunderbar.
In diesem Fall sinds wie man leicht sehn kann die oberen und unteren Ränder der Menüs und des Contentbereichs, sollte beides nur 6px hoch sein.
Just-Stuff.de :: Fun - Games - Tools & more...

Code:

        .menutop {

         margin:0%;

         padding:0%;

         height:6px;

         background-image:url(http://www.just-stuff.de/v2/layout/menu_oben.jpg);

        }



        div#contenttop {

         margin:0%;

         padding:0%;

         height:6px;

         width:100%px;

         background-image:url(http://www.just-stuff.de/v2/layout/contenttop.jpg);

        }

Die Divs haben natürlich sonst keinen Inhalt...

mfg RancoR

font-size: 0;, sonst dehnt der IE das Element aus, bis Text hineinpassen würde. Leere Elemente zum Unterbringen von Deko-Grafiken sind allerdings sehr unschön.

thx, funktioniert super!

Zitat:

Zitat von heiko_rs (Beitrag 340117)

Leere Elemente zum Unterbringen von Deko-Grafiken sind allerdings sehr unschön.

Was genau meinst du damit? Und was macht man stattdessen?

Ach, die Seite kenne ich doch. :D
Das mit dem Footer Stick Alt schon aufgegeben? ;) Nette Idee mit den Farben in den verschiedenen bereichen, aber die Deko Grafiken der Links solltest Du vielleicht in der CSS unterbringen.
Im übrigen müssen in XHTML alle Elemente einen Schluss haben. Sprich:

Code:

<meta name="description" content="Meine Seite" />

Im übrigen, validier mal dein Dokument.

Zitat:

line 7 column 112 - Error: end tag for "meta" omitted, but OMITTAG NO was specified
line 7 - Info: start tag was here
line 8 column 378 - Error: end tag for "meta" omitted, but OMITTAG NO was specified
line 8 - Info: start tag was here
line 9 column 43 - Error: end tag for "meta" omitted, but OMITTAG NO was specified
line 9 - Info: start tag was here
line 10 column 50 - Error: end tag for "meta" omitted, but OMITTAG NO was specified
line 10 - Info: start tag was here
line 11 column 53 - Error: end tag for "meta" omitted, but OMITTAG NO was specified
line 11 - Info: start tag was here
line 12 column 53 - Error: end tag for "meta" omitted, but OMITTAG NO was specified
line 12 - Info: start tag was here
line 13 column 39 - Error: end tag for "meta" omitted, but OMITTAG NO was specified
line 13 - Info: start tag was here
line 14 column 43 - Error: end tag for "meta" omitted, but OMITTAG NO was specified
line 14 - Info: start tag was here
line 15 column 37 - Error: end tag for "meta" omitted, but OMITTAG NO was specified
line 15 - Info: start tag was here
line 16 column 45 - Error: end tag for "meta" omitted, but OMITTAG NO was specified
line 16 - Info: start tag was here
line 40 column 107 - Error: required attribute "alt" not specified
line 41 column 107 - Error: required attribute "alt" not specified
line 42 column 107 - Error: required attribute "alt" not specified
line 43 column 107 - Error: required attribute "alt" not specified
line 44 column 107 - Error: required attribute "alt" not specified
line 45 column 107 - Error: required attribute "alt" not specified
line 46 column 107 - Error: required attribute "alt" not specified
line 47 column 107 - Error: required attribute "alt" not specified
line 52 column 107 - Error: required attribute "alt" not specified
line 53 column 107 - Error: required attribute "alt" not specified
line 54 column 107 - Error: required attribute "alt" not specified
line 55 column 107 - Error: required attribute "alt" not specified
line 56 column 107 - Error: required attribute "alt" not specified
line 61 column 103 - Error: required attribute "alt" not specified
line 62 column 103 - Error: required attribute "alt" not specified
line 63 column 103 - Error: required attribute "alt" not specified
line 64 column 103 - Error: required attribute "alt" not specified
line 65 column 103 - Error: required attribute "alt" not specified
line 66 column 103 - Error: required attribute "alt" not specified
line 70 column 97 - Error: required attribute "alt" not specified
line 71 column 97 - Error: required attribute "alt" not specified
line 72 column 97 - Error: required attribute "alt" not specified
line 73 column 97 - Error: required attribute "alt" not specified
line 78 column 97 - Error: required attribute "alt" not specified
line 79 column 97 - Error: required attribute "alt" not specified

Zitat:

Zitat von RancoR (Beitrag 340118)

Was genau meinst du damit? Und was macht man stattdessen?

Benutze Elemente, die eh vorhanden sind (da sie auch einen Inhalt haben).

ja, ich hab jetzt einfach die gleiche hintergrundfarbe für die page wie die vom footer genommen. und für den weissen teil einfach n div mit 100& und weissem back des sich mitvergrößert :D

validiern muss ich natürlich noch, metatags hab ich mit nem generator gemacht, is ja blöd das der des automatisch falsch/unvollständig macht...

und wie genau mach ich des mit der vorschaugrafik in der css, wär ja auf jedenfall praktischer...

Zitat:

Zitat von RancoR (Beitrag 340128)

und wie genau mach ich des mit der vorschaugrafik in der css, wär ja auf jedenfall praktischer...

Grafik bei den Links? Den Hyperlinks die Grafik einfach zuweisen. Da Navigationen eh in Listen gehören, kannst Du für jeden bereich eine einzelne Liste mit einer ID anlegen und per Nachfahrenselektor in der CSS ansprechen.

:D
*bahnhof*
:D

Hier mal mein css-Code der Links, vllt. könnt ihr mir ja konkret sagen wie ichs besser machen kann...

Code:

        div.menu-links a:link, div.menu-links a:visited {

        font-size:12px;

        text-decoration:none;

        color:#000000;

        display:block;

        padding: 0px 0px 0px 5px; 

        }

        div.menu-links a:active, div.menu-links a:hover {

        font-size:12px;

        text-decoration:none;

        color:#000000;

        background-color:#fde2ae;

        }



        div.menu-links-tools a:link, div.menu-links-tools a:visited  {

        font-size:12px;

        text-decoration:none;

        color:#000000;

        display:block;

        padding: 0px 0px 0px 5px; 

        }

        div.menu-links-tools a:active, div.menu-links-tools a:hover {

        font-size:12px;

        text-decoration:none;

        color:#000000;

        background-color:#afd0fd;

        }





        div.menu-links-games a:link,div.menu-links-games a:visited {

        font-size:12px;

        text-decoration:none;

        color:#000000;

        display:block;

        padding: 0px 0px 0px 5px; 

        }



        div.menu-links-games a:active,div.menu-links-games a:hover {

        font-size:12px;

        text-decoration:none;

        color:#000000;

        background-color:#c4fdae;

        }

                div.menu-links-fun a:link,div.menu-links-fun a:visited {

        font-size:12px;

        text-decoration:none;

        color:#000000;

        display:block;

        padding: 0px 0px 0px 5px; 

        }

        div.menu-links-fun a:active,div.menu-links-fun a:hover {

        font-size:12px;

        text-decoration:none;

        color:#000000;

        background-color:#fcb1ae;

        }

Navigationen sollte man am besten in einer ungeordneten Liste verschachteln.

Code:

<div id="navigationen">

<ul id="nav_rot">

   <li><a href="#">Link mit roten bullet</a></li>

   <li><a href="#">Ein weiterer Link mit rotem Bullet</a></li>

</ul>

<ul id="nav_blau">

   <li><a href="#">Link mit blauem bullet</a></li>

   <li><a href="#">Ein weiterer Link mit blauem Bullet</a></li>

</ul>

</div>

Code:

div#navigationen ul {

   margin:0;

   padding:0; /* Diese Angaben sind bei einem CSS Prolog unnötig, aber bevor es nacher wieder heißt 'Dein Code ist Müll ... */

}

div#navigationen ul li {

   padding-left:<breite der Grafik>px;

   background-repeat:no-repeat;

   background-position:0 0; /* Oder top left */

}

div#navigationen ul#nav_rot li {

   background-image:url('<rote bullte grafik>.Endung');

}

/* usw */

Ein Beispiel, sicherlich nicht das beste. Ich habe extra lange Namen verwendet und keine CSS Kurzformen um es klar zu machen, bevor tausend anderer Fragen kommen. Der Code ist auch nicht zum stumpf kopieren gedacht. ;)

aber wie kann ich jetzt die eingentlichen link-eigenschaften den li-elementen zuweisen?