Stukje achtergrondloos

GaMer B

09/10/2007 16:36:00

Hallo allemaal,

Ik was wel eens benieuwd hoe mijn site er uit ziet in de verschillende browser. Het resultaat in Firefox en IE7.0 zijn nagenoeg identiek, maar vanaf IE6.0 gaat er iets fout, namelijk dit:

http://img204.imageshack.us/img204/6081/achtergrondloosoh3.png

(Ook live te zien: klik)

Zoals je kunt zien is er aan de linkerkant van de tekst "Kies uw taal:" een stukje wit en dus geen gradient achtergrond.

De HTML van de header:

Code (php)

1
2
3
4
5
6
7
8
9
10

<div id="header-left">
</div>
<div id="header">
    <p class="header">voirea.design<sup>v.4</sup></p><br />
</div>
<div id="header-space">
</div>
<div id="header-search">
    
</div>

De CSS van de header:

Code (php)

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

#header-left
{
    float: left;
    background-image: url(../images/header-background-left.jpg);
    width: 300px;
    height: 100px;
}

#header
{
    width: auto;
    height: 100px;
    background: #FFF url('../images/header-background.jpg') repeat-x;
    float: left;
}

#header-space
{
    height: 100px;
    width: 20px;
    background: #FFF url('../images/header-background.jpg') repeat-x;
    float: left;
}

#header-search
{
    height: 100px;
    background: #FFF url('../images/header-background.jpg') repeat-x;
}

#header-search small
{
    font-size: 0.3cm;
}

#header p.header
{
    margin: 0;
    padding: 20px 0 0 25px;
    font-size: 220%;
    letter-spacing: -2px;
    font-weight: normal;
    color: #6792b7;
    font-family: georgia;
}

Hoe is dit op te lossen?

Bvd,
GaMer13

PHP hulp

25/05/2012 18:45:02

Gesponsorde koppelingen:

Wessel Johnson

09/10/2007 16:41:00

Misschien margin: 0px; in #header-search & #header-space

Voeg toe:

Code (php)

1
2
3
4

#header-space, #header-search
{
margin: 0px;
}

Het is maar een gok ;)

GaMer B

09/10/2007 16:46:00

@WesselB, nope.

Kumkwat Trender

09/10/2007 17:07:00

enn.. opgelost??

als je nou het plaatje net één centimeter vergroot... zal dat een effect hebben??

GaMer B

09/10/2007 17:11:00

Nee, want het plaatje is al 20px breed :X Het probleem is gewoon dat er een kleine ruimte ontstaat tussen de header-space en header-search...

Niek Weevers

09/10/2007 17:25:00

Je hebt bij je header in de css, width: auto; staan. Ga hier eens absoluut werken, misschien dat dat werkt

GaMer B

09/10/2007 17:34:00

Ik heb nu:

Code (php)

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

#header-left
{
    float: left;
    background-image: url(../images/header-background-left.jpg);
    width: 300px;
    height: 100px;
}

#header
{
    width: 210px;
    height: 100px;
    background: #FFF url('../images/header-background.jpg') repeat-x;
    float: left;
}

#header-space
{
    height: 100px;
    width: 20px;
    background: #FFF url('../images/header-background.jpg') repeat-x;
    float: left;
}

#header-search
{
    height: 100px;
    background: #FFF url('../images/header-background.jpg') repeat-x;
}

En zelfs de div: header-space weggehaald. Het probleem blijft bestaan in IE6.0 en lager.

Niek Weevers

09/10/2007 18:13:00

Probeer dan eens de divs echt achter elkaar te zetten, dus niet een nieuwe div op een nieuwe regel.

Code (php)

<div id="header-left"></div><div id="header"><p class="header">voirea.design<sup>v.4</sup></p><br /></div><div id="header-space"></div><div id="header-search"></div>

in plaats van

Code (php)

1
2
3
4
5
6
7
8
9
10

GaMer B

09/10/2007 18:27:00

Nee :( Ook niet...

Hipska BE

09/10/2007 18:30:00

je moet 1 div maken met die achtergrond en die 2 andere div's daar in zetten ;-)

Niek Weevers

09/10/2007 18:33:00

Hipska schreef op 09.10.2007 18:30:

je moet 1 div maken met die achtergrond en die 2 andere div's daar in zetten ;-)

Dat is altijd nog het best

GaMer B

09/10/2007 19:53:00

Ok, ik heb de hele code geherstructureerd:

De HTML:

Code (php)

1
2
3
4
5
6
7
8
9
10

<div id="overall-header">
    <div id="header-left">
    </div>
    <div id="header-text">
        <p class="header">voirea.design<sup>v.4</sup></p>
    </div>
    <div id="header-search">
                
        </div>
</div>

De CSS:

Code (php)

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

#overall-header
{
    height: 100px;
    background: #FFF url('../images/header-background.jpg') repeat-x;
}
#header-left
{
    float: left;
    background-image: url(../images/header-background-left.jpg);
    width: 300px;
    height: 100px;
}

#header-text
{
    width: 210px;
    height: 100px;
    background: #FFF url('../images/header-background.jpg') repeat-x;
    float: left;
}

#header-search
{
    width: auto;
    height: 95px;
    background: #FFF url('../images/header-background.jpg') repeat-x;
}

#header-search small
{
    font-size: 0.3cm;
}

#header-text p.header
{
    margin: 0;
    padding: 20px 0 0 25px;
    font-size: 220%;
    letter-spacing: -2px;
    font-weight: normal;
    color: #6792b7;
    font-family: georgia;
}

En het werkt nu in IE6.0 en lager.

PHPhulp is een Nederlandstalige PHP community sinds 2002. Je vindt hier PHP tutorials, PHP scripts, PHP boeken en nog veel meer. Alles is geheel gratis!