[CSS] layout probleem, verschil tussen IE6 en FireFox 0.8 - Softwareontwikkeling

dinsdag 13 april 2004 00:17

Acties:

Cookies :9

Topicstarter

Naar aanleiding van Standaarden (W3C, etc.), en geinspireerd door de geweldige site http://www.csszengarden.com/ (thanx to xces for the link) ben ik weer eens begonnen aan het opzetten van een nieuwe site.

Nu loop ik echter tegen een 'leuk' probleem op. In IE6 gaat alles goed, maar in FireFox 0.8 gebeurt er iets vreemd. Ik heb het helaas nog niet met andere browsers kunnen testen. Het probleem is als volgt:

Ik wil een link maken met een klein plaatje ervoor en erna, dit is in html opzich makkelijk te doen, maar gezien ik de opmaak wil scheiden van de inhoud van de pagina is dit een stuk lastiger. (zie bovenstaand topic voor meer info omtrent het scheiden van opmaak en inhoud, die discussie wil ik hier niet voeren).

Dit is mijn html code (deels):

HTML:

<body>

<div id="container">
    <div id="bar">
            <p class="p1"><span><a href="/" title="Login">Login</a>
            &nbsp;&nbsp;<span></p>
    </div>  
</div>
</body>

en dit is mijn stylesheet (deels):

Cascading Stylesheet:

#container { 
    
    margin: 20px;
    border: 2px solid #000000;
    width: 100px;
    color: #000000;
    background-color: #dddddd;
    }

#bar {
    margin: 0px; 
    padding-top: 5px;
    
    font-family: verdana;
    font-size: 11px;
    margin-bottom: 0px;
    width: 100px;
    height: 25px;

    background-image: url(bar.png);
    border: solid #000000;
    border-width: 1px 0px 1px 0px;
    }

#bar a:link, a:visited, a:hover{
    background: url(dot.png) no-repeat 5px 8px;
    padding: 5px 2px 0px 15px;
    color: #000000;
}

#bar span{
    background: url(dot.png) no-repeat;
    pading: 0px;
    background-position: 100% 8px;
}

Volledige pagina: http://www.xs4all.nl/~laarmanr/cssprobleem1/test.html en de DTD die ik gebruik is xhtml11.dtd.

In IE6 ziet het er goed uit:
Afbeeldingslocatie: http://www.xs4all.nl/~laarmanr/cssprobleem1/ie6.png

Afbeeldingslocatie: http://www.xs4all.nl/~laarmanr/cssprobleem1/ie6.png

In FireFox 0.8 gaat er toch iets mis, het tweede blokje is kleiner en zit toch iets lager:
Afbeeldingslocatie: http://www.xs4all.nl/~laarmanr/cssprobleem1/firefox.png

Afbeeldingslocatie: http://www.xs4all.nl/~laarmanr/cssprobleem1/firefox.png

Ik heb de search van GoT en Google uitgeput, maar heb niks kunnen vinden. Door wat waarden te veranden in #bar span{...} kan ik de opmaak wel goed krijgen voor FireFox maar dan klopt het in IE6 niet meer.

Misschien dat iemand weet wat ik verkeerd doe, of wat ik anders kan doen zodat het wel werkt met zowel IE6 als FireFox.

btw: * [ash] vraagt zich af of een 'groot (css-)problemen topic' handig zou zijn...

edit:
html code ff wat netter gemaakt zodat de layout niet verkl**t wordt

[ Voor 7% gewijzigd door [ash] op 13-04-2004 08:33 ]

dinsdag 13 april 2004 00:33

Acties:

Sendy

Door zo je code te lezen snap ik dot.png en bar.png niet. Zijn dat die gele vierkantjes? Ook snap ik de border van #bar niet zo. Zie ik dat?

Verder kan je je css verkleinen door de .hover etc. eruit te halen, dat is vast niet relevant voor het probleem.

--edit
Ken je trouwens http://editcss.mozdev.org/index.html? En pading mag er ook uit.

[ Voor 17% gewijzigd door Sendy op 13-04-2004 00:39 ]

dinsdag 13 april 2004 00:46

Acties:

Verwijderd

Check dit ook ff:

www.stijlstek.nl

Hier heb ik goede tips over het meesturen van http-headers gevonden, afhankelijk van de gebruikte browser.

dinsdag 13 april 2004 08:30

Acties:

[ash]

Cookies :9

Topicstarter

Sendy schreef op 13 april 2004 @ 00:33:
Door zo je code te lezen snap ik dot.png en bar.png niet. Zijn dat die gele vierkantjes? Ook snap ik de border van #bar niet zo. Zie ik dat?

Verder kan je je css verkleinen door de .hover etc. eruit te halen, dat is vast niet relevant voor het probleem.

--edit
Ken je trouwens http://editcss.mozdev.org/index.html? En pading mag er ook uit.

Hetgeen ik hier laat zien is een deel van een volledige site, ik heb mijn html en css code zoveel mogelijk verkleind. Ik heb wel de styles van de verschillende gebruikte div's laten staan, om zo een duidelijk beeld te scheppen. Ik wil er natuurlijk niet te veel uit halen.

De meerdere borders zijn dus afkomstig van de layout van de hele pagina, bar.png is hier de achtergrond van een balk die over de hele breedte loopt. Dot.png is inderdaad het orange vlakje dat voor en na de link staat. Het is nu nog een vakje tijdens het testen, dit zal later anders worden.

Die padding van #bar a:link... {} is nodig om ervoor te zorgen dat de tekst niet helemaal links over dot.png wordt uitgelijnd. Die padding van #bar span had idd weggekund, deze stond er nog ivm het testen.

Editcss ken ik nog niet, ga ik zeker vanavond testen, thanx.

Verwijderd schreef op 13 april 2004 @ 00:46:
Check dit ook ff:

www.stijlstek.nl

Hier heb ik goede tips over het meesturen van http-headers gevonden, afhankelijk van de gebruikte browser.

Dit is opzich een optie, maar dit wil ik echt als laatste redmiddel gebruiken, ik zit er niet echt op te wachten om meerdere stylesheets te onderhouden. Maar stijlstek.nl is wel interresant leesvoer.

dinsdag 13 april 2004 08:46

Acties:

T-MOB

Er zitten zowieso twee foutjes in de code...
In de html staat <span> ipv </span>. Daarnaast staat er bij #bar span "pading: 0px;" ipv "padding: 0px".

Regeren is vooruitschuiven

dinsdag 13 april 2004 08:50

Acties:

frapex

got r00t

bij een css stylesheet mag er geen spatie tussen de ":" staan...

Asus A7N8X-X, AMD XP2400+, 2.5GB Infineon+Samsung DDR333, Radeon x1600 Pro, 2x Fujitsu MAP3735NC 10Krpm SCSI 73GB, Seagate Medalist 17.2GB, LiteOn DVD 16x48x, LiteOn 48x12x48, Promise UDMA100/TX2, Adaptec 2110S Ultra3, 2x EIZO FlexScan (F931 & F930)

dinsdag 13 april 2004 09:04

Acties:

Zr40

Moderator General Chat

heeft native IPv6

frapex schreef op 13 april 2004 @ 08:50:
bij een css stylesheet mag er geen spatie tussen de ":" staan...

Dit is wel toegestaan, kijk bijvoorbeeld naar een van de vele pagina's van de CSS specificatie.

A declaration is either empty or consists of a property, followed by a colon (:), followed by a value. Around each of these there may be whitespace.

[ Voor 27% gewijzigd door Zr40 op 13-04-2004 09:05 ]

dinsdag 13 april 2004 09:54

Acties:

[ash]

Cookies :9

Topicstarter

T-MOB schreef op 13 april 2004 @ 08:46:
Er zitten zowieso twee foutjes in de code...
In de html staat <span> ipv </span>. Daarnaast staat er bij #bar span "pading: 0px;" ipv "padding: 0px".

Idd 2 stomme typo's

, maar dit lost het probleem niet op.

dinsdag 13 april 2004 10:10

Acties:

Verwijderd

Als je je site door de w3c validator haalt, dan zie je dat er een paar slordigheidjes in je HTML zit.

Los deze eens op, en kijk eens wat er dan nog fout gaat.

dinsdag 13 april 2004 10:27

Acties:

[ash]

Cookies :9

Topicstarter

Verwijderd schreef op 13 april 2004 @ 10:10:
Als je je site door de w3c validator haalt, dan zie je dat er een paar slordigheidjes in je HTML zit.

Los deze eens op, en kijk eens wat er dan nog fout gaat.

Dat zijn dus die 2 typo's, lost niks op.

dinsdag 13 april 2004 11:08

Acties:

crisp

Devver

Pixelated

Ik vermoed zelf dat het door de paragraph komt; die krijgt mogelijk standaard andere padding/margin in FF.
Verder vind ik dat je erg veel elementen gebruikt, en ook nog eens de verkeerde elementen. Een list leent zich veel beter voor een menu als dit; de algehele background zet je dan op de ul, het linkerblokje als background of zelfs als bullet van je list-item, en het rechtblokje als background van je anchor; je HTML is dan niet meer als dit:

HTML:

<ul id="menu">
  <li><a href="login.php">Login</a></li>
  <li><a href="blaat.php">Blaat</a></li>
  <li><a href="woei.php">Woei</a></li>
</ul>

Intentionally left blank

dinsdag 13 april 2004 12:06

Acties:

[ash]

Cookies :9

Topicstarter

Dat is waarschijnlijk de tip waar ik op zit te wachten, ga het straks anders vanavond ff proberen.

-- edit --
Met een unordered list gaat dit wel allemaal goed, bedankt allemaal, met name crisp vanwege de goudentip

[ Voor 40% gewijzigd door [ash] op 13-04-2004 17:24 ]

vrijdag 16 april 2004 21:18

Acties:

Sendy

Wel koel die lists. Heb je misschien nog een linkje waar we het werkende resultaat kunnen bewonderen/kopieren?

vrijdag 16 april 2004 22:36

Acties:

Verwijderd

http://www.alistapart.com/articles/taminglists/ / http://www.alistapart.com/articles/slidingdoors/ / http://www.alistapart.com/articles/slidingdoors2/

edit:
Hmm.. ja inderdaad. Naar discussies linken is niet echt handig. Gewijzigd.

[ Voor 31% gewijzigd door Verwijderd op 17-04-2004 14:42 ]

zaterdag 17 april 2004 13:54

Acties:

F97

Fabian

Verwijderd schreef op 16 april 2004 @ 22:36:
http://www.alistapart.com/discuss/taminglists/ / http://www.alistapart.com/discuss/slidingdoors/ / http://www.alistapart.com/discuss/slidingdoors2/

http://css.maxdesign.com.au/listamatic/ -> hier, kant en klaar, maar lees eerst Taming Lists op A List Apart zodat je weet hoe het werkt.

(Anne, je linkt naar de discussies !!)