Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

CSS, weergave in FF en IE verschillend

Fly
10 antwoorden
  • Hoi ,


    De site is te zien op http://www.sitecreatie.nl/workshops2006/index.html

    Enthousiast probeer ik de weergave inhoud en opmaak te scheiden, ik probeer ook voorlopig om voor alle opmaak even gescheiden stylesheets te gebruiken, omdat ik anders door de bomen het bos niet meer zie. Ik heb er echt veel over gelezen, maar kom toch een aantal probs tegen:

    * in FF wordt de kopbalk anders weergegeven, in IE ziet de balk er veel groter uit, waardoor er veel meer paginaruimte in beslag wordt genomen. Als ik probeer de lettergrootte aan te passen, worden de letters onleesbaar klein in FF en nog steeds te groot in IE
    * probleem 1 als ik onder het topmenu niet een extra div zet met een image erin ( wat er natuurlijk niet fraai uitziet, ) dan verspringt het linkermenu naar rechts in FF, ondanks het floatleft commando van het linkermenu #leftside in de css ( master2.css). In IE krijg ik wel een normale weergave. In Opera helpt zelfs de extra div niet en staat het linkermenu aan de rechterkant.
    * probleem 2 , het lukt mij niet om de overbodige ruimte boven het linkermenu (#leftside) en de content (#leftside2) te verwijderen, dit heeft natuurlijk alles te maken met die extra div met image die ik moest inlassen, maar het ziet er niet uit zo
    * probleem 3 de content wrapte zich om het linkermenu, terwijl ik juist graag 2 verschillende kolommen wil hebben, 1 voor het linkermenu en 1 voor de content, dit heb ik geprobeerd op te lossen door in css de content te herbenoemen met leftside2 ( in master2.css ) maar nu is de linkerkolom weer veel te breed.
    * in alle gevallen valt het mij op dat ik in de designweergave in DW niet een ordenlijk geheel zie, zoals anders altijd wel het geval is, dus dan ga ik er maar van uit dat er ergens een fout zit; de html validator geeft echter niets aan, een css validator heb ik niet kunnen vinden.
    Ik vermoed dat er dus ergens in de verschillende CCS stylesheets iets tegenstrijdigs zit, maar kan er niet achter komen waar de fout zit. Waarschijnlijk staan er ook dingen dubbel in, maar als ik probeer dubbele dingen weg te halen valt alles als een kaartenhuisje in elkaar.
    * Bij FF en Opera krijg ik de onderste menu balk niet goed in beeld, althans niet zoals bij IE, het copyright zit er er te strak onder.
    Bij de link http://www.sitecreatie.nl/workshops2006/workshopsoverzicht.html heb ik een tabeloverzicht in een div gezet , maar de breedte tussen de lijnen is veel te groot en de kopletters krijg ik in css niet goed, die staan nu in fonts.css onder de naam H2 ,et een kleur, maar dat wil dus niet.
    * ook de gekleurde scrollbar zoals gedefinieerd in het main.css is niet zichtbaar

    NB: de meeste links doen het nog niet of linken door naar de oude site.

    Ik heb me voor deze probleempjes suf gezocht maar kan niet de juiste oplossingen vinden.
    Kunnen jullie mij verder helpen?

    greetz
    Fly
  • [quote:3bb6aef68f="Fly"]
    * in FF wordt de kopbalk anders weergegeven, in IE ziet de balk er veel groter uit, waardoor er veel meer paginaruimte in beslag wordt genomen. Als ik probeer de lettergrootte aan te passen, worden de letters onleesbaar klein in FF en nog steeds te groot in IE [/quote:3bb6aef68f] probeer eens een fixes hieght mee te geven aan die kopbalk
    [quote:3bb6aef68f="Fly"]
    * probleem 1 als ik onder het topmenu niet een extra div zet met een image erin ( wat er natuurlijk niet fraai uitziet, ) dan verspringt het linkermenu naar rechts in FF, ondanks het floatleft commando van het linkermenu #leftside in de css ( master2.css). In IE krijg ik wel een normale weergave. In Opera helpt zelfs de extra div niet en staat het linkermenu aan de rechterkant.[/quote:3bb6aef68f]
    verander:

    float: left;
    background: #FFEBCE;
    width: 25%;
    margin: 0 auto;
    padding: 1em 0;
    font-family: georgia, verdana, serif;
    font-size: 11px;
    text-align: left;
    text-transform: lowercase;

    in dit in dit:
    float: left;
    background: #FFEBCE;
    width: 25%;
    margin: 0px;
    padding: 1em 0;
    font-family: georgia, verdana, serif;
    font-size: 11px;
    text-align: left;
    text-transform: lowercase;
    probeer ook eens in met vaste eenheden te gaan werken
    [quote:3bb6aef68f="Fly"]
    * probleem 2 , het lukt mij niet om de overbodige ruimte boven het linkermenu (#leftside) en de content (#leftside2) te verwijderen, dit heeft natuurlijk alles te maken met die extra div met image die ik moest inlassen, maar het ziet er niet uit zo[/quote:3bb6aef68f] ik wet hier geen oplossing voor
    [quote:3bb6aef68f="Fly"]* probleem 3 de content wrapte zich om het linkermenu, terwijl ik juist graag 2 verschillende kolommen wil hebben, 1 voor het linkermenu en 1 voor de content, dit heb ik geprobeerd op te lossen door in css de content te herbenoemen met leftside2 ( in master2.css ) maar nu is de linkerkolom weer veel te breed. [/quote:3bb6aef68f]geef miss een vaste breedte op, ander zou ik het neit zo 1 2 3 weten [quote:3bb6aef68f="Fly"]
    * in alle gevallen valt het mij op dat ik in de designweergave in DW niet een ordenlijk geheel zie, zoals anders altijd wel het geval is, dus dan ga ik er maar van uit dat er ergens een fout zit; de html validator geeft echter niets aan, een css validator heb ik niet kunnen vinden.
    Ik vermoed dat er dus ergens in de verschillende CCS stylesheets iets tegenstrijdigs zit, maar kan er niet achter komen waar de fout zit. Waarschijnlijk staan er ook dingen dubbel in, maar als ik probeer dubbele dingen weg te halen valt alles als een kaartenhuisje in elkaar.[/quote:3bb6aef68f]http://jigsaw.w3.org/css-validator/ [quote:3bb6aef68f="Fly"]
    * Bij FF en Opera krijg ik de onderste menu balk niet goed in beeld, althans niet zoals bij IE, het copyright zit er er te strak onder.
    Bij de link http://www.sitecreatie.nl/workshops2006/workshopsoverzicht.html heb ik een tabeloverzicht in een div gezet , maar de breedte tussen de lijnen is veel te groot en de kopletters krijg ik in css niet goed, die staan nu in fonts.css onder de naam H2 ,et een kleur, maar dat wil dus niet.[/quote:3bb6aef68f] wat bedoel je hier precies mee. probeer anders een extra margin of padding in te voegen voor 1`van beiden ?[quote:3bb6aef68f="Fly"]
    * ook de gekleurde scrollbar zoals gedefinieerd in het main.css is niet zichtbaar[/quote:3bb6aef68f] dit is meestal alleen zichtbaar in IE maar laat dat maar weg, het wordt alleen weergeven in IE en dan nog neit altijd.

    ik hoop dat ik het goed heb anders zou ik het niet weten, correct me if i'am wrong
  • probeer eens een fixes hieght mee te geven aan die kopbalk
    Dat helpt dus wel in FF en Opera , maar niet in IE, daar blijft de balk en het lettertype nog veel te groot.
    [quote:2fb0ca80b8="s.Mighty"]verander:
    float: left;
    background: #FFEBCE;
    width: 25%;
    margin: 0 auto;
    padding: 1em 0;
    font-family: georgia, verdana, serif;
    font-size: 11px;
    text-align: left;
    text-transform: lowercase;

    in dit in dit:
    float: left;
    background: #FFEBCE;
    width: 25%;
    margin: 0px;
    padding: 1em 0;
    font-family: georgia, verdana, serif;
    font-size: 11px;
    text-align: left;
    text-transform: lowercase;
    probeer ook eens in met vaste eenheden te gaan werken[/quote:2fb0ca80b8]

    Heb het geprobeerd, maar werkt niet helaas , dacht ook juist dat het de bedoeling was om vaste eenheden te vermijden ??


    geef miss een vaste breedte op, ander zou ik het neit zo 1 2 3 weten
    dat werkt dus niet helaas, overigens de
    css-validator/ geeft niet echt belangrijke fouten aan

    wat bedoel je hier precies mee. probeer anders een extra margin of padding in te voegen voor 1`van beiden ?
    perfect : dat werkt! Nu de rest nog .. Sorry dat ik nog niet zo handig ben in dat quote gedoe :oops: Maar het linkermenu zweeft nog steed rechts in FF en Opera en de tabel heeft nog steeds teveel ruimte tussen de regels en rondom, in alle browsers
  • [quote:c3034e3135="Fly"]Enthousiast probeer ik de weergave inhoud en opmaak te scheiden[/quote:c3034e3135]Da's mooi :)
    [quote:c3034e3135="Fly"]ik probeer ook voorlopig om voor alle opmaak even gescheiden stylesheets te gebruiken, omdat ik anders door de bomen het bos niet meer zie.[/quote:c3034e3135]Verschillende stylesheets gebruiken bij de ontwikkeling van een site is niet zo handig, soms zit de fout in de ene terwijl je in de andere kijkt. Een stylesheet ordenen kan bijv. zoals beschreven op Stopdesign - CSS Organization Tip 1: Flags.

    [quote:c3034e3135="Fly"]in IE ziet de balk er veel groter uit[/quote:c3034e3135]Idd een height meegeven. Daarnaast zorgt de margin van de tekst ervoor dat de balk groter wordt. De ondermargin van de h2 op nul zetten lost dat op.
    [quote:c3034e3135="Fly"]als ik onder het topmenu niet een extra div zet met een image erin ( wat er natuurlijk niet fraai uitziet, ) dan verspringt het linkermenu naar rechts in FF[/quote:c3034e3135]Hoe je de layout met floats voor elkaar kunt krijgen, staat op www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/ . Probleem 2 en probleem 3 hebben daar ook mee te maken.

    [quote:c3034e3135="Fly"]in alle gevallen valt het mij op dat ik in de designweergave in DW niet een ordenlijk geheel zie[/quote:c3034e3135]De designweergave geeft een indicatie, maar is niet de manier om je layout te checken. Dat doe je door F12 en CRTL+F12 (browservoorbeeld).

    [quote:c3034e3135="Fly"]Waarschijnlijk staan er ook dingen dubbel in, maar als ik probeer dubbele dingen weg te halen valt alles als een kaartenhuisje in elkaar. [/quote:c3034e3135]Het is belangrijk dat je stijlregels die voor de hele pagina gelden, zo veel mogelijk beperkt. Een idee is om gebruik te maken van de basisstyling op Kurafire. Het is dus uiteindelijk vaak handiger om niet voor de hele pagina in te stellen hoe een link eruit moet zien, maar per paginasegment (#header, #footer, etc.). Dat voorkomt dat regels elkaar tegenspreken of elkaar versterken. Dat heet inheritance.

    [quote:c3034e3135="Fly"]ook de gekleurde scrollbar zoals gedefinieerd in het main.css is niet zichtbaar[/quote:c3034e3135]Zoals s.Mighty zegt.

    Quoten doe je door een quote te beginnen met
    (maar dan aan elkaar en let op de ") en te eindigen met
    . Je kunt een door jezelf geplaatst bericht achteraf nog wijzigen (zie de knop 'wijzig').
  • Lieve Boelieboelie,
    ik hoopte al zo dat jij een antwoord zou geven, ik ga het allemaal even proberen ( en alles lezen) en hoop dat je me weer support wil geven als ik nog ergens vragen over heb, Ontzettend bedankt alvast !

    greetz
    Fly
  • na een dagje lezen en uittesten heb ik nu tijdelijk alles in 1 css gezet en er zaten inderdaad dubbele dingen in.
    Dat verhielp een aantal problemen.
    Wat nu nog niet lukt is om :
    * de letters in de kopbalk in FF even groot weer te geven als in IE Als ik probeer de lettergrootte aan te passen, worden de letters onleesbaar klein in FF en nog steeds te groot in IE
    * het div onder het topmenu is nog steeds nodig omdat het linkermenu in FF anders naar rechts verspringt, ondanks alle floatingtestjes die ik geprobeerd heb, In Opera helpt zelfs de extra div niet en staat het linkermenu nog steeds aan de rechterkant.
    *Bij de link http://www.sitecreatie.nl/workshops2006/workshopsoverzicht.html zit er tussen de regels in de rechter tabel van het workshopsoverzicht nog steeds te veel ruimte, het lukt me niet om die ruimte kleiner te maken

    Een nieuw probleem waar ik tegen aanloop is dat ik het lettertype en grootte in het linkermenu niet kan veranderen, heb alles geprobeerd.

    Verder zit er rechts onderaan naast de footer nog steeds een stukje van de achtergrond wat ik ook niet wegkrijg.
    Het Css is te vinden op http://www.sitecreatie.nl/workshops2006/style/totaal.css


    Graag zou ik willen weten wat jullie van de opmaak vinden en wat er misschien verbeterd zou kunnen worden om alles zo duidelijk mogelijk te krijgen.

    greetz
    Fly
  • [quote:9f38ffaedd="Fly"]Wat nu nog niet lukt is om :
    * de letters in de kopbalk in FF even groot weer te geven als in IE[/quote:9f38ffaedd]Je hebt nog steeds een paar keer fontgroottes voor h1 en h2 gedefiniëerd. Ik zou eigenlijk overal de fontgroottes weghalen en opnieuw per segment (#content, #footer, etc.) fontgroottes definiëren.
    Daarnaast is het beter om in ems en/of percentages te werken dan in px, want dan kan men in IE ook de lettergrootte veranderen.
    Lees bijv.:
    http://css-discuss.incutio.com/?page=UsingEms
    www.thenoodleincident.com/tutorials/typography/

    [quote:9f38ffaedd="Fly"]het div onder het topmenu is nog steeds nodig omdat het linkermenu in FF anders naar rechts verspringt, ondanks alle floatingtestjes die ik geprobeerd heb, In Opera helpt zelfs de extra div niet en staat het linkermenu nog steeds aan de rechterkant. [/quote:9f38ffaedd]Daar weet geen antwoord op, ik heb het met jouw site geprobeerd op de manier van 456 Berea Street, zonder die div, en bij mij kwam het goed…
    Heb je Opera 8? (Die is gratis te krijgen op www.opera.com.)

    [quote:9f38ffaedd="Fly"]Bij de link http://www.sitecreatie.nl/workshops2006/workshopsoverzicht.html zit er tussen de regels in de rechter tabel van het workshopsoverzicht nog steeds te veel ruimte[/quote:9f38ffaedd]Ben niet goed in tabellen, misschien kan wat info over het stylen van tabellen je helpen?

    [quote:9f38ffaedd="Fly"]Een nieuw probleem waar ik tegen aanloop is dat ik het lettertype en grootte in het linkermenu niet kan veranderen, heb alles geprobeerd[/quote:9f38ffaedd]Zie eerder commentaar.

    [quote:9f38ffaedd="Fly"]Verder zit er rechts onderaan naast de footer nog steeds een stukje van de achtergrond wat ik ook niet wegkrijg.[/quote:9f38ffaedd]Als je de width van de footer weghaalt, dan werkt -ie volgens mij.
  • Thanks Boelieboelie, ik kom nu een stuk verder!!

    [quote:d2f02f851e="Boelieboelie"]Je hebt nog steeds een paar keer fontgroottes voor h1 en h2 gedefiniëerd. Ik zou eigenlijk overal de fontgroottes weghalen en opnieuw per segment (#content, #footer, etc.) fontgroottes definiëren.
    Daarnaast is het beter om in ems en/of percentages te werken dan in px, want dan kan men in IE ook de lettergrootte veranderen.
    Lees bijv.:
    http://css-discuss.incutio.com/?page=UsingEms
    www.thenoodleincident.com/tutorials/typography/ [/quote:d2f02f851e]
    Je had helemaal gelijk, ik heb alle font-sizes aangepast. Dat is redelijk gelukt, helaas deed de onderste link het niet, maar ik heb nu alles in % staan en dat werkt een stuk beter. Het probleem met het linkermenu is nu ook gelukkig opgelost.
    [quote:d2f02f851e="Boelieboelie"]]Daar weet geen antwoord op, ik heb het met jouw site geprobeerd op de manier van 456 Berea Street, zonder die div, en bij mij kwam het goed…
    Heb je Opera 8? (Die is gratis te krijgen op www.opera.com.) [/quote:d2f02f851e]
    Ik heb Opera 8.5, maar zal het morgen nog eens opnieuw uittesten en als het dan nog steeds niet goed is in FF en Opera zal ik een testsite maken om het te laten zien, het kan natuurlijk ook nog altijd aan mijn pc liggen :roll:
    De tabel had ik al grotendeels gekoppeld aan een CSS style , maar ik las al dat ik dat nog veel verder kan finetunen. Misschien moet ik een cellpadding opgeven of zo. Ben benieuwd of het quoten nu ook lukt :)
    Nu ben ik nog op zoek hoe ik goed de ronde hoeken aan kan brengen, las hier al wat over in het forum en elders, maar ik ben helaas niet zo handig in het maken van images.
    Graag zou ik nog willen weten wat men vindt van de nieuwe kleurcombinaties en de lay- out, ook wat leesbaarheid betreft en of de navigatie duidelijk genoeg is?
    De oude site is nog te vinden op www.workshops.nl, maar die was niet structureel genoeg.

    Met dank en greetz
    Fly
  • In de link naar The Noodle Incident stond dat je de basisfont-size op 1em zou moeten houden (d.w.z. de font-size van normale tekst) en de font-size in de body op 76% zou moeten houden om de font-size in alle browsers ongeveer van gelijke grootte te maken. (Bij mij doet die link het wel?) Ik zou nog ff testen of Mac-browsers je site ook goed zien, maar op zich kun je denk ik prima met percentages werken.

    Maken van ronde hoeken in Photoshop is te vinden via Google.

    En omdat je nog wat commentaar vroeg over je site:
    - Over het design durf ik weinig te zeggen, er zijn anderen die daar stukken beter in zijn dan ik. Wel vind ik het een vooruitgang t.o.v. de oude versie, een stuk rustiger en betere uitstraling.
    - De knopjes 'terug naar de vorige pagina' vind ik een beetje overbodig, daar heb je immers al knopjes voor in je browser.
    - Het menu vind ik raar ingedeeld, ik moet bijv. bij bedrijfsuitjes zoeken om te weten wat ACW is ('Wie zijn wij').
    - Ik zie dat je XHTML-pagina's maakt. Vergeet dan niet om bijv. <br> af te sluiten als <br />. Maar misschien is XHTML niet zo nuttig.
    - En keywords in je pagina verstoppen, bijvoorbeeld tussen comment-tags, behoort voor zoekmachines tot illegale praktijken (zie kwaliteitsrichtlijnen op die pagina).
  • [quote:8fa2b94944="boelieboelie"] Ik zou nog ff testen of Mac-browsers je site ook goed zien, maar op zich kun je denk ik prima met percentages werken. [/quote:8fa2b94944]
    Helaas ken ik niemand met een Mac, misschien is er iemand op het forum die eens zou willen kijken ?

    En verder ben ik heel blij met je commentaar.
    Wat de keywords betreft :
    ik heb ze er allemaal uitgehaald, ik was mij destijds in eerste instanties niet bewust van het feit dat het niet mocht, maar zag dus dat bepaalde sites hoog scoorden in zoekmachines en ben toen gaan kijken in hun broncode.
    Pas sinds kort ben ik mij er van bewust dat deze vorm van verborgen teksten niet toegestaan zijn.
    Natuurlijk wil ik mij graag aan de regels houden.
    Maar :
    wat mij nu wel bevreemd is dat bij de grote zoekmachines deze vorm van spam kennelijk juist wél gehonoreerd wordt. Want alle concurrenten die de verborgen keywords wel in hun broncode stoppen- en zelfs in de broncode een hele andere tekst hebben staan dan de lezer kan zien- , scoren het hoogste in de zoekmachines:-?
    Zie www.ziezo-workshops.nl en www.art-in-one.nl
    Van beide sites kan je niet zegen dat ze voor de lezer even informatief zijn, als wat de broncode zou doen vermoeden. Hier wordt gewoon handig gegoocheld.
    Nu valt mij wel op dat al deze site in frames gebouwd zijn en ik weet dat o.a. Google die niet goed om kan gaan met frames, maar het is kennelijk dan wel een manier om de wet te omzeilen. En als je je keurig aan de regels houdt, belandt je dus als dank veel lager in de zoekmachines. Dat is natuurlijk niet echt hartverwarmend, om niet te zeggen soms heel frustrerend. :(




    greetz
    Fly

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.