ich habe zwei probleme mit der darstellung meines designs
1rstes und gleich mein größtes problem tritt nur beim firefox (getestet 0.9, 0.92) auf. <div class="outline"> müsste alle kind-elemente beinhalten und seinen eigen hintergrund anzeigen, dies passiert allerdings nicht. ich habe bereits ein wenig herumexperimentiert. wenn ich eine feste höhe für div.outline setze, ist es auf einmal sichtbar. sowas wie "height:100%;" oder "height:auto;" hab ich auch schon probiert, funktioniert allerdings nicht.
2. im IE werden unterdem <div class="header"> seltsame abstände angezeigt, der hintergrunde von div.navigation fängt auch erst weiter untent an. sehr seltsam, habe auch hier experimentiert und überall paddings und margins auf 0 gesetzt, dabei zeigte sich allerdings auch kein erfolg.
index.html:
Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>meine page</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<link rel="stylesheet" media="all" title="come@death´s Design"
href="layout/comeATdeath.css" type="text/css" />
</head>
<body onload="getActiveStyleSheet();">
<div class="outline">
<div class="header">
<h1 class="headline">
[img]images/logo.jpg[/img]
</h1>
</div>
<div class="navigation">
<ul>[*]Home[*]Angebote[/list] </div>
<div class="content">
Das ist mein Block-element... Mein Text blahhh.
</p>
</div>
</div>
</body>
</html>
layout/comeATdeath.css
Code:
/* no display */
area, base, basefont, head, meta, script, style, title,
noembed, noscript, param { display:none; }
/* inline display */
abbr, acronym, address, br, cite, code, dfn, em,
kbd, p, pre, q, samp, span, strong, var, img { display:inline; position:relative; }
/* block display */
html, div, map, dt, isindex, blockquote, body, p, dl,
hr, ol, ul, menu, dir, h1, h2, h3, h4, h5, h6, ins,
del { display:block; position:relative; }
/* lists */
li { display:list-item; }
/* tables */
tr { display: table-row; }
col { display: table-column; }
colgroup { display: table-column-group; }
tbody { display: table-row-group; }
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
td, th { display:table-cell; }
@media screen {
body {
width:617px;
margin:0 auto;
background-color:#EFEFEF;
}
.outline {
width:617px;
background-color:#FFFFFF;
background-image:url("bg.gif");
}
.header {
width:617px;
height:90px;
clear:both;
}
.navigation {
width:97px;
float:left;
padding-left:5px;
background-image:url("menubg.gif");
}
.navigation ul {
width:97px;
margin:0;
padding:0;
padding-bottom:9px;
list-style-type:none;
background-image:url("menubottom.gif");
background-repeat:no-repeat;
background-position:bottom right;
}
.content {
width:513px;
float:left;
}
}