Toon posts:

[CSS] Border wordt 50% van ingestelde width in Firefox

Pagina: 1
Acties:

zondag 19 december 2004 19:30

Acties:
  • Alphega
  • Registratie: Oktober 2001
  • Laatst online: 02-05-2025

Alphega

Topicstarter
Ik ben een webpagina aan het maken gewoon om wat te spelen met css en eens te kijken wat je er nu allemaal mee kunt.
Nu wil ik de border grootte instellen voor de bottom-border van een tabel. Dit werkt in IE gewoon, maar in firefox maakt hij de width 50% van de waarde die ik opgeef. Dit ziet er zo uit:

Afbeeldingslocatie: http://home.tiscali.nl/fambekkers/Alphega/files/probleem.png
Links zie je Firefox en rechts dezelfde pagina in IE.

de css die ik gebruik om de border in te stellen ziet er als volgt uit:
code:
1
2
3
4

.content table {
    border-collapse: collapse;
    border-bottom: 20px solid #777777;
}


Ik heb even 20px genomen om het probleem duidelijker te maken op het plaatje. Als ik nu bijvoorbeeld 10px instel dan gaat firefox een border van 5px tekenen en IE gewoon een border van 10px. Ik geloof niet dat het iets uitmaakt maar voor de zekerheid heb ik de tekengrootte in beide browsers op normaal gezet.

Mijn probleem is nu dat ik wil dat Firefox net als IE gewoon de width gebruikt die ik in heb gesteld in plaats van 50% daarvan.

zondag 19 december 2004 19:42

Acties:
  • Blaise
  • Registratie: Juni 2001
  • Niet online

Blaise

En als je border-collapse: collapse; weghaalt werkt het wel in Mozilla?
Of als je dat dingetje bij "Heersch" dezelfde border geeft maar als border-top?

zondag 19 december 2004 19:43

Acties:

Verwijderd

Ik zou zweren dat IE in jou geval een border van 40px weergeeft en FF 20px... Kan het zo niet opmeten, maar ik vind het er op het plaatje behoorlijk 20px uitzien :)

zondag 19 december 2004 19:46

Acties:
  • Clay
  • Registratie: Oktober 1999
  • Laatst online: 25-02 11:17

Clay

cookie erbij?

nee da's wel 10px :)

als ik ff snel een testcase'je maak werkt een bottom border van 20px trouwens prima. Denk dat we toch even wat meer van je css moeten hebben om dit mysterie op te kunnen lossen ;)

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

zondag 19 december 2004 19:49

Acties:

Verwijderd

Als ik dit test in IE met onderstaande code, dan werkt het gewoon:

HTML:
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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
      <title>test</title>
    <style type="text/css">
table {
    border: 20px solid #777777;
    border-collapse: collapse;
}
    </style>
  </head>
  <body>
    <br>
    <table>
      <tbody>
        <tr>
          <td><div style="height: 20px; background-color: red; width: 100px;"></div></td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>


Waarschijnlijk maak je ergens anders in je CSS een fout...

offtopic:
Clay Afbeeldingslocatie: http://gathering.tweakers.net/global/smileys/bye.gif

[ Voor 48% gewijzigd door Verwijderd op 19-12-2004 19:51 ]

zondag 19 december 2004 19:49

Acties:
  • Alphega
  • Registratie: Oktober 2001
  • Laatst online: 02-05-2025

Alphega

Topicstarter
Ok hier komt heel de 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

body {
    background-color: #c6c1b4;
    margin: 0px 10px 0px 10px;
}

.content {
    width: 776px;
}

.content div {
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
}

.content table {
    border-collapse: collapse;
    border-bottom: 20px solid #777777;
}

.content td {
    border-top: 1px solid #cccccc;
    padding: 7px 10px 7px 10px;
    vertical-align: top;
    text-align: left;
}

.row1 td {
    background-color: #fefefe;
}

.row2 td {
    background-color: #fafafa;
}

/* POSTS */

.title {
    font-size: 120%;
    font-weight: bold;
    font-family: arial, helvetica, sans-serif;
}

.version {
    font-family: fixedsys, "lucida console" 
}

.postContent {
    font-style: normal;
    font-size: 13px;
    font-family: arial, helvetica, sans-serif;
}

.postContent:first-letter {
    font-weigth: bold;
}

/* FOOTER */

.footer {
    width: 776px;
    background: url(../images/layout/footer.gif) no-repeat bottom left;
    padding: 7px 15px 7px 15px;
}

Ik maakte net een andere fout in mijn css, en toen verschoof de footer zeg maar naar links en de rest van de site niet. Het leek vervolgens alsof in Firefox de helft van de border onder de background van de footer weg schuift.
En als je border-collapse: collapse; weghaalt werkt het wel in Mozilla?
Als ik dat weg laat dan komen er allemaal lege ruimtes tussen de cellen van de tabel en dat wil ik niet.
Of als je dat dingetje bij "Heersch" dezelfde border geeft maar als border-top?
Als ik dat doe dan is de streep die links en rechts loopt (die zwarte) niet doorlopend maar wordt die onderbroken door de border-top van dat heersch stukje.
Verwijderd schreef op zondag 19 december 2004 @ 19:49:
Als ik dit test in IE met onderstaande code, dan werkt het gewoon:
In IE werkt het hier ook prima maar het gaat om Firefox. In Firefox wordt het 50% van wat in aangeef. Ik gebruik trouwens versie 1.0 RC2 van Firefox.

Hier heb ik het trouwens even online gezet:
http://home.tiscali.nl/~f...hega/test/mircscripts.xml
css file: http://home.tiscali.nl/~f...hega/test/css/default.css
xsl file: http://home.tiscali.nl/~f...hega/test/mircscripts.xsl


[EDIT]
Wanneer je de background uit de footer haalt zie je dat de bottom-border doorloopt onder waar de background voorheen zat. Dat terwijl de left- en right-border halverwege stoppen:
Afbeeldingslocatie: http://home.tiscali.nl/fambekkers/Alphega/files/probleem2.png
Links Firefox, rechts IE.

[ Voor 46% gewijzigd door Alphega op 19-12-2004 20:40 ]

Pagina: 1
Reageer