|
|||
IE7 - Layout wird falsch angezeigt
Hallo liebes Forum,
betreue nun eine website, deren html/css ich nicht selbst angelegt habe. die site hat ein problem im IE7. das text div schrumpft im IE 7 zusammen, und zwar zwischen die divs 'blauobenlinks' und 'blauobenrechts'. die wurden für die 'krümmung' des inhaltsbereichs angelegt. Darüber hinaus wird der Fussbalken rechts und links unterbrochen angezeigt (siehe foto IE7_unten), sowie oben wird der menühintergrund nicht mehr angezeigt. ich habe etwas erfahrung in css, bin aber keinesfalls der spezialist und finde den fehler (oder auch mehrzahl) nicht. wie gesagt, wird nur im IE7 falsch angezeigt. im Anhang sind screenshots. freue mich über jeden rat, im voraus schon danke! katies anbei der Code: html HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > <title>home</title> <link rel="stylesheet" media="all" type="text/css" href="css/global.css"> <link rel="stylesheet" media="all" type="text/css" href="css/menu.css"> <link rel="stylesheet" media="all" type="text/css" href="css/struct.css"> </head> <body> <div id="e-sign"></div> <div id="-clips"> </div> <div id="menu_p"> <div id="menustyle"> <div id="linkeecke"> </div> <div id="rechteecke"> </div> <div id="oberlinie"> </div> <div id="mitte"> </div> <div id="unterlinie"> </div> </div> <div class="menu"> <ul> <li><a class="menutrenn" href="e-clips.html">home</a></li> <li><a class="menutrenn" href="team.html">Team</a> <ul> <li><a href="models.html">Models</a></li> <li><a href="partner.html">Partner</a></li> </ul> </li> <li><a class="menutrenn" href="service.html">Service</a> <ul> <li><a href="agb.html">AGB</a></li> </ul> </li> <li><a class="menutrenn" href="equipment.html">Equipment</a></li> <li><a class="menutrenn" href="referenzen.html">Referenzen</a></li> <li><a class="menutrenn" href="kontakt.html">Kontakt</a></li> </ul> </div> </div> <div id="all-menu"> <div id="randlinks"> <div id="blau"> <div id="blauoben"> <div id="blauobenmittegif"> </div> </div> <div id="blaumitte"> <div id="text"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad mini<br> </div> </div> <div id="blauunten"> <div id="blauuntenlinks"> </div> <div id="blauuntenrechts"> </div> <div id="blauuntenmitte"> </div> </div> </div> <div id="unten"> <div id="eckelilalinks"> </div> <div id="eckelilarechts"> </div> <div id="lilamitte"> </div> <div id="lilauntenbox"> <div id="lilauntenlinks"> </div> <div id="lilauntenrechts"> </div> <div id="lilauntenmitte"> </div> </div> </div> </div> </div> </body> </html> Code:
#e-sign { position: absolute; width: 260px; height: 266px; z-index: 120; left: -18px; } #clips { position: absolute; left: 260px; top: 5px; width: 248px; height: 89px; background-image: url(../img/-clips.jpg); } #all-menu { position: absolute; left: 87px; top: 140px; z-index: 100; width: 1107px; background-color: #04080C; } #randlinks { background-image: url(../img/randlinks.gif); background-position: left; background-repeat: repeat-y; } #blau { margin: 30px 0 0 240px; } #blauobenlinks { float: left; width: 295px; height: 27px; background-image: url(../img/blaueckeobenlinks.jpg); } #blauobenrechts { float: right; width: 306px; height: 27px; background-image: url(../img/blaueckerechtsoben.png); } #blauobenmittegif { height: 2px; background-image: url(../img/blaumitteoben.gif); background-position: top; background-repeat: repeat-x; background-color: #1B2D5E; } #blaumitte { background-image: url(../img/randfurblau.gif); background-position: left; background-repeat: repeat-y; background-color: #1C2E5E; min-height: 300px; } #blauunten { margin-bottom: 10px; } #blauuntenlinks { float: left; width: 316px; height: 31px; background-image: url(../img/blaueckeuntenlinks.jpg); } #blauuntenrechts { float: right; width: 316px; height: 31px; background-image: url(../img/blaueckerechtsunten.png); } #blauuntenmitte { height: 31px; background-image: url(../img/blaumitteunten.gif); background-position: bottom; background-repeat: repeat-x; background-color: #1C2E5E; } #eckelilalinks { float: left; width: 30px; height: 31px; background-image: url(../img/rahmeneckelila_links.jpg); } #eckelilarechts { float: right; width: 30px; height: 31px; background-image: url(../img/rahmeneckelila_rechts.jpg); } #lilamitte { width: 1089px; height: 29px; background-image: url(../img/lilamitte.gif); } #lilauntenlinks { float: left; margin-left: 0px; width: 107px; height: 2; background-image: url(../img/lila-blau_links.gif); } #lilauntenrechts { float: right; margin-right: 0px; width: 107px; height: 2px; background-image: url(../img/lila-blau_rechts.gif); } #lilauntenmitte { width: 1089px; height: 2px; background-color: #070021; } falls nötig noch menü css Code:
#menu_p { position: absolute; left: 255px; top: 110px; } .menu { position: relative; width: 900px; height: 0px; margin-left: 22px; top: -120px; font-family: arial, sans-serif; font-size: 0.7em; font-weight: bold; letter-spacing: 0.3em; z-index:130; color: #fff; } .menutrenna { background-image: url(../img/menutrenn.gif); background-position: right; background-repeat: no-repeat; } .menutrenn:hover { background-image: url(../img/roter_kristall.png); background-position: center; background-repeat: no-repeat; } .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color: #FFF; width:150px; height:70px; text-align:center; line-height: 70px; overflow:hidden; background-repeat: no-repeat; } .menu ul {padding:0; margin:0; list-style: none; } .menu ul li { float: left; position:relative; } .menu ul li ul {display: none; } .menu ul li:hover a { } .menu ul li:hover ul {display:block; position: absolute; top:60px; background-color: #04080C; border-bottom: solid; border-color: #900; } .menu ul li:hover ul li a {display:block; color: #900; } .menu ul li:hover ul li a:hover {background:#; color: #F00;} #menustyle { margin: 0px; width: 940px; height: 100px; } #linkeecke { float: left; width: 22px; height: 27px; background-image: url(../img/menueckelinks.gif); background-repeat: no-repeat; background-position: bottom; } #oberlinie { position: relative; margin-left: 22px; width: 900px; top: 1px; height: 1px; background-image: url(../img/menulinieoben.jpg); background-repeat: no-repeat; } #mitte { margin-left: 22px width: 880px; height: 26px; background-image: url(../img/menuhintergrund.gif); } #rechteecke { float: right; width: 20px; height: 27px; background-image: url(../img/menueckerechts.gif); background-position: bottom; background-repeat: no-repeat; } #unterlinie { width: 940px; height: 3px; background-image: url(../img/menulinieunten.gif); } |
Sponsored Links |
Stichwörter |
falsch angezeigt, ie7, layout, zerspringt |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Eingefügtes Bild wird falsch angezeigt | |SONY| | (X)HTML | 2 | 18.02.2011 17:55 |
Hintergrundgrafik im IE7 nicht angezeigt | bolshi | Site- und Layoutcheck | 1 | 02.08.2010 00:32 |
Zeilenumbrüche werden im ie7 nicht angezeigt, warum? | hfr | (X)HTML | 6 | 23.07.2009 14:56 |
Bild-Text Abstand in IE7 und FF3 immer abwechselnd falsch! | bruno | CSS | 2 | 20.10.2008 22:09 |
IE zeigt Layout falsch an :( | Nadia | CSS | 17 | 06.03.2007 19:18 |