def: Anzeigeproblem Firefox / IE

Beitrag lesen

Hallo
ich habe zwei Probleme mit meiner erstellten Webseite:

  • Problem 1 in Firefox und IE: Die Grafiken, die ich als Hintergrund für die Links hinterlegt habe (bunte Kreise), werden unten abgeschnitten. Wenn ich die Schriftgröße der Links erhöhe, werden die Grafiken komplett angezeit. Habe es schon mit Höhenangaben für die Links versucht (height=), funktioniert aber nicht.

  • Problem 2 IE: Die Grafik des inneren Contents mit dem jeweiligen Text der Seiten wird im IE rechts und links um ein paar Pixel beschnitten. Im Firefox passiert das nicht.

Dazu hier mal der Code der HTML-Seite und des CSS. Die Testseite kann unter http://www.35mmlive.de/blechgewitter/index.html aufgerufen werden.

Besten dank für Eure Hilfe im Voraus
def

PS: Außerdem funktioniert zwar der Hover-Effekt wenn ich über die Links gehe, wenn eine Seite angeklickt wurde, sollte die Farbe allerdings stehen bleiben (rot). Wird aber wieder schwarz.

HTML (Startseite):

---------------------------------------------------------------------------
<!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>

<!-- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> -->
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Motorroller Blechgewitter</title>
<meta name="description" content="Motorroller, Blechgewitter, Scooter, Mods, Vespa, Piaggio, Gilera, TGB, Beeline, Daelim" />
<meta name="keywords" content="Motorroller, Blechgewitter, Scooter, Mods, Vespa, Piaggio, Gilera, TGB, Beeline, Daelim" />
<meta name="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/format.css" />
<style type="text/css"></style>
<!--[if lte IE 6]>

<link rel="stylesheet" type="text/css" href="css/iehacks.css" />

<![endif]-->
<!--<script type="text/javascript" src="javas/scripts.js"></script>
<script type="text/javascript" src="javas/hack.js"></script>-->
</head>
<body>
<div id="wrapper">
<div id="wrapper2">
  <div id="top">
    <div id="logo"> <a href="/"> </a> </div>

</div>
    <div id="navi" align="left">
          <ul>
        <li><a href="index.html">Wer wir sind</a></li>
        <li><a href="info.html">Was wir tun</a></li>
        <li><a href="historie.html">Historie</a></li>
        <li><a href="bilder.html">Bilder</a></li>
        <li><a href="kontakt.html">Kontakt</a></li>
        <li><a href="impressum.html">Impressum</a></li>
      </ul>

<a href="http://www.de.vespa.com" target="blank"><img src="images/layout/vespa.png" style="padding-top: 10px; padding-left: 44px;" alt="" border="0" width="71" height="25" /></a>
      <a href="http://www.de.piaggio.com/de_DE/" target="blank"><img src="images/layout/Piaggio_logo.png" style="padding-top: 8px; padding-left: 44px;" alt="" border="0" width="81" height="25" /></a>
      <a href="http://www.de.gilera.com/" target="blank"><img src="images/layout/Gilera_Logo.png" style="padding-top: 4px; padding-left: 44px;" alt="" border="0" width="76" height="33" /></a>
      <a href="http://www.tgb-motor.de/" target="blank"><img src="images/layout/tgb-logo.png"  style="padding-top: 12px; padding-left: 44px;" alt="" border="0" width="75" height="25" /></a>
      <a href="http://www.beeline-motor.de/" target="blank"><img src="images/layout/beeline_logo.png" style="padding-top: 12px; padding-left: 42px;" alt="" border="0" width="90" height="21" /></a>
      <a href="http://www.daelim-motor.de/" target="blank"><img src="images/layout/daelim_logo.png" style="padding-top: 8px; padding-left: 45px;" alt="" border="0" width="77" height="22" /></a>
      <a href="http://www.germanscooterforum.de/" target="blank"><img src="images/layout/gsf_logo.png" style="padding-top: 8px; padding-left: 45px;" alt="" border="0" width="76" height="33" /></a>

</div>

<div id="content">

<div id="content_header"> </div>
    <div id="inner_content">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr valign="top" >

<td align="center" valign="middle" width="40%">

<p class="intro">
Servus, Grüß Gott und Willkommen,
<br/>
wir sind Motorroller Blechgewitter, ein kleiner und feiner Rollerladen mit Meisterwerkstatt.
<br/>
<br/>
Sie möchten einen hochwertigen Roller?
<br/>
Dann besuchen Sie uns in unserem Laden, wir freuen uns auf Sie.
<br/>
<br/>
Sie suchen eine zuverlässige, professionelle Werkstatt mit Fachpersonal?
<br/>
Dann vereinbaren Sie einen Termin und überzeugen Sie sich.
<br/>
<br/>
Sie möchten ihren Oldtimerroller in guten Händen wissen?
<br/>
Dann sind Sie bei uns richtig!
<br/>
Denn für uns sind Schalt- und Motorroller nicht Arbeit sondern Leidenschaft!
<br/>
<br/>

Öffnungszeiten:
<br/>

Dienstag - Freitag: 14.00 - 19.00 Uhr
<br/>
Samstag: 9.00 - 13.00 Uhr
<br/>
Montag geschlossen
<br/>
<br/>

89231 Neu-Ulm, Industriestraße 4
<br/>

Telefon ( während der Öffnungszeiten ):
<br/>

0731 - 97757628

</p>

</td>

</tr>

</table>
      </div>

<div id="content_bottom"> </div>

</div>
  </div>
</div>
</body>
</html>

--------------------------------------------------------------------------

CSS:
--------------------------------------------------------------------------
@charset "utf-8";

* {
        padding: 0;
        margin: 0;
        list-style: none;
        font: 100.1%  Arial, Helvetica, sans-serif;
        font-weight: normal;

}

html {

width: 100%; height: 101%;

}

body {

font-size: 62.5%;
        background: #9A271C url(../images/layout/background1.jpg) no-repeat 50% center; background-attachment: fixed;

}

#wrapper {
        width: 96em;
        margin: 4px auto 0 auto;
        background: url(../images/layout/hintergrund4b.png) no-repeat 0 0px;

}

#wrapper2 {
        width: 96em;
        margin: auto;
        min-height: 60em;

}

#top {

}

#logo {

}

#logo a {
        display: block;
        width: 920px;
        height: 180px;
        background: url(../images/layout/blechgewitter_logo.png) no-repeat

}

#navi {
                clear:both;
        padding: 0px 0px 190px 0px;
        float: left;
        margin-top: 40px;
                /*Hier Hintergrundbild - URL eingeben */
                /*background: url(../images/layout/navi_hintergrund_1.png) no-repeat; */
                margin-top: 70px;
                margin-right: 0px;
                margin-left: 4px;
                width: 160px
}

#navi li {

display: block;
        margin: 10px 10px;

}

#navi li a {

background:url(../images/layout/blechgewitter_navi_punkt.png) no-repeat;
        text-decoration: none;
        color: black;
        font-size: 14px;
        font-weight: bold;
        padding-top: 0;
        padding-left: 36px;

}

#navi ul li a:hover {
        color: #BD5B41;
}
#navi ul li a:active {
        color: #BD5B41;
}
#navi ul li a.section {
        color: blue;
}
#navi ul li a.current {
        color: #BD5B41;
}

#content {
        width: 72em;
        overflow: auto;
        height: auto;
        /*min-height: 48em;*/
        padding: 60px 0px 0px 0px;

}

#content_header {

width: 65em;
        height: 59px;
        padding: 0 30px;
        background: url(../images/layout/inner_content_header_top_datum.png) no-repeat top;

}

#content_bottom {

width: 65em;
        height: 59px;
        padding: 30px;
        background: url(../images/layout/inner_content_header_bottom.png) no-repeat top;

}

#inner_content {

width: 65em;
        min-height: 36em;
        padding: 0 30px;
        background: url(../images/layout/inner_content_header_filler.png) repeat top;

}

p.intro {
        font-size: 1.4em;
        font-weight: bold;
        line-height: 1.2em;
        text-align: center;
        margin: 8px 0;
        color: #000000;
}
----------------------------------------------------------------------------