Hilfe! Darstellungsprobleme in IE und Opera

Status
Nicht offen für weitere Antworten.
S

Sickless

Grünschnabel
Hallo alle zusammen,
wäre wirklich nett wenn sich jemand Zeit für mich nimmt,
ich werde einfach nicht schlauer :rolleyes:

Ich hab versucht ne Page nach einem Tutorial zu bauen,
was auch eig. ganz gut geklappt hat, bloß am Ende gibts schwerwiegende
Darstellungsprobleme in IE und Opera, in Opera sieht es teilweise schon zu 95%
richtig aus...!

also:

Das wäre mein gemachtes Template

Versucht diese Seite mal in 2 Browsern anzeigen zu lassen!

1. Im IE zum Beispiel, zeigt er Newsboxes unter meinem Navi Menü an,
2. Meine Newsteile (Überschrift & Newsbox) haben minimale Verschiebungen und ich bekomme es einfach nicht hin !
3. der lange dünne Content Banner hat im Opera die perfekte Höhe,
im IE dagegen wird er einundhalb Mal angezeigt
und 4. links bei den Links wird der Banner im Opera nur zur Hälfte mit dem hellblau eingedeckt, im IE dagegen richtig, sprich : von oben bis unten is der BG hellblau...

Leute ich komm einfach nicht mehr weiter und hoffe schwer auf eure Hilfe !
Hier sind noch die HTML und CSS Sheets !
(Ich habe auch ein extra CSS Sheet für IE, so wie im Tut beschrieben,
doch leider funktioniert es nicht einwandfrei)

HTML:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" /> 
        <title>Clantemplate 1 - sicK Designz</title> 
        <link rel="stylesheet" type="text/css" media="screen" href="./inc/style.css" /> 
		<!--[if IE]>
		<link rel="stylesheet" type="text/css" title="IE Bugfixing Stylesheet" href="./inc/style_ie.css" media="screen" />
		<![endif]-->
        <style type="text/css">
<!--
.Stil1 {color: #FFFF00}
.Stil3 {color: #00FF40}
.Stil4 {color: #FF0000}
-->
        </style>
    </head> 
    <body alink="#0000CC" vlink="#0000CC" link="#0000CC"> 
        <div id="background"> 
            <div id="content"> 
                <span id="header">&nbsp;</span> 
                <div id="boxes"> 
                    <table summary="4 Latest News" id="last_news"> 
                        <tr> 
                            <td class="date">Datum</td> 
                            <td id="titel">Titel</td> 
                        </tr> 
                        <tr> 
                            <td class="date">23.01.2003</td> 
                            <td>test</td> 
                        </tr> 
                        <tr> 
                            <td class="date">23.01.2004</td> 
                            <td>test</td> 
                        </tr> 
                        <tr> 
                            <td class="date">23.01.2005</td> 
                            <td>test</td> 
                        </tr> 
                        <tr> 
                            <td class="date">23.01.2006</td> 
                            <td>test</td> 
                        </tr> 
                    </table> 
                    <table summary="4 Latest Wars" id="last_wars"> 
                        <tr> 
                            <td class="date">Datum</td> 
                            <td class="clan">Clan</td> 
                            <td id="vs">vs</td> 
                            <td class="clan">Clan</td> 
                            <td class="ergebnis">Ergebnis</td> 
                        </tr> 
                        <tr> 
                            <td class="date">23.01.2003</td> 
                            <td>sicK</td> 
                            <td>vs</td> 
                            <td>gfx</td> 
                            <td><span class="Stil1">15:15</span></td> 
                        </tr> 
                        <tr> 
                            <td class="date">23.01.2004</td> 
                            <td>sicK</td> 
                            <td>vs</td> 
                            <td>gfx</td> 
                            <td><span class="Stil3">16:14</span></td> 
                        </tr> 
                        <tr> 
                           <td class="date">23.01.2005</td> 
                            <td>sicK</td> 
                            <td>vs</td> 
                            <td>gfx</td> 
                            <td><span class="Stil4">14:16</span></td> 
                        </tr> 
                        <tr> 
                            <td class="date">23.01.2006</td> 
                            <td>sicK</td> 
                            <td>vs</td> 
                            <td>gfx</td> 
                            <td><span class="Stil1">15:15</span></td> 
                        </tr> 
                    </table> 
                    <div id="login"> 
                        <form action="?section=login" method="post"> 
                            <fieldset> 
                                <span class="dark">Name / Nick:</span>&nbsp;<input type="text" name="nick" class="login" /><br /> 
                                <span class="dark">Password:</span>&nbsp;<input type="password" name="pass" class="login" /><br /> 
                                <span class="dark">Login:</span>&nbsp;<input type="submit" name="login" class="login" value="Login"/> 
                            </fieldset> 
                        </form> 
                    </div> 
                </div> 
          	 <span id="boxes_foot">&nbsp;</span>
			 <span id="obnews">&nbsp;</span>
			 <span id="ticker">
			<center><marquee scrollamount="2" scrolldelay="50" behavior="scroll" width="700" height="16" 
			style="font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; font-size: 10">
			 sicK Clantemplate Vol.1  ... Test ... Test ... Test ... Test ... sicK Clantemplate Vol.1
			 </marquee></center>
			 
			 </span>
			 <span id="unnews">&nbsp;</span>
			 <div id="nav2"> 
                    <ul> 
                        <li id="nav2_top">&nbsp;</li> 
                        <li><a href="#">Ein Link</a></li> 
                        <li><a href="#">Ein Link</a></li> 
                        <li><a href="#">Ein Link</a></li> 
                        <li><a href="#">Ein Link</a></li> 
                        <li><a href="#">Ein Link</a></li> 
						<li><a href="#">Ein Link</a></li> 
                        <li><a href="#">Ein Link</a></li> 
                        <li><a href="#">Ein Link</a></li> 
                        <li><a href="#">Ein Link</a></li> 
                        <li><a href="#">Ein Link</a></li> 
                        <li id="nav2_links">&nbsp;</li> 
                        <li><a href="http://www.sickeda" target="_blank">
						<img src="http://home.arcor.de/sickless/KleinBanner.jpg"></a></li> 
                        </ul> 
                </div>
         </div>
		 <div id="main">
<span id="content_top"></span>
<h2>Eine Testnews</h2>
<div class="news">
<p>
Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext
</p>
<ul>
<li>Geschrieben von nem Sickless</li>
<li>Geschrieben an einem Datum</li>
<li><a href="http://www.sickeda">www.sickeda</a></li>
</ul>
<br style="clear:both;" />
</div>
<h2>Eine Testnews</h2>
<div class="news">
<p>
Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext Ganz viel Newstext
</p>
<ul>
<li>Geschrieben von nem Sickless </li>
<li>Geschrieben an einem Datum</li>
<li><a href="http://www.sickeda">www.sickeda</a></li>
</ul>
<br style="clear:both;" />
</div>
<h2>&nbsp;</h2>
</div>
    </body> 
</html>

CSS:
HTML: 
body {
margin:0;
padding:0;
background-color:#04050D;
background-repeat:repeat-y;
background-position:center;
background-image:url(../images/body_bg.gif);
color:#FFFFFF;
}

div#background {
background-position:top;
background-repeat:repeat-x;
background-image:url(../images/content_bg.gif);
}

div#content {
width:789px;
margin:auto;
font-size:11px;
}
span#header {
width:789px;
height:179px;
display:block;
background-repeat:no-repeat;
background-image:url(../images/header.gif);
}

div#boxes {
height:91px;
overflow:hidden;
background-repeat:repeat-y;
background-image:url(../images/boxes.gif);
}
table#last_news {
float:left;
width:230px;
margin-left:37px;
}
table#last_wars {
float:left;
width:180px;
margin-left:39px;
}
td.date {
width:75px;
background-color:#191A3E;
} 
td.clan { 
width:40px;
background-color:#191A3E;
}
td#vs {
width:20px;
background-color:#191A3E;
}
td.ergebnis {
width:80px;
background-color:#191A3E;
}
td#titel {
width:150px;
background-color:#191A3E;
} 
div#login {
float:left;
margin-top:10px;
margin-left:40px;
}
.dark {
height:16px;
width:75px;
float:left;
display:block;
background-color:#191A3E;
}
input.login {
width:130px;
height:16px;
color:#000000;
font-size: 8pt;
color:#FFFFFF;
border:1px #31425C solid;
background-color:#191A3E;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
fieldset {
border:0;
margin:0;
padding:0;
}

span#boxes_foot {
width:789px;
height:21px;
display:block;
background-repeat:no-repeat;
background-image:url(../images/boxes_foot.gif);
}
span#obnews {
width:789px;
height:5px;
display:block;
background-repeat:no-repeat;
background-image:url(../images/template_10.gif);
}
span#ticker {
width:789px;
height:18px;
display:block;
background-repeat:no-repeat;
background-image:url(../images/newsticker.gif);
}
span#unnews {
width:789px;
height:20px;
display:block;
background-repeat:no-repeat;
background-image:url(../images/template_12.gif);
}

#nav2 {
float:left;
padding-left:25px;
}
#nav2 ul {
padding:0px;
margin:0px;
list-style-type:none;
}
#nav2 li {
margin-top:1px;
}
li#nav2_top {
width:135px;
height:14px;
background-image:url(../images/navi.gif);
}
li#nav2_links {
width:136px;
height:14px;
background-image:url(../images/banner.gif);
text-align:center;
}

#nav2 a {
width:135px;
text-align:center;
height:14px;
color:#FFFFFF;
display:block;
text-decoration:none;
background-color:#587095;
}
#nav2 a:hover, #nav2 a:active {
background-color:#7392b5;
}



div#main {
float:left;
width:574px;
margin:0px 0 0 10px;
}
span#content_top {
height:14px;
display:block;
background-image:url(../images/content.gif);
}
h2 {
width:558px;
color:#FFFFFF;
margin:2px 0 0 0px;
text-align:right;
padding-right:15px;
font-size:12px;
background-color:#587095;
border-left:1px solid #21344A;
border-right:1px solid #21344A;
}
div.news {
width:572px;
color:#FFFFFF;
font-size:10px;
margin:2px 0 0 1px;
background-color:#587095;
border-left:1px solid #21344A;
border-right:1px solid #21344A;
}
.news p {
margin:0;
padding:5px;
float:right;
width:380px;
color:#FFFFFF;
background-color:#39516B;
}
.news ul {
margin:0px;
margin-left:2px;
padding:0;
list-style-type:none;
font-size:10px;
}

Style_ie.css
HTML: 
table#last_news {
margin-left:15px;
}

Viele Grüße Alex
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück