Problem mit dreispaltigem CSS

Rainingman · 6. Juni 2006

Hallo!

ich habe folgende Probleme:

Ich nutze ein dreispaltiges festes Layout. Nun habe ich das Problem, dass die Abstände zwischen den drei Spalten unterschiedlich groß sind. Wähle ich den Abstand in Content kleiner (1006px wären eigentlich 100%), so funktioniert das zwar im Firefox sowie im Safari, aber im Internetexplorer bricht die Box unter die mittlere Spalte

.

Weiterhin habe ich das Problem, dass im IE mein iFrame grau hinterlegt wird, während beim Firefox, Camino, Safari alles ordentlich dargestellt wird.

Könnt ihr mir helfen? Ich bin schon sehr verzweifelt

http://www.stammeshueter.javaengel.de/lindex

// edit 1

Styles.css

HTML:

/*<group=General Styles>*/

body {
	background: #362928;
	margin: 0;
	font: 0.85em Georgia, Times New Roman, Times, serif;
	color: #6f4714;
	text-align: left;
	padding: 0;
}

p {
}

b, strong {

}

a:link, a:visited {
	text-decoration: underline; 
	color: #7e0100;
}

a:hover, a:active {
	text-decoration: none; 
	color: #6f4714;
}

img {
	border-style: none;
}

.image-left {
	float: left;
	margin: 3px 3px 3px 0;
	padding: 3px 3px 3px 0;
}

.image-right {
	float: right;
	margin: 3px 0 3px 3px;
	padding: 3px 0 3px 3px;
}
	
/*</group>*/

/*<group=Layout>*/

#container {
	width: 1012px;
	padding-left: 1px;
	text-align: left;
}

.clearer {
	clear: both;
}

#pageHeader {
	background: url(images/banner.jpg) no-repeat;
	height: 98px;
	text-align: left;
}

#pageHeader img {
	float: left;
	padding-right: 10px;
}

#pageHeader h1 {
	color: #ffffff;
	text-shadow: 0px 0px 4px #f5bed5;
	padding-top: 20px;
	padding-left: 40px;
	font-size: 1.6em;
	margin: 0px;
}

#pageHeader h2 {
	color: #ffffff;
	text-shadow: 0px 0px 2px #f5bed5;
	padding-left: 40px;
	font-size: 1.1em;
	margin: 0px;
}

#contentContainer {
	width: 544px;
	background: url(images/content_middle.gif) repeat-y;
	margin-bottom: 30px;
	float:left;
}

#contentContainer #topcont {
	width: 544px;
	height: 33px;
	background: no-repeat url(images/content_top.gif);
}

#contentContainer #bottomcont {
	background: no-repeat url(images/content_footer.gif);
	width: 544px;
	height: 25px;
}

#contentContainer #content {
	padding: 0 20px;
}

#infoboxContainer {
	background: url(images/sidebar_background.gif);
	float: right;
	width: auto;
	margin-bottom: 30px;
}

#infoboxContainer #sidebarinfo {
background: url(images/sidebar_divider.gif) no-repeat center bottom;
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 40px;
	margin-bottom: 30px;
	font-size: 0.91em;
}

#infoboxContainer #sidebarinfo2 {
	padding-right: 20px;
	padding-left: 15px;
	font-size: 0.91em;
}

#infoboxContainer #topinfo {
	background: url(images/sidebar_top.gif);
	width: auto;
	height: 33px;
}

#infoboxContainer #bottominfo {
	background: url(images/sidebar_footer.gif);
	width: auto;
	height: 33px;
}

#infoboxContainer .sideHeader {
	color: #6f4714;
	font-size: 1.1em;
	font-weight: bold;
}

#sidebarContainer {
	background: url(images/sidebar_background.gif);
	width: 233px;
	float:left;
	margin-bottom: 30px;
}

#sidebarContainer #top {
	background: url(images/sidebar_top.gif);
	width: 233px;
	height: 33px;
}

#sidebarContainer #bottom {
	background: url(images/sidebar_footer.gif);
	width: 233px;
	height: 33px;
}

#sidebarContainer #sidebar {
	padding-right: 20px;
	padding-left: 20px;
}

#sidebarContainer .sideHeader {
	color: #6f4714;
	font-size: 1.1em;
	font-weight: bold;
}

#footer {
	background: url(images/footer_background.gif);
	height: 74px;
	color: #444444;
	display: block;
	width: 100%;
	margin-bottom: 20px;
}

#footer p {
	text-align: left;
	padding-top: 30px;
	margin: 0;
	padding-left: 40px;
}

#footer a:link, #footer a:visited {
	color: #444444;
}

#footer a:hover, #footer a:active {
	color: #999999;
}
	
/*</group>*/

/*<group=Bread-crumb>*/

#breadcrumbcontainer {
	padding: 20px;
	font-size: 0.9em;
}

#breadcrumbcontainer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#breadcrumbcontainer li {
	display: inline;
}

#breadcrumbcontainer a {
	color: #6f4714;
	text-decoration: underline;
}

#breadcrumbcontainer a:hover {
	color: #6f4714;
	text-decoration: none;
}
	
/*</group>*/

/*<group=Toolbar>*/

/* Toolbar Styles */

#navcontainer {
	background: url(images/sidebar_divider.gif) no-repeat center bottom;
	padding-bottom: 40px;
	margin-bottom: 20px;
}

#navcontainer #current {
	font-weight: bold;
	color: #7e0100;
}

#navcontainer #current:hover {
}

#navcontainer .currentAncestor {
	font-weight: bold;
	color: #7e0100;
}

/* Parent - Level 0 */

#navcontainer ul{
	list-style: none;
	margin: 0;
	padding: 0 0 0 20px;
}

#navcontainer li {
}

#navcontainer a {
	color: #6f4714;
	text-shadow: 0px 1px 0px #ffffff;
	height: 18px;
	text-decoration: none;
	font-weight: bold;
}

#navcontainer a:hover {
	color: #7e0100;
	text-decoration: none;
}

/* Child - Level 1 */

#navcontainer ul ul {
	list-style: upper-roman;
	padding-left: 35px;
	margin-bottom: 5px;
}

#navcontainer ul ul li {
}

#navcontainer ul ul a {
}

#navcontainer ul ul a:hover{
}

#navcontainer ul ul #current{
}

/* Child - Level 2 */

#navcontainer ul ul ul {
	list-style: lower-roman;
	padding-left: 20px;
	margin-bottom: 5px;
}

#navcontainer ul ul ul li { 
}

#navcontainer ul ul ul a{
}

#navcontainer ul ul ul a:hover{

}

/* Child Level 3 */

#navcontainer ul ul ul ul {
	list-style: lower-alpha;
}

#navcontainer ul ul ul ul li { 
}

#navcontainer ul ul ul ul a{
}

#navcontainer ul ul ul ul a:hover{

}

/* Child Level 4 */

#navcontainer ul ul ul ul ul {
	list-style: square;
}

#navcontainer ul ul ul ul ul li { 
}

#navcontainer ul ul ul ul ul a{
}

#navcontainer ul ul ul ul ul a:hover{

}

/* Child Level 5 */

#navcontainer ul ul ul ul ul ul {
	display: none;
}

/*</group>*/

/*<group=Global Classes>*/

blockquote, .standout {
}

h1 {
}

h2 {
}

h3 {
}

h4 {
}

.imageStyle {

}

/* Main content area unordered list styles */
#contentContainer #content ul {
}

#contentContainer #content li {
}

/* Sidebar area unordered list styles */
#sidebarContainer #sidebar ul {
	margin: 10px;
	padding: 0 10px;
}

#sidebarContainer #sidebar li {
}

// edit 2

index.html:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type"
        content="text/html; charset=iso-8859-1" />
  <meta name="robots"
        content="all" />

  <title>Portal</title>
  <link rel="stylesheet"
        type="text/css"
        media="screen"
        href="rw_common/themes/medieval/styles.css" />
  <link rel="stylesheet"
        type="text/css"
        media="print"
        href="rw_common/themes/medieval/print.css" />
  <link rel="stylesheet"
        type="text/css"
        media="handheld"
        href="rw_common/themes/medieval/handheld.css" />
  <link rel="stylesheet"
        type="text/css"
        media="screen"
        href=
        "rw_common/themes/medieval/css/sidebar/sidebar_left.css" />
<script type="text/javascript"
      src="rw_common/themes/medieval/javascript.js">
</script>
  <link rel="alternate"
        type="application/rss+xml"
        title="Die Stammeshüter"
        href="http://stammeshueter.javaengel.de/files/page0.xml" />
</head>
<!-- This page was created with RapidWeaver from Realmac Software. http://www.realmacsoftware.com -->

<body>
  <div id="pageHeader">
    <h1>Die Stammeshüter</h1>
  </div>

  <div id="container">
    <div id="sidebarContainer">
      <div id="top"></div>

      <div id="navcontainer">
        <ul>
          <li><a href="lindex.html"
             rel="self"
             id="current"
             name="current">Portal</a></li>

          <li><a href=
          "http://stammeshueter.javaengel.de/schriftenhalle"
             rel="self">Schriftenhalle</a></li>

          <li><a href=
          "http://stammeshueter.javaengel.de/schriftenhalle/memberlist.php"
             rel="self">Mitglieder</a></li>

            </ul>
      </div>

      <div id="sidebar">
        <div class="sideHeader"></div>
        <br />
        <a href="files/page0.xml"
             rel="alternate"
             type="application/rss+xml"
             title="Die Stammeshüter">RSS</a>
        <br />
      </div>

      <div id="bottom"></div>
    </div>

    <div id="contentContainer">
      <div id="topcont"></div>

      <div id="content">
</script>

      </div>

      <div class="clearer"></div>

      <div id="breadcrumbcontainer">
        <ul>
          <li><a href="lindex.html">Portal</a>&nbsp;|&nbsp;</li>
        </ul>
      </div>

      <div id="bottomcont"></div>
    </div>

    <div id="infoboxContainer">
      <div id="topinfo"></div>

      <div id="sidebarinfo">
        <b>aktuelle Themen der Schriftenhalle:</b>
        <br />
        <br />
      </div>

      <div id="sidebarinfo2">
        <b>anstehende Termine:</b>
        <br />
        <br />
        <iframe name="target"
             src=
             "http://xxx.php"
             width="200"
             height="105"
             frameborder="0"
             scrolling="auto"
             id="target"></iframe>
      </div>

      <div id="bottominfo"></div>
    </div>
  </div>


  <div class="clearer"></div>

  <div id="footer">
    <p>© 2006 ">Kontakt</a></p>
  </div>
</body>
</html>

Maik · 6. Juni 2006

Ich kann in der Seitendarstellung keine Unterschiede zwischen Firefox 1.5.0.4 und IE 6.0 feststellen (OS: Win2k).

Rainingman · 6. Juni 2006

Hallo!

ich habe gerade eben eine Weiche für den IE eingebaut, weil es ziemlich dringend ist. Bleibt mir noch das Problem, ob diese "Weiche" zu Problemen führen kann, oder nicht.
Ich lade im Falle des IE eine andere CSS Datei mit angepasster Darstellung.

HTML:

  <!--[if IE]>
  <link rel="stylesheet"
        type="text/css"
        media="screen"
        href="rw_common/themes/medieval/stylesie.css" />
  <![endif]-->

[
Weiterhin habe ich Transparenz für den iFrame umgebenden Teil festgelegt:

PHP:

#infoboxContainer #sidebarinfo2 {
	background-color: transparent;
	padding-right: 20px;
	padding-left: 15px;
	font-size: 0.91em;

und Transparenz für den iFrame erlaubt.

HTML:

        <iframe name="target"
             src=
             "http://stammeshueter.javaengel.de/schriftenhalle/termine.php"
             width="200"
             height="105"
             frameborder="0"
             scrolling="auto"
             allowtransparency="true" 
             id="target"></iframe>

Warum ist im IE der iFrame immer noch nicht transparent?

Danke nochmals für schnelle Hilfe!

Maik · 6. Juni 2006

Warum in deinem Fall der IE das Attribut allowtransparency="true" für den iFrame ignoriert, kann ich dir derzeit leider auch nicht sagen.

Rainingman · 6. Juni 2006

Herrje

. Das klingt nicht gut. Hat noch jemand eine Idee?

// edit

Hier noch einmal die CSS-Styles der kompletten rechten Box.

Sidebar2 ist der untere Teil der Box unter dem "Trenner", wo der iFrame zuhause ist. Sidebar 1 der obere Teil

PHP:

#infoboxContainer {
	background: url(images/sidebar_background.gif);
	float: left;
	width: 233px;
	margin-bottom: 30px;	
}

#infoboxContainer #sidebarinfo {
	background: url(images/sidebar_divider.gif) no-repeat center bottom;
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 40px;
	margin-bottom: 30px;
	font-size: 0.91em;
}

#infoboxContainer #sidebarinfo2 {
	background-color: transparent;
	padding-right: 20px;
	padding-left: 15px;
	font-size: 0.91em;
}

#infoboxContainer #topinfo {
	background: url(images/sidebar_top.gif);
	width: 233px;
	height: 33px;
}

#infoboxContainer #bottominfo {
	background: url(images/sidebar_footer.gif);
	width: 233px;
	height: 33px;
}

#infoboxContainer .sideHeader {
	color: #6f4714;
	font-size: 1.1em;
	font-weight: bold;
}

Maik · 6. Juni 2006

*offtopic*

Bitte benutze den "Ändern"-Button deines Beitrages, wenn du noch etwas hinzufügen bzw. anhängen willst, und schreibe hier nicht im Minutentakt neue Beiträge.

Vielen Dank.

Quaese · 6. Juni 2006

Hi,

weis dem Dokument im iFrame (termine.php) im Body der CSS-Eigenschaft background mal den Wert none zu.

Code:

body{ background: none;}

Ciao
Quaese

Maik · 7. Juni 2006

Vielleicht liegt es auch daran, daß es sich bei der termine.php nicht um ein "vollständiges" Dokument handelt?

Quelltext der termine.php:

HTML:

<font style="color:#7e0100;font-size:0.8em;">Keine aktuellen Termine</font>

Problem mit dreispaltigem CSS

Rainingman

Grünschnabel

Maik

Rainingman

Grünschnabel

Maik

Rainingman

Grünschnabel

Maik

Quaese

Moderator

Maik

Neue Beiträge