Tabel-hoogte niet 100% in Mozilla - Softwareontwikkeling

zondag 28 september 2003 12:42

Acties:

Topicstarter

Hi !!

Check deze pagina: http://www.dj2dj.nl
In Microsoft Internet Explorer is het een mooie verticale balk over de complete hoogte van het scherm. Maar in Mozilla is het maar een kort balkje bovenin.

Hoe moet ik dit aanpakken ?

Hier had uw reclame kunnen staan.

zondag 28 september 2003 12:44

Acties:

flashin

.

Dit komt omdat je geen doctype hebt aangegeven en 100% eigenlijk niet compatible is met sommige browsers..

zondag 28 september 2003 12:49

Acties:

ericafterdark

Topicstarter

Hoe moet ik het dan nu aanpakken ?

Hier had uw reclame kunnen staan.

zondag 28 september 2003 12:49

Acties:

Clay

cookie erbij?

100% is altijd 100% van het element waar het inzit. Een table in je body (waarbij voor de body verder niets opgegeven is) met 100% hoogte zal dus niet de hele schermhoogte (mogen) nemen. Je kan dit oplossen door de body wel 100% te maken:

Cascading Stylesheet:

html, body {
   height:100%;
   padding:0;
   margin:0;
}

Al weet ik niet of het dan wel gaat werken, omdat de table eigenlijk geen height attribuut mag hebben (kan je ook met css doen).

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

zondag 28 september 2003 12:58

Acties:

ericafterdark

Topicstarter

Werkt niet

kijk maar eens wat ik geprobeerd heb.

Hier had uw reclame kunnen staan.

zondag 28 september 2003 13:02

Acties:

Verwijderd

Je kan het oplossen door je document een HTML doctype te geven, oftewel de volgende regel boven aan de pagina toevoegen:

HTML:

1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Je pagina zal niet valid HTML zijn, dit zal niet werken in Opera. Maar wel in IE, Mozilla en Netscape.

PS voeg ook even een content-type header toe tussen de <head> tag, dan wordt het begin van je pagina als volgt:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
  <title>DJ2DJ.nl :: Benelux DJ Community</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

Succes!

zondag 28 september 2003 13:03

Acties:

ericafterdark

Topicstarter

Heb ik al gedaan, werkt ook niet.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

Hier had uw reclame kunnen staan.

zondag 28 september 2003 13:07

Acties:

Sendy

Ik heb even gekeken maar ik zou niet weten wat je ermee wil; ik vind het wel mooi zo:
Afbeeldingslocatie: http://rotzorg.org/~sgr/GoT/dj2dj.png

En omdat ik geen IE heb weet ik niet hoe het eruit moet komen te zien. Dus een goede tip: Plak de relevantie code en screenshots van hoe het eruit ziet hier. (Je moet dus een beetje experimenteren met welke code relevant is zodat we niet teveel onzin zien.)

zondag 28 september 2003 13:15

Acties:

Minos111

Dit lukt alleen (compatible volgens xhtml 1.1) als je het met stylesheets doet. je td of tabel een style referentie meegeven en in je stylesheet de hoogte op 100% zetten.

zondag 28 september 2003 13:17

Acties:

Clay

cookie erbij?

tables zijn hier ook eigenlijk niet voor

dit werkt bv. prima:

HTML:

<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
    <head>
    <title> Template </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <style type="text/css"> 
    html,body {
        width:100%;
        height:100%;
        margin:0;
        padding:0;
    }

    body {
        text-align:center;
        background:black;
    }

    * {
        text-align:left;
        vertical-align:top;
    }

    #strook {
        position:relative;
        width:400px;
        height:100%;
        margin:auto;
        background:gray;
        border:solid orange;
        border-width:0 3px 0 3px;
    }

    #splash {
        position:absolute;
        width:320px;
        height:120px;
        left:50%;
        top:50%;
        margin:-60px 0  0 -160px;
        background:silver;
        border:1px solid orange;
    }
    </style>
</head>

<body>

    <div id="strook">   
        <div id="splash">
            boe
        </div>
    </div>

</body>
</html>

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

zondag 28 september 2003 13:22

Acties:

ericafterdark

Topicstarter

Minos111 schreef op 28 september 2003 @ 13:15:
Dit lukt alleen (compatible volgens xhtml 1.1) als je het met stylesheets doet. je td of tabel een style referentie meegeven en in je stylesheet de hoogte op 100% zetten.

Werkt dus ook niet ...

Hier had uw reclame kunnen staan.

zondag 28 september 2003 16:35

Acties:

Minos111

En met doctype XHTML 1.1 ipv 1.0?

zondag 28 september 2003 23:26

Acties:

ericafterdark

Topicstarter

Het is gelukt, voor de mensen die willen weten hoe... check http://www.dj2dj.nl !

Hier had uw reclame kunnen staan.

zondag 28 september 2003 23:32

Acties:

Verwijderd

Zou toch de optie van Clay is overwegen en je wat meer verdiepen in CSS.

maandag 29 september 2003 00:00

Acties:

bRight

digitaal

In NS6.2 zie ik dit:

Afbeeldingslocatie: http://www.ranzies.com/troep/ss.jpg

Heb dit nog nooit eerder gezien.. ligt dit aan hoe NS de ascii intepreteert?

[ Voor 6% gewijzigd door bRight op 29-09-2003 00:01 . Reden: server down.. ]

maandag 29 september 2003 00:02

Acties:

crisp

Devver

Pixelated

bRight schreef op 29 september 2003 @ 00:00:
In NS6.2 zie ik dit:

[afbeelding]

Heb dit nog nooit eerder gezien.. ligt dit aan hoe NS de ascii intepreteert?

Ik denk eerder dat je NetScape een beetje brak is...

Intentionally left blank

maandag 29 september 2003 13:25

Acties:

Verwijderd

Eiríkr schreef op 28 September 2003 @ 23:26:
Het is gelukt, voor de mensen die willen weten hoe... check http://www.dj2dj.nl !

Nou nog de rest van de website!

maandag 29 september 2003 20:01

Acties:

Sendy

Nu nog alle css (niet alleen body, maar ook je div en je tabel) naar je <style> of natuurlijk in een ander bestand en misschien een paar <enters> in je css. Dan wordt het iets leesbaarder.

code:

<style>
body {
  background-color: black;
  background-image: url(bg1.jpg);
  ...
}

Oh! En inspringen natuurlijk

[ Voor 11% gewijzigd door Sendy op 29-09-2003 20:01 ]