aan alle goede dingen komt een eind, webmasterplein.net 2003 - 2013
wij danken jullie voor al mooie momenten die dankzij dit forum ontstonden - Derk, Rutger en Stef

Website goed krijgen in IE

Het echte opmaakwerk, alles vragen over HTMLen, CSSen en Javascripten.

Website goed krijgen in IE

Berichtdoor slimbiny » 05 apr 2008 16:11

Oke, dit ziet er dus perfect uit in alle browsers (zelfs Safari), maar is een ramp in IE.

Even een paar dingen: Zelfde probleem met menu in oudere IE als hier met tabjes was. Hoe is dit opgelost?

De rest is gewoon compleet verkeerd gepositioneerd. Hoe dit op te lossen?

En ik moet nog een PNGfix doen...

Hier de HTML

Code: Selecteer alles
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
        <head>
                <title> ;) </title>
               
                <link rel="stylesheet" type="text/css" href="opmaak.css" />
            
             <link rel="StyleSheet" href="bar/bar.css" type="text/css" />
             <script type="text/javascript" src="bar/bar.js"></script>

        </head>

       
        <body>
                <div id="header"></div>
                <div id="menuboven"></div>
            <div id="menu">
<div id="tabsE">
  <ul>
    <li><a href="index.html" title="Home"><span>Home</span></a></li>
    <li><a href="#" title="Link 2"><span>Info</span></a></li>

    <li><a href="#" title="Link 3"><span>Nieuws</span></a></li>
    <li><a href="#" title="Link 4"><span>Idee?</span></a></li>
    <li><a href="#" title="Link 5"><span>Agenda</span></a></li>
    <li><a href="#" title="Link 6"><span>Acties</span></a></li>
   <li><a href="#" title="Link 7"><span>Contact</span></a></li>
  </ul>

</div></div>     
            <div id="menuonder"><h4>hier kan natuurlijk ook nog iets</h4></div>
            <div id="bar">
      <div id="bar" class="rotatie">
        <script language="javascript">
                    banner1 = new Banner('banner1');
                    banner1.add("IMAGE", "bar/afbeeldingen/1.png", 5, 60, 468,"#.html");
                    banner1.add("IMAGE", "bar/afbeeldingen/2.png", 5, 60, 468,"#.html");
                    banner1.add("IMAGE", "bar/afbeeldingen/3.png", 5, 60, 468,"#.html");
                 
                    document.write(banner1);
                    banner1.start();
        </script>
      </div>
            </div>
            <div id="content">

            <div id="nieuws">
            <h5><div id="nieuws" class="dag">21</div><div id="nieuws" class="maand">Maart</div></h5>
            <h2>Hier komt de titel van het nieuwsbericht</h2>
            <h2 class="ondertitel">Geplaatst op 08/08/2008 om 18:00</h2>
            <div id="nieuws" class="tekst">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<div id="nieuws" class="buttons"><span><a href="#"><img src="reageer.jpg" border="0"></a></span><span><a href="#"><img src="reacties.jpg" border="0"></a></span><span><a href="#"><img src="meer.jpg" border="0"></a></span></div>
            </div>

            </div>
            
            <div id="nieuws">
            <h5><div id="nieuws" class="dag">06</div><div id="nieuws" class="maand">Maart</div></h5>
            <h2>Hier komt de titel van het nieuwsbericht</h2>
            <h2 class="ondertitel">Geplaatst op 08/08/2008 om 18:00</h2>
            <div id="nieuws" class="tekst">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<div id="nieuws" class="buttons"><span><a href="#"><img src="reageer.jpg" border="0"></a></span><span><a href="#"><img src="reacties.jpg" border="0"></a></span><span><a href="#"><img src="meer.jpg" border="0"></a></span></div>

            </div>
            </div>



            </div>   
            
            <div id="contentrechts">
            <div id="blokrechts">
            <div id="blokrechtsinhoud">
            <h2>Titel komt hierzo en is lang</h2>

            <h2 class="ondertitel">ondertitel komt hier en daar...</h2>
            <div id="blokrechtsinhoud" class="tekst">En de tekst is heel erg kort...dus moet er nog wat achter geplakt worden...<br /><br /><a href="#">Meer lezen...</a> | <a href="#">Reageren</a>
            </div>


            <div id="blokrechts">
            <div id="blokrechtsinhoud">

            <h2>Titel komt hierzo en is lang</h2>
            <h2 class="ondertitel">ondertitel komt hier en daar...</h2>
            <div id="blokrechtsinhoud" class="tekst">En de tekst is heel erg kort...dus moet er nog wat achter geplakt worden...<br /><br /><a href="#">Meer lezen...</a> | <a href="#">Reageren</a>
            </div>
<br />

        </body>
       
</html>


hier de css (die van het menu is via een oud menu op mijn computer):

Code: Selecteer alles
/* Algemene gedeelte */

html
    {
        background-color: #084774;
      background-image: url('achtergrond.png');
        background-repeat: repeat-x;
    }

body
    {
        width: 800px;
        margin: 0px auto;
      margin-top: 0px;
    }

/* Onderdelen apart*/

div#header
    {
        background-image: url('header.png');
        background-repeat: no-repeat;
        width: 800px;
        height: 154px;
    }

div#menu
    {
        background-image: url('menu_midden.png');
        width: 800px;
        height: 28px;
        margin: 0px;
    }

div#menuboven
    {
        background-image: url('menu_boven.png');
        width: 800px;
        height: 12px;
        margin: 0px;
    }

div#menuonder
    {
        background-image: url('menu_onder.png');
        width: 800px;
        height: 25px;
        margin: 0px;
    }

div#menuonder h4
    {
        float: left;
      color: #FFFFFF;
      font-size: 10px;
      font-weight: normal;
      font-family: "Arial";
      padding: 0px 0 0 10px;
      margin-top: 8px;
    }

div#bar
    {
        background-image: url('bar.png');
        background-repeat: no-repeat;
      width: 800px;
        height: 111px;
        margin: 0px;
    }

div#bar.rotatie
    {
          width: 468px;
        height: 60px;
        position: absolute;
      background-image: none;
      margin-left: auto;
      margin-right: auto;
        margin: 0px auto;
      padding: 25px 0px 0px 0px;
      left: 50%;
      margin-left: -234px; /* - (width/2) */
      position: relative;
   }

div#content
    {
        background-image: url('content_bg.png');
      background-color: #FFFFFF;
      background-repeat: no-repeat;
        width: 550px;
        height: 800px;
        margin: 0px;
      float: left;
    }

div#contentrechts
    {
         background-repeat: no-repeat;
        width: 240px;
        height: 600px;
        margin-left: 10px;
      float: left;
    }

div#blokrechts
   {
      background-repeat: no-repeat;
        background-image: url('rechts_bg.png');
      width: 240px;
        height: 125px;
      margin-left: 0px;
      float: right;
   }

div#nieuws
    {
        width: 550px;
        height: 210px;
        margin: 0px;
      float: left;
    }

/* Aparte classes */

/* Nieuws classes */

div#nieuws h5 /* Datum */
    {
        float: left;
      width: 50px;
        height: 60px;
      background-image: url('datum.png');
      background-repeat: no-repeat;
      margin-left: 10px;
      margin-top: 10px;
    }

div#nieuws.dag
    {
         float: left;
      color: #0E7ACA;
      font-size: 14px;
      font-weight: normal;
      font-family: "Geneva";
      padding: 13px 0 0 17px;
      height: 15px;
   }

div#nieuws.maand
    {
         float: left;
      color: #7D7E80;
      font-size: 12px;
      font-weight: normal;
      font-family: "Geneva";
      padding: 14px 0 0 8px;
      
   }

div#nieuws h2 /* titel */
    {
         float: left;
      color: #094D7E;
      font-size: 16px;
      font-weight: normal;
      font-family: "Geneva";
      padding: 3px 0 0 15px;
   }

div#nieuws h2.ondertitel /* ondertitel */
    {
         color: #717275;
      font-size: 11px;
      font-weight: normal;
      font-style: italic;
      font-family: "Geneva";
      margin-top: -15px;
      padding: 1px 0 0 15px;
   }

div#nieuws.tekst /* uiteindelijke tekst */
    {
         color: #8D8E8F;
      width: 475px;
      font-size: 11px;
      font-weight: normal;
      font-style: none;
      font-family: "Geneva";
      margin-top: -35px;
      padding: 1px 0 0 75px;
   }

div#nieuws.buttons
    {
         width: 270px;
      height: 21px;
      padding: 10px 0 0 280px;         
   }

div#nieuws.buttons span
    {
         width: 270px;
      height: 21px;
      padding: 0px 0px 5px 5px;         
   }

/* blokrechtsinhoud classes */

div#blokrechtsinhoud h2 /* titel */
    {
         float: left;
      width: 220px;
      color: #094D7E;
      font-size: 14px;
      font-weight: normal;
      font-family: "Geneva";
      padding: 10px 0 0 10px;
      margin-top: 1px;
   }

div#blokrechtsinhoud h2.ondertitel /* ondertitel */
    {
         color: #717275;
      width: 220px;
      font-size: 11px;
      font-weight: normal;
      font-style: italic;
      font-family: "Geneva";
      margin-top: -10px;
      padding: 0px 0 0 10px;
      valign: left;
   }

div#blokrechtsinhoud.tekst /* uiteindelijke tekst */
    {
         color: #8D8E8F;
      width: 220px;
      height: 125px;
      font-size: 11px;
      font-weight: normal;
      font-style: none;
      font-family: "Geneva";
      margin-top: 0px;
      padding: 0px 0 0 10px;
      margin-bottom: 15px;
   }

/* Menu zooi */

#tabsE {
      float:left;
      width:100%;
      background:#000;
      font-size:93%;
     height: 28px;
      line-height:normal;
         color: #084774;
        font-size: 10px;
      font-weight: normal;
      font-style: bold;
      font-family: "Arial";
   }
    #tabsE ul {
   margin:0;   
   height: 28px;
   padding: 0px 10px 0px 170px;
   list-style:none;
   background: url('menu_midden.png');
      }
    #tabsE li {
      display:inline;
      margin-left: 5px;
      padding:0px 0px 0px 0px;
     height: 28px;
      }
    #tabsE a {
      float:left;
      background:url("tableftE.gif") no-repeat left top;
      margin:0;
      padding:0 4px 0 4px;
      text-decoration:none;
      }
    #tabsE a span {
      float:left;
      display:block;
      background:url("tabrightE.gif") no-repeat right top;
      padding:10px 15px 4px 12px;
      color:#084774;
     font-style: bold;
     height: 15px;   
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsE a span {float:none;}
    /* End IE5-Mac hack */
    #tabsE a:hover span {
      color:#084774;
     font-style: bold;
      }
    #tabsE a:hover {
      background-position:0% -42px;
      }
    #tabsE a:hover span {
      background-position:100% -42px;
      } 
   



PlayedThatGame.com zou wel eens mijn nieuwste site kunnen zijn
Avatar gebruiker
slimbiny
wmpr
 
Berichten: 743
Geregistreerd: 13 maart 2005 09:59
Woonplaats: Vastgeroest

Re: Website goed krijgen in IE

Berichtdoor Remi » 05 apr 2008 23:38

Ik weet niet wat je problemen zijn maar wat meestal al veel goed maakt is het volgende.
Voeg dit toe aan je css:
Code: Selecteer alles
*{
  margin: 0;
  padding: 0;
}
Avatar gebruiker
Remi
wmpr
 
Berichten: 3010
Geregistreerd: 04 apr 2006 15:22

Re: Website goed krijgen in IE

Berichtdoor slimbiny » 06 apr 2008 15:10

@Remi, dan is alleen de rest van mijn layout naar de * :x *

Online is hij te vinden op het adres van mijn website en van v m l / erachter plakken (uiteraard zonder spaties).

s.v.p. deze link niet klikbaar maken, anders staat dit topic boven de website zelf in google
PlayedThatGame.com zou wel eens mijn nieuwste site kunnen zijn
Avatar gebruiker
slimbiny
wmpr
 
Berichten: 743
Geregistreerd: 13 maart 2005 09:59
Woonplaats: Vastgeroest

Re: Website goed krijgen in IE

Berichtdoor Derk » 06 apr 2008 15:31

slimbiny schreef:Online is hij te vinden op het adres van mijn website en van v m l / erachter plakken (uiteraard zonder spaties).

Als ik jou was zou ik dat zelf ook maar een keer proberen, dat werkt namenlijk niet. Je hele site werkt niet.
Afbeelding
Avatar gebruiker
Derk
Beheerder
Beheerder
 
Berichten: 12634
Geregistreerd: 27 nov 2003 19:50
Woonplaats: Houten

Re: Website goed krijgen in IE

Berichtdoor slimbiny » 06 apr 2008 15:40

whoops, bedoelde de site in mijn onderschrift.
PlayedThatGame.com zou wel eens mijn nieuwste site kunnen zijn
Avatar gebruiker
slimbiny
wmpr
 
Berichten: 743
Geregistreerd: 13 maart 2005 09:59
Woonplaats: Vastgeroest

Re: Website goed krijgen in IE

Berichtdoor Derk » 06 apr 2008 15:43

slimbiny schreef:whoops, bedoelde de site in mijn onderschrift.

Onderschriften heb ik uit staan :roll:
Afbeelding
Avatar gebruiker
Derk
Beheerder
Beheerder
 
Berichten: 12634
Geregistreerd: 27 nov 2003 19:50
Woonplaats: Houten

Re: Website goed krijgen in IE

Berichtdoor slimbiny » 06 apr 2008 15:45

i n t e r n e t t y c o o n ( p u n t ) n l
PlayedThatGame.com zou wel eens mijn nieuwste site kunnen zijn
Avatar gebruiker
slimbiny
wmpr
 
Berichten: 743
Geregistreerd: 13 maart 2005 09:59
Woonplaats: Vastgeroest

Re: Website goed krijgen in IE

Berichtdoor Stef » 06 apr 2008 18:57

Avatar gebruiker
Stef
wmpr
 
Berichten: 5575
Geregistreerd: 27 nov 2003 21:51

Re: Website goed krijgen in IE

Berichtdoor frizzy » 06 apr 2008 18:58

Zo vind google hem, en dat vind hij niet lief :P
frizzy
wmpr
 
Berichten: 4261
Geregistreerd: 20 sep 2006 16:03
Woonplaats: Boskoop :D

Re: Website goed krijgen in IE

Berichtdoor Stef » 06 apr 2008 18:58

frizzy schreef:Zo vind google hem, en dat vind hij niet lief :P


Dan blokkeert ie Google toch, als hij niet gevonden wilt worden?
Avatar gebruiker
Stef
wmpr
 
Berichten: 5575
Geregistreerd: 27 nov 2003 21:51

Re: Website goed krijgen in IE

Berichtdoor frizzy » 06 apr 2008 18:59

Jha, raar kind :P
frizzy
wmpr
 
Berichten: 4261
Geregistreerd: 20 sep 2006 16:03
Woonplaats: Boskoop :D

Re: Website goed krijgen in IE

Berichtdoor slimbiny » 06 apr 2008 19:03

:lol: ik bedoelde dat ik liever geen link naar de locatie van het andere ding wou. frontpage moet juist wel in google worden opgenomen.
PlayedThatGame.com zou wel eens mijn nieuwste site kunnen zijn
Avatar gebruiker
slimbiny
wmpr
 
Berichten: 743
Geregistreerd: 13 maart 2005 09:59
Woonplaats: Vastgeroest

Re: Website goed krijgen in IE

Berichtdoor Stef » 06 apr 2008 19:03

slimbiny schreef::lol: ik bedoelde dat ik liever geen link naar de locatie van het andere ding wou. frontpage moet juist wel in google worden opgenomen.


Good content is king!
Avatar gebruiker
Stef
wmpr
 
Berichten: 5575
Geregistreerd: 27 nov 2003 21:51

Re: Website goed krijgen in IE

Berichtdoor slimbiny » 06 apr 2008 19:08

hebben jullie trouwens enig idee waar het aan kan liggen?

s'shotje van de site in IE 6 of lager: http://imgdumper.com/file/img/2008/apr/ ... lsm3g0.png
PlayedThatGame.com zou wel eens mijn nieuwste site kunnen zijn
Avatar gebruiker
slimbiny
wmpr
 
Berichten: 743
Geregistreerd: 13 maart 2005 09:59
Woonplaats: Vastgeroest

Re: Website goed krijgen in IE

Berichtdoor frizzy » 06 apr 2008 19:09

Mwahaha, heb ff m'n site geupdate ^^
frizzy
wmpr
 
Berichten: 4261
Geregistreerd: 20 sep 2006 16:03
Woonplaats: Boskoop :D

Re: Website goed krijgen in IE

Berichtdoor slimbiny » 06 apr 2008 19:10

Stef schreef:
slimbiny schreef::lol: ik bedoelde dat ik liever geen link naar de locatie van het andere ding wou. frontpage moet juist wel in google worden opgenomen.


Good content is king!


ja, of gewoon zorgen dat je met 1 of meerdere artikelen op de frontpage van NUjij.nl of eKudos (stond bijna 6 uur) staat. Toen stond ik ineens op de eerste pagina in google bij spelletjessite (niet dat de site daarover gaat maargoed)
Laatst bijgewerkt door slimbiny op 06 apr 2008 19:19, in totaal 1 keer bewerkt.
PlayedThatGame.com zou wel eens mijn nieuwste site kunnen zijn
Avatar gebruiker
slimbiny
wmpr
 
Berichten: 743
Geregistreerd: 13 maart 2005 09:59
Woonplaats: Vastgeroest

Re: Website goed krijgen in IE

Berichtdoor Stef » 06 apr 2008 19:15

Je zegt nu wel "of.." maar dat is precies wat ik zeg. Door jouw goede content komen er bezoekers. :)

slimbiny schreef:hebben jullie trouwens enig idee waar het aan kan liggen?


Nee, maar haal eens alle margin's, paddings uit je script. Kijken hoe hij dan er uit ziet en bouw hem vervolgens dan opnieuw op.
Avatar gebruiker
Stef
wmpr
 
Berichten: 5575
Geregistreerd: 27 nov 2003 21:51

Re: Website goed krijgen in IE

Berichtdoor slimbiny » 06 apr 2008 19:19

zal dat proberen. thx.
PlayedThatGame.com zou wel eens mijn nieuwste site kunnen zijn
Avatar gebruiker
slimbiny
wmpr
 
Berichten: 743
Geregistreerd: 13 maart 2005 09:59
Woonplaats: Vastgeroest

Re: Website goed krijgen in IE

Berichtdoor slimbiny » 06 apr 2008 19:46

Stef schreef:content is king!


lol... volgens mij lezen wij dezelfde weblogs (of zijn er gewoon meerdere mensen met dezelfde uitroepen)
PlayedThatGame.com zou wel eens mijn nieuwste site kunnen zijn
Avatar gebruiker
slimbiny
wmpr
 
Berichten: 743
Geregistreerd: 13 maart 2005 09:59
Woonplaats: Vastgeroest

Re: Website goed krijgen in IE

Berichtdoor Stef » 06 apr 2008 20:22

slimbiny schreef:
Stef schreef:content is king!


lol... volgens mij lezen wij dezelfde weblogs (of zijn er gewoon meerdere mensen met dezelfde uitroepen)


Nee, Coen en ik lezen dezelfde weblogs. :mrgreen:
Avatar gebruiker
Stef
wmpr
 
Berichten: 5575
Geregistreerd: 27 nov 2003 21:51

Re: Website goed krijgen in IE

Berichtdoor Coen » 09 apr 2008 12:36

Stef schreef:Nee, Coen en ik lezen dezelfde weblogs. :mrgreen:
Jullie zijn gewoon een stelletje na-apers! ;)

Sorry lees dit topic nu pas! ;)
Afbeelding
Avatar gebruiker
Coen
wmpr
 
Berichten: 26
Geregistreerd: 16 dec 2007 19:44


Keer terug naar HTML, CSS, Javascript



cron