css verschil tss Mozilla en IE - Softwareontwikkeling

dinsdag 16 maart 2004 17:46

Acties:

Topicstarter

Hey,

Als je deze pagina (http://www.aendekerk.be/beta/index.html) bezoekt met IE lijkt alles in orde. Maar bekijk je dezelfde pagina met een Mozilla-browser, dan zie je dat die blauwe cellen (waarin de titels "airconditioning, nieuws, blabla" staan) plots veel groter zijn??

Bij IE zie je ook een marge tussen de drie tabbellen in het midden van de pagina (let op de grijze rand), bij Mozilla 'plakken' ze aan elkaar.

Het css-bestand staat hier: http://www.aendekerk.be/beta/algemeen/style.css

Ik heb dit al (zonder resultaat) geprobeerd:

code:

<tr>
   <td style="margin: 0px 0px 0px 0px;border-width: 0px" width="10"
 height="25">[img]"images/balk_links.gif"[/img]</td>
   <td style="margin: 0px 0px 0px 0px;border-width: 0px" bgcolor="#3366CC"
 width="220" height="25"><p align="center"><font color="#FFFFFF">Nieuws</font></td>
   <td style="margin: 0px 0px 0px 0px;border-width: 0px" width="10"
 height="25">[img]"images/balk_rechts.gif"[/img]</td>
</tr>

Helaas zonder resultaat. De cellen zijn in een mozilla-browser nog altijd 2x zo hoog als in IE

Kan iemand dit verschil verklaren?

--
E-mail: dries <punt> aendekerk <ad> advalvas <punt> be

[ Voor 17% gewijzigd door DriesA op 16-03-2004 17:59 . Reden: mijn bericht sloopte de layout :) ]

I don't have hard drives. i just keep 30 chinese teenagers in my basement and force them to memorize numbers.

dinsdag 16 maart 2004 17:49

Acties:

faabman

- wanneer je de volledige margin van een element op 0 zet kun je ook gewoon margin:0px doen...

- welke padding / margin heb je toegepast op de elementen en

de fout zit hem dus in de margin van je paragraph

p.s. pas je post eens aan hij sloopt de layout...

[ Voor 28% gewijzigd door faabman op 16-03-2004 17:50 ]

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!

dinsdag 16 maart 2004 18:03

Acties:

Verwijderd

Grappig ik zat met hetzelfde probleem:

code:

<html>
    <head>
        <title>
            This is the titel in upper border.
        </title>
        <META http-equiv=Content-Type content="text/html; charset=utf-8">
        <!-For your special characters (see the faq) -->
        <style type="text/css">
            #Tekst01 { font:normal 200pt Arial Unicode MS; }
        </style>
    </head>
    <body>
        <h1>
            This is the titel of your page.
        </h1>
        <p id="Tekst01">
            &#9763;
        </p>
        <p id="Tekst01">
            &#9760;
        </p>
    </body>
</html>

Ik heb het opgelost door het op de tekst alleen toe te passen. Helaas ben je dan wel je css kwijt.

code:

<html>
    <head>
        <title>
            This is the titel in upper border.
        </title>
        <META http-equiv=Content-Type content="text/html; charset=utf-8">
    </head>
    <body>
        <h1>
            Hmm..
        </h1>
        <p>
            <span style="font-size:200pt;font-family:Arial Unicode MS;">
<font color="FF0000">&#9762;</span></font>
        </p>
        <p>
            <span style="font-size:200pt;font-family:Arial Unicode MS;">
<font color="FF0000">&#9763;</span></font>
        </p>
    </body>
</html>

Waarom mozilla1.6 zo raar doet met css is mij ook een vraag?

[ Voor 21% gewijzigd door Verwijderd op 16-03-2004 18:03 ]

dinsdag 16 maart 2004 18:06

Acties:

Bosmonster

*zucht*

☢

En je vraagt je af waarom Mozilla gek doet?

dinsdag 16 maart 2004 18:08

Acties:

Verwijderd

Lol, bij dat script vind ik dat hij juist niet raar doet

dinsdag 16 maart 2004 18:10

Acties:

coubertin119

Dries_Aendekerk, tables zijn nu niet bepaald de geweldigste elementen om zoiets in te maken. Gezien je content, past een <hx /> perfect, en die kan je ook styles met een achtergrondje en aanverwanten.

Fate?, id's mogen maar 1x gebruikt worden. Waarom gooi je bovendien nog een in je , die op zijn beurt OOK al in een staat. Als jij raar doet, mag Mozilla raar terugdoen

.

Waar zie jij trouwens een script

[ Voor 17% gewijzigd door coubertin119 op 16-03-2004 18:11 ]

Skat! Skat! Skat!

dinsdag 16 maart 2004 18:21

Acties:

Verwijderd

meest ranzige/hybride/foute nesting code die ik ooit heb gezien, ga meteen een bug reporten bij mozilla.org dit moet werken in Mozilla!

dinsdag 16 maart 2004 19:55

Acties:

DriesA

Topicstarter

De -tag was inderdaad de boosdoener.
De cellen tonen al iets beter.

Maar mijn tweede probleem is nog niet opgelost. In Mozilla 'plakken' de drie kolommen aan elkaar, terwijl bij IE er een ruimte tussen is (zoals ik het wil).

De tabbellen (met als titel "airconditioning, nieuws, blabla) hebben als class "blauw", in mijn css-bestand (http://www.aendekerk.be/beta/algemeen/style.css) staat daar het volgende over:

code:

.blauw { 
    margin-left: 10;
    margin-right: 0;
    margin-top:5;
    margin-bottom:0;
    text-align: left;
    }

Maar dat lijkt niet te pakken. :-/

I don't have hard drives. i just keep 30 chinese teenagers in my basement and force them to memorize numbers.

dinsdag 16 maart 2004 20:00

Acties:

crisp

Devver

Pixelated

margin-top:5; 5 wat? schroefjes? boutjes? moertjes?

Intentionally left blank

dinsdag 16 maart 2004 20:05

Acties:

DriesA

Topicstarter

:-) Sorry, iets te snel geweest.
Ik heb het aangepast. Maar wat zie je nu? In Mozilla zie je de gewenste marge, maar in IE is de (bestaande) ruimte verbreed met deze 'extra' pixels.
Dus nu ziet het er goed uit in Mozilla en zijn de marges in IE te breed. :-/

edit:
Wacht nog even met jullie hoofd te breken. I'm on to something.

[ Voor 15% gewijzigd door DriesA op 16-03-2004 20:12 ]

I don't have hard drives. i just keep 30 chinese teenagers in my basement and force them to memorize numbers.

dinsdag 16 maart 2004 20:25

Acties:

DriesA

Topicstarter

Okay,
Bedankt voor jullie tips. Ik ben alweer een stap dichter bij een consequente layout.

Ik merk nog één ding op: in Mozilla zie je een grote witruimte boven 'sub-titel' en onder 'tekst'. Bij IE niet.

De tabel heeft als class "blauw":

code:

.blauw { 
    margin-left: 10px;
    margin-right: 0px;
    margin-top:5px;
    margin-bottom:0px;
    text-align: left;
    }

De tekst in die tabel heeft als class "main_tekst":

code:

.main_tekst { 
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 2px;
    padding-bottom:0px;
    text-align: left;
    border: 1px solid #EEEEEE;
    }

Waar zit de fout?

I don't have hard drives. i just keep 30 chinese teenagers in my basement and force them to memorize numbers.

dinsdag 16 maart 2004 20:30

Acties: