[CSS] FF2 geeft header goed weer, IE7 niet. - Softwareontwikkeling

woensdag 6 juni 2007 16:06

Acties:

BIM is not a software!

Topicstarter

Ik heb een header gemaakt, maar IE7 heeft er geen trek in.
Ik heb al vanalles geprobeerd, maar kan de onvolkomenheid niet vinden.
En helaas rijkt mijn css kennis ook (nog) niet ver genoeg.

Delen van deze code heb ik van andere site's "geleend".

Dit is de site: http://members.chello.nl/b.nagelhout/website/test2.htm

De bedoeling is dat het middenstuk "gecentered" blijft.
Firefox doet dat goed, maar bij IE7blijf het "logo" links staan.

Hier de code:

HTML:

<HTML>
<HEAD>
<TITLE>test</TITLE>
</HEAD>
<STYLE TYPE="text/css">
<!--
body { font: 12px Arial, Helvetica, sans-serif; margin: 0px; padding: 0; background: #000 url('tile.jpg') repeat-x 100% 0; }
#header, .logo-container, .logo-right, .arc-container, .arc-z,{ display: block; }
#header { width: auto; min-width: 775px; height: 92px; background: url('top-tile.gif') repeat-x top center; }
.logo-container, .logo-right { width: 732px; height: 92px; }
.logo-container { margin: 0 auto; background: url('back-pic-left.gif'); }
.logo-right { position: relative; background: url('back-pic-right.gif') no-repeat right top; z-index: 20; }
h1.logo { position: absolute; top: 1px; left: 235px; margin: 0; padding: 0; width: 262px; height: 122px; background: url('logo.gif') no-repeat; }
.arc-container { position: relative; width: 100%; min-width: 775px; z-index: 4020; }
.arc-z { position: relative; z-index: 5020; }
span.left-arc, span.right-arc { position: absolute; top: -92px; width: 85px; height: 92px; }
span.left-arc { left: 0px; background: url('arc-left.gif') no-repeat; }
span.right-arc { right: 0px; background: url('arc-right.gif') no-repeat; }
-->
</STYLE>
<BODY>
<div id="header">
    <div class="logo-container">
        <div class="logo-right">
            <h1 class="logo"><img src="pixel.gif"></h1>
        </div>
    </div>
</div>
<div class="arc-container">
    <div class="arc-z">
        <span class="left-arc"></span>
        <span class="right-arc"></span>
    </div>
<!--[if lte IE 6]>
<img src="pixel.gif" border="0" width="775" height="1" alt="" />
<![endif]-->
</div>
</BODY>
</HTML>

--Stuck in the Apple Ecosystem (and happy about it).--

woensdag 6 juni 2007 16:54

Acties:

Boelie-Boelie

Waarom bestaat die hele header-image uit verschillende delen? Waarom voeg je die niet samen, zet ze ze als background-image en centreer je het op die manier?

Verder zou ik een correct doctype gebruiken, (kijk maar af van dit forum voor een goeie keuze); dan krijg je minder verschillen tussen FF en IE. Een cursus HTML en CSS is ook nooit weg en lees ook eens wat smurfen met divjes te maken hebben.

Cogito ergo dubito

woensdag 6 juni 2007 17:01

Acties:

Padschild

Je vergeet sowieso een doctype boven je code te zetten, daarom gaat het waarschijnlijk niet goed in Internet explorer.

edit: te laat..

[ Voor 7% gewijzigd door Padschild op 06-06-2007 17:01 ]