[CSS] Problemen met FireFox - Softwareontwikkeling

dinsdag 6 december 2005 15:57

Acties:

Topicstarter

Hoi,

'K ben bezig met een website. Deze ben ik aan het bouwen in CSS (later in combinaties met PHP, etc). Natuurlijk de nodige browser-compatible problemen:

Internet Explorer (goed):

Afbeeldingslocatie: http://img209.imageshack.us/img209/3590/internetexplorergoed5rc.th.gif

Firefox 1.5 (fout):

Afbeeldingslocatie: http://img376.imageshack.us/img376/7076/firefoxfout2sr.th.gif

Opera (goed):

HTML:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<title>Webshop</title>

<link rel="stylesheet" type="text/css" href="layout.css">
<link rel="stylesheet" type="text/css" href="tekstlayout.css">

</head>
<body>
</body>

<div id="gehelevak">

    <div id="header" align="center">
    <br>
    [img]"logo.gif"[/img]
    <br>
    </div>

                <div id="balkboven"> 
                <span style="padding:5px;font-size:11px;">Datum auto-insert geval / 
                bewegende lichtkrant met aanbiedingen </span>
                </div>

    <div id="bodyblock" align="right">

            <div id="menu" align="center" style='float:left'>
            <h4 align="center">Menu:</h4>
            <a href="http://www.google.nl">Link1</a><br>
            <a href="http://www.google.nl">Link2</a><br>
            <a href="http://www.google.nl">Link3</a><br>
            <a href="http://www.google.nl">Link4</a><br>
            <br>

    </div>


        <div id="tekstvak">
        <h3 align="center">Welkom in de webshop</h3>
        <p>Tekst:</p>
        <br>
        <br>
        <br>
        <br>
        <br>
        </div>


</div>

        <div id="balkonder" align="center">(c) telefoonbende.nl</div>
        </div>


</html>

CSS:

code:

body {
 margin:20px;
 background:#808080;
 color: #333333;
 text-align:center;
 padding:0;
 }

#gehelevak {
 text-align: left;
 border: 1px solid #000000;
 width: 650 px;
 margin: auto;
 }

#header {
 height: 60 px;
 width: 650px;
 background: #eeeeee;
 color: #333333;
 border: 1px solid #000000;
 border-left: 0px;
_border-right: 0px;
 border-top: 0px;
 border-bottom: 0px;

 }

#balkboven {
 height: 25 px;
 width: 650px; 
 background: #c0c0c0;
 color: #333333;
 border: 1px solid #000000;
 border-left: 0px;
_border-right: 0px;
}

#bodyblock {
 background: #dcdcdc;
 color: #333333;
 width: 650 px;
 padding: 0;
 }

#menu {
 float: left;
 width: 150 px;
 height: 320 px;
 background: #dcdcdc;
 color: #333333;
}

#tekstvak {
 width: 495px;
 height: 320 px;
 background: #ffffff;
 color: #333333;
 border: 1px solid #000000; 
_border-right: 0px;
 border-top: 0px;
 border-bottom: 0px;
 text-align: left;
 }

#balkonder {
 height: 25px;
 width: 650px;
 background: #c0c0c0;
 color: #333333;
 border: 1px solid #000000;
_border-right: 0px;
 border-left: 0px;
 border-bottom: 0px;
 margin: 0;
 }

Met search en google al vaker problemen tegengekomen met firefox en float maar een oplossing kon ik niet vinden. Wie kan me helpen?

Alvast bedankt,

[ Voor 14% gewijzigd door Westereen op 06-12-2005 15:58 ]

dinsdag 6 december 2005 15:59

Acties:

sariel

Verlaag de width van #menu eens? Het lijkt er op dat dat de hele tekstvak naar rechts duwt
en wat je misschien ook zou kunnen proberen, is absoluut positioneren.

Copy.com

dinsdag 6 december 2005 16:01

Acties:

Verwijderd

Wat doet die "_" daar voor border-right?
Overigens een beetje vreemd om de border eerst voor alle kanten te zetten, en dat dan op 3 van de 4 weer terug te draaien...

[ Voor 65% gewijzigd door Verwijderd op 06-12-2005 16:03 ]

dinsdag 6 december 2005 16:05

Acties:

sariel

inderdaad. dit had ook anders gekund:

code:

#balkboven {
 height: 25 px;
 width: 650px; 
 background: #c0c0c0;
 color: #333333;
 border: 1px solid #000000;
 border-left: 0px;
_border-right: 0px;
}

code:

#balkboven {
 height: 25 px;
 width: 650px; 
 background: #c0c0c0;
 color: #333333;
 border: 0px solid #000000;
 border-top: 1px;
}

Copy.com

dinsdag 6 december 2005 16:15

Acties:

Westereen

Topicstarter

Verwijderd schreef op dinsdag 06 december 2005 @ 16:01:
Wat doet die "_" daar voor border-right?
Overigens een beetje vreemd om de border eerst voor alle kanten te zetten, en dat dan op 3 van de 4 weer terug te draaien...

Die "_" is een hack voor InternetExplorer. Als ik die weghaal dan geeft InternetExplorer weer problemen. Heeft verder geen invloed voor dit probleem met firefox

sariel schreef op dinsdag 06 december 2005 @ 15:59:
Verlaag de width van #menu eens? Het lijkt er op dat dat de hele tekstvak naar rechts duwt
en wat je misschien ook zou kunnen proberen, is absoluut positioneren.

Dat veranderd niks in firefox...

dinsdag 6 december 2005 16:21

Acties:

Boelie-Boelie

@Sariel: Zoals al vaker op dit forum is aangegeven (door o.a. crisp), absoluut positioneren kun je beter niet doen.

@Westereen
Ik zou bouwen vanuit FF en later aanpassingen om het in IE goed te laten werken, aangezien IE vol browserbugs zit, vooral m.b.t. CSS, zie Position is Everything voor diverse bugs.

Wat helpt om diverse browserverschillen te verkleinen, is een volledig doctype gebruiken, zie W3C QA voor een recommended list of DTDs.

IE-specifieke regels kun je beter in een apart stylesheet zetten m.b.v. conditional comments.

De twee-kolomslayout die je wilt maken, komt om de paar weken langs. Op 456 Berea Street vind je een uitleg van zo'n layout en het eindresultaat.

[ Voor 7% gewijzigd door Boelie-Boelie op 06-12-2005 16:25 ]

Cogito ergo dubito

dinsdag 6 december 2005 16:24

Acties:

Savantas

I'm with ^^
Overigens niet heel handig om enkele dingen via een style-definitie in het element te benoemen en daarnaast nog eens in je css.

code:

1	<div id="menu" align="center" style='float:left'>

Ook align='center' kan via css...

En zonder hack geeft geen problemen bij mij in IE, zo te zien... En ook dat kan op een mooiere manier: IE7 team roept op tot stop 'IE-hacks'
Ik zou zoiezo alleen de borders benoemen die je wel gebruikt:

code:

#balkonder {
 height: 25px;
 width: 650px;
 background: #c0c0c0;
 color: #333333;
 border-top: 1px solid #000000;
 margin: 0;
 }

[ Voor 62% gewijzigd door Savantas op 06-12-2005 16:31 ]

Ik denk niet zwart-wit, ik denk diapositief! ( ͡° ͜ʖ ͡°)

dinsdag 6 december 2005 16:49

Acties:

JayVee

shibby++!

Boelie-Boelie schreef op dinsdag 06 december 2005 @ 16:21:
@Sariel: Zoals al vaker op dit forum is aangegeven (door o.a. crisp), absoluut positioneren kun je beter niet doen.

offtopic:
Heb je daar ff een linkje voor toevallig?

@Westereen
Ik zou bouwen vanuit FF en later aanpassingen om het in IE goed te laten werken, aangezien IE vol browserbugs zit, vooral m.b.t. CSS, zie Position is Everything voor diverse bugs.

Wat helpt om diverse browserverschillen te verkleinen, is een volledig doctype gebruiken, zie W3C QA voor een recommended list of DTDs.

Wat hij zegt.
Zorg ervoor dat FireFox en Opera het goed doen en voer later hacks toe voor IE (zo nodig, maar dat is bijna altijd wel het geval).

Mocht je nog wat "inspiratie" nodig hebben nodig ik je uit om de CSS van deze "site" eens te bekijken. Ik zeg niet dat die perfect is, maar hij werkt in veel browsers en is kwa CSS redelijk simpel. Success!

[ Voor 15% gewijzigd door JayVee op 06-12-2005 16:53 ]

ASCII stupid question, get a stupid ANSI!

dinsdag 6 december 2005 16:50

Acties:

sariel

Boelie-Boelie schreef op dinsdag 06 december 2005 @ 16:21:
@Sariel: Zoals al vaker op dit forum is aangegeven (door o.a. crisp), absoluut positioneren kun je beter niet doen.

En waarom niet?

Copy.com

dinsdag 6 december 2005 16:54

Acties:

Westereen

Topicstarter

Iedereen bedankt, ga er vanavond even naar kijken

[ Voor 21% gewijzigd door Westereen op 06-12-2005 16:54 ]

dinsdag 6 december 2005 17:37

Acties:

Boelie-Boelie

Met absoluut positioneren haal je het element uit de natuurlijke flow die een document heeft.

Het is bijv. zo dat een div altijd 100% is, tenzij anders aangegeven. Elementen komen altijd links te staan, tenzij anders aangegeven. Met deze wetenschap (en nog enkele andere) kun je een hele layout in elkaar passen, zonder dat je iets uit die flow hoeft te halen. Absoluut positioneren doorbreekt deze goed passende 'puzzel', wat de resultaten minder voorspelbaar maakt.

Overigens heb ik nooit een artikel gelezen over waarom wel of niet absoluut positioneren, het was meer iets dat ik zo hier en daar tussen de regels van artikeltjes door op heb gevangen, maar idd, onderbouwing is wel zo handig. Dus heb ik ff gegoogeld:
- http://archivist.incutio.com/viewlist/css-discuss/46051 (dit bedoel ik te zeggen);
- http://www.w3.org/Talks/2005/0513-CSS-WWW2005/all.htm (zie Towards a solution: CSS2);
- http://www.communitymx.com/content/article.cfm?cid=529B0 (wanneer je absoluut positioneert, moet je met diverse dingen rekening houden).

Cogito ergo dubito

dinsdag 6 december 2005 21:53

Acties:

JayVee

shibby++!

Boelie-Boelie schreef op dinsdag 06 december 2005 @ 17:37:
Met absoluut positioneren haal je het element uit de natuurlijke flow die een document heeft.

Ooohh... maar soms wil je dat juist! Ik ben het er wel mee eens dat je daarmee niet je layout moet regelen. Maar voor sommige elementen is het erg handig en de meest voor de hand liggende techniek.

ASCII stupid question, get a stupid ANSI!

woensdag 7 december 2005 17:29

Acties:

Westereen

Topicstarter

Na een aantal site's te hebben bekeken ben ik tot de volgende oplossing gekomen:

CSS:

code:

#container
{
 background-color: #dcdcdc;
 width: 780px;
 margin: 10px auto;
 color: #333;
 line-height: 130%;
}

#header
{
 padding: .5em;
 background-color: #eeeeee;
 border: 1px solid #000000;
 border-bottom: 0px solid #000000;
}

#bovenbalk {
 background-color: #c0c0c0;
 padding: .5em;
 border: 1px solid #000000;
}


#linksnav
{
 background-color: #dcdcdc;
 float: left;
 width: 150px;
 height: 320px;
 padding: 1em;
 border-left: 1px solid #000000;
}

#rechtsnav
{
 background-color: #dcdcdc;
 float: right;
 width: 150px;
 height: 320px;
 padding: 1em;
 border-right: 1px solid #000000;
}

#inhoud
{
 background-color: #FFFFFF;
 height: 320px;
 margin-left: 200px;
 margin-right: 200px;
 border-left: 1px solid #000000;
 border-right: 1px solid #000000;
 padding: 1em;
 max-width: 36em;
}

#balkonder
{
 clear: both;
 padding: .5em;
 background-color: #c0c0c0;
 border: 1px solid #000000;
}

HTML:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<title>Telefoonbende.nl - Webshop</title>

<link rel="stylesheet" type="text/css" href="layout.css">

</head>

<body>
</body>

<div id="container">

    <div id="header">
        <p align="center">
        [img]"logo.gif"[/img]
        </p>
    </div>
    
    <div id="bovenbalk">
    Datum auto-insert geval / bewegende lichtkrant met aanbiedingen
    </div>
    
    <div id="linksnav">
        <h4 align="center">Menu:</h4>
        <a href="http://www.google.nl">Link1</a><br>
        <a href="http://www.google.nl">Link2</a><br>
        <a href="http://www.google.nl">Link3</a><br>
        <a href="http://www.google.nl">Link4</a><br>
        <br>
    </div>
        
    <div id="rechtsnav">
    <p>
    Rechts
    </p>
    </div>
    
    <div id="inhoud">
    <h2>Welkom op telefoonbende.nl</h2>
    <br>
    <br>
    Tekst 1
    <br>
    <br>
    <br>
    Tekst 2
    <br>
    </div>
    
    <div id="balkonder">
    (c) telefoonbende.nl
    </div>
    
</div>


</html>

Nu word hij helemaal perfect weergeven in Opera, Firefox & InternetExplorer

Het enigste wat een beetje vreemd is dat hij in Opera & Firefox in het midden word weergeven en in InternetExplorer gewoon links. Dit kan ik opzig wel oplossen door de pagina in een I-frame te laden, maar weet iemand ook een andere oplossing?

woensdag 7 december 2005 17:39

Acties:

Boelie-Boelie

IE snapt die margin:auto niet, daarom moet je een trucje gebruiken:
http://maxdesign.com.au/presentation/center/

Cogito ergo dubito

woensdag 7 december 2005 18:04

Acties:

x-man

Proud newbie!

Goed topic. Zit er nu ook mee! Vooral de tip om het vooral eerst in Firefox te ontwikkelen vind ik een goede. Zat eerst in firefox te werken en toen werkte het niet in ie en toen veranderde ik de code, maar toen werkte hij weer niet in firefox. Werd er helemaal gek van.

Better a newbie in one hand then ten wannabe-hacker-scriptkiddies on your server.

woensdag 7 december 2005 19:02

Acties:

Westereen

Topicstarter

Boelie-Boelie schreef op woensdag 07 december 2005 @ 17:39:
IE snapt die margin:auto niet, daarom moet je een trucje gebruiken:
http://maxdesign.com.au/presentation/center/

Super, bedankt $_/-\o_$

Het bovenste stukje van de CSS ziet er nu zo uit en werkt perfect

code:

body { text-align: center; }

#container
{
 background-color: #dcdcdc;
 width: 780px;
 color: #333;
 line-height: 130%;
 margin-left: auto;
 margin-right: auto;
 text-align: left;
}

woensdag 7 december 2005 19:11

Acties:

Westereen

Topicstarter

Nu eigenlijk alles opgelost leek te zijn, toch nog 1 probleempje gevonden:
Als ik de width van linksnav & rechtsnav kleiner maak, worden de "balken" niet kleiner.

code:

#linksnav
{
 background-color: #dcdcdc;
 float: left;
 width: 150px;
 height: 320px;
 padding: 1em;
 border-left: 1px solid #000000;
}

#rechtsnav
{
 background-color: #dcdcdc;
 float: right;
 width: 150px;
 height: 320px;
 padding: 1em;
 border-right: 1px solid #000000;
}

Hoe kan dat? Als ik een width meegeef aan de #inhoud dan dan gebeurd er ook niks. (Wel als de waarde te groot word dan klopt de gehele lay-out niet meer)

woensdag 7 december 2005 19:57

Acties:

Verwijderd

Jouw regel 12 en 13 zijn aardig bizar.

12 <body>
13 </body>

Lijkt me niet helemaal te kloppen

woensdag 7 december 2005 20:56

Acties:

Boelie-Boelie

Westereen schreef op woensdag 07 december 2005 @ 19:11:
Als ik de width van linksnav & rechtsnav kleiner maak, worden de "balken" niet kleiner.

Als je daarnaast ook de margins van #inhoud kleiner maakt, worden #linksnav en #rechtsnav ook kleiner.

En ik zou toch ff een volledig doctype gebruiken, je werkt nu in quirksmode. (Lees op ALA of de site van Sivonen over wat, waarom en hoe.)

Cogito ergo dubito

woensdag 7 december 2005 23:35

Acties:

Verwijderd

Westereen schreef op woensdag 07 december 2005 @ 19:02:
[...]

Super, bedankt

Het bovenste stukje van de CSS ziet er nu zo uit en werkt perfect
code:
1
2
3
4
5
6
7
8
9
10
11
12
body { text-align: center; }

#container
{
 background-color: #dcdcdc;
 width: 780px;
 color: #333;
 line-height: 130%;
 margin-left: auto;
 margin-right: auto;
 text-align: left;
}

Bah

, smerige oplossing.

Dit is de beste oplossing:
zet het volgende boven aan je HTML (dus voor de <html>)

HTML:

1 2	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Der van uitgaand dat je gebruik maakt van xhtml.

Hierdoor snapt IE de "margin: 10px auto" ook

[ Voor 11% gewijzigd door Verwijderd op 07-12-2005 23:36 . Reden: oops, foutje ]

donderdag 8 december 2005 01:57

Acties:

Boelie-Boelie

Verwijderd schreef op woensdag 07 december 2005 @ 23:35:
Bah , smerige oplossing.

Dit is de beste oplossing: [...]

Par0xysm, bekijk jouw oplossing eens in IE5?

Cogito ergo dubito

donderdag 8 december 2005 08:37

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op woensdag 07 december 2005 @ 23:35:
[...]
Der van uitgaand dat je gebruik maakt van xhtml.

Waarom uit gaan van XHTML? HTML is over het algemeen een veel logischere keuze. HTML-parsers doen immers error-correction wat vaak wel prettig is. Daarbij ondersteunt IE helemaal geen XHTML (met XHTML mime-type*)

* en als je XHTML als text/html stuurt zou je eigenlijk ook op appendix C moeten wijzen

Intentionally left blank

donderdag 8 december 2005 09:03

Acties:

Verwijderd

Hmm, werkt idd niet in IE 5, maar ja, moeten ze maar eens updaten.

Ik maak alle pagina's xhtml, weet niet waarom. IE parst volgens mij wel XHTML als XML, want als er een fout in de HTML staat dan loopt de pasrser vast en geeft ie een XML error.

Ik heb heb in de meta tag trouwens wel "<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>" staan, dit moet dacht ik bij elkaar genoeg zijn

donderdag 8 december 2005 10:35

Acties:

Westereen

Topicstarter

Boelie-Boelie schreef op woensdag 07 december 2005 @ 20:56:
[...]

Als je daarnaast ook de margins van #inhoud kleiner maakt, worden #linksnav en #rechtsnav ook kleiner.

En ik zou toch ff een volledig doctype gebruiken, je werkt nu in quirksmode. (Lees op ALA of de site van Sivonen over wat, waarom en hoe.)

Ah bedankt

. Erg dom dat ik dat over het hoofd heb gezien

'K zal die site's eens doorlezen

donderdag 8 december 2005 13:33

Acties:

JayVee

shibby++!

Verwijderd schreef op donderdag 08 december 2005 @ 09:03:
Ik maak alle pagina's xhtml, weet niet waarom. IE parst volgens mij wel XHTML als XML, want als er een fout in de HTML staat dan loopt de pasrser vast en geeft ie een XML error.

Weet je dat heel zeker?

Volgens de specs moet een browser inderdaad een foutmelding geven en de pagina niet weergeven als het document niet well-formed of valid (correct me if I'm wrong) is.
Als je IE een XHTML pagina stuurt en (dmv headers) erbij verteld dat het echt 'application/x-html' is krijg je een blanke pagina te zien.

IE ondersteund XHTML gewoon niet. Daarnaast is het gewoon niet nuttig, zoals op erg veel blogs te lezen valt.

offtopic:
Ik ben zelf een discussie aangegaan met een mambo devver. Misschien leuk leesvoer voor sommigen.

ASCII stupid question, get a stupid ANSI!

donderdag 8 december 2005 13:40

Acties:

BtM909

Watch out Guys...

JayVee schreef op donderdag 08 december 2005 @ 13:33:

Als je IE een XHTML pagina stuurt en (dmv headers) erbij verteld dat het echt 'application/x-html' is krijg je een blanke pagina te zien.

Nou ja, leeg.... Je krijgt de pagina aangeboden als download

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

Pagina: 1

Reageer