19.09.2007, 21:18
|
|||
|
|||
Probleme mit IE6
Hallo zusammen,
ich bin absoluter Neuling und erhoffe mir Hilfe für folgendes Problem: Seit wenigen Tagen ist meine erste selbst entworfene Webseite unter ****** zu erreichen. Es hat auch alles wunderbar geklappt, bis mir jemand mitteilte, dass es Probleme bei der Ansicht mit dem Internet Explorer 6 gibt. Und zwar verschiebt IE6 den main-Bereich unterhalb der sidebar und ich kann mir nicht erklären, warum das passiert. In Firefox, IE7 und Safari wird alles wie gewünscht angezeigt. Habe schon probiert, die einzelnen Größen zu ändern, aber leider ohne Erfolg. Vielleicht habt ihr einen Tip für mich, wie ich das Probelm in den Griff bekomme? Hier ist erst einmal der CSS-Quellcode: Code:
/********************************************
HTML ELEMENTS
********************************************/
/* top elements */
* {
padding: 5;
margin: 0 10px 0 5px;
}
body {
margin: 0;
padding: 0;
font: normal 73%/1.5em 'Trebuchet MS', Tahoma, sans-serif;
color: #555;
background: #FFF url(bg.jpg) repeat-x;
text-align: left;
}
/* links */
a {
background: inherit;
color: #336600;
text-decoration: none;
}
a:hover { background: inherit; color: #006699; text-decoration: underline; }
/* headers */
h1, h2, h3 { font: bold 1em 'Trebuchet MS', Tahoma, Sans-serif; }
h1 {
font-size: 1.4em;
color: #336600;
}
h2 { font-size: 1.2em; text-transform: uppercase; }
h3 { font-size: 1.2em; }
p, h1, h2, h3 {
margin: 10px 15px;
}
ul, ol {
margin: 10px 30px;
padding: 0 15px;
}
/* images */
img {
border: 1px solid #DADADA;
padding: 5px;
background: #FAFAFA;
float: left;
}
img.float-right {
margin: 5px 0px 5px 15px;
}
img.float-left {
margin: 5px 15px 5px 0px;
}
code {
margin: 5px 0;
padding: 10px;
text-align: left;
display: block;
overflow: auto;
font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
/* white-space: pre; */
background: #FAFAFA;
border: 1px solid #f2f2f2;
border-left: 3px solid #72A545;
}
acronym {
cursor: help;
border-bottom: 1px solid #777;
}
blockquote {
margin: 15px; padding: 0 0 0 20px;
background-color: #FAFAFA;
background-position: 8px 10px;
border: 1px solid #f2f2f2;
border-left: 3px solid #72A545;
font: bold 1.2em/1.5em "Trebuchet MS", Tahoma, sans-serif;
color: #666666;
}
/* start - table */
table {
border-collapse: collapse;
margin: 10px 15px;
}
th strong {
color: #fff;
}
th {
height: 29px;
padding-left: 11px;
padding-right: 11px;
color: #333333;
text-align: left;
border-left: 1px solid #B6D59A;
border-bottom: solid 2px #FFF;
background: #74A846;
}
tr {
height: 30px;
}
td {
padding-left: 11px;
padding-right: 11px;
/* border-left: 1px solid #FFE1C3; */
border-left: 1px solid #FFF;
border-bottom: solid 1px #ffffff;
}
td.first,th.first {
border-left: 0px;
}
tr.row-a {
background: #F8F8F8;
}
tr.row-b {
background: #EFEFEF;
}
/* end - table */
/* form elements */
form {
margin:10px 15px; padding: 0;
border: 1px solid #f2f2f2;
background-color: #FAFAFA;
}
label {
display:block;
font-weight:bold;
margin:5px 0;
}
input {
padding: 2px;
border:1px solid #eee;
font: normal 1em "Trebuchet MS", Tahoma, sans-serif;
color:#777;
}
textarea {
width:400px;
padding:2px;
font: normal 1em "Trebuchet MS", Tahoma, sans-serif;
border:1px solid #eee;
height:100px;
display:block;
color:#777;
}
input.button {
margin: 0;
font: bold 1em Arial, Sans-serif;
background: #FFF url(gradientbg.jpg) repeat-x;
padding: 2px 3px;
color: #333;
border: 1px solid #DADADA;
}
/* search form */
.searchform {
background-color: transparent;
border: none; margin: 0; padding: 0;
}
.searchform p { margin: 10px; padding: 0; }
.searchform input.textbox {
width: 130px;
color: #333;
height: 20px;
padding: 2px;
vertical-align: top;
}
.searchform input.button {
font: bold 12px Arial, Sans-serif;
color: #333;
width: 60px;
height: 26px;
border: 1px solid #DADADA;
padding: 3px 5px;
vertical-align: top;
}
/***********************
LAYOUT
************************/
#header-content, #content, #footer-content {
width: 770px;
}
/* header */
#header {
height: 100px;
text-align: left;
}
#header-content {
margin: 0 auto; padding: 0;
position: relative;
}
#header-content h1#logo {
position: absolute;
font: bold 45px 'Trebuchet MS', Sans-serif;
letter-spacing: -2px;
color: #FFF;
margin: 0; padding: 0;
/* change the values of left and top to adjust the position of the logo */
top: 0; left: 0px;
}
#header-content h1#logo a {
text-decoration: none;
color: #FFF;
}
#header-content #slogan {
position: absolute;
font: bold 12px 'Trebuchet Ms', Sans-serif;
text-transform: none;
color: #FFF;
margin: 0; padding: 0;
/* change the values of left and top to adjust the position of the slogan */
top: 55px; left: 40px;
}
/* header menu */
/*#header-content ul {
/*right: -41px;
top: 68px;
font: bolder 1.3em 'Trebuchet MS', sans-serif;
color: #FFF;
margin: 0;
padding: 0;
width: 589px;
position: absolute;
}
#header-content li {
display: inline;
}
#header-content li a {
float: left;
display: block;
padding: 3px 12px;
color: #FFF;
background-color: #333;
text-decoration: none;
border-right: 1px solid #272727;
}
#header-content li a:hover {
background: #65944A;
color: #FFF;
}*/
#header-content li a#current {
background: #65944A;
color: #FFF;
}
/* header photo */
.headerphoto {
margin: 0 auto;
width: 770px;
height: 200px;
padding: 15px 10px 10px 10px;
background: #FFF url(headerphoto.gif) no-repeat center;
}
/* content */
#content-wrap {
clear: both;
float: left;
width: 100%;
}
#content {
text-align: left;
padding: 0;
margin: 0 auto;
}
/* sidebar */
#sidebar {
float: right;
width: 32%;
margin: 0 0 10px 0; padding: 0;
}
#sidebar h1 {
padding: 10px 0px 5px 10px;
margin: 0;
font: bold 1.3em 'Trebuchet MS', Tahoma, Sans-serif;
}
.sidebox {
background: #F5F5F5;
border: 1px solid #EFEDED;
margin-bottom: 10px;
}
/* sidebar menu */
#sidebar ul.sidemenu {
list-style:none;
margin: 10px 0 15px 0;
padding: 0;
background: #F2F2F2;
}
#sidebar ul.sidemenu li {
padding: 0px 10px;
}
#sidebar ul.sidemenu a {
display:block;
font-weight:normal;
color: #333;
height: 1.5em;
padding:.3em 0 .3em 15px;
line-height: 1.5em;
text-decoration:none;
}
#sidebar ul.sidemenu a.top{
}
#sidebar ul.sidemenu a:hover {
padding: .3em 0 .3em 10px;
border-left: 5px solid #65944A;
color: #65944A;
border-bottom: 1px dashed #D4D4D4;
border-top: 1px dashed #D4D4D4;
}
.rowHover {
color: #336600;
cursor: pointer;
}
/* main */
#main {
float: left;
width: 68%;
margin: 0 0 10px 0; padding: 0;
}
#main h1 {
padding: 10px 0px 0px 5px;
margin: 0 0 0 10px;
border-bottom: 1px solid #f2f2f2;
font: normal 1.5em 'Trebuchet MS', Tahoma, Sans-serif;
}
#main ul li {
list-style-image: url(bullet.gif);
}
.post {
margin: 0; padding: 0;
background: #FFF url(gradientbg.jpg) repeat-x;
border: 1px solid #EFEDED;
}
.post .post-footer {
background-color: #FAFAFA;
border: 1px solid #f2f2f2;
padding: 5px; margin-top: 20px;
font-size: 95%;
}
.post .post-footer .date {
background: url('clock.gif') no-repeat 0 center;
padding-left: 20px; margin: 0 10px 0 5px;
}
.post .post-footer .comments {
background: url('comment.gif') no-repeat 0 center;
padding-left: 20px; margin: 0 10px 0 5px;
}
.post .post-footer .readmore {
background: url('page.gif') no-repeat 0 center;
padding-left: 20px; margin: 0 10px 0 5px;
}
/* footer */
#footer {
clear: both;
margin: 0; padding: 0;
font: normal .95em/1.6em 'Trebuchet MS', Tahoma, Arial, sans-serif;
text-align: left;
}
#footer h1, #footer p { margin-left: 0; }
#footer-content {
border-top: 1px solid #EAEAEA;
margin: 0 auto;
padding-left: 15px;
}
#footer-content a {
text-decoration: none;
color: #777;
}
#footer-content a:hover {
text-decoration: underline;
color: #333;
}
#footer-content ul {
list-style: none;
margin: 0; padding: 0;
}
#footer-content .col {
width: 32%;
padding: 0 5px 30px 0;
}
#footer-content .col2 {
width: 33%;
padding: 0 0 30px 0;
}
/* alignment classes */
.float-left { float: left; }
.float-right { float: right; }
.align-left { text-align: left; }
.align-right {
text-align: right;
background-color: #FAFAFA;
border: 1px solid #f2f2f2;
font-size: 95%;
margin-top: 20px;
}
/* additional classes */
.clear { clear: both; }
.gray { color: #BFBFBF; }
Viele Grüß, marcel Geändert von marthe (29.02.2008 um 18:08 Uhr) 
|
| Sponsored Links |
|
19.09.2007, 22:01
|
||||
|
||||
|
Oje!
Du hast ein wildes Gemisch aus Franes, Tabellen und Divs, das geht schon erstmal ins Auge. Dein Code ist demnach auch extra inavalide: LINK Die Seite, die Du in den Frame lädst: Code:
<frame src="#################################"! scrolling="Auto"> CSS ditto: LINKS AUF WUNSCH DES OP ENTFERNT in oben erwähnter Seite vergisst Du auch den <div id="wrap"> wieder zu schliessen (vor Zeile 243 im Quelltext)! Ob damit der Fehler schon behoben ist, weiss ich ehrlich noch nicht. cu. Geändert von paracelsus (25.07.2008 um 19:39 Uhr)
|
| Sponsored Links |
|
19.09.2007, 22:21
|
|||
|
|||
|
Danke für Deine schnelle Antwort!
Zunächst einmal habe ich schon etwas gelernt, was ich bislang nicht wusste: Man kann also überprüfen, ob der Quelltext fehlerfrei ist oder nicht. Davon bin ich bislang ausgegangen, da das visuelle Ergebnis zufriedenstellend war. Deine Antwor mit dem Frame vertehe ich aber leider nicht. Und zwar habe ich freien Webspace über meine Uni und habe nur eine andere Domain für die Adresse gewählt, die man sich besser merken kann. Weiss nicht, wo jetzt ein Frame eingeht. OKay, ich versuche also erst einmal, die bis hierhin gemachten Fehler zu verbessern und melde mich dann wieder. Welchen prinzipiellen Rat würdest Du mir denn geben, dieses "Wirrwarr" zu bereinigen bzw. zu vermeiden? Viele Grüße, marcel
|
|
19.09.2007, 22:54
|
|||
|
|||
|
Hallo, ich nochmal.
es werden auch Fehler bzgl. align und bgcolor angezeigt. Muss ich da zu Beginn einen anderen Doctype wählen? Falls ja, welchen? Vielen Dank und viele Grüße, Marcel
|
|
19.09.2007, 23:12
|
||||
|
||||
|
verwende css
 Code:
text-align: left; / center; / right; background-color: White; Timo
__________________
Um weitere Erklärungen eingeblendet zu bekommen, drücken Sie bitte die Tastenkombination Alt + F4
|
|
20.09.2007, 00:16
|
||||
|
||||
|
Zitat:
Aber T1mo hat schon recht, das Aussehen von Elementen kannst Du auch im CSS steuern. Gute Hilfe dabei: LINK und dieses Forum (wenn Du schon mittendrin bist) naja, Dein Tohuwabohu ist schon arg. Am besten Du beginnst ersmal damit, Dich über Positionierung UND Boxmodell mit CSS (Buchtipp: Little Boxes - Peter Müller)schlau zu machen, und ignorierst vorerst all Deine "Align" und "bgcolors". Dann fang mal an die Tabellen gegen Elemente - die in CSS definiert sind - zu tauschen. Regel eins dabei: Zitat:
Dieses p wird sodann im Stylesheet definiert! Wenn Du Deine Tabellen gegen Listen und Elemente getauscht hast, reduziere Deinen Div-Salat, siehe oben. Frame: Starte Deine Seite, und lass Dir den Quelltext (Firefox mit installiertem Web Developer -siehe Link ganz unten) anzeigen, was siehst Du? Zitat:
Warum hier niemand mehr Frames mag: LINK Und zu guter Letzt: Besorge Dir unbedingt die Web Developer Toolbar für den Firefox und das Plugin Firebug - dann entgeht Dir kein Fehler mehr. Gute Nacht! Geändert von paracelsus (25.07.2008 um 19:40 Uhr)
|
|
20.09.2007, 09:49
|
|||
|
|||
|
marthe,
IMHO kannst du dieses Frameset abschalten und direkt auf deine Domain (nicht de.vu) weiterleiten lassen. Zum Darstellungsproblem: Im IE6 werden deine Randspalten aufgedrückt. Ein overflow:hidden für #sidebar verhindert das auf die Schnelle. Kontrollier die Breitenangaben in der Randspalte. Die Inhalte sind zu breit, insbesondere die Tabellen.
|
|
20.09.2007, 14:58
|
|||
|
|||
|
Vielen Dank erst einmal allen, die mir helfen möchten!
Bin wirklich begeistert, dass so ein gutes Feedback zurückkommt. Allerdings muss ich zu einigen Tipps noch nachfragen, bevor ich mich an die Änderungen mache. @paracelsus: Soll ich Deiner Meinung nach alle Tabellen durch Listen ersetzen? Ich arbeite mit Dreamweaver und habe eigentlich gedacht, dass ich mit <table>...</table> nichts falsch mache. D.h. im allgemeinen so wenig div-Elemente verwenden wie möglich? @fricca: Deine Antwort verstehe ich leider nicht, da ich blutiger Anfänger bin. Was meinst Du mit "IMHO"? Um das Problem mit dem IE6 in den Griff zu bekommen, sollte ich also zunächst die die Größen der Tabellen bearbeiten (woher weisst Du, dass diese zu groß sind) und anschließend mit "overflow:hidden"? Falls ich bis dahin gelange, werde ich diesbezüglich noch einmal nachfragen. Diese Funktion ist mir zur Zeit noch nicht ganz klar. Viele Grüße, marcel
|
|
20.09.2007, 15:13
|
|||
|
|||
|
Zitat:
Zitat:
overflow:hidden beseitigt das Problem ohne Änderung der Tabellen; es ist ein schneller Fix, der das eigentliche Problem nicht löst. Ich sehe, dass die Boxen zu breit sind, weil sie eine leicht graue Hintergrundfarbe haben. Und ich nutze die von Paracelsus genannten Tools, um Code zu analysieren. edit: ach ja, das Weiß in den Navigationslinks. Der IE kennt den Wert "inherit" nicht, den du für den Hintergrund aller Links angegeben hast. edit2: falsch, inherit ist nicht schuld. Es sind die Li-Elemente, die weiß sind. Und das ist im Hack-Teil deines Menüs für IE auch so angegeben. Geändert von fricca (20.09.2007 um 15:37 Uhr)
|
| Sponsored Links |
|
20.09.2007, 17:35
|
|||
|
|||
|
Hallo zusammen!
ich habe gerade versucht, meinen Quelltext valide zu machen, mit Ausnhame von ailgn, width etc. Allerdings verstehe ich nicht, was in Zeile 40, 57, 237, 244 bzw. 245 bemängelt wird. Könnt ihr mir da helfen? Vielen Dank vorab, Marcel
|
| Sponsored Links |
 |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Diverse Probleme in IE6 und IE7 | shredder01 | CSS | 6 | 13.03.2010 12:56 |
| Probleme mit dem Border im IE6 | bullseye | CSS | 9 | 30.10.2007 16:21 |
| probleme mit float:left und listenhintergrund im IE6 | Eppi | CSS | 2 | 04.12.2006 13:10 |
| (Newbie): Probleme mit Abständen - IE6 + Firefox | NullDevice | CSS | 6 | 15.07.2006 20:22 |
| Probleme beim rendering mit IE6 | sileo | CSS | 24 | 18.10.2005 22:00 |
Linear-Darstellung
