Cross browsers

Door Lissy Pixel op 10-03-2006 09:52

953 views

De SITE is perfect te zien in Firefox en zo moet het ook eruit zien maar kijk je dan in IE dan zie je wat anders.
Ik heb de validatie gedaan en kreeg dit:
Gefeliciteerd!

Om alles naar behoren te laten werken is het noodzakelijk dat uw document een correcte grammaticale opbouw heeft Dit betekent dat u correct HTML dient te gebruiken.

Maar ja de eigenaresse die dus in IE kijkt ziet niet de correcte site.
Wie heeft hulp voor me om zowel in IE als in Firefox dezelfde lay-out te hebben?

Lissy Pixel

10-03-2006 10:49

Willem-Jan schreef op 10.03.2006 10:34
Lissy, met 1200*1024 staat alles bijna goed in IE, pas als ik scherm kleiner maak komt er eronder te staan.

Tja en hiervoor zou ik dus graag een oplossing wensen en ik denk dat de absolute waardes dit zou moeten zijn :)

Martijn Wieringa

10-03-2006 10:50

Keep us posted ;)

Willem Jan Z

10-03-2006 10:54

Voeg bij #links eens toe:
position:relative;

En kijk dan eens of het klopt.
Verder twijfel ik bij margin-left:5%, terwijl #left 14% breed is.
Ik zou gewoon een vast breedte voor menu nemen, en de rest laten uitvullen.

Lissy Pixel

10-03-2006 11:05

Voeg bij #links eens toe:
position:relative;

Doe ik dit dan heb ik hetzelfde probleem als met IE...

Willem Jan Z

10-03-2006 11:05 gewijzigd op 10-03-2006 11:08

En dan je margin-left: vergroten naar 14%

Edit: Of een vaste groote aannemen voor menu, en voor margin-left die grootte nemen.
Edit2: En je menu niet meer op absolute zetten.

Mocht het dan allemaal nog niet werken, moet je of de abolsute waarde gebruiken. of op Jan wachten :) Want het moet gewoon goed kunnen met relative.
Misschien kan je in zijn tut iets vinden wat je verder helpt.

Lissy Pixel

10-03-2006 11:15

Dank jullie wel en ik wacht nu maar op Jan want heb zo'n beetje alles geprobeerd :)

Willem Jan Z

10-03-2006 11:17 gewijzigd op 10-03-2006 11:26

Heb je margin-left al op 14% gezet?

Edit: Laat maar, heb even je broncode geleend, en je CSS, maar het lukt me nu ook niet om het aan te passen zodat het klopt, zelfs niet met vaste breedte, wat ik toch wel verwacht had.

Lissy Pixel

10-03-2006 11:27

Ja ik had alles al gedaan en ik weet het ook niet meer...
Gewoon wachten op Jan :)
Dank je wel voor het meedenken!!!

Willem Jan Z

10-03-2006 11:29 gewijzigd op 10-03-2006 11:30

Het is nu wel gelukt, het lag aan de spacer div...

Hier de CSS die ik nu gebruik:
html, body {
margin : 0;
padding : 0;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style : normal;
font-weight : bold;
position: relative;
width : 100%;
height: 100%;
background: url("../images/bg1.jpg");

}

#container {
margin: 0px auto;
width: 95%;
height: 95%;
text-align: left;
border-bottom: 0px solid black;
border-left: 0px solid black;
border-right: 0px solid black;
border-top: 0px solid black;
/*background: url("../images/bg1.jpg");*/
}

#bovenkant {
height: 30%;
width: 100%;
text-align: center;
background-color: #a4b3d0;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 0px solid black;
}

#links {
float: left;
position: relative;
width: 15%;
margin-left:20px;
margin-right:10px;
margin-top:10px;
margin-bottom:10px;
/* De volgorde is, top, right, bottom, left. */
padding : 10px 10px 10px 20px;
border-bottom: 0px solid black;
border-left: 0px solid black;
border-right: 0px solid black;
border-top: 0px solid black;
/* background: url("../images/bg1.jpg");*/
}

#content {
margin-left: 15%;
position: relative;
overflow: auto;
height: 85%;
text-align: justify;
border-bottom: 0px solid black;
border-left: 0px solid black;
border-right: 0px solid black;
border-top: 0px solid black;
/*background: url("../images/bg1.jpg");*/
}

#bodem {
width: 100%;
height: 3%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style : normal;
font-weight : bold;
position: relative;
margin-left:1px;
margin-right:1px;
margin-top:1px;
margin-bottom:1px;
text-align: center;
background-color: #a4b3d0;
vertical-align: middle;
border-bottom: 0px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
}

h1 {
font-size: 250%;
text-align: center;
margin: 0px;
padding: 5px;
}

ul {
border: 0px solid black;
list-style-image: url('../images/paw.gif');
/*list-style-type: none;*/
padding: 0 px;
margin: 0px;
}

a:link { color: black; text-decoration: none; font-weight : bold;
font-family: verdana; font-size: 18px}
a:visited { color: black; text-decoration: none; font-weight : bold;
font-family: verdana; font-size: 18px}
a:hover { color: #08DBF7; text-decoration: none; font-weight : bold;
font-family: verdana; font-size: 18px}
a:active { color: #08DBF7; text-decoration: none; font-weight : bold;
font-family: verdana; font-size: 18px}

#scroll {
width: 610px;
height: 25px;
position: relative;
margin-left: 129px;
margin-top: -402px;
padding: 0px;
background-color: white;
border-left: 1px solid red;
border-right: 1px solid red;
border-bottom: 1px solid red;
border-top: 1px solid red;
text-align: center;
}

En ik heb de spacer div uit je content div gehaald in je HTML, gewoon omdat die toch niet meer gebruikt wordt.

Lissy Pixel

10-03-2006 12:13

Willem_vp : GEWELDIG (((((((((((((((((((((((KNUFFEL))))))))))))))))))))))))))))

Wat ben ik hier blij mee!!!!

Ook namens Anja (mijn vriendin) Dank Je Wel!!!!!!!!

Reageren

Inloggen om te reageren