layout verschil van firefox-chroom en IE7
Hallo beste leden,
Ik weet zo gouw niet waar ik dit moest plaatsen maar omdat het denk ik gaat om CSS
doe ik het hier.
Het volgende doet zich voor bij het ontwikkelen van een chatbox.
Ik heb op index.php deze code staan
en op chatbox.php verwerkt die dit.
Het verwerken gaat goed daar zijn geen problemen mee.
Echter het is zo dat als ik FF en of Chroome gebruik de layout goed is
zie ook http://imageshack.us/photo/my-images/685/chatchroomeenfirefox.png/
Maar als ik dezelfde pagina open in IE7 gebeurt er dit
http://imageshack.us/photo/my-images/62/chatie7.png/
Dit heeft te maken met het <object></object> Tags.
Ook de background ie FF en Chroome zijn transparant wat ook niet het geval is in
IE 7.
Hoe kan ik dit oplossen. Ik heb al liggen rommelen met de width en height maar in IE7 blijven de problemen gelijk.
Alvast bedankt voor het meekijken en tips.
Met vriendelijke groet,
Thomas de Vries.
Ik weet zo gouw niet waar ik dit moest plaatsen maar omdat het denk ik gaat om CSS
doe ik het hier.
Het volgende doet zich voor bij het ontwikkelen van een chatbox.
Ik heb op index.php deze code staan
Code (php)
1
2
3
4
5
2
3
4
5
<script type="text/javascript">
function loadchat(code){
var getObj = document.getElementById('chatmain');
getObj.innerHTML = '<object id="chatmain" type="text/html" width="740" height="590" data="chatbox.php?code='+code+'"></object>';
}
function loadchat(code){
var getObj = document.getElementById('chatmain');
getObj.innerHTML = '<object id="chatmain" type="text/html" width="740" height="590" data="chatbox.php?code='+code+'"></object>';
}
en op chatbox.php verwerkt die dit.
Het verwerken gaat goed daar zijn geen problemen mee.
Echter het is zo dat als ik FF en of Chroome gebruik de layout goed is
zie ook http://imageshack.us/photo/my-images/685/chatchroomeenfirefox.png/
Maar als ik dezelfde pagina open in IE7 gebeurt er dit
http://imageshack.us/photo/my-images/62/chatie7.png/
Dit heeft te maken met het <object></object> Tags.
Ook de background ie FF en Chroome zijn transparant wat ook niet het geval is in
IE 7.
Hoe kan ik dit oplossen. Ik heb al liggen rommelen met de width en height maar in IE7 blijven de problemen gelijk.
Alvast bedankt voor het meekijken en tips.
Met vriendelijke groet,
Thomas de Vries.
Haal alles eens door de W3C en CSS validator.
We zullen die fouten er maar eens uit gaan halen is kijken of dat het veschil uitmaakt.
Bedankt voor de tip
Bedankt voor de tip
En voeg normalize.css toe aan je code, deze maakt alle standaard-waardes gelijk in elke browser.
http://necolas.github.com/normalize.css/
http://necolas.github.com/normalize.css/
Normalize.css, daar heb ik zo'n mijn twijfels over. Iets als dit is goed genoeg:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* First we reset the common properties */
html, body, body * {
font-family: inherit;
font-style: none;
font-size: 13pt;
font-weight: 200;
text-decoration: none;
color: #000;
outline: none;
padding: 0;
margin: 0;
}
/* Inputs have special borders, so delete every border except those who are inputs */
body *:not(input) { border: none; }
/* Then we set the font-family and with+height of the hole document */
html, body { width: 100%; height: 100%;
font-family: sans-serif; }
/* Add least, set the common styles */
u, a:hover { text-decoration: underline; }
i, em { font-style: italic; }
b, strong { font-weight: 700; }
pre, code { font-family: monospace; }
html, body, body * {
font-family: inherit;
font-style: none;
font-size: 13pt;
font-weight: 200;
text-decoration: none;
color: #000;
outline: none;
padding: 0;
margin: 0;
}
/* Inputs have special borders, so delete every border except those who are inputs */
body *:not(input) { border: none; }
/* Then we set the font-family and with+height of the hole document */
html, body { width: 100%; height: 100%;
font-family: sans-serif; }
/* Add least, set the common styles */
u, a:hover { text-decoration: underline; }
i, em { font-style: italic; }
b, strong { font-weight: 700; }
pre, code { font-family: monospace; }
En waarom heb je daar je twijfels over?




