[css] FF/IE weergave verschil van DIV elementen. - Softwareontwikkeling

zaterdag 18 februari 2006 17:40

Acties:

Spooksel!

Topicstarter

Op de volgende website: http://vuw.spooksel.nl
Is een klein deel van een nieuwe website te zien waar ik aan werk, mensen die met FF bezoeken zullen gelijk zien dat de flash animatie rechtsboven zich niet naar behoren gedraagt. Mensen die met IE kijken zullen de flash wel goed zien staan, maar dan is het zwarte lijntje dat eronder zit weer ong 15px hoog ipv de 1px die in de CSS gedefinieerd staat!

HTML:

<html>
<head>
    <title>Volksuniversiteit Woerden</title>
    <LINK rel="stylesheet" HREF="css/vu_layout.css" TYPE="text/css" />
</head>
<body>
    <div class="main">
        <div class="header">
            <div class="vuw-woordmerk">[img]"images/vuw-woordmerk.jpg"></div>
            <div[/img]
                <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" height="175" width="350">
                <param name="movie" value="images/vuw-topani.swf">
                <param name="quality" value="high">
                <param name="loop" value="true">
                <embed src="images/vuw-topani.swf" quality="high" loop="true" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
                </object>
            </div>
        </div>
        <div class="blackline"></div>
    </div>
</body>
</html>

En hier de CSS:

Cascading Stylesheet:

/* Afbakening main area! */
.main {
    float       : left;
    position    : absolute;
    top     : 0px;
    left        : 50%;
    margin-left : -475px;
    width       : 950px;
    height      : 100%;
    z-index     : 0;
}

/* Afbakening toparea */
.header {
    float       : left;
    position    : relative;
    top     : 5px;
    left        : 5px;
    width       : 940px;
    height      : 175px;
    z-index     : 1;
}

/*VUW woordmerk */
.vuw-woordmerk {
    position    : relative;
    float       : left;
    top     : 0px;
    width       : 367px;
    height      : 175px;
    z-index     : 2;
}

/*VUW animatie */
.vuw-animatie {
    position    : relative;
    float       : right;
    top     : 0px;
    width       : 350px;
    height      : 175px;
    z-index     : 2;
}

/* Blackline 1 */
.blackline {
    float       : left;
    position    : relative;
    left        : 5px;
    margin-top  : 7px;
    margin-bottom   : 7px;
    width       : 940px;
    height      : 1px;
    background-color: #000000;
}

Voor zover ik kan zien zitten er niet echt rare dingen in de html/css, maar als IE zoiets simpels als een 1px hoge div al niet goed aanpakt... waar moet ik dan nog zoeken?

Ik ben op GoT hier en daar wat dingen tegengekomen om height te bepalen, zoals _height of min-height. Maar dat biedt allemaal geen oplossing. En dan is er ook nog het probleem dat in FF het formaat voor de flash animatie niet goed wil!

Enige input zou ik waarderen

Bevalt mijn schrijfsel je niet? www.korrelatie.nl

zaterdag 18 februari 2006 18:34

Acties:

crisp

Devver

Pixelated

Waarom gebruik je float en positioning tegelijkertijd op al je elementen? Nofi hoor, maar volgens mij kan je je eerst beter verdiepen in wat het CSS layout-model precies inhoud en wat een float precies doet, en wat het effect is van positioning (static, relative en absolute).
Daarbij nog de tip om pas dingen uit de flow te halen als het echt noodzakelijk is, en een doctype op te geven zodat browsers in de meer voorspelbare standards-compliant mode renderen

[ Voor 27% gewijzigd door crisp op 18-02-2006 18:38 ]

Intentionally left blank

zaterdag 18 februari 2006 18:52

Acties:

Spooksel

Spooksel!

Topicstarter

Ik lees oa hier dat de float property dus gebruikt wordt om stukjes tekst (span & p?) en images te positioneren ten opzichte van hun parent element.

Ditzelfde effect wilde ik dus bereiken door het toe te passen op de DIV's waar de images nu in zitten. Ik heb in het verleden namelijk al eens gemerkt dat meerdere DIV's niet naast elkaar terecht komen, maar onder elkaar, als je geen float aangeeft!

Waar doel je precies op met 'dingen uit de flow halen'?

[ Voor 8% gewijzigd door Spooksel op 18-02-2006 18:52 ]

Bevalt mijn schrijfsel je niet? www.korrelatie.nl

zaterdag 18 februari 2006 19:00

Acties:

Fuzzillogic

Cool

Float valt te vergelijken (maar niet helemaal) met het align-attribuut van images. Je gebruikt het nu idd veel te veel. Sowieso gebruik je veel te veel CSS voor wat je wilt bereiken.

Geef eens alleen de afbeelding (welke je beter in PNG kunt opslaan) een float: left. En dan die lijn eronder geef je een clear: left. Gebruik ook <hr /> indien mogelijk voor die lijn, dat komt wat meer overeen met wat je wilt: een lijn.

zaterdag 18 februari 2006 19:22

Acties:

Zoefff

❤ 

Spooksel schreef op zaterdag 18 februari 2006 @ 18:52:

Waar doel je precies op met 'dingen uit de flow halen'?

Zoefff in "CSS margin/padding positioning probleem?"

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

zondag 19 februari 2006 03:03

Acties:

Spooksel

Spooksel!

Topicstarter

Ik heb de boel opnieuw ingedeeld en de css aangepast, ook is besloten om de flash animatie eruit te kieperen vanwege de filesize van het beessie. Resultaat is de volgende code, ziet er in mijn ogen allemaal prima uit, echter in IE staat de tekst onder de HR wat verder naar beneden dan in FF. Wat is hier de oorzaak van?

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Volksuniversiteit Woerden</title>
    <LINK rel="stylesheet" HREF="css/vu_layout.css" TYPE="text/css" />
</head>
<body>
    <div class="main">
        <div class="header">
            [img]"images/vuw-woordmerk.jpg"[/img]
            <p class="vu-naw"><strong>Volksuniversiteit Woerden<br />Rembrandtlaan 24<br />3443 EH Woerden<br />T: (0348) 420661<br />F: (0348) 482474</strong></p>
        </div>
        <hr class="bl" />
        Hallo
    </div>
</body>
</html>

Cascading Stylesheet:

/* Afbakening main area! */
.main {
    position    : absolute;
    top     : 0px;
    left        : 50%;
    margin-left : -475px;
    width       : 950px;
    height      : 100%;
    z-index     : 0;
}

/* Afbakening toparea */
.header {
    position    : relative;
    top     : 5px;
    left        : 5px;
    width       : 940px;
    height      : 175px;
    z-index     : 1;
}

/*VUW woordmerk */
.vuw-woordmerk {
    float       : left;
    width       : 367px;
    height      : 175px;
    z-index     : 2;
}

/*VUW NAW */
p.vu-naw {
    float       : right;
    padding     : 5px;
    margin-top  : 20px;
    margin-right    : 20px;
    border      : 1px solid red;
    z-index     : 2;
}

/* Blackline */
hr.bl {
    float       : left;
    margin      : 10px 5px 0px 5px;
    width       : 940px;
    height      : 1px;
    border      : 0px;
    background-color: #000000;
    color       : #000000;
}

[ Voor 23% gewijzigd door Spooksel op 19-02-2006 03:06 ]

Bevalt mijn schrijfsel je niet? www.korrelatie.nl

zondag 19 februari 2006 03:22

Acties:

crisp

Devver

Pixelated

doubled float-margin bug waarschijnlijk

Maar ik zou sowieso de verticale centrering niet met absolute positioning doen...

Intentionally left blank

zondag 19 februari 2006 04:11

Acties:

Spooksel

Spooksel!

Topicstarter

Ik zit wat te klieren met die 'workaround': display: inline;

Maar ik krijg nog steeds die dubbele margin, hoe moet ik die display tag nu toepassen? Ik heb inmiddels de header area aangepast van relative naar een float in de main area, daar vervolgens die display op uitgeprobeerd. Dit werkt dus niet

Cascading Stylesheet:

/* Afbakening toparea */
.header {
    float       : left;
    display     : inline;
    margin      : 5px;
    width       : 940px;
    height      : 175px;
    z-index     : 1;
}

Bevalt mijn schrijfsel je niet? www.korrelatie.nl

zondag 19 februari 2006 09:44

Acties:

JHS

Splitting the thaum.

Spooksel: Als ik het goed begrijp staat de "Hallo" wat verder van de HR af in IE dan in FF. Dit heeft niet echt veel te maken met de margin van de .header

. De double-float-margin bug heeft waarschijnlijk meer invloed op hr.b1, waarop je dus ook de display: inline; wilt toepassen. (evt. aan het eind, maar dat zou niet moeten uitmaken).

DM!

zondag 19 februari 2006 12:59

Acties:

Fuzzillogic

Cool

Waarom heb je nog die float op de <hr />? Lijkt me nergens nodig voor.

zondag 19 februari 2006 14:48

Acties:

Spooksel

Spooksel!

Topicstarter

Nexxennium schreef op zondag 19 februari 2006 @ 12:59:
Waarom heb je nog die float op de <hr />? Lijkt me nergens nodig voor.

Als ik die float op de <hr /> weglaat dan wordt ie in FF rechts buiten de main area gepushed. Dat is natuurlijk weer niet de bedoeling

Bevalt mijn schrijfsel je niet? www.korrelatie.nl