IE Schriftproblem

BennyBunny · 2. Mai 2007, 16:31

Moin,

habn Problem mim IE7, er zeigt die Schrift an, obwohl ich font-size: 0; gesetzt hab.

Quellcode

body
{
margin: 0;
padding: 0;
font: 80% Tahoma;
}
a:link {color: #000000; text-decoration: none}
a:visited {color: #000000; text-decoration: none}
a:hover {color: #000000; text-decoration: underline}
#container
{
margin: 130px auto;
width: 490px;
text-align: left;
}
#header
{
height: 86px;
width: 152px;
font-size: 0;
background-image: url(templates/images/pico.png);
margin: 0 auto;
text-align: center;
}

Alles anzeigen

Wie mach ich die Schrift unsichtbar, aber das Bild nicht...?

Baby Herman · 2. Mai 2007, 18:07

Quellcode

body
{
margin: 0;
padding: 0;
font: 80% Tahoma;
}
a:link {color: #000000; text-decoration: none}
a:visited {color: #000000; text-decoration: none}
a:hover {color: #000000; text-decoration: underline}
#container
{
margin: 130px auto;
width: 490px;
text-align: left;
}
#header
{
height: 86px;
width: 152px;
background-image: url(templates/images/pico.png);
margin: 0 auto;
text-align: center;
}
#header span
{
display: none;
}

Alles anzeigen

Quellcode

<div id="header"><span>Unsichtbarer Text</span></div>

BennyBunny · 2. Mai 2007, 20:11

danke, super idee!

BennyBunny · 3. Mai 2007, 23:28

Das Teil stellt ein Header-Logo dar. Nun möchte ich das aber noch auf die Hauptseite verlinken, aber ich kann ja jetzt nicht mehr draufdrücken, weils ja "nicht mehr angezeigt wird".

Noch ne Idee, wie ich das Problem lösen kann?

Baby Herman · 3. Mai 2007, 23:34

Nicht getestet, aber ich glaub das funtzt:

Quellcode

body
{
margin: 0;
padding: 0;
font: 80% Tahoma;
}
a:link {color: #000000; text-decoration: none}
a:visited {color: #000000; text-decoration: none}
a:hover {color: #000000; text-decoration: underline}
#container
{
margin: 130px auto;
width: 490px;
text-align: left;
}
#header
{
height: 86px;
width: 152px;
background-image: url(templates/images/pico.png);
margin: 0 auto;
text-align: center;
}
#header span
{
visibility: hidden;
}

Alles anzeigen

Quellcode

<div id="header"><a href="#"><span>Unsichtbarer Text</span></a></div>

Dabei wird der span-Bereich lediglich unsichtbar, dient also immer noch als Platzhalter. Du kannst sonst auch mal versuchen dem Link eine festgelegte Breite und Höhe zu geben oder einfach die Eigenschaft display:block; zu verwenden.

Etwas schwammig, aber ich hoffe es wird klar, was ich meine. Bin einfach ein Stück zu müde um es noch genauer auszuführen.

Frag sonst noch mal.

BennyBunny · 4. Mai 2007, 00:38

Quellcode

<div id="header">
<h1><a href=""><span>PiCO</span></a></h1>
<h4>Impressum</h4>
</div>

Quellcode

#header
{
margin: 0 auto;
height: 69px;
width: 135px;
text-align: center;
}
#header h1
{
margin: 0 auto;
height: 69px;
width: 135px;
background-image: url(templates/images/pico.png);
background-repeat: no-repeat;
}
#header span
{
display: block;
height: 69px;
width: 135px;
visibility: hidden;
}

Alles anzeigen

Bei Firefox natürlich kein Problem, aber im IE kann man nichts klicken.... Lösungsvorschläge?

BennyBunny · 4. Mai 2007, 03:08

Gelöst!

Quellcode

#header
{
margin: 0 auto;
height: 69px;
width: 135px;
text-align: center;
}
#header h1
{
margin: 0 auto;
height: 69px;
width: 135px;
background-image: url(templates/images/pico.png);
background-repeat: no-repeat;
}
#header a
{
display: block;
height: 69px;
width: 135px;
text-decoration: none;
}
#header span
{
visibility: hidden;
}

Alles anzeigen

IE Schriftproblem

IE Schriftproblem

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Teilen

Tags