[HTML/CSS] mittlerer Border Korrektur

strolch00

redraft.de
ID: 155297
L
21 April 2006
1.684
72
Hi @all,

Ich habe mal wieder ein seltsames Problem mit HTML, CSS und dem IE ;).

Also grundsätzliche Info´s, ich habe es hiermit versucht, jedoch leider ohne Erfolg. Google spuckt dazu leider auch nichts weiter genaueres aus, und nun hoffe ich das Ihr mir weiter helfen könnt. Evtl. habe ich ja nur irgendetwas übersehen auf der Seite.

So nun Hier mein HTML:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml"> 
<head>  
  <title>Klamm-gaming</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="Content-Language" content="de-DE" />
  <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT" />
  <meta http-equiv="pragma" content="no-cache" />
  <meta http-equiv="Cache-Control" content="no-cache" />
<link href="/css/global.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/css/classes.css" media="screen" rel="stylesheet" type="text/css" />

</head> 
<body>
  <div id="frame">bla bla test</div>
  <div id="page">
    <div id ="header">
    </div>
    <div id="main">
      <div id="menu">
        <ul>

          <li><a href="/news/overview">News</a></li>
          <li><a href="/games/overview">Games</a></li>
        </ul>

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

        <div id="content_text">
          <h2>Test</h2>
<p>####</p>
        </div>
      </div>
    </div>
    <div id="footer">
      <p class="flt_left" style="padding: 6px 10px 2px 10px;">
        <a href="https://validator.w3.org/check?uri=referer">
          <img src="https://www.w3.org/Icons/valid-xhtml10-blue"
               alt="Valid XHTML 1.0 Strict"
               style="width:71px;height:25px" />

        </a>
      </p>
      <p style="padding: 6px 10px 2px 10px;">
        <a href="https://jigsaw.w3.org/css-validator/">
          <img src="https://jigsaw.w3.org/css-validator/images/vcss-blue"
               alt="CSS ist valide!"
               style="width:71px;height:25px" />
        </a>
      </p>
    </div>
  </div>

</body>
</html>
mein CSS:
Code:
* {
    padding: 0;
    margin: 0;
    font: 14px/18px verdana, arial, sans-serif, monospace;
    text-decoration: none;
}

img {
    border: 0;
}

ul {
    list-style: none;
}

body {
    background: #789;
}

#frame {
    height: 25px;
    line-height: 25px;
    border-bottom: 2px solid #000;
    background: url(/images/frame.jpg) repeat-x;
    font-size: 0.9em;
    padding: 0 5px;
}

#page {
    width: 750px;
    margin: 0 auto;
    border: 1px solid #666;
    border-top: none;   /* comment out if you not use a frame */
    background: #F5F5F5;
}

#header {
    height: 150px;
    background: url(/images/header.gif) no-repeat;
    border-bottom: 1px solid #666;
}

#menu {
    width: 200px;
    float: left;
}

#content {
    margin-left: 200px;
    border-left: 1px solid #666;
}

#system_storages {
    border-bottom: 1px solid #666;
    padding: 2px 5px 4px 5px;
}

#system_storages ul#system_messages li {
	font-size: 0.8em;
	color: #F00;
	font-weight: bold;
}

#content_text {
    padding: 5px;
}

#content:after,
#menu:after {
    content: "border correct";
    clear: left;
    display: block;
    height: 0;
    overflow: hidden;
    font-size: 0;
}

#footer {
    border-top: 1px solid #666;
}

/************************************ detailed style *********************/
#breadcrumb a {
    font: bold 1em arial;
    color: #00F;
}

ul.errors li {
    color: #F00;
}
h2 {
	font-size: 1.1em;
	font-weight: bold;
	margin-bottom: 15px;
}
#content p {
	margin-bottom: 10px;
}
/*********************************** form styles ************************/
form {
	margin: 30px 5px;
}
form dt{
	padding: 3px 0 1px 0;
}
form dt label {
	font-size: 0.83em;
}

form input.readonly {
	background: #DDD;
}
form input {
	border: 1px solid #000;
	border-right: 1px solid #666;
	border-bottom: 1px solid #666;
	margin-left: 50px;
}
form ul.errors li {
	font-size: 0.8em;
	font-weight: bold;
}
/************************************* menu styles **************************/
div#menu h3 {
	background: #C0C0C0;
	border-top: 1px solid #666;
	border-bottom: 1px solid #666;
	font-weight: bold;
	color: #FFF;
}
div#menu h3.modul_menu {
	margin-top: 20px;
}
div#menu ul li.headline {
	font-weight: bold;
	border-bottom: 1px solid #666;
}
div#menu ul li {
	padding-left: 10px;
}
div#menu ul li ul li {
	padding-left: 20px;
}
und hier die Screens:
ff ==>
ie ==>

Ich vermute das es beim IE mit dem hasLayout zu machen ist, aber da habe ich keine Ahnung wie man das dem IE klarmacht.

Danke schonmal
 
Hallo tleilax, erstmal danke für die schnelle Antwort, hatte leider ein Verbindungsproblem. Aber ich habe jetzt alles mögliche durchgetestet und bisher noch keinen weiteren Erfolg. Wenn ich das richtig verstanden habe soll ich ein class="clearfix" in meinem Fall an #main vergeben, weil die #main ja das Float enthält, ist das richtig?

Wenn ja funktioniert das soweit allerdings wird der Border nun nur bis zum ende des Contents geht und nicht bis runter zum Footer.

*edit

Ich will das Beispiel 11 von hier realisieren.

*edit 2
Musste eben feststellen das dieses Beispiel im IE 7 auch nicht funktioniert :(

*Abschluss-edit
Ich habe es so aufbereitet das es auch im IE funktioniert, so wie in dem einen Beispiel, hat allerdings auch nicht so hingehauen wie bei denen. Jetzt habe ich als sozusagen Notlösung dem Menü auch einen border-right gegeben. Nu funktioniert es auf dreckigem Wege ;).

Es muss aber noch eine richtig elegante Lösung geben, also postet bitte wenn euch was auffällt.

zum Schluss noch mein jetziger Code:
HTML:
HTML:
      <div id="content" class="clearfix">
        <div id="system_storages"></div>
        <div id="content_text">
          #####
        </div>
      </div>
      <!--[if lt IE 8]>
      <div style="clear: both; display:block; height:0; " />
      <![endif]-->
CSS:
Code:
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
entnommen hier der äußere bzw. der zweite rechts funktioniert auf diese Weise auch im IE.
 
Zuletzt bearbeitet:
Hallo tleilax, erstmal danke für die schnelle Antwort, hatte leider ein Verbindungsproblem. Aber ich habe jetzt alles mögliche durchgetestet und bisher noch keinen weiteren Erfolg. Wenn ich das richtig verstanden habe soll ich ein class="clearfix" in meinem Fall an #main vergeben, weil die #main ja das Float enthält, ist das richtig?
Oh, da fragste mich was. Ich hab den Link nur vor kurzem entdeckt, überflogen und in die Bookmarks gelegt. Aber als Du den Clearfix mit :after in Deiner CSS und hasLayout() angesprochen hast, fiel er mir wieder ein (da war irgendwas mit zoom: 1). Dachte, das passt... ;)
 
Jap das hatte ich damals auch schon mal gelesen, mir ist nur nix mit zoom aufgefallen, aber ich schau gleich nochmal.

Nur eine Anmerkung noch dazu, auf diesen "Tut" ist der Blogeintrag aufgebaut. Und für alle die es interessiert, hier ist die deutsche Übersetzung, beide links findet Ihr auch unter Beispiel 10 der der Seite zu dem ich im ersten Post den Link gepostet habe.