[CSS] Problemen met FireFox

Pagina: 1
Acties:

  • Westereen
  • Registratie: September 2003
  • Laatst online: 27-02 23:42
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):
Afbeeldingslocatie: http://img202.imageshack.us/img202/4792/operagoed2do.th.gif

HTML:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
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 ]


  • sariel
  • Registratie: Mei 2004
  • Laatst online: 24-03 12:54
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


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 ]


  • sariel
  • Registratie: Mei 2004
  • Laatst online: 24-03 12:54
inderdaad. dit had ook anders gekund:

code:
1
2
3
4
5
6
7
8
9
#balkboven {
 height: 25 px;
 width: 650px; 
 background: #c0c0c0;
 color: #333333;
 border: 1px solid #000000;
 border-left: 0px;
_border-right: 0px;
}

code:
1
2
3
4
5
6
7
8
#balkboven {
 height: 25 px;
 width: 650px; 
 background: #c0c0c0;
 color: #333333;
 border: 0px solid #000000;
 border-top: 1px;
}

Copy.com


  • Westereen
  • Registratie: September 2003
  • Laatst online: 27-02 23:42
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...

  • Boelie-Boelie
  • Registratie: November 2004
  • Laatst online: 26-09-2020
@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


  • Savantas
  • Registratie: December 2002
  • Laatst online: 14:52
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:
1
2
3
4
5
6
7
8
#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! ( ͡° ͜ʖ ͡°)


  • JayVee
  • Registratie: Mei 2002
  • Laatst online: 14-11-2025

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!


  • sariel
  • Registratie: Mei 2004
  • Laatst online: 24-03 12:54
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


  • Westereen
  • Registratie: September 2003
  • Laatst online: 27-02 23:42
Iedereen bedankt, ga er vanavond even naar kijken :)

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


  • Boelie-Boelie
  • Registratie: November 2004
  • Laatst online: 26-09-2020
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


  • JayVee
  • Registratie: Mei 2002
  • Laatst online: 14-11-2025

JayVee

shibby++!

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!


  • Westereen
  • Registratie: September 2003
  • Laatst online: 27-02 23:42
Na een aantal site's te hebben bekeken ben ik tot de volgende oplossing gekomen:

CSS:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
#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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!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?

  • Boelie-Boelie
  • Registratie: November 2004
  • Laatst online: 26-09-2020
IE snapt die margin:auto niet, daarom moet je een trucje gebruiken:
http://maxdesign.com.au/presentation/center/

Cogito ergo dubito


  • x-man
  • Registratie: September 2001
  • Laatst online: 27-03 22:42

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.


  • Westereen
  • Registratie: September 2003
  • Laatst online: 27-02 23:42
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:
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;
}

  • Westereen
  • Registratie: September 2003
  • Laatst online: 27-02 23:42
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#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)

Verwijderd

Jouw regel 12 en 13 zijn aardig bizar.
12 <body>
13 </body>


Lijkt me niet helemaal te kloppen :Y)

  • Boelie-Boelie
  • Registratie: November 2004
  • Laatst online: 26-09-2020
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


Verwijderd

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


Super, bedankt _/-\o_

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 :X , 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 ]


  • Boelie-Boelie
  • Registratie: November 2004
  • Laatst online: 26-09-2020
Verwijderd schreef op woensdag 07 december 2005 @ 23:35:
Bah :X , smerige oplossing.

Dit is de beste oplossing: [...]
Par0xysm, bekijk jouw oplossing eens in IE5?

Cogito ergo dubito


  • crisp
  • Registratie: Februari 2000
  • Nu online

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


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

  • Westereen
  • Registratie: September 2003
  • Laatst online: 27-02 23:42
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 ;)

  • JayVee
  • Registratie: Mei 2002
  • Laatst online: 14-11-2025

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!


  • BtM909
  • Registratie: Juni 2000
  • Niet online

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