Unterschiedliche Abstände zwischen FIREFOX UND IE 7

Billbos

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;
	  }

Alles anzeigen

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;
   }

Alles anzeigen

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>

Alles anzeigen

[/code]

pinales

Tach!

Erstmal die Abstände für die Überschriften und Listen festziehen? (FF zeigt andere Standardabstände als IE)

Code

h1 { 
color: #FFF; 
text-align: center; 
padding: 5px; /*???*/
margin: 0 0 10px 0;
}

Code

#zlist ul { 
list-style-type: none; 
margin: 0; /*wieso hier links/rechts "auto"?*/
}

#zlist li { 
list-style-image: url(../img/index/arrow-right.gif); 
padding: 3px;
margin: 0;
}

Billbos

Soweit hat es geklappt dankeschön.
Jetzt habe ich noch eine Frage, das list-style-image hat im Firefox mehr Abstand als im Internetexplorer zur der Liste. Wie kann ich das Problem beheben?
Ich möchte einen gleichgroßen Abstand haben!

Mit freundlichen Grüßen

Billbos

pinales

Tach!

Jep, ist mir schon aufgefallen, ich hab´ aber leider keine Idee, wie der Abstand zu beeinflussen oder festzuziehen wäre...

Tags