divjes vershillen in weergave per browser

Door Gerben van Erkelens op 25-02-2005 22:35

525 views

Hallo,

Ik ben bezig met mijn site een beetje aan het werkend maken.
Nu heb ik via CSS grotendeels de opmaak beschreven op de opmaak in de includes na.

Nu ziet de boel er in FireFox super uit, alleen in IE klopt er niet veel van. Ik snap niet goed waarom hij dat doet.

Mijn CSS bestand:
body {
font-family:Verdana;
font-size:11px;
color:#000000;
letter-spacing:0.03cm;
background-color:#FDFDFD;
}

a:link {
color:#333333;
text-decoration:none;
}

a:visited {
color:#666666;
}

a:hover{
color:#4B68B1;
text-decoration:underline;
}

#background-site {
width:875px;
height:510px;
margin:0px auto;
padding:15px;
border:1px #000000;
background-image:url(img/website.gif);
background-repeat:no-repeat;
}

#randomfoto {
width:393px;
height:238px;
margin-top:24px;
margin:23px;
padding:15px;
background-image:url(img/foto1.jpg);
}

#menu {
width:450px;
height:5px;
margin-top:-27px;
margin-left:-17px;
padding:15px;
color:#FFFFFF;
letter-spacing:0.03cm;
}
#menu a:link{
color:#FFFFFF;
}

#menu a:visited {
color:#FFFFFF;
text-decoration:underline;
}

#menu a:hover{
color:#4B68B1;
text-decoration:underline;
}

#content {
position:relative;
left:454px;
top:-298px;
width:395px;
height:460px;
overflow:auto;
}

Weet iemand wat er fout aan is? En zo jah hoe is het op te lossen?

Mijn website is nog tot een uur of 12 te zien op: http://81.68.246.247
dan is het misschien duidelijker wat ik bedoel

The Beeding Clown

26-02-2005 01:09 gewijzigd op 26-02-2005 01:09

staat er een !doctype bovenaan je html ?
(kan de site niet benaderen nu)

Bas Kreleger

26-02-2005 04:10

idd dat maakt groot verschil voor I.E. of FF.. vooral als je positioneert..

en probeer eens ipv relative, absolute..

G Gerben van Erkelens

26-02-2005 11:37 gewijzigd op 26-02-2005 12:20

als ik dat verander van relative naar absolute, dan klopt er geen snars meer van, de layer met content is dan gewoon niet meer te zien. Gebruik ik bijvoorbeeld inherit of static dan staat de div onder de rest ipv er rechts van.

Mijn doctype in de index.php waar alle divjes in staan is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">;

de site is nu weer te bereiken tot een uur of 21.00 uur
http://81.68.246.247

R Ro-G :o)

26-02-2005 12:25

Probeer hier -->


#menu a:link{ color:#FFFFFF;}

#menu a:visited  etc...

eens een beetje met margin en padding te spelen.

Zal vast wel lukken :o)

Kijk anders ook eens hier KLIK
Ik ben niet een expert maar misschien heb je iets aan mijn laatste css die ik gemaakt heb.

G Gerben van Erkelens

26-02-2005 12:29

De margin en padding staat toch al bij #menu weergeven?

dit stukje:
#menu {
width:450px;
height:5px;
--> margin-top:-27px;
--> margin-left:-17px;
--> padding:15px;
color:#FFFFFF;
letter-spacing:0.03cm;
}

R Ro-G :o)

26-02-2005 12:35

Gerben van Erkelens schreef op 26.02.2005 12:29
De margin en padding staat toch al bij #menu weergeven?

En werkt het? Neen hé ;o)

Dus probeer eens mijn sugestie. Geen verplichting hé ;o)

G Gerben van Erkelens

26-02-2005 12:42

jah het lukt wel, maar als ik bijvoorbeeld de margin en padding wat verander, dan laat IE ze wat beter zien. Maar dan is Firefox weer erg raar aan het doen, qua het weergeven van de hele boel

G Gerben van Erkelens

28-02-2005 09:46

het werkt nu met de volgende css:
@charset "iso-8859-1";

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#000000;
letter-spacing:0.03cm;
background-color:#FDFDFD;
}

a:link {
color:#333333;
text-decoration:none;
}

a:visited {
color:#666666;
}

a:hover{
color:#4B68B1;
text-decoration:underline;
}

#background-site {
width:875px;
height:510px;
margin:0px auto;
padding:15px;
border:1px #000000;
background-image:url(img/website.gif);
background-repeat:no-repeat;
}

#randomfoto {
position:relative;
width:393px;
height:238px;
top:23px;
left:22px;
padding:15px;
background-image:url(img/foto1.jpg);
}

#menu {
position:relative;
width:420px;
height:10px;
top:19px;
left:-15px;
padding:15px;
}

#menu a:link{
color:#FFFFFF;
}

#menu a:visited {
color:#FFFFFF;
text-decoration:underline;
}

#menu a:hover{
color:#4B68B1;
text-decoration:underline;
}

#content {
position:relative;
width:395px;
height:460px;
left:455px;
top:-283px;
overflow:auto;
}

Reageren

Inloggen om te reageren