[opgelost]Mozilla geeft andere layout dan IE7.0

[sysman]

Hallo Allemaal,
Ik begin het langzamerhand een beetje te begrijpen en had het volgens mij al min of meer klaar, toen een vriend de site eens in IE ging bekijken. De site www.frysk-seniorenorkest.nl doet het prima in Mozilla en zo zou ik het ook in IE willen hebben.
Het wordt waarschijnlijk veroorzaakt door dit stukje code:


{title}


{content }


title is hetgeen in de (breadcrumb) lijn terecht komt.

.headerstyle1{
width:520px;
display:block;
margin:30px 0 10px 0;
padding:5px 0 5px 8px;
background:#eee url(uploads/andeas03Lft:homepage/gradient2.png) repeat-x;
color:#222;
border-top:1px solid #ddd;
border-right:1px solid #bbb;
border-bottom:1px solid #bbb;
border-left:1px solid #ddd;
text-decoration:none;
}

de in het eerste stukje code positioneert het gedeelte boven de breadcrumbs en
de de plaats waar de tekst begint.

wie weet hier een oplossing voor.
Mozilla Firefox is 3.0.6 en IE is 6.0.2900

[fleur]

Ik gebruik hiervoor  "position".

Je zou aan headerstyle1 het volgende kunnen proberen:
position:absolute;
top:20px;

of
position:relative;
top:-20px;


Zelf even uitzoeken hoeveel px je dient te gebruiken.

Of dit de meeste ideale oplossing is, weet ik niet maar het werkt voor mij goed.

[pedes]

@sysman
Waarom gebruik je al de linebreaks ""
stop alles in aparte div's en je kunt alles positioneren zoals je echt wilt

indien je verschillen bekomt in IE tov. firefox dan kan je ook altijd een hack in je css inbouwen

voor uw IE ziet uw css code er dan zo uit:

.headerstyle1{ ....... }

voor uw niet IE browsers zo:

html>/**/body 
.headerstyle1{ ...... }

greetz
Peter

[sysman]

@sysman
Waarom gebruik je al de linebreaks ""
stop alles in aparte div's en je kunt alles positioneren zoals je echt wilt

indien je verschillen bekomt in IE tov. firefox dan kan je ook altijd een hack in je css inbouwen

voor uw IE ziet uw css code er dan zo uit:

.headerstyle1{ ....... }

voor uw niet IE browsers zo:

html>/**/body 
.headerstyle1{ ...... }

greetz
Peter

Dit was een bestaande template waarin de 's reeds waren opgenomen.
ook waren er bij nader inzien twee mogelijkheden op de headerstyle te gebruiken.
headerstyle en headerstyle1.
het enige verschil tussen deze twee was, dat headerstyle1 een witdth van 520 px had en headerstyle niet.
ik heb headerstyle gebruikt en het probleem was opgelost.
overigens zou ik het geweldig vinden hoe die oplossing met meerdere div's er uitgezien zou hebben.

[sysman]

Ik gebruik hiervoor  "position".

Je zou aan headerstyle1 het volgende kunnen proberen:
position:absolute;
top:20px;

of
position:relative;
top:-20px;


Zelf even uitzoeken hoeveel px je dient te gebruiken.

Of dit de meeste ideale oplossing is, weet ik niet maar het werkt voor mij goed.

waarschijnlijk is het gekomen door de parameter width=520, deze ontbreekt in headerstyle.
zie mijn antwoord aan Pedes.
bedankt voor het meedenken.