Positionering tekst anders in IE dan Mozilla/Netscape

Door Onbekende gebruiker op 09-09-2004 21:20

1.340 views

Ik ben net begonnen met het positioneren via stylesheets. Ik mag het wel, want werkte voorheen veel met tables en frames en ik vind dit wel netter werken en makkelijker toepasbaar.

Nu echter mijn probleem:

Ik positioneer tekst absolute via mijn stylesheet "style.css"
Een voorbeeld:
.text{
position: absolute;
left: 5px;
top: 17px;
margin: 0px;
padding: 0px;
border-width: 0px;
text-align: left;
z-index: 1;
}

Verder staat er ook het volgende font in:
h1{
font-family: "cooper black", verdana, arial, helvetica, sans-serif;
font-size: 25px;
font-weight: 400;
font-style: normal;
color: #FFE400;
}

In mijn html staat het volgende:

<div class="text"><h1>Bla bla</h1></div>

Mijn probleem is nu dat internet explorer en dreamweaver de tekst op een andere hoogte zetten, dan mozilla/netscape. Het lijkt wel of mozilla/netscape alles een regel naar beneden haalt. Kan iemand mij uitleggen hoe dat komt?

d dutchcamel

09-09-2004 21:28

Zoals je eigenlijk al zegt. De verschillende browsers gaan van verschillende beginpositie uit van waar af ze 'tellen'.
Is behoorlijk irritant, is voor zover ik weet alleen op te lossen door alles weer binnen tabellen te halen enzo.
Maar misschien is er een andere oplossing..

? Onbekende gebruiker

09-09-2004 21:39

Dank voor de snelle reactie.

Ik hoop het. Anders is deze manier van het bouwen van een site ineens helemaal niet zo handig. Kan me niet voorstellen dat meerdere mensen hier niet tegenaan zijn gelopen...

d dutchcamel

09-09-2004 21:44

Ik had het idd ook, maar ik heb het opgelost door de broncode van sites te bestuderen die het op dezelfde manier hadden zoals ik het wou (de indeling ongeveer). En kijken wat in het stylesheet staat. Beetje overnemen en wat knutselen is het voor elkaar te krijgen :)

R Rick

09-09-2004 23:10

zoek maar eens op css hacks ofzo, er zijn wel wat dingetjes waardoor het wel goed werkt (IE houdt zich natuurlijk weer es niet aan de regels)

Bas Kreleger

09-09-2004 23:14

wat je moet doen is het volgende:

#wrap {
position: absolute;
left: 20px;
top: 0px;
width: 200px;
border: 1px solid #000;
}

#position {
position: relative;
left: 10px;
top: 0px;
border: 1px solid #000;
}

#position gaat van de positie van #wrap uit.. zo werk ik altijd, en het werkt goed :)

? Onbekende gebruiker

10-09-2004 10:18

Gelukkig heb ik het gevonden:

h1{
font-family: "cooper black", verdana, arial, helvetica, sans-serif;
font-size: 25px;
font-weight: 400;
font-style: normal;
color: #FFE400;
position: relative;
top: 0px;
left: 0px;
margin: 0px;
padding: 0px;
border-width: 0px;

}

Ik weet niet precies welke van de onderste opties de killer was, maar zo doet ie het iig goed

Reageren

Inloggen om te reageren