✔ Warum wird hier kein border dargestellt?

Status
Nicht offen für weitere Antworten.
son gohan

son gohan

Erfahrenes Mitglied
Hallo,
das HTML zu meinem Problem:
PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>uvm.</title>
<link rel="stylesheet" type="text/css" href="normal.css" media="screen" />

</head>
<body>
<div style="border:1px solid #000;width:900px;margin:10px auto;">
<p><img src="obentre.jpg"  alt="" id="titel_bild" /></p>

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="index.html">Startseite</a></li>
<li><a href=".html">Täglich Gesund</a></li>
<li><a href=".html">Grenzenlos</a></li>
<li><a href=".html">Ratgeber</a></li>
<li><a href=".html">Impressum</a></li>
<li><a href=".html">Hier werben</a></li>
</ul>
<div id="container">
	<div id="inner">
		<div id="left">left</div>

		<div id="right">
                 <dl class="rechte_themen">
                 <dt>Weisheit des Tages</dt>
                 <dd><p style="border:1px solid #fff;">"Morgenstund hat Gold im Mund"</p>
                 <br class="clear"></dd>
                 </dl>
                 </div>

		<div id="center">Center</div>

		<div class="clear" />&nbsp;</div>

	</div>
</div>

</div>

</body>
</html>

und die normal.css Datei:
PHP: 
* { margin:0;
	padding:0; }
body { text-align:center
}

#navcontainer
{
background: #FFF;
border-top: 5px solid #003F00;
width:auto;
font: normal normal 1em Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#navlist
{
list-style: none outside none;
margin: 0;
padding: 0;
}


#navlist li
{
bottom: 25px;
display: inline;
position: relative;
}


#navlist a, #navlist a:link, #navlist a:visited
{
background: #003F00;
border-bottom: 1px solid #003F00;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
bottom: 2px;
color: #FFF;
cursor: pointer;
display: inline;
height: 1em; font-weight : bold;
padding: 3px 5px 3px 5px;
position: relative;
right: 2px;
text-decoration: none;
}

#navlist a:hover
{
border-bottom:13px solid #003F00;
position: relative;
bottom:14px;
}

#navlist a:active
{
background: #999;
bottom: 0px;
color: #FFF;
position: relative;
right: 0px;
}

#navlist li#active
{
background: #369;
bottom: 26px;
display: inline;
margin: 0 3px 0 0;
padding: 0;
position: relative;
}


#navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover
{
background: #95E199;
border: 1px solid #fff;
border-bottom: 1px solid #003F00;
color: #000;
cursor: text;
padding: 2px 5px 2px 5px;
position: relative;
right: 0px;
bottom:0px;
}

#titel_bild { border:none;
		width:900px;
                 margin:0 0 -5px 0; }
* html #titel_bild { margin:0 0 0px 0; }

#container {position:relative;
display:block;
background:#95D88D;
border-left:200px solid #003F00;
border-right:200px solid #003f00;
margin-top:-18px;}

#inner {display:block;
margin-left:-200px;
margin-right:-200px;
padding:5px;
border:1px solid #000;}

#left {float:left;
position:relative;
width:188px;
left:0px;
border:1px solid #BF0000;
color:#fff;
background:#003f00;}

#right {float:right;
position:relative;
width:190px;
right:0px;
border:0px solid #BF0000;
color:#fff;
background:#003f00;
}

#center {margin-left:200px;
margin-right:200px;
position:relative;
display:block;
border:1px solid #BF0000;
height:1%;}
.clear {clear:both;}

.rechte_themen  {
text-align:		left;
font-size: 		0.9em;
}
.rechte_themen dt {
margin:0 0 10px 0;
}

Das Problem ist folgendes:

Wenn man die Seite im IE anschaut, dann wird um den Text in der rechten Spalte welcher in der DL Liste steckt kein Rahmen gezogen im Mozilla schon.

Das ganze ist mir ziemlich seltsam, ich habe auch schon versucht direkt über style Attribute den Rahmen zu erzwingen aber er kommt im IE nicht zum Vorschein.
 
Hi,

häufig hat der IE Probleme Höhen richtig zu interpretieren, wenn Elemente relativ positioniert werden
oder mit float aus dem normalen Textfluss genommen wurden. Abhilfe kann durch das Zuweisen
einer minimalen Höhe erreicht werden.
HTML: 
<dl class="rechte_themen">
  <dt>Weisheit des Tages</dt>
  <dd><p style="border:1px solid #fff; height: auto !important; height: 1%;">"Morgenstund hat Gold im Mund"</p>
  <br class="clear"></dd>
</dl>
Die automatische Höhenangabe wird nur von Nicht-IEs interpretiert, die minimale Höhe nur von IEs.

Ich hoffe, das hilft dir weiter.

Ciao
Quaese
 
Hallo,

danke dir, das war sehr hilfreich, und funktionieren tuts jetzt auch.

Ich habe aber noch ein Problem mit der Seite.

Oben habe ich Links, Die Links haben einen weißen Rahmen, wenn man drüber fährt rutschen die Links etwas nach oben wie bei einer Schublade.

Im IE werden dabei aber die weißen Rahmen um die Links nicht folständig gezogen. Auf der rechten Seite bleibt immer ein Stück frei, bitte einfach mal ansehen ist schwer für mich zu erklären.

Code:
PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>uvm.</title>
<style type="text/css">
<!--
* { margin:0;
    padding:0; }
body { text-align:center
}

#navcontainer
{
background: #FFF;
border-top: 5px solid #003F00;
width:auto;
font: normal normal 1em Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#navlist
{
list-style: none outside none;
margin: 0;
padding: 0;
}


#navlist li
{
bottom: 25px;
display: inline;
position: relative;
}


#navlist a, #navlist a:link, #navlist a:visited
{
background: #003F00;
border-bottom: 1px solid #003F00;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
bottom: 2px;
color: #FFF;
cursor: pointer;
display: inline;
height: 1em; font-weight : bold;
padding: 3px 5px 3px 5px;
position: relative;
right: 2px;
text-decoration: none;
}

#navlist a:hover
{
border-bottom:13px solid #003F00;
position: relative;
bottom:14px;
}

#navlist a:active
{
background: #999;
bottom: 0px;
color: #FFF;
position: relative;
right: 0px;
}

#navlist li#active
{
background: #369;
bottom: 26px;
display: inline;
margin: 0 3px 0 0;
padding: 0;
position: relative;
}


#navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover
{
background: #95E199;
border: 1px solid #fff;
border-bottom: 1px solid #003F00;
color: #000;
cursor: text;
padding: 2px 5px 2px 5px;
position: relative;
right: 0px;
bottom:0px;
}

#titel_bild { border:none;
        width:900px;
                 margin:0 0 -5px 0; }
* html #titel_bild { margin:0 0 0px 0; }

#container {position:relative;
display:block;
background:#95D88D;
border-left:200px solid #003F00;
border-right:200px solid #003f00;
margin-top:-18px;}

#inner {display:block;
margin-left:-200px;
margin-right:-200px;
padding:5px;
border:1px solid #000;}

#left {float:left;
position:relative;
width:188px;
left:0px;
border:1px solid #BF0000;
color:#fff;
background:#003f00;}

#right {float:right;
position:relative;
width:190px;
right:0px;
border:0px solid #BF0000;
color:#fff;
background:#003f00;
}

#center {margin-left:200px;
margin-right:200px;
position:relative;
display:block;
border:1px solid #BF0000;
height:1%;}
.clear {clear:both;}

.rechte_themen  {
text-align:        left;
font-size:         0.9em;
}
.rechte_themen dt {
margin:0 0 10px 0;
}
-->
</style>

</head>
<body>
<div style="border:1px solid #000;width:900px;margin:10px auto;">
<p><img src="obentre.jpg"  alt="" id="titel_bild" /></p>

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="index.html">Startseite</a></li>
<li><a href=".html">Täglich Gesund</a></li>
<li><a href=".html">Grenzenlos</a></li>
<li><a href=".html">Ratgeber</a></li>
<li><a href=".html">Impressum</a></li>
<li><a href=".html">Hier werben</a></li>
</ul>
<div id="container">
    <div id="inner">
        <div id="left">left</div>

        <div id="right">
                 <dl class="rechte_themen">
  <dt>Weisheit des Tages</dt>
  <dd><p style="border:1px solid #fff; height: auto !important; height: 1%;">"Morgenstund hat Gold im Mund"</p>
  <br class="clear"></dd>
</dl>
                 </div>

        <div id="center">Center</div>

        <div class="clear" />&nbsp;</div>

    </div>
</div>

</div>

</body>
</html>
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück