nicht angemeldet
Anzeigeproblem Firefox / IE
0 0 1 0 nachtrag
Anzeigeproblem Firefox / IE
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;
}
----------------------------------------------------------------------------
-
Hi!
Ich habe mir Deinen Code nicht angesehen, aber ich moechte Wetten, dass schlicht deine Hintergrundgrafiken groeser sind als die Elemente, in denen sie sind. Also werden sie natuerlich abgeschnitten.
a Elemente sind inline Elemente. Deshalb wirken sich Groessenzuweisungen nicht aus. Du musst ihnen Blockelementeigenschaften geben, dann kannst Du sie auch dem Hintergrundbild anpassen. display: inline-block koennte hier dein Freund sein.
Aehnlich wird es auch beim Hintergrund sein, denke ich.
--
Signaturen sind blöd!-
Hi!
Ich habe mir Deinen Code nicht angesehen, aber ich moechte Wetten, dass schlicht deine Hintergrundgrafiken groeser sind als die Elemente, in denen sie sind. Also werden sie natuerlich abgeschnitten.
a Elemente sind inline Elemente. Deshalb wirken sich Groessenzuweisungen nicht aus. Du musst ihnen Blockelementeigenschaften geben, dann kannst Du sie auch dem Hintergrundbild anpassen. display: inline-block koennte hier dein Freund sein.
Aehnlich wird es auch beim Hintergrund sein, denke ich.
Hallo Steel
danke für Deine schnelle Antwort. Tja, manchmal sieht man den Wald vor lauter Bäumen nicht. Hattest recht, hab die Größenangaben jetzt geändert. Grafik ist 700px breit, contentbreiten jetzt auf 70em geändert. Ansonsten ist der Code gleich geblieben (außer Fontgröße in Zeile 7 CSS in 100% geändert, statt 100.1%). Allerdings besteht das Problem weiterhin: Firefox zeigt die Seite korrekt an, IE8 schneidet links und rechts ein paar Pixel ab. Hab schon zig Möglichkeiten durchprobiert, immer das selbe (oder schlechtere) Ergebnisse.Mit display: inline-block bin ich leider auch nicht weiter gekommen. Vielleicht bin ich auch nur zu doof um das richtig bzw. an der richtigen Stelle zu notieren. Bin kein Profi!
Also, falls Du oder jemand anderes sich doch mal den Code ansehen könnte und vielleicht nen Fehler entdecken, wäre ich dankbar. die geänderten Seiten habe ich hoch geladen. Link ist also aktuell.
Cheers
def-
Hi!
Wegen deiner Navi habe ich mir den Code vorhin schonmal angeschaut. Wie ich gesagt habe: Du musst die a Elemente auf groesse deiner Hintergrundgrafik aufpumpen. Dafuer hast Du diverse Moeglichkeiten. Die direkteste ist, die a Elmeente mit display: inline-block oder auch display: block zu versehen und dann eine Hoehe zuzuweisen die mindestens der Grafikhoehe entspricht.
Ich mag es, die li Elemente zu bearbeiten. Die bekommen die komplette Kur samt Groessenzuweisung und Hintergrundbildern. Die Links werden dann mit display Block automatisch auf die Breite der Liste gebracht. Mit height 100% kann man sie auch pauschal in der Hoehe anpassen falls noetig.
--
Signaturen sind blöd!-
Was dein Bodyproblem betrifft, kann ich das auch nciht nachvollziehen. Wenn ich z.B. dem header div und dem content div eine breite von 700px gebe wird da auch nix abgeschnitten.
--
Signaturen sind blöd!-
Was dein Bodyproblem betrifft, kann ich das auch nciht nachvollziehen. Wenn ich z.B. dem header div und dem content div eine breite von 700px gebe wird da auch nix abgeschnitten.
Hallo Steel
besten Dank nochmal. Das mit dem display:inline-block klappt jetzt bestens.Was die Verschiebungen beim Content angeht, habe ich die Lösung gefunden. Nachdem auf anderen Rechner mal der IE, mal Firefox Anzeigeprobleme hatte, bin ich darauf gekommen, dass die Größenangaben der Elemente in "em" und nicht in eindeutigen Pixelangaben geschrieben waren. Je nachdem welche Systemschrift ein Rechner benutzte, kamen mal mehr oder weniger (oder auch gar keine) Verschiebungen zustande. Hab jetzt alles in "px" geändert, seitdem funktioniert es.
Beste Grüße
def-
Hi!
Was die Verschiebungen beim Content angeht, habe ich die Lösung gefunden. Nachdem auf anderen Rechner mal der IE, mal Firefox Anzeigeprobleme hatte, bin ich darauf gekommen, dass die Größenangaben der Elemente in "em" und nicht in eindeutigen Pixelangaben geschrieben waren. Je nachdem welche Systemschrift ein Rechner benutzte, kamen mal mehr oder weniger (oder auch gar keine) Verschiebungen zustande. Hab jetzt alles in "px" geändert, seitdem funktioniert es.
Ja. Jeder Browser rendert etwas anders. Mit modernen Browsern stellt sowas aber kein Problem mehr da, da man einfach mehrere Hintergrundbilder für ein Element benutzt.
--
Signaturen sind blöd!
-
-
-
-
-