[css] Lay-out doet vaag in IE6, FF wel goed. - Softwareontwikkeling

donderdag 21 december 2006 21:27

Acties:

Topicstarter

Ik heb zonet dus een site zitten maken, maar wilde de lay-out wat anders hebben. Nu klopt het precies in Firefox, maar toen ik in IE6 keek, was het een zootje.

Onder de main-tekst zit een leeg blok, die wat lichtgroenig is. Die komt mooi totaan de footer in firefox, maar in IE6 is hij blauw(zoals de achtegrondkleur). Selecteer ik de pagina, dan wordt de helft van dat blok lichtgroenig, en als ik een programma open en terugga naar IE6 is hij bijna helemaal lichtgroenig, tot 10px boven de footer. Ook is er nog 10px lichtgroen onder de footer, wat er in FF niet is.

Kunnen jullie mij helpen met het fixen hiervan?

De pagina:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Le Titel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
a:link {

    text-decoration: none;
}
a:visited {
    text-decoration: none;

}
a:hover {
    text-decoration: underline;

}
a:active {
    text-decoration: none;

}
.style8 {
    font-size: 7pt;
    font: small "Trebuchet MS",Verdana,Arial,Sans-serif;
}
.style10 {color: #000000}
.style13 {font-size: 9px}
body {
    background-color: #2E*;
    background-color: #2E8FC6;
}
-->
</style>
</head>
<body>
<div id="wrap">
    <div id="header"><center>
      Titel </center></div>

    <div id="nav">
        <div align="center"><a href="http://www.link.nl" class="style1">Home</a><span class="style1"> | </span><a href="link.html" class="style1">Link</a> | <a href="link.html" class="style1">Link</a> | <a href="http://link.nl" class="style1">Link</a> | <a href="http://link.nl" class="style1">Link</a> | <a href="http://link.nl" class="style1">Link</a> | <a href="http://link.nl" class="style1">Link</a></div>
    </div>

    <div id="main">

        <p class="heading1">Titel 2</p>
        <p>Tekst, tekst,tekst. Tekst, tekst.</p>
        <p>&nbsp;</p>
        <p>TEEEKKKKSSST</p>
        <p>teks, bla bla. Bla bla tekst. </p>
        <p>&nbsp;</p>
      <p>&nbsp; </p>
      <p><br />
      </p>
        <p><br />
          <br />
      </p>

    </div>
    <div id="sidebar">
      <img src="image.jpg">
      <div style="padding:10px">
            <b>Nieuwsbrief stuff</b>
            <br>
            Nieuwsbrief tekst, bla bla.
        <form id="form1" name="form1" method="post" action="mail.php">

              <p>
              <input name="email" type="text" id="email" />
              <input name="submit" type="submit" value="Aanmelden" />
              </p>
              <p>          Of kijk op de contact-pagina. 
              </p>
        </form>
      </div>
  </div>
    <div class="style10" id="footer">
        <span class="style8"><a href="http://www.link.nl" class="style10">Home</a> | <a href="link.html" class="style10">Link</a> | <a href="link.html" class="style10">Link</a>  | <a href="http://link.nl/" class="style10">Link</a> | <a href="http://link.nl/" class="style10">Link</a> | <a href="http://link.nl/" class="style10">Link</a> | <a href="http://link.nl/" class="style10">Link </a></span></div>

</div>

</body>
</html>

De stylesheet:

Cascading Stylesheet:

body,

    html {
        margin:0;
        padding:0;
        background:#2E8FC6;
        color:#000;
        font: small "Trebuchet MS",Verdana,Arial,Sans-serif;
        font-size: 10pt
    }

    body {
        min-width:750px;
    }

    #wrap {
        border-left: 10px solid #2E8FC6;
        border-right: 10px solid #2E8FC6;
        background: #A0E3F3;
        margin: 0 auto;
        width:750px;
    }

    #header {
        background:#A3CFEC;
        height: 50px;
        padding: 10px 0px 10px 10px;
        color: white;
        font-size: 40px;
        font-weight: bold;
        border-bottom: solid 1px white;
    }

    #header h1 {
        padding:5px;
        margin:0;
    }

    #nav {
        background:#2E8FC6;
        padding: 5px 5px 5px 10px;
        color: white;
        border-bottom: solid 1px white;
    }

    #nav ul{
        margin:0;
        padding:0;
        list-style:none;
    }

    #nav li{
        display:inline;
        margin:0;
        padding:0;
    }

    #main {
        background:#FFFFFF;
        float:left;
        width:500px;
    }
        
    #main p {
        padding: 0 10px;
    }

    #sidebar {
        background:#A3CFEC;
        float:right;
        width:250px;
        height: 615px;
    }

    #sidebar ul {
        margin-bottom:0;
    }

    #sidebar h3, #sidebar p {
        padding:0 10px 0 0;
    }

    #footer {
        background:#2E8FC6;
        clear:both;
        text-align: center;
        padding: 5px;
        font-size: 11px;
        margin-bottom: 20px;
    }

    #credits {
        font-size: 10px;
        text-align: center;
    }

    #footer p {
        padding:5px;
        margin:0;
    }

    .heading1 {
        color: #1C5B9E;
        font-size: 20pt;
    }
    
    .heading2 {
        color: #1C5B9E;
        font-size: 12pt;
    }
    
    .underlink2 {
        color: #000000;
        font-size: 7pt;
        font: small "Trebuchet MS",Verdana,Arial,Sans-serif;
    }

edit: Zie in Dreamweaver dat er onder het menu (onderaan) ook een lichtgroene balk zit. Dan doet IE6 het dus half goed, en FF verkeerd. Maar zoals FF het doet, moet het uiteindelijk worden (dus zonder lichtgroene bal onder het menu, alleen onder de main-tekst)

[ Voor 0% gewijzigd door crisp op 21-12-2006 23:33 . Reden: code-tags gefixed ]

donderdag 21 december 2006 21:40

Acties:

guanche

Mss een tip om help te krijgen:
1) Haal alle onnodige CSS er even uit. (helpt ook voor je zelf bij 'debugging' (< btje raar woord voor de css validatie in IE6

))

2) Gebruik tabjes zodat de nesting van de div's in 1 slag duidelijk is..

3) Er is ook een HTML UBB zodat hele slimme mensen het in 1 oogopslag kunnen zien..

Ik zal even naar je code kijken..brb

EDIT:
Ik zie nu dat je de HTML UBB wel geprobeert hebt.
verder nog een tip:
- In dreamweaver; Edit -> Preferences -> General, staat een vinkje 'Use CSS instead of HTML tags'
Deze staat standaard aan, maar in de praktijk leid dat tot onwenselijke CSS gezien je wel weet wanneer je CSS of HTML tags wilt gebruiken. Dit zijn de .style1~13 classes in je document

[ Voor 33% gewijzigd door guanche op 21-12-2006 21:45 ]

donderdag 21 december 2006 22:02

Acties:

guanche

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
    background-color: #2E8FC6;
    margin: 0px;
    font-family: "Trebuchet MS",Verdana,Arial,Sans-serif;
}
#wrapper {
    margin: auto;
    width: 750px;
}
#header {
    text-align: center;
    background-color: #A3CFEC;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #FFFFFF;
}
#nav {
    color: #FFFFFF;
    text-align: center;
    margin: 5px;
}
#content_wrapper {
    background-color: #A0E3F3;
    height:100%;
}
#main {
    background-color: #FFFFFF;
    float: left;
    height: 300px;
    width: 500px;
}
.clear {
    clear: both;
}
#footer {
    padding: 5px;
    text-align: center;
}
#sidebar {
    float: left;
    height: 650px;
    width: 250px;
    background-color: #A3CFEC;
}
-->
</style>
</head>

<body>

    <div id="wrapper">
        <div id="header"><h1>Titel </h1></div>
        <div id="nav"><a href="http://www.link.nl">Home</a> | <a href="#">Link</a> </div>
        
        <div id="content_wrapper">
            <div id="main">main</div>
            <div id="sidebar">Sidebar</div>
            <div class="clear"></div>
        </div>
        <div id="footer">Footer</div>
    </div>

</body>
</html>

Dit moet je nog even testen, maar volgens mij werkt dit wel.. Ik kan nml niet testen in IE6 vanwege vista

Als je vanaf hier verder bouwt is het wat overzichtelijker.. Ook niet meer bij elke href in de link een class toewijzen, maar gewoon veel makkelijker #nav a { } gebruiken. Scheelt je heel wat kopzorgen.
succes

EDIT: height:100% toegevoegd omdat IE7 hem niet goed weergaf (dus IE6 wrschlk ook niet). Deze begreep clear:both; niet.....pff..... Ik moet ook alles 2x zeggen

[ Voor 4% gewijzigd door guanche op 21-12-2006 22:12 ]

donderdag 21 december 2006 23:36

Acties:

crisp

Devver

Pixelated

ot: code-tags gefixed in de startpost; [html] en [css] bestaan niet als tags, je moet [code=html] en [code=css] gebruiken

Anyway, de highlighting laat wel wat foutjes zien maar nothing beats the validator, hoewel die niet laat zien dat door het gebruik van HTML-comments in style- en/of scriptblokken de inhoud daarvan ècht als een comment wordt beschouwd als je het als XHTML opstuurd (en als je dat niet doet dan heb je het verkeerde doctype gebruikt

)

Intentionally left blank

vrijdag 22 december 2006 00:46

Acties:

maarud

Topicstarter

@ crisp, wilde het al editten, maar internet deed vaag.

@ guanche: Dit werkt! Zag net dat mijn versie het nu wel weer deed in IE6?? Vaag...

* maarud gaat verder aan de slag

maandag 25 december 2006 21:55

Acties:

maarud

Topicstarter

hmm, het gaat nu bijna goed.

In FF heb ik vanaf de bovenkant +/- 15px voordat de pagina begint, maar in IE7 begint de pagina gewoon direct vanaf de bovenkant. Hoe kan dit?

Voor de rest is was hij Valid!, <br> heeft geen afsluiting, en de <form> tag is niet goed? Vage zooi...

edit: In Opera precies hetzelfde als in FF, ook eerst die gekke 15px.

[ Voor 11% gewijzigd door maarud op 25-12-2006 21:58 ]

dinsdag 26 december 2006 00:10

Acties:

crisp

Devver

Pixelated

mcandor schreef op maandag 25 december 2006 @ 21:55:
hmm, het gaat nu bijna goed.

In FF heb ik vanaf de bovenkant +/- 15px voordat de pagina begint, maar in IE7 begint de pagina gewoon direct vanaf de bovenkant. Hoe kan dit?

Omdat in sommige browsers het body-element default padding heeft en in andere een default margin wellicht? Als je dat gelijk wilt trekken zal je dus zowel de padding als de margin middels CSS moeten opgeven

Voor de rest is was hij Valid!, <br> heeft geen afsluiting, en de <form> tag is niet goed? Vage zooi...

Voorbeeld? HTML of (faux) XHTML?

Intentionally left blank

dinsdag 26 december 2006 00:13

Acties:

maarud

Topicstarter

mijn doctype is XHTML 1.0 Transitional, en dit zijn mijn errortjes:

code:

# Error  Line 56 column 7: end tag for "br" omitted, but OMITTAG NO was specified.

            <br>

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
____
Info 2:
;
# Info Line 56 column 3: start tag was here.

            <br>
_____
Error nummer 3:
# Error Line 58 column 74: document type does not allow element "form" here; missing one of "object", "applet", "map", "iframe", "ins", "del" start-tag.

...m1" method="post" action="mailformsend.php">

Wat een mierenn**ker zeg

dinsdag 26 december 2006 01:20

Acties:

crisp

Devver

Pixelated

Ik ben een veel grotere mierenn**ker hoor

In XHTML dien je empty elements af te sluiten, maar beter is wellicht om gewoon een HTML DTD te gebruiken want 10 tegen 1 verstuur je je document ook als HTML en niet als XHTML.

Over de error op je form-element kan ik weinig zeggen; waarschijnlijk nest je 'm in een ander element waarbinnen dat niet is toegestaan.

Intentionally left blank

dinsdag 26 december 2006 14:16

Acties:

maarud

Topicstarter

ach, wat boeit het nu dat ik 2 errors heb, voor de rest wordt hij goed weergegeven en daar gaat het om

dinsdag 26 december 2006 23:09

Acties:

crisp

Devver

Pixelated

mcandor schreef op dinsdag 26 december 2006 @ 14:16:
ach, wat boeit het nu dat ik 2 errors heb, voor de rest wordt hij goed weergegeven en daar gaat het om

Met zo'n instelling zou ik je willen aanraden gewoon geen DTD te gebruiken...

Intentionally left blank

woensdag 27 december 2006 18:31

Acties:

maarud

Topicstarter

crisp schreef op dinsdag 26 december 2006 @ 23:09:
[...]

Met zo'n instelling zou ik je willen aanraden gewoon geen DTD te gebruiken...

Dreamweaver maakt er staandaard XHTML van

Maar heb al 1 gefixt!

woensdag 27 december 2006 20:29

Acties:

BiG_G

Master of Gods

En als je php op je server kan misbruiken:

code:

<?php
$encoding = 'UTF-8';
header('content-type: text/html; charset=' . $encoding);
?>

Dan hoef je daar niet meer naar te kijken

, hij pakt die dan gewoon van de browser die de pagina ophaalt.

You can either agree with me or be wrong!

Pagina: 1

Reageer