Pagina 1 van 1

Menu en header Problemen

Geplaatst: 03 jun 2006, 06:50
door DennizZ
Hoi mensen,
Ik heb het menu en de header uit dit topic ingebouwd
Nu zijn er twee vrij vervelende problemen:
  • oDe tabellen zijn uitgerekt of ingetrokken
    oIn FF werkt alles perfect maar in IE staat het menu vaak in de tekst of als je wilt reply'en staat de reply box helemaal rechtsbuiten beeld.
Ik hoop dat iemand hier een oplossing voor heeft,
Dit zijn namelijk twee vrij vervelende problemen.

Groetjes,
Dennis :thumb:

Geplaatst: 05 jun 2006, 08:15
door DennizZ
Helaasch niemand weet het.

Re: Menu en header Problemen

Geplaatst: 05 jun 2006, 09:53
door Stef
DennizZ schreef:Hoi mensen,
Ik heb het menu en de header uit dit topic ingebouwd
Nu zijn er twee vrij vervelende problemen:
  • oDe tabellen zijn uitgerekt of ingetrokken
    oIn FF werkt alles perfect maar in IE staat het menu vaak in de tekst of als je wilt reply'en staat de reply box helemaal rechtsbuiten beeld.
Ik hoop dat iemand hier een oplossing voor heeft,
Dit zijn namelijk twee vrij vervelende problemen.

Groetjes,
Dennis :thumb:
Beetje *beep* met de width's en height's?

Geplaatst: 05 jun 2006, 12:44
door DennizZ
Waarin zou ik dan moeten *beep*?

Geplaatst: 05 jun 2006, 19:04
door Henk van de Kamer
Ik vroeg mij al af waarom ik opeens weer met het nodige bezoek werd vereerd vanaf dit forum :)

Het probleem is IE dat zoals bekend weinig snapt van stylesheets. In mijn menu maak ik gebruik van een div.article waarin vervolgens alles van phpBB terecht moet komen. Deze is als volgt gedefineerd:

Code: Selecteer alles

div.article {
  position: absolute;
  overflow: hidden;
  top: 120px;
  left: 20px;
  right: 240px;
  text-align: justify;
  padding-bottom: 10pt;
}
Alle normale browsers snappen hieruit dat de marge links 20 pixels wordt en rechts 240 pixels (zodat daarnaast netjes de div met het menu terecht komt). Ofwel daarmee ligt voor deze browsers de breedte dus vast, gewoon wat overblijft tussen deze marges...

Alleen IE doet alsof zijn neus bloedt. Hé, geen breedte. Ach, laat ik dan gewoon doen wat ik leuk vindt. Stupide browser! De oplossing is dus de breedte voor IE gaan vastleggen. Alleen is die dus voor elke surfer anders. Nu snappen IE gebruikers weinig van veilig surfen, ofwel je kan er vanuit gaan dat zij Javascript hebben aanstaan. En dan kan de benodigde breedte gewoon bepaald worden als volgt:

Code: Selecteer alles

<!--[if IE]>
<script type="text/javascript">
if (document.documentElement && document.documentElement.clientWidth) {
  myWidth = document.documentElement.clientWidth; }
else if (document.body && document.body.clientWidth) {
  myWidth = document.body.clientWidth;
}
myWidth = myWidth - 260 - 16;
document.writeln('<style type="text/css">');
document.writeln('div.article {');
document.writeln('  width: ' + myWidth + 'px;');
document.writeln('}');
document.writeln('</style>');
</script>
<![endif]-->
De eerste en laatste regel is meteen een truc om te zorgen dat alleen IE dit script uitvoert. Zijn de zogenaamde conditional comments. Browsers die zich voordoen als IE zien dit nog steeds als commentaar, dus die kunnen we hiermee ook mooi onderscheiden. Het voorkomt ook dat ik het Javascript onder allerlei browsers moet gaan testen, alleen IE is nu afdoende.

Voor bovenstaande door in overall_header.tpl en ook dit probleem is weer opgelost :).

Geplaatst: 05 jun 2006, 19:42
door Bee
Leuk u weer eens te zien :D

De bug is opgelost in Internet Explorer 7, dus zijn hier andere conditional comments nodig, en dan wordt het:

Code: Selecteer alles

<!--[if lt IE 7.]>
ipv

Code: Selecteer alles

<!--[if IE]>
Meer info over CSS bugfixes in IE7 is te vinden op http://blogs.msdn.com/ie/archive/2006/02/02/523679.aspx

Geplaatst: 05 jun 2006, 20:44
door DennizZ
Henk van de Kamer schreef:Ik vroeg mij al af waarom ik opeens weer met het nodige bezoek werd vere... *knip * ...or in overall_header.tpl en ook dit probleem is weer opgelost :).
Bedankt voor de hulp maar het lijkt niet te helpen,
Aangezien ik nog steeds alleen de emoticons box zie.

Geplaatst: 06 jun 2006, 09:39
door Henk van de Kamer
Bee schreef:Leuk u weer eens te zien :D
Ik kom regelmatig anoniem langs hoor :). Meestal als ik weer wat ellende moet oplossen omdat er figuren zijn die menen dat alles mag op het internet :(.
Bee schreef:De bug is opgelost in Internet Explorer 7, dus zijn hier andere conditional comments nodig, en dan wordt het:
Ik heb IE7 heel even kunnen bekijken en had daarin gezien dat de nodige CSS bugs nog aanwezig zijn. Als deze zou zijn opgelost is dat mooi! Echter het kan volgens mij geen kwaad om de breedte uit te rekenen, ook niet in IE7.

Andere vraag, is die laatste . nodig? Ik dacht dat lt IE 7 automatisch alles kleiner dan versie 7 betekend?

Geplaatst: 06 jun 2006, 09:44
door Henk van de Kamer
DennizZ schreef:Bedankt voor de hulp maar het lijkt niet te helpen,
Aangezien ik nog steeds alleen de emoticons box zie.
Heb even de broncode opgevraagd en dan zie ik:

Code: Selecteer alles

<link rel="stylesheet" href="templates/subSilver/subSilver.css" type="text/css">
<link rel="stylesheet" href="templates/subSilver/blue.css" type="text/css">
<!--[if IE]>
<script type="text/javascript">
if (document.documentElement && document.documentElement.clientWidth) {
  myWidth = document.documentElement.clientWidth; }
else if (document.body && document.body.clientWidth) {
  myWidth = document.body.clientWidth;
}
myWidth = myWidth - 260 - 16;
document.writeln('<style type="text/css">');
document.writeln('table {');
document.writeln('  width: ' + myWidth + 'px;');
document.writeln('}');
document.writeln('</style>');
</script>
<![endif]-->
</head>
<!--[if lt IE 7.]>
<script type="text/javascript">
if (document.documentElement && document.documentElement.clientWidth) {
  myWidth = document.documentElement.clientWidth; }
else if (document.body && document.body.clientWidth) {
  myWidth = document.body.clientWidth;
}
myWidth = myWidth - 260 - 16;
document.writeln('<style type="text/css">');
document.writeln('div.article {');
document.writeln('  width: ' + myWidth + 'px;');
document.writeln('}');
document.writeln('</style>');
</script>
<![endif]-->
<body>
Ofwel je moet die eerste weghalen. Ik probeerde daar de tabel te dwingen de juiste breedte te krijgen. Maar in een paar van de templates worden tabellen in tabellen gebruikt en dan krijgt bijvoorbeeld de emotiocons al de breedte en wordt de tabel waarin deze staat dus veel te groot. Verder moet de code boven de >/head>-tag. Tot slot zou na een goede verbouwing het originele subSilver stijlsheet niet meer nodig moeten zijn, ofwel die link kan dan weg...

Geplaatst: 06 jun 2006, 13:56
door DennizZ
Aah kijk eens aan,
Ik dank je hartelijk het werkt perfect :bier:
Nogmaals bedankt voor tijd en moeite.

Geplaatst: 06 jun 2006, 14:55
door Bee
Henk van de Kamer schreef:Andere vraag, is die laatste . nodig? Ik dacht dat lt IE 7 automatisch alles kleiner dan versie 7 betekend?
Die punt is er zodat eventuele subversies ook herkend worden (denk aan Service Packs die in de toekomst vast weer nodig zullen zijn)

Geplaatst: 06 jun 2006, 20:54
door DennizZ
Er is inderdaad nog het nodige schijfwerk nodig in viewtopic en sowieso nog een aantal tabellen op het forum die uitgerekt zijn zowel in Firefox als in Internet Explorer

Geplaatst: 12 jun 2006, 13:27
door DennizZ
DennizZ schreef:Er is inderdaad nog het nodige schijfwerk nodig in viewtopic en sowieso nog een aantal tabellen op het forum die uitgerekt zijn zowel in Firefox als in Internet Explorer
...die ik nog steeds niet gefixed heb.