• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

css-layout - browserkompatibilität

S

sileo

New member
hallo!

ich habe probleme mit der position von div-layer in verschiedenen browsern. konkret finde ich keinen weg es sowohl dem firefox als auch dem ie recht zu machen.

test.endeavor.ch

die boxen links und rechts sollten eigentlich so sein wie im firefox. die positionierung des footers relativ zu den boxen rechts funktioniert hingegen mit dem ie.

hier der quelltext:
HTML: 
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>endeavor.ch</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
	margin: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	text-align: center;
}
#page {
	position:absolute;
	top: 0px;
	left:50%;
	margin-left: -500px;
	width: 1000px;
	text-align: left;
}
#left {
	position: relative;
	left: 25px;
	width: 200px;
	text-align: left;
}
#main {
	position: absolute;
	left: 210px;
	top: 7px;
	width: 740px;
	background-color: #FFFFFF;
}
#right {
	border: 1px solid #990033;
	position: relative;
	top: 0px;
	left: 546px;
	width: 184px;
	height: 400px;
}
#footer {
	text-align: center;
	position: relative;
	top: 20px;
	width: 100%;
	background-color: #FFFFFF;
	padding-bottom: 5px;
}
#footer .nav {
	color: #999999;
	font-size: 7pt;
	text-transform: uppercase;
}
#footer .copyright {
	color: #990033;
	font-size: 7pt;
}
#header {
	width: 740px;
	height: 23px;
	background-color: #BCBCBC;
}
#breaking_news .date {
	font-weight: bold;
	margin-left: 10px;
}
#breaking_news .content {
	width: 184px;
	margin: 0px;
	padding: 0px;
	background-image: url(box_bgd.gif);
	background-position: left top;
	background-repeat: no-repeat;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
}
#breaking_news .news {
}
#upcoming_events .content {
	width: 184px;
	margin-top: 0px;
	padding: 0px;
	background-image: url(box_bgd.gif);
	background-position: left top;
	background-repeat: no-repeat;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
}
#upcoming_events {
	margin-top: 15px;
}
#potm .content {
	width: 184px;
	margin-top: 0px;
	padding: 0px;
	background-image: url(box_bgd.gif);
	background-position: left top;
	background-repeat: no-repeat;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
}
#potm {
	margin-top: 15px;
}
#hot_album .content {
	width: 175px;
	margin-top: 0px;
	padding: 0px;
	position: relative;
	left: 5px;
	background-color: #BCBCBC;
	border: 2px solid #FFFFFF;
}
#hot_album {
	margin-top: 15px;
}
#login .content {
	width: 175px;
	margin-top: 0px;
	padding: 0px;
	position: relative;
	left: 5px;
	background-color: #BCBCBC;
	border: 2px solid #FFFFFF;
}
#login {
	margin-top: 15px;
}
#next {
	margin-top: 10px;
}
#next .content {
	height: 200px;
	background-color: #BCBCBC;
}
#win {
	margin-top: 10px;
}
#win .content {
	height: 50px;
	background-color: #BCBCBC;
}
#past {
	margin-top: 10px;
}
#past .content {
	height: 150px;
	background-color: #BCBCBC;
}
-->
</style>
</head>

<body bgcolor="#000000">
<div id="page">
  <div id="banner">
    <img src="header.gif">
  </div>
  <div id="left"> 
    <div id="breaking_news"> <img src="top_news.gif" width="184" height="30"> 
      <div class="content"> 
        <!-- 	  <img src="boarder_left.gif" align="left">
        <img src="boarder_right.gif" align="right"> -->
        <div class="news"> <span class="date">06.03.2005 - 13:00</span><br>
          <span class="text">i'm stock...</span> </div>
        <div class="news"> <span class="date">06.03.2005 - 13:00</span><br>
          <span class="text">i'm stock...</span> </div>
        <div class="news"> <span class="date">06.03.2005 - 13:00</span><br>
          <span class="text">i'm stock...</span> </div>
      </div>
    </div>
    <div id="upcoming_events"> <img src="top_upevent.gif" width="184" height="30"> 
      <div class="content"> 
        <div class="news"> <span class="date">06.03.2005 - 13:00</span><br>
          <span class="text">i'm stock...</span> </div>
        <div class="news"> <span class="date">06.03.2005 - 13:00</span><br>
          <span class="text">i'm stock...</span> </div>
      </div>
    </div>
    <div id="potm"> <img src="top_pimp.gif" width="184" height="30"> 
      <div class="content"> 
        <div class="news"> <span class="date">06.03.2005 - 13:00</span><br>
          <span class="text">i'm stock...</span> </div>
        <div class="news"> <span class="date">06.03.2005 - 13:00</span><br>
          <span class="text">i'm stock...</span> </div>
      </div>
    </div>
    <div id="hot_album"> <img src="top_hot.gif" width="184" height="30"> 
      <div class="content"> 
        <div class="news"> <span class="date">06.03.2005 - 13:00</span><br>
          <span class="text">i'm stock...</span> </div>
        <div class="news"> <span class="date">06.03.2005 - 13:00</span><br>
          <span class="text">i'm stock...</span> </div>
      </div>
    </div>
    <div id="login"> <img src="top_member.gif" width="184" height="30"> 
      <div class="content"> 
        <div class="news"> <span class="date">06.03.2005 - 13:00</span><br>
          <span class="text">i'm stock...</span> </div>
        <div class="news"> <span class="date">06.03.2005 - 13:00</span><br>
          <span class="text">i'm stock...</span> </div>
      </div>
    </div>
  <div id="main"> 
    <div id="header"></div>
    <div id="content"></div>
    <div id="right">
	  <div id="next"><img src="top_next.gif">
	    <div class="content">
		  
		</div>
	  </div>
	  <div id="win"><img src="top_win.gif"> 
        <div class="content">
		  
		</div>
	  </div>
	  <div id="past"><img src="top_past.gif""> 
        <div class="content">
		  
		</div>
	  </div>
	</div>
    <div id="footer">
	  <span class="nav">Programm | News | Forum | Gallery | Endeavor | Kontakt | Links</span><br>
	  <hr width="80%">
	  <span class="copyright">all content © ENDEAVOR 2005, Brugg, Switzerland<br>all rightsreserved</span>
	</div>
  </div>
</div>
</body>
</html>

kann mir jemand weiterhelfen? wäre sehr dankbar!

gruss, marco
 
Zuletzt bearbeitet:
kann mir da niemand weiterhelfen? das ganze ist für mich relativ dringend und ich wäre sehr froh, wenn mirjemand einen tipp hätte!

gruss, marco
 
nun gut, zumindes teilweise sind die probleme jetzt gelöst.

leider aber weiss ich nicht, wie ich den content bereich (weiss) so hinkriegen kann, dass die weisse box sogross ist, das der inhalt platz hat. egal ob der eigentliche inhalt oder die boxen rechts mehr platz beanspruchen.

wenn ich den container für die boxen relativ positioniere, ist er nicht auf gleicher höhe wie der inhalt links davon und wenn ich ihn absolut positioniere passt sich die weisse box nicht mehr der länge der boxen an.

hiiiilllfffeeeeee!?!!?

aussehen sollte das ganze schlussendlich wie hier: endeavor.ch
der quelltext sieht mittlerweile wie folgt aus:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>endeavor.ch</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
	margin: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 7pt;
	background-color: #000000;
}
#page {
	position:absolute;
	top: 0px;
	left:50%;
	margin-left: -500px;
	width: 1000px;
	text-align: left;
}
#nav {
	position: absolute;
	top: 130px;
	left: 235px;
}
#left {
	position: relative;
	left: 25px;
	width: 200px;
	text-align: left;
	padding: 0px;
	margin: 0px;
}
#main {
	position: absolute;
	left: 230px;
	top: 160px;
	width: 740px;
	background-color: #FFFFFF;
	height: auto;
}
#body {
	position: relative;
	height: auto;
	border: 2px solid #FFFF00;
}
#right {
	width: 184px;
	height: auto;
	border: 2px solid #FFFF00;
	float: right;
}
#footer {
	text-align: center;
	position: relative;
	top: 20px;
	width: 100%;
	background-color: #FFFFFF;
	padding-bottom: 5px;
}
#footer .nav {
	color: #999999;
	font-size: 7pt;
	text-transform: uppercase;
}
#footer .copyright {
	color: #990033;
	font-size: 7pt;
}
#header {
	width: 740px;
	height: 23px;
	background-color: #BCBCBC;
}
.top_pic {
	display: block;
}
#breaking_news .content {
	width: 175px;
	margin-top: 0px;
	padding: 0px;
	position: relative;
	left: 5px;
	background-color: #BCBCBC;
	border: 2px solid #FFFFFF;
}
#breaking_news .news {
	margin: 10px 10px 10px 10px;
}
#breaking_news .date {
	font-weight: bold;
}
#upcoming_events {
	padding: 0px;
	margin-top: 15px;
}
#upcoming_events .content {
	width: 175px;
	margin-top: 0px;
	padding: 0px;
	position: relative;
	left: 5px;
	background-color: #BCBCBC;
	border: 2px solid #FFFFFF;
}
#upcoming_events .events {
	margin: 10px 10px 10px 10px;
}
#upcoming_events .date {
	font-weight: bold;
}
#potm {
	margin-top: 15px;
}
#potm .content {
	width: 175px;
	margin-top: 0px;
	padding: 0px;
	position: relative;
	left: 5px;
	border: 2px solid #FFFFFF;
	vertical-align: middle;
}
#potm .td_pic {
	padding: 5px;
}
#potm .pic {
	border: 1px solid #FFFFFF;
}
#potm .text {
	padding: 5px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 7pt;
	color: #FFFFFF;
}
#hot_album {
	margin-top: 15px;
}
#hot_album .content {
	width: 175px;
	margin-top: 0px;
	padding: 0px;
	position: relative;
	left: 5px;
	border: 2px solid #FFFFFF;
}
#hot_album .td_pic {
	padding: 5px;
}
#hot_album .pic {
	border: 1px solid #FFFFFF;
}
#hot_album .text {
	padding: 5px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 7pt;
	color: #FFFFFF;
}
#login {
	margin-top: 15px;
}
#login .content {
	width: 175px;
	position: relative;
	left: 5px;
	border: 2px solid #FFFFFF;
}
#login .body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 7pt;
	color: #FFFFFF;
	width: 100%;
}
#login .foot {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 7pt;
	color: #FFFFFF;
	width: 100%;
}
#login input {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 7pt;
}
#login .checkbox {
	vertical-align: middle;
}
#login .button {
	vertical-align: middle;
	background-color: #666666;
	color: #CCCCCC;
	border: solid 2px #CCCCCC;
}
#login .right_row {
	text-align: right;
}
#login .textbox {
}
#next {
	padding-top: 10px;
}
#next .content {
	height: 200px;
	background-color: #BCBCBC;
}
#win {
	padding-top: 10px;
}
#win .content {
	height: 50px;
	background-color: #BCBCBC;
}
#past {
	padding-top: 10px;
}
#past .content {
	height: 150px;
	background-color: #BCBCBC;
}
-->
</style>
</head>

<body>
<div id="page">
  <div id="banner">
    <img src="header.gif" alt="" />
	<div id="nav">
	  <img src="nav_programm.gif" alt="" />
	  <img src="nav_news.gif" alt="" /> 
      <img src="nav_forum.gif" alt="" />
	  <img src="nav_gallery.gif" alt="" />
	  <img src="nav_endeavor.gif" alt="" /> 
      <img src="nav_kontakt.gif" alt="" />
	  <img src="nav_links.gif" alt="" />
	</div>
  </div>
  <div id="left"> 
    <div id="breaking_news"> <img src="top_news.gif" width="184" height="30" class="top_pic" alt="" /> 
      <div class="content"> 
        <div class="news"> <span class="date">06.03.2005 - 13:00</span><br/>
          <span class="text">i'm stock...</span> </div>
        <div class="news"> <span class="date">06.03.2005 - 13:00</span><br/>
          <span class="text">i'm stock...</span> </div>
        <div class="news"> <span class="date">06.03.2005 - 13:00</span><br/>
          <span class="text">i'm stock...</span> </div>
      </div>
    </div>
    <div id="upcoming_events"> <img src="top_upevent.gif" width="184" height="30" class="top_pic" alt="" /> 
      <div class="content"> 
        <div class="events"> <span class="date">06.03.2005 - 13:00</span><br/>
          <span class="text">i'm stock...</span> </div>
        <div class="events"> <span class="date">06.03.2005 - 13:00</span><br/>
          <span class="text">i'm stock...</span> </div>
      </div>
    </div>
    <div id="potm"><img src="top_pimp.gif" class="top_pic" alt="" /> 
      <div class="content"> 
        <table>
          <tr> 
            <td class="td_pic"><img src="potm_kunz.gif" class="pic" alt="" /></td>
            <td class="text"><b>Marco</b>Kunz, Brugg, AG, 21, still horny<br/><br/><b>likes:</b><br/>pimps, snowboarding and his Polo</td>
          </tr>
        </table>
      </div>
    </div>
    <div id="hot_album"> <img src="top_hot.gif" class="top_pic" alt="" /> 
      <div class="content"> 
        <table>
          <tr> 
            <td class="td_pic"><img src="sparta.gif" class="pic" alt="" /></td>
            <td class="text"><b>Sparta</b>Porcelain<br/>release date:<br/>07.13.2004<br/><br/>[more]</td>
          </tr>
        </table>
      </div>
    </div>
    <div id="login"> <img src="top_member.gif" width="184" height="30" class="top_pic" alt="" /> 
      <div class="content"> 
        <table class="body" cellspacing="5">
          <tr> 
            <td>Username:</td>
            <td class="right_row"><input name="username" type="text" maxlength="20" size="16" class="textbox" /></td>
          </tr>
          <tr> 
            <td>Password:</td>
            <td class="right_row"><input name="password" type="password" maxlength="20" size="16" class="textbox" /></td>
          </tr>
        </table>
        <table class="foot" cellspacing="5">
          <tr> 
            <td>Remember me: 
              <input name="remember" type="checkbox" class="checkbox" value="1" /></td>
            <td class="right_row"><input name="log in" type="button" class="button" value="log in" /></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
  <div id="main">
    <div id="header"></div>
    <div id="body">
	    <div id="whatsup">
	  	  <div class="head"><img src="head_whatsup.gif" alt="" /></div>
		  <div class="text">
		    <table>
		      <colgroup>
		        <col class="left" />
			    <col class="right" />
		      </colgroup>
			  <tr>
				<td>25.06.07</td>
				<td>dä hansli und dä heiri planäd ä chrüzfahrt ufäm totämeer! ob öppis drus wird isch in höchschtem masse fragwürdig. mirhaltäd eu jedäfalls ufäm laufendä.</td>
			  </tr>
			  <tr>
				<td>09.08.08</td>
				<td>d'pimps sind scho lang national bekannt für diä geilschtä partys und diä edelschtä konzis. let's rock!</td>
			  </tr>
		    </table>
		  </div>
	    </div>
      <div id="right"> 
        <div id="next"><img src="top_next.gif" alt="" /> 
          <div class="content"> </div>
        </div>
        <div id="win"><img src="top_win.gif" alt="" /> 
          <div class="content"> </div>
        </div>
        <div id="past"><img src="top_past.gif" alt="" /> 
          <div class="content"> </div>
        </div>
      </div>
	</div>
    <div id="footer">
	  <span class="nav">Programm | News | Forum | Gallery | Endeavor | Kontakt | Links</span><br/>
      <hr width="80%" />
      <span class="copyright">all content © ENDEAVOR 2005, Brugg, Switzerland<br/>all rights reserved</span>
	</div>
  </div>
</div>
</body>
</html>
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben