Toon posts:

[CSS] margin-bottom image

Pagina: 1
Acties:

Verwijderd

Topicstarter
Ik ben aan het stoeien met CSS. Ik ben bezig een tabel design omzetten naar een div design. De afbeelding img/geschiedenis_top.gif krijgt in IE een soort margin-bottom mee, terwijl die nadrukkelijk op 0px gezet is.
Mozilla doet het echter wel netjes.

Voorbeeldje: http://www.nextavenue.com/got/

Iemand een idee waar dit aan ligt? Doe ik iets fout of mag ik mijn vingertje weer richting Microsoft wijzen?

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title></title>
    <script type="text/javascript"></script>
    <style type="text/css">
body {
    background-color: #9E9E9E;
    margin: 0px;
    font-family: "Trebuchet MS", Arial;
    font-size: 9pt;
    color: #000000;
    text-align: justify;
    vertical-align: top;
}

#header {
    padding-left: 45px;
    padding-top: 38px;
    padding-bottom: 14px;
}

#menu {
    background-color: #003366;
    height: 102px;
}

#menu #nav {
    float: left;
    text-align: right;
    list-style: none;
    padding: 0px;
    padding-top: 11px;
    padding-right: 10px;
    margin: 0px;
    width: 160px;
}

#menu #nav li {
    display: block;
    margin-bottom: 3px;

    font-family: "Trebuchet MS", Arial;
    font-size: 9pt;
    color: #FFFFFF;
    vertical-align: bottom;
}

#menu #nav img {
    border: 0px;
    margin: 0px;
}
    </style>
  </head>
  <body>
    <div id="header">
      [img]"img/logo.gif"[/img]
    </div>
    <div id="menu">
      <ul id="nav">
        <li>Geschiedenis</li>
        <li>Openingstijden</li>
        <li>Kledingcheque</li>
        <li>Winkelformule</li>
      </ul>
      [img]"img/geschiedenis_top.gif">
[/img]
  </body>
</html>

[ Voor 29% gewijzigd door Verwijderd op 25-04-2004 20:40 ]


Verwijderd

Dat ding krijgt geen margin-bottom : 0px mee hoor?

(wel een margin: 0px overigens)..

zet padding ook eens op 0px?

//edit
Nu kan ik me vergissen maar voor zover ik weet geldt margin:0px voor alle vier de richtingen.
dat doet het ook, althans zou het moeten doen.. het ging mij er om dat je zelf zegt dat voor die img de margin-bottom nadrukkelijk op 0px is gezet, terwijl dat niet zo is.. maar daar zou het niet aan mogen liggen inderdaad.

[ Voor 101% gewijzigd door Verwijderd op 25-04-2004 20:47 ]


Verwijderd

Topicstarter
Nu kan ik me vergissen maar voor zover ik weet geldt margin:0px voor alle vier de richtingen. Heb net geprobeert met margin-bottom:0px erbij: maakt niets uit...

padding: 0px // Geen verschil

[ Voor 10% gewijzigd door Verwijderd op 25-04-2004 20:42 ]


Verwijderd

Wat is er mis met een 'background-image'? (Ook al is het alpha, denk aan je ALT!)

Verwijderd

Topicstarter
Die alt is er idd bij in geschoten :P
Vraag blijft: waarom rendert IE niet goed...

Er is vast wel een omleiding te verzinnen, maar ik wil altijd graag een probleem doorgronden; daar leer je immers meer van, dan snel een andere oplossing zoeken.

Maar goed, als iemand weet waar het aan ligt, dan hoor ik het nog wel. Voor nu
zal ik even een background-image gebruiken en een ALT toevoegen. :Y)

/ Edit: een leeg alt attribuut is toegestaan?

[ Voor 7% gewijzigd door Verwijderd op 25-04-2004 20:55 ]


  • [ash]
  • Registratie: Februari 2002
  • Laatst online: 05-04-2025

[ash]

Cookies :9

Om te beginnen is img geen onderdeel van #nav maar van #menu.

Een oplossing:
  • geef #menu en #menu img float: left; mee
  • geef #menu tevens width: 100%; mee

  • Johnny
  • Registratie: December 2001
  • Laatst online: 10:04

Johnny

ondergewaardeerde internetguru

Als #nav de enige lijst binnen #menu is kun je die #nav id gewoon weglaten en #menu ul li gebruiken om een list-item te bereiken.

Aan de inhoud van de bovenstaande tekst kunnen geen rechten worden ontleend, tenzij dit expliciet in dit bericht is verwoord.


Verwijderd

Topicstarter
Ik kreeg ook net door dat ik de foute CSS selector gebruikte. Om het te laten werken hoef je alleen #menu img een float left te geven.

#menu hoeft geen float:left; en width:100% te krijgen. (Om het te laten werken iig, misschien zijn er andere motieven)


Johnny: Ik gebruik die id="nav" om aan te geven dat het om een navigatie gaat. Doe ik voor mijn eigen gemoedsrust. Geen flauw idee of dit ook beter is, of dat jou oplossing beter is :)

[ Voor 28% gewijzigd door Verwijderd op 25-04-2004 21:06 ]


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 21:09

crisp

Devver

Pixelated

het probleem is de manier waarop IE met whitespace omgaat; je #menu een overflow:hidden of font-size:0px geven lost het probleem nl ook op ;)

Intentionally left blank


  • [ash]
  • Registratie: Februari 2002
  • Laatst online: 05-04-2025

[ash]

Cookies :9

Doordat je menu geen float maakt, zitten de verschillende divs niet meer in elkaar, haal die hoogte maar eens weg.

Verwijderd

Topicstarter
Ik had geprobeert: overflow: invisible; :+

* Jorgen zal voortaan eerst de MSDN erop nalezen...


[ash]: Thanks, kijk, zo leer ik het ooit nog wel... Heb er gauw een float van gemaakt en die height:102px; weggehaald

[ Voor 39% gewijzigd door Verwijderd op 25-04-2004 21:09 ]


Verwijderd

Anne gaat even verwijzen naar de ultieme ALT guide: Guidelines on alt texts in img elements. Helemaal doorlezen is noodzakelijk als je er wat nuttigs over wilt zeggen ;)

Verwijderd

Topicstarter
* Jorgen gaat lezen en houdt :X

  • [ash]
  • Registratie: Februari 2002
  • Laatst online: 05-04-2025

[ash]

Cookies :9

Verwijderd schreef op 25 april 2004 @ 21:08:
Anne gaat even verwijzen naar de ultieme ALT guide: Guidelines on alt texts in img elements. Helemaal doorlezen is noodzakelijk als je er wat nuttigs over wilt zeggen ;)
bookmarked ;)
Pagina: 1