Toon posts:

[CSS] Border gaat anders/verkeerd in Firefox

Pagina: 1
Acties:

zondag 26 februari 2006 23:32

Acties:
  • 0fbe
  • Registratie: Januari 2004
  • Laatst online: 15:20

0fbe

Topicstarter
Beste Forummers,

Ik als altijd-tabel gebruiker heb het roer omgegooit en ben begonnen met CSS en divs. Nu loop ik alleen vast op het volgende:

Ik wil het volgende design maken:
Afbeeldingslocatie: http://tim.cooijmansadvies.nl/1.png

Nu maakt firefox alleen er het volgende van:
Afbeeldingslocatie: http://tim.cooijmansadvies.nl/2.png

Ik gebruik de volgende HTML code:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div align="center">
    
        <div class=header>
            <h1>TC | Photography by Tim Cooijmans</h1>
        </div>
        
        <div class=menu>
        </div>
        
        <div class=main>
            <div class=mainleft>
              <p>blaat</p>
              <p>adajdaiojdaiojdaiojdioajdioajdioajdioa</p>
              <p>jiaodjdaiojdioajsdioajdaijdioajdioajdaio</p>
            </div>
            <div class=mainright>blaat</div>
            
        </div>
        <div class=footer>
        </div>


Cascading Stylesheet:
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

body {
    background-color: #000000;
    margin-top: 10px;
}
.header {
    background-color: #000000;
    height: 100px;
    width: 548px;
    background-image: url(images/header.gif);
    border: 1px solid #FF0000;
}
.mainright {
    background-color: #000000;
    width: 246px;
    display: block;
    float: left;
    border-right-color: #ff0000;
}

.main {
    width: 548px;
    background-color: #000000;
    border: 1px solid #FF0000;
    text-align: left;
}
.footer {
    background-color: #FF0000;
    height: 20px;
    width: 548px;
    clear: both;
}
.menu {
    background-color: #FF0000;
    height: 20px;
    width: 548px;
}
h1 {
    visibility: hidden;
    z-index: -1;
    overflow: hidden;
    display: none;
}
.mainleft {
    background-color: #000000;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #ff0000;
    width: 299px;
    display: block;
    float: left;
    font-family: Arial, Helvetica, sans-serif;
    color: #FFFFFF;
}


Het lijkt er dus op dat firefox 1 pixel te ver naar boven rendert, en dat de borders van de onderliggende main div niet te zien zijn. Het is me een raadsel waarom.
Nu heb ik al wat gezocht op GOT en met Google, maar kom ik niet echt veel verder. Waar gaat het fout? Kan iemand mij helpen?

[ Voor 10% gewijzigd door 0fbe op 26-02-2006 23:33 ]

maandag 27 februari 2006 08:31

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:42

crisp

Devver

Pixelated

2 zoektermen voor je: boxmodel en clearing floats ;)

Het is dus niet Firefox die het fout doet, maar IE. Aannemen dat IE's rendergedrag de juiste is is net zoiets als in de sloot springen enkel omdat ik het ook doe :P

[ Voor 62% gewijzigd door crisp op 27-02-2006 08:34 ]

Intentionally left blank

maandag 27 februari 2006 18:22

Acties:

Verwijderd

Een layout met CSS kolommen is altijd moeilijk om cross-browser te maken. Ik heb hiervoor een layout gebruikt die te vinden is op: http://webhost.bridgew.edu/etribou/layouts/skidoo/ en deze zelf aangepast Op http://webhost.bridgew.ed...ts/skidoo/lean/index.html kun je de lichtste versie bekijken (is iets duidelijker).

Met allerlei CSS trucs krijgen ze het voor elkaar om de layout in alle browsers hetzelfde uit te laten zien en zelfs nog leesbaar te houden in non-css browsers. Het is de moeite waard om hier eens in te duiken om een goede basis-layout voor jezelf te maken.
Reageer