[CSS] tekengrootte in IE

[toost]

PROBLEM SOLVED

Ik heb een probleem met de weergave van een website die ik aan het maken ben. Wanneer de tekengrootte op de standaard instelling (normaal) staat. is er niks aan de hand dan ziet het er als volgt uit:



wanneer er een grotere tekengrootte geselecteerd wordt gebeurd het volgende:



Op zich is dit vrij logisch, de pixel grootte van de letter is dan groter dan de lengte van de <td> waar hij in staat, en dus wordt de <td> vergroot en en plaatje wat als achtergrond bij die <td> stond ingesteld wordt opnieuw weergegeven. En hierdoor is de pagina opbouw verstoord.

Is er een manier waardoor ik dit kan oplossen?

bv. de tekengrootte van IE standaard als de website bezocht wordt op Normaal zetten via een script???? De lettergrootte zo vast zetten dat deze niet te beinvloeden is via de tekengrootte van IE????

Alvast bedankt,

TooST

[ Voor 10% gewijzigd door toost op 28-06-2006 20:13 ]

[NMe]

Laat om te beginnen die achtergrond eens niet repeaten. Daarnaast zijn tabellen voor layout vies (je merkt nu waarom ). De beste oplossing is divs gebruiken in plaats van tables.

Verder heeft dit alles niets met PHP te maken, dus die taal sloop ik ook uit je titeltag.

[BtM909]

Zonder een regel code is het natuurlijk lastig te verklaren. Heb je je tekstgroottes gedefinieerd in CSS en zo ja hoe? Waarschijnlijk niet met px

[toost]

Ik had verwacht dat hier een handigheidje voor was die ik nog niet wist . Vandaar geen regel code.

De fontsize is in de css gedeclareerd en wel in px. :

code:

.headmenulink3:link {  color: #C5D2E3; font-family: Arial; text-decoration: none; font-size: 14px; font-weight: bold;}

.headmenulink3:visited { color: #C5D2E3; font-family: Arial; text-decoration: none; font-size: 14px; font-weight: bold;}

.headmenulink3:hover { color: #5A7BAD; font-family: Arial; text-decoration: none; font-size: 14px; font-weight: bold;}

verder is de betreffende code van de tabel als volgt:

code:

<td width="190" height="19" background="images/4.jpg">
&nbsp;&nbsp;
<a href="index.php" class="headmenulink3">HOME</a>
</td>

edit:

Ik zie trouwens geen verandering van de grootte van de letters wanneer de tekengrootte veranderd wordt. Deze blijven gelijk. Maar ondanks dat rekt hij dus wel de <td> uit.
Ook heb ik ondertussen background-repeat op no-repeat gezet waardoor inderdaad het plaatje niet meer uitgerekt wordt. Helaas onstaat hierdoor wel een kleine open ruimte waar ik nog iets voor moet verzinnen

[ Voor 26% gewijzigd door toost op 26-06-2006 15:32 ]

[Blackbird-ce]

Wellicht een optie om de hoogte van de td vast te stellen? Eventueel met een maxlength die even groot is als een minlength. (Voor IE moet je dan wel een extra javascriptje draaien, ome Bill kent maxlength nog niet)

[Verwijderd]

je font size niet in px opgeven in IE, dat blokkeert inderdaad schaling. In % of in pt aangeven maakt (geloof ik, test het ff) de boel wel schaalbaar

[toost]

@mophor, het is juist de bedoeling dat het niet schaalbaar is, mede doordat ik dus <td> heb gebruikt ipv <div>. Wanneer ik ze wel schaalbaar zet dan wordt of het plaatje uitgerekt of en ontstaat een loze ruimte, en dat is dus uiteraard niet de bedoeling.

Het gene wat ik nu wil verkomen is waneer de tekengrootte van IE op groot of groter wordt gezet de <td> niet uitrekt.

@blackbird-ce, dat zou een mogelijkheid zijn, maar javascript kennis heb ik niet, dus moet ik eens googelen of ik een mooi voorbeeldje tegen komt

[ Voor 20% gewijzigd door toost op 26-06-2006 15:55 ]

[BtM909]

Kijk eens wat er gebeurt als je de line-height ook vastzet?

[Verwijderd]

schaalbaarheid is juist een feature, je moet wel een verdomd goeie reden hebben om dat te blokkeren vind ik, loze ruimte is er geen van.

als ik nou moeite heb om je tekst te lezen, dan zou ik die heel graag iets willen vergroten, als je dat tegenhoudt ga ik wel naar de concurrent die ik wel kan lezen (als klant)

overigens heeft het vermoedelijk te maken met het wel schalen van je line-height

[toost]

Verwijderd schreef op maandag 26 juni 2006 @ 16:01:
schaalbaarheid is juist een feature, je moet wel een verdomd goeie reden hebben om dat te blokkeren vind ik, loze ruimte is er geen van.

als ik nou moeite heb om je tekst te lezen, dan zou ik die heel graag iets willen vergroten, als je dat tegenhoudt ga ik wel naar de concurrent die ik wel kan lezen (als klant)

overigens heeft het vermoedelijk te maken met het wel schalen van je line-height

Hierover hoef ik niet met je in discussie te gaan, want je hebt 100% gelijk, maar wanneer de klant wilde dus juist een vaste lettergrootte, zijn reden was "wanneer je de lettergrootte door de gebruiker laat bepalen verliest het design de uitstraling" (hij heeft zelf 'het design' gedaan). Dus daar hoef ik niet tegen in te gaan.

Ik heb de line-height ook op 14px gezet maar dit maakt geen verschil.

Op het volgende plaatje vind je het resultaat van lettertgrootte "groter" en de background op no-repeat.



ik heb even de 'loze ruimte" omcirkeld. Ik denk trouwens dat mophor iets anders in loze ruimte verstaat als wat ik bedoelde (maar dat is mijn fout, verkeerd omschreven)

edit:

wanneer ik de line-height in de <td> vast zet maakt het wel een verschil. Alleen is het niet de bedoeling dat dit toegepast wordt op elke <td>. Maar zodra ik een apparte class aanmaak voor de <td> dan doet hij het weer niet. Ook als ik de line-height toevoeg aan de "headmenulink3" werkt hij niet.

[ Voor 13% gewijzigd door toost op 26-06-2006 16:24 ]

[Verwijderd]

waarvoor heb je de boel vastgezet? voor de td? of de a? want je &nbsp's schalen natuurlijk ook.

die kun je overigens ook beter vervangen door padding (en de hele td overboord kieperen natuurlijk)

[toost]

In de td wordt niks vast gezet, maar in de a wel. (zie de css class die ik heb toegevoegd in een van de eerste reply's)

edit:
(de td wordt trouwens ook vast gezet, dit door width en height uiteraard). Het overboord gooien van de table structuur is momenteel geen optie omdat dit ook een eis/wens was van de klant, hij wilde tabellen en geen div's omdat op zijn 'apple' div's niet volledig ondersteund worden.

edit 2:
Ik heb ondertussen een 'vieze' tijdelijk oplossing gebruikt, en dat is de <table> ook een background mee gegeven. Wanneer de td nu uitrekt vult hij nu dus de rest ruimte op met het plaatje van de <table>. En aangezien het hier om 2px verschil gaat valt dit niet zo op.

[ Voor 85% gewijzigd door toost op 26-06-2006 16:33 ]

[WormLord]

Je hebt in die tabel natuurlijk ook nog 2 non-breaking-spaces staan die het standaard font gebruiken.
Hierdoor zal het probleem waarschijnlijk veroorzaakt worden.

[toost]

jah uiteraard, daar had ik ook nog niet naar gekeken, deze vallen natuurlijk onder de standaard class in me css. Daar ga ik eens naar kijken! bedankt!.

edit: Dat is het ook al niet Heb ze zelfs even weggehaald om te kijken wat hij dan doet, maar nogsteeds zelfde output

[ Voor 30% gewijzigd door toost op 27-06-2006 09:43 ]

[moozzuzz]

Misschien even handig om het tabel-gedeelte annex alle styles die in op en rond die tabel zitten mee te geven? Waarom background in code definiëren ipv css? Graag je code met code=css en code=html voor betere formatting :-]

HTML:

<!-- welke code hier??! -->
<td class="headmenulink">
<a href="index.php" id="headmenulink3">HOME</a></td>
<!-- welke code hier??! -->

Cascading Stylesheet:

* {font-size: 8px; line-height: 100%; font-family: ;}

.headmenulink {width: ; height: ; background-Image: ; padding: ;
               font-size: 14px; font-weight: bold;
}
a#headmenulink3:link {color: ;}
a#headmenulink3:visited {color: ;}
a#headmenulink3:hover {color: ;}

Ik weet niet zeker of font-size in dit geval zou overgeerfd worden, maar ik zou het in elk geval logisch vinden ;]. Verder zou ik de background-Color van je td exact dezelfde maken van die van je image/rotary-logo/home-button (wat de quick&dirty-truck is om het op te lossen.).

[toost]

Dat laatste heb ik al gedaan waardoor het verschil nog minimaal is (je mist 2 px donker blauw). Dus zo is het goed. Moet er niet nog meer tijd in steken, want de site moet ook vooruit .

Iedereen bedankt!

[Verwijderd]

wat gebeurt er als je de spaties (&nbsp ) bij de <a></a> tag zet ipv ervoor?
volgens mij is het probleem dan verholpen, maar kan het mis hebben

[Rowanov]

toost schreef op maandag 26 juni 2006 @ 16:25:
edit:
(de td wordt trouwens ook vast gezet, dit door width en height uiteraard). Het overboord gooien van de table structuur is momenteel geen optie omdat dit ook een eis/wens was van de klant, hij wilde tabellen en geen div's omdat op zijn 'apple' div's niet volledig ondersteund worden.

Je weet ook dat je met css meer kan dan alleen maar kleurtjes en lettertypen aangeven? Die background, width en height moet je ook lekker in je css regelen om de zooi nog te overzien te houden. Daarnaast is dat van zijn 'apple' die geen div ondersteund echt dikke onzin. Het is namelijk vrij apart als hij wel css ondersteunt, maar geen div. Ik denk hierbij meer aan onkunde van de klant, danwel van jouw kant om dat de klant duidelijk te maken

[toost]

Uiteraard weet ik dat dat ook mogelijk is, maar ik heb de html code uit gezet in include's die door php geinclude worden. Hierdoor hou ik ook het overzicht + wil de klant later zelf de html nog aan kunnen passen, maar heeft maar een erg beperkte kennis van css. Dus vandaar, maar ik moet je ook wel een beetje gelijk geven met "Ik denk hierbij meer aan onkunde van de klant, danwel van jouw kant om dat de klant duidelijk te maken". Klopt van beide kanten

edit:

Het is inderdaad opgelost door de spaties binnen de <a></a> te zetten. Eigenlijk heel vreemd want ik had ook al geprobeerd de spaties ook vast te zetten via de css en ik heb zelfs de spaties weggehaald, maar ik zal wel iets over het hoofd gezien hebben. Iig werkt het nu wel thnx iedereen voor de hulp

[ Voor 28% gewijzigd door toost op 28-06-2006 20:11 ]