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: internet explorer <> firefox

Drewster
6 antwoorden
  • hoi,

    weet iemand waarom deze code wel goed werkt in firefox en niet in internet explorer, en hoe hij misschien wel moet?

    [code:1:517bdd23db]<div id="nav"><ul>

    <li><a href='index.php?p=contact'>Contact</a></li>
    <div id="nav2"><li><a href='index.php?p=visie'>Visie</a></li></div>
    <li><a href='index.php?p=de_coach'>De Coach</a></li>

    </ul></div> [/code:1:517bdd23db]

    Wat internet explorer hier doet is de andere button niet meer nav als div id geeft, firefox doet dat wel dus blijven de andere buttons ook volgens die opmaak.
  • Nou ja, het is ook een beetje onlogische code. Ik weet ook eigenlijk niet of je wel een div in een ul mag plaatsen, heb het nog nooit geprobeerd en ik zou ook niet weten waarom je het zou doen aangezien een li ook een 'blocklevel element' is. Met deze code moet je exact hetzelfde kunnen doen en ziet het er netter uit:
    [code:1:4c7b5ad1d7]<div id="nav"><ul>

    <li><a href='index.php?p=contact'>Contact</a></li>
    <li id="nav2"><a href='index.php?p=visie'>Visie</a></li>
    <li><a href='index.php?p=de_coach'>De Coach</a></li>

    </ul></div> [/code:1:4c7b5ad1d7]
  • Dan doet hij helemaal niets in internet explorer en niet in firefox.

    Zie voor het resultaat met jouw oplossing:

    http://www.robergcoaching.nl/eigen/index2.php

    Tabblad de Coach zou gekleurd moeten zijn, zie bron.

    Voor het goede resultaat, open http://www.robergcoaching.nl/eigen/index.php met Firefox.

    Het vreemde is dat hij het bij het tabblad Contact (meest rechts, in code de bovenste link) wel goed doet, zie http://www.robergcoaching.nl/eigen/index.php?p=contact in internet explorer.
  • De HTML die Drewster aangeeft, klopt. Dan kun je wel zeggen dat het eindresultaat van jouw layout niet klopt, maar aan Drewsters HTML ligt het in ieder geval niet. Het is dan ook niet de bedoeling dat je rare HTML-constructies verzint om je layout goed te krijgen, immers, met CSS regel je de layout, niet met HTML.
    Als je huis naar etenslucht zal stinken bij het koken, kun je ook een gat in de muur maken, maar misschien is het een beter idee als je de afzuigkap gebruikt, ook al werkt dat gat net zo goed.

    Zoek anders ff op css highlight current page.
  • [quote:797395f5bf="XFX88"]Dan doet hij helemaal niets in internet explorer en niet in firefox….[/quote:797395f5bf]
    Ja, je moet dan natuurlijk wel je CSS aanpassen. Ja, ja, ik doe het wel allemaal ff voor, maar je leert er natuurlijk niet van als je niet weet waarom je het moet veranderen!
    Dit:[code:1:797395f5bf]#nav2 li {
    float:right;
    height: 27px;
    background:url(../images/tmenu_over_l.png) no-repeat bottom left;
    margin-left: 4px;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 8px;}

    #nav2 li a {
    float:left;
    display:block;
    line-height: 27px;
    height: 27px;
    background:url(../images/tmenu_over_r.png) no-repeat 100% 100%;
    text-decoration: none;
    font-family: Tahoma, Arial;
    font-size: 14px;
    font-weight: normal;
    color: #282828;
    padding-top: 0px;
    padding-right: 19px;
    padding-bottom: 0px;
    padding-left: 13px;}

    div#nav2 li:hover, div#nav li.sfhover {
    background: url(../images/tmenu_over_l.png) no-repeat bottom left;}

    div#nav2 li:hover a, div#nav li.sfhover a {
    background: url(../images/tmenu_over_r.png) no-repeat bottom right;
    color: #000000;}

    div#nav2 li.active a {
    background:url(../images/tmenu_active_r.png) no-repeat bottom right;
    color: #000000;}

    div#nav2 li.active {
    background:url(../images/tmenu_active_l.png) no-repeat bottom left;}[/code:1:797395f5bf] moet worden:[code:1:797395f5bf]li#nav2 {
    float:right;
    height: 27px;
    background:url(../images/tmenu_over_l.png) no-repeat bottom left;
    margin: 0 0 0 4px;
    padding: 0 0 0 8px;}

    li#nav2 a {
    float:left;
    display:block;
    line-height: 27px;
    height: 27px;
    background:url(../images/tmenu_over_r.png) no-repeat 100% 100%;
    text-decoration: none;
    font-family: Tahoma, Arial;
    font-size: 14px;
    font-weight: normal;
    color: #282828;
    padding: 0 19px 0 13px;}

    li#nav2:hover, li.sfhover {
    /*een id plus class tegelijk in een selector wordt niet ondersteand door IE*/
    /*hover op een li word niet ondersteand door IE6*/
    background: url(../images/tmenu_over_l.png) no-repeat bottom left;}

    li#nav2:hover a, li.sfhover a {/*zie commentaar hierboven*/
    background: url(../images/tmenu_over_r.png) no-repeat bottom right;
    color: #000000;}

    li.active a {
    background:url(../images/tmenu_active_r.png) no-repeat bottom right;
    color: #000000;}

    li.active {
    background:url(../images/tmenu_active_l.png) no-repeat bottom left;}[/code:1:797395f5bf]Nu klopt dit stukje CSS, maar dat betekend niet dat het niet in conflict kan zijn met een ander stuk van je CSS (vooral die sfhover class, als die ergens anders ook nog voor komt). Zomaar copy past doen heeft dan weinig zin want dan krijg je misschien weer nieuwe problemen. Als je geen idee hebt wat ik nou eigenlijk gedaan hebt of waar ik het over heb, dan zou ik me toch maar wat meer gaan verdiepen in CSS (in mijn sig staat een link naar en site met duidelijke tuts).
  • Drewster, bedankt, het werkt. Was natuurlijk stom van me om het niet in de CSS file aan te passen. In ieder geval ontzettend bedankt, kan ik weer verder!

Beantwoord deze vraag

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