Hallo,
ich habe folgendes Problem, ich habe eine Box in der ich eine Überschrift habe H1 und darunter eine ul - list, die Überschrift hat im Firefox oben einen großen Abstand vom Boxenrand und die Liste ist zu weit in der Mitte in beiden Explorern.
Ich möchte, dass die Überschrift knapp am oberen Boxenrand grenzt und die List an nähr an die linke Seite der Box anrückt!
FIREFOX
[Blockierte Grafik: http://www.billbos.eu/help/FIREFOX.JPG]
INTERNET EXPLORER 7
[Blockierte Grafik: http://www.billbos.eu/help/ie7.JPG]
Wie gehe ich an das Problem ran?
Hier sind meine Stylesheets!
Danke
DIE BOXENMODELLE
Code
@charset "utf-8";
/* CSS DEFAULT_index */
* html {
margin: 0;
padding: 0;
}
/* Header */
#header {
background: #003366 url(../flash/index_header/header_1.swf) no-repeat top;
margin: 0 auto;
}
/* Bildercontainer */
#piccontainer {
width: 770px;
height: 270px;
background: #FFF;
margin: 0 auto;
border: 1px thin #000;
}
/* Angebote */
#bildbox {
background: #FFF;
float: left;
width: 150px;
height: 255px;
border: 1px solid #000;
margin: 5px 5px 5px 0;
padding: 5px;
}
#boxinside {
background: #000;
width: 140px;
height: 100px;
border: none;
margin: 0px auto;
}
#zusatzangebot {
width: 255px;
float: left;
height: 255px;
border: 1px dotted #000;
margin: 5px 0px 5px 0;
padding: 5px;
}
/* Zusatzangebot Liste */
#zlist ul {
list-style-type: none;
margin: 0 auto;
}
#zlist li {
list-style-image: url(../img/index/arrow-right.gif);
padding: 3px;
}DIE SCHRIFTEN
Code
@charset "utf-8";
/* CSS FONT_index */
/* Headings */
h1.angebote {
color: #FFF;
text-align: center;
}
h1 {
color: #FFF;
text-align: center;
padding: 5px;
}
.zusatzangebot {
color: #000;
font: Arial, Helvetica, sans-serif;
font-size: 18px;
text-align: center;
padding: 5px;
}
/* Paragraphen */
.zangebot {
text-align: left;
color: #0000FF;
font-weight: bold;
}DIE INDEXPAGE
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>
<link rel="shortcut icon" type="image" href="favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Billbos | Home</title>
<link rel="stylesheet" type="text/css" href="css/LAYOUT.css" />
<link rel="stylesheet" type="text/css" href="css/FONT_index.css" />
<link rel="stylesheet" type="text/css" href="css/NAVIGATION.css" />
<link rel="stylesheet" type="text/css" href="css/default_index.css" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body background="img/background.gif">
<div id="container">
<div id="header">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','800','height','125','src','flash_/index_header/header_1','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','flash_/index_header/header_1' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="800" height="125">
<param name="movie" value="flash_/index_header/header_1.swf" />
<param name="quality" value="high" />
<embed src="flash_/index_header/header_1.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="800" height="125"></embed>
</object></noscript>
</div>
<div id="navigation">
<ul>
[*][url='index.html']Home[/url]
[*][url='billbos.html']Billbos[/url]
[*][url='angebote.html']Angebote[/url]
[*][url='htmlcss.html']HTML / CSS[/url]
[*][url='flash.html']Flash[/url]
[*][url='bilder.html']Bilder[/url]
[*][url='kontakt.html']Kontakt[/url]
[*][url='impressum.html']Impressum[/url]
[/list]
</div>
<div id="boxcontainer">
<div id="piccontainer">
<div id="bildbox">
<div id="boxinside">
</div>
</div>
<div id="bildbox">
<div id="boxinside">
</div>
</div>
<div id="bildbox">
<div id="boxinside">
</div>
</div>
<div id="zusatzangebot">
<h1><span class="zusatzangebot">Homepage nach Wunsch?</span></h1>
<ul id="zlist">
[*]<span class="zangebot">Sein Sie beim Desginen dabei</span>
[*]<span class="zangebot">Eigene Grafiken verwenden</span>
[*]<span class="zangebot">Server Einrichtung</span>
[*]<span class="zangebot">Lernen Sie mit designen</span>
[*]<span class="zangebot">Homepage Update</span>
[/list]
</div>
</div>
</div>
</div>
<div id="navibottom">
<ul>
[*][url='#']Top[/url]
[*][url='http://www.billbos.eu/index.html']Home[/url]
[*][url='#']Forum[/url]
[*][url='kontakt.html']Kontakt[/url]
[*][url='impressum.html']Impressum[/url]
[/list]
</div>
</body>
</html>[/code]