mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Sa 03.12.2016 15:06 Benutzername: Passwort: Auto-Login

Thema: CSS: Probleme bei der Darstellung beim IExplorer vom 28.12.2005


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS: Probleme bei der Darstellung beim IExplorer
Autor Nachricht
Batchu
Threadersteller

Dabei seit: 06.12.2005
Ort: -
Alter: 35
Geschlecht: Männlich
Verfasst Mi 28.12.2005 17:33
Titel

CSS: Probleme bei der Darstellung beim IExplorer

Antworten mit Zitat Zum Seitenanfang

Ein freundliches Hallöchen erstmal an alle,
ich habe ein Design erstellt und dann mit einem schlichten Editor versucht das Ganze zu coden, bzw. ein Layout zu erstellen. Jetzt habe ich einige Probleme bei der Darstellung unter dem Browser Internet Explorer.

1. es ist ein komischer Abstand da
2. ein merkwürdiger und nicht so schöner Zeilenumbruch

Unter Mozilla Firefox, sieht das Ganze einiger maßen in Ordnung aus:



so nun aber die Probleme bei der Darstellung unter dem IE:



Ich bin kein Profi und das ist mein erstes Design und die ersten ernstn Codingversuche. Würde mich freuen, wenn mir jemand weiterhelfen könnte.


Index.html

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

<head>
<meta name="author" content="Roman">

<title>Design - your life !</title>
<!--[if IE]>
<link rel="stylesheet" type="text/css" title="IE Bugfixing Stylesheet" href="style_ie.css" media="screen" />
<![endif]-->


<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>


<div id="content">

<!--  Header  -->
<span id="header">&nbsp;</span>


<!--  Navigation  -->
<ul class="navi">
<li><a href="#" id="navi1">&nbsp;</a></li>
<li><a href="#" id="navinews">&nbsp;</a></li>
<li><a href="#" id="navirefer">&nbsp;</a></li>
<li><a href="me.html" id="navime">&nbsp;</a></li>
<li><a href="#" id="navilinks">&nbsp;</a></li>
<li><a href="#" id="naviartwork">&nbsp;</a></li>
<li><a href="#" id="navi2">&nbsp;</a></li>
</ul>

<!-- Line -->


<!--  Content  -->
<div id="main">
<div id="news1">&nbsp;</div>
<div id="news2">&nbsp;</div>
<div id="box1">
<span id="text1">29.12.2005</span>
<br><span id="text2">Ein freundliches Hallo du anonymes Wesen, es freut mich,
dass du auf meine Website gestossen bist. Wie du siehst funktioniert
noch nicht alles, aber ich freue mich über jeden Besuch auf meiner
Website und hoffe, dass du öfters mal hier reinschaust.</span></br>

</div>
<div id="box2">
<br></br>
<img src="file3.jpg" width="252" height="225" />
</div>
</div>

<!--  Footer  -->
<div id="footer">
<div id="kontakt"></div>
<div id="box3">

<ul class="kontakt">
<li>Roman Tscherkasski</li>
<li>e-mail: R.Tscherkasski@gmx.de</a></li>
<li>ICQ: 220339157 </a></li>
<li>www:</a></li>
<li><a href="http://www.design-life.de.vu" id="link" target="_blank">www.design-life.de.vu</a></li>
<li><a href="http://www.batchu.de.vu" id="link" target="_blank">www.batchu.de.vu</a></li>
</ul>

</div>
<div id="box4">&nbsp;</div>
</div>

<!-- Footer2 -->
<div id="foot">&nbsp;</div>

</div>
</body>
</html>




Style.css

Code:

/* Background Images */
body {
margin:0;
padding:0;
background-color:#351C10;
background-repeat:repeat-y;
background-position:center;
background-image:url(body_bg2.jpg);
color: #525252;
font-family:Verdana, Arial, Helvetica, sans-serif, tahoma;
}



/* Page centered */
div#content {
width:575px;
margin:auto;
}



/* Header */
span#header {
margin:auto;
padding:auto;
width:555px;
height:127px;
display:block;
background-position:center;
background-repeat:no-repeat;
background-image:url(header2.jpg);
}




/* Navigation */

ul.navi {
    margin:0;
    padding:0;
    list-style-type:none;
    }

ul.navi li {
    float:left;
    }

.navi a {
       display:block;
       text-decoration:none;
}


a#navi1 {
width:8px;
height:38px;
background-image:url(1.jpg);
}

a#navinews {
width:111px;
height:38px;
background-image:url(news.jpg);
}
a#navirefer {
width:111px;
height:38px;
background-image:url(refer.jpg);
}
a#navime {
width:113px;
height:38px;
background-image:url(me.jpg);
}
a#navilinks {
width:112px;
height:38px;
background-image:url(links.jpg);
}
a#naviartwork {
width:109px;
height:38px;
background-image:url(artwork.jpg);
}

a#navi2 {
width:9px;
height:38px;
background-image:url(2.jpg);
}

/* Lines */
div#line {
height:4px;
display:block;
background-color:#351C10;
}


/* Inhalt main*/
div#main {
margin:auto;
padding:auto;
width:555px;
height:355px;
background-color::#4E4742;
background-repeat:repeat-y;
}

div#news1 {
margin:auto;
padding:auto;
float:left;
width:295px;
height:26px;
background-image:url(news1.jpg);
}

div#news2 {
margin:auto;
padding:auto;
float:left;
width:260px;
height:26px;
background-image:url(news2.jpg);
}

div#box1 {
float:left;
width:295px;
height:285px;
background-color:#655D59;
}

div#box2 {
float:left;
width:260px;
height:285px;
background-color:#655D59;
}


/* Footer */

div#footer {
margin:auto;
padding:auto;
width:555px;
height:158px;
background-color:#433D39;
background-repeat:repeat-y;
}


div#kontakt {
margin:auto;
padding:auto;
float:left;
width:555px;
height:18px;
background-image:url(kontakt.jpg);
}

div#box3 {
float:left;
width:295px;
height:133px;
background-color:#443D39;
}

div#box4 {
float:left;
width:260px;
height:133px;
background-color:#443D39;
}

/* Footer 2*/
div#foot {
margin:auto;
padding:auto;
width:555px;
height:22px;
display:block;
background-image:url(footer.jpg);
}


/* Text*/
span#text1 {
   font-family: tahoma;
   font-size: 10px;
   font-weight: bold;
   color: orange;
}

span#text2 {
   font-family: tahoma;
   font-size: 10px;
   font-weight: bold;
   color: white;
}

span#text3 {
   font-family: tahoma;
   font-size: 10px;
   font-weight: bold;
   color: white;
   white-space:pre
}


/* Kontakt */

ul.kontakt {
       margin:10px;
       padding:10px;
       list-style-type:none;
   font-family: tahoma;
   font-size: 10px;
   font-weight: bold;
   color: white;
   
    }


/* Hyperlinkformatierung */

a#link {
   font-family: tahoma;
   font-size: 10px;
   color: red;
   font-weight: bold;
}



Hab die Page ist erreichbar unter:
http://www.design-life.de.vu

Danke Euch und ein frohes Neues Jahr!
  View user's profile Private Nachricht senden
dastef

Dabei seit: 03.11.2003
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 28.12.2005 17:47
Titel

Antworten mit Zitat Zum Seitenanfang

ich weis zwar bei gott nicht warum jeder denkt, css wäre irgendwas
mit "programmierung" oder so .. aber wie dem auch sei .. ich
schiebs mal rüber » Allgemeines - Nonprint!
  View user's profile Private Nachricht senden
Anzeige
Anzeige
rob

Dabei seit: 11.12.2003
Ort: ~/
Alter: 39
Geschlecht: Männlich
Verfasst Mi 28.12.2005 18:44
Titel

Antworten mit Zitat Zum Seitenanfang

jag deinen code erstmal durch einen validator.
da sind noch fehler drin. wenn die behoben sind, kann man noch mal schauen, ob da noch darstellungsfehler auftreten.

du verwendest die html 4.01 transitional dtd, dann folgt aber xhtml-code. du gibst sogar einen xhtml-namespace an...

dann sehe ich das du die id "link" gleich mehrfach vergeben hast. eine id muß immer eindeutig sein. die darf nicht mehrfach vorkommen. hier solltest du eine klasse einsetzen.

deinen image-tags fehlen alt-attribute. das hat zwar nichts mit deiner darstellung zu tun, ist aber halt ein fehler. alt-attribute darf man zwar leer lassen, aber nicht weglassen, wenn man gültigen code schreiben will.

br ist ein inhaltsleeres tag. das solltest du in xhtml am besten als <br/> schreiben und nicht als <br></br>. ich könnte mir vorstellen, daß einige html-parser das nicht mögen und hier eventuell doppelte zeilenumbrüche fabrizieren... du verwendest ja eine html-dtd und keine xhtml-dtd...
würdest du eine xhtml-dtd verwenden, würden im übrigen noch mehr fehler auftreten, weil du tags wie meta nicht mit einem / abschliesst...

ich würde dazu raten, die xhtml 1.0 strict-dtd zu verwenden, den code durch den w3c-validator zu jagen und dann alle gemeldeten fehler zu korrigieren.

dann zur css:

bei den schriften sollte der generische schrifttyp immer als letztes angegeben werden.
also
font-family:Verdana, Arial, Helvetica, tahoma, sans-serif;
statt
font-family:Verdana, Arial, Helvetica, sans-serif, tahoma;
ansonsten macht diese angabe nicht soviel sinn...
eine generische schriftart (serif, sans-serif, monospace) sollte übrigens zur sicherheit immer angegeben werden. das tust du aber nicht überall.

dann hast du da wohl einige elemente, die du mit css falsch formatierst. wenn ich das beim überfliegen des codes so sehe, hast du da einige inline-elemente, denen du eigenschaften zuordnest, die nur boxen haben.
ein block-level-element erzeugt immer eine eigene box (mit margin, padding, border, ...), inline-elemente wie a oder span aber halt nicht.

dann versuchst du trennlinien mit leeren divs zu erzeugen? wieso benutzt du dazu nicht einfach das element hr und formatierst es entsprechend?

naja, aber wie gesagt: erst mal validator und fehler korrigieren und dann noch mal weiter schauen...


Zuletzt bearbeitet von rob am Mi 28.12.2005 18:46, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen [css] Probleme mit Darstellung im IE6
Probleme bei der Darstellung mit css in Dreamwaver
probleme im internet explorer beim darstellung? css fehler?
css horizontale navigation im iexplorer 7 verschoben
[Safari] Probleme bei Darstellung
ie 8 darstellung css
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.