![]() |
Willkommen, Gast ( Anmelden | Registrierung )
![]() |
![]() ![]()
Beitrag
#1
|
|
looks good Gruppe: User Beiträge: 67 Mitglied seit: 18.01.2004 Wohnort: Karlsruhe Mitglieds-Nr.: 1.896 ![]() |
Hallo zusammen,
ich habe mal wieder ein Problem mit meinen DIV Boxen. Auf meiner Seite habe ich eine Box in der Größe 800 px x 600 px. Darin liegt u.a. meine Menuebox, die die gleiche Höhe haben soll wie die Hauptbox. Opera stellt mir das Ganze super dar, Firefox annehmbar und der ie kürzt mir die Box (height: auto), da er "min-height" nicht interpretiert. Gibt es hierfür eine Lösung? HTML: <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content= "text/html; charset=iso-8859-1"> <meta name="language" content="de"> <title> Leistungen </title> <meta name="author" content="Martin"> <meta name="generator" content="Ulli Meybohms HTML EDITOR"> <link rel="stylesheet" href="Style/style_mw.css" type= "text/css"> </head> <body> <div id="hintergrund"> <table class="Haupttabelle" cellpadding="0" cellspacing= "0"> <tr height="100px"> <td colspan="4"> <img src= "../Eventtechnik/www/Grafik/puresound_logo_website_800.gif" width="780" height="102" border="0" alt=""> </td> </tr> </table> <div id="textfeld"> </div> <div id="untermenue"> <br> <br> <a href="index.html">Start</a> <a href="wir.html"> Portrait</a> <a href="angebot.html">Leistungen</a> <a href="news.html">Neues</a> <a href="links.html">Links</a> <a href="kontakt.html">Kontakt</a> <a href="agb.html"> AGB</a> <a href="mailto:info@eventtechnik-weishaupt.de"> Email <img src="../Eventtechnik/brief.gif" width="11" height="9" border="0" alt="Email"></a> <a href= "impressum.html">Impressum</a> </div> </div> </body> </html> CSS: body { background-color: #FFA500; width: 100%; height: 100%; text-align: center; margin: 0px 0px 0px 0px; } A:LINK { background-color: transparent; color: white; display: block; width: 130px; text-decoration: none; font-weight: 500; font-size: 11px; font-family: sans-serif; line-height: 14px; } A:VISITED { background-color: transparent; color: white; display: block; width: 130px; text-decoration: none; font-weight: 500; font-size: 11px; font-family: sans-serif; line-height: 14px; } A:HOVER { background-color: orange; color: black; display: block; width: 130px; text-decoration: none; font-weight: 500; font-size: 11px; font-family: sans-serif; line-height: 14px; } A:LINK.untermenue { background-color: smoke white; color: blue; display: block; text-decoration: none; font-weight: 500; font-size: 11px; font-family: sans-serif; line-height: 12px; } A:VISITED.untermenue { background-color: silver; color: blue; display: block; text-decoration: none; font-weight: 500; font-size: 11px; font-family: sans-serif; line-height: 12px; } A:HOVER.untermenue { background-color: orange; color: black; display: block; text-decoration: none; font-weight: 500; font-size: 11px; font-family: sans-serif; line-height: 12px; } p { background-color: transparent; color: black; text-decoration: none; font-weight: 500; font-size: 12px; font-family: sans-serif; line-height: 13,5px; } h1 { background-color: transparent; color: black; text-decoration: none; font-weight: 600; font-size: 14px; font-family: sans-serif; line-height: 16px; } #hintergrund { background-color: silver; z-index: 0; width: 780px; height: 100%; position: relative; margin-left: auto; margin-right: auto; margin-top: 0px; padding: 0px 0px 0px 0px; text-align: left; min-height: 600px; } #untermenue { top: 102px; left: 0px; height: auto; width: 150 px; background-color: gray; position: absolute; padding-left: 20px; min-height: 498px; } #textfeld { top: 180px; left: 160px; height: auto; width: 620px; background-color: transparent; position: absolute; } table.Haupttabelle { width: 100%; border: 0px; border-collapse: collapse; border-spacing: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px; } td.Menue_Leerspalte { border-collapse: separate; width: 20px; background-color: Gray; } td.Menue { border-collapse: separate; width: 130px; background-color: Gray; } td.Textfeld { background-color: silver; width: 650px: text-align: left; font: normal; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: 500; } tr.menue { background-color: gray; width: 100%; text-align: center; vertical-align: middle; } |
|
|
![]() |
![]()
Beitrag
#2
|
|
Ausnahme Poster ![]() Gruppe: User Beiträge: 147 Mitglied seit: 14.07.2003 Wohnort: Schwäbisch Gmünd Mitglieds-Nr.: 947 ![]() |
Hi Martin,
schön, dass es geklappt hat. Ich habe interessanterweise festgestellt (wenn man/frau die einzelnen div-Container mit Hintergrundfarbe belegt), dass der FireFoxe immer einen vertikalen Abstand einbaut und dieses Verhalten auch mit padding oder margin nicht beeinflußt werden kann (der MS-IE macht das nicht). Erst nach dem Einfügen der Attribute overflow: auto rückt er die Container zusammen. Hab seither immer mit der gleichen Hintergrundfarbe gearbeitet, so dass ich dies nie bemerkt hab. Nur mal als Ergänzung, warum die overflow-Attribute drin sind. |
|
|
![]() ![]() |
![]() |
Vereinfachte Darstellung | Aktuelles Datum: 09.07.2025 - 5:55 |