Archief - HTML: Goed in firefox slecht in IE

koebeest · 21 apr 2006

IE moet weer eens moeilijk doen over simpele code, namelijk deze:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="2"><img src="images/stukjes_01.jpg" width="850" height="75"></td>
  </tr>
  <tr>
    <td width="405" rowspan="2"><img src="images/stukjes_02.jpg" width="405" height="575"></td>
    <td width="445" height="47" background="images/stukjes_03.jpg">&nbsp;</td>
  </tr>
  <tr>
    <td align="left" valign="top" background="images/stukjes_04.jpg">&nbsp;</td>
  </tr>
</table>
</body>
</html>

ook te zien op www.ikbenjens.com

wanneer je naar de site surft via Firefox zal alles er heel normaal uitzien. Maar in IE zie je wel iets heeeeeel raars. Heeft iemand een idee hoe dit kan komen?

awesome · 22 apr 2006

ben niet zeker, maar al geprobeerd de height in te stellen? in de tr tags en de body tags

NeoNeke · 22 apr 2006

tjah 'k weet niet maar zo'n dingen horen in principe met divs gemaakt te worden, niet dat inderdaad IE dat dan nog zou mogen verkeerd tonen, ma 't is gewoon weerom een kwestie van dingen eigenlijk fout op te lossen, zodat er al sneller fouten voorkomen in browsers, als je even naar tutorials zoekt omtrend css en hoe je een site met divs opbouwt kan je uw site in 10 minuten herschrijven...

Bram · 22 apr 2006

tlijkt mij inderdaad onlogisch da ge dees oplost mee tables... mee div's zou ge het er zo kunnen laten uitzien

HTML:

<div id="container">
<div id="picture"></div>
<div id="text">blablabla</div>
</div>

en dan uw css

HTML:

#container {
width: 800px;
height: auto;
margin: 50px auto;
border: 2px solid green;
}
#picture {
width: 396px;
height: /*hoogte van uw foto*/
background: url(path van uw foto) no-repeat;
border: 2px solid white;
float: left;
}
#text {
width: 398px;
height: /*hoogte van uw foto*/
background: url(path van uw foto) no-repeat;
border: 2px solid white;
border-left: 0px;
float: left;
}

Als ge het zo gaat doen gaat het ook opgelost zijn... (ff vlug geschreven der kunnen dus hier en daar nog typfouten inzitten...)

koebeest · 22 apr 2006

Gelukt!

[EZ] · 26 apr 2006

'k Heb net de code van SveltestSword gekopieerd naar een test-div-siteje van mij, ma ik kom der maar nie aan uit hoe ge die 2 div's moet onder elkaar kunt zette (picture vanbove en text deronder)

Zou iemand die code een beestje kunnen aanpasse (eiglijk versimpelen

) naar mijn 'noden'?

Ik wil 2 div's van 700 pixels die onder elkaar staan.
Me ne solid zwarte rand van pixels.
En die 2 div's zouden ook horizontaal (en eventueel verticaal) gecentreerd moeten staan.

Quilombo · 26 apr 2006

pakt gewoon ne div id=container met width 700px en daarin steekt ge twee divs, dan zijn die ook 700px breed en komen die onder elkaar

Quilombo · 26 apr 2006

SveltestSword zei:
tlijkt mij inderdaad onlogisch da ge dees oplost mee tables... mee div's zou ge het er zo kunnen laten uitzien

HTML:

<div id="container"> <div id="picture"></div> <div id="text">blablabla</div> </div>

en dan uw css

HTML:

#container { width: 800px; height: auto; margin: 50px auto; border: 2px solid green; } #picture { width: 396px; height: /*hoogte van uw foto*/ background: url(path van uw foto) no-repeat; border: 2px solid white; float: left; } #text { width: 398px; height: /*hoogte van uw foto*/ background: url(path van uw foto) no-repeat; border: 2px solid white; border-left: 0px; float: left; }

Als ge het zo gaat doen gaat het ook opgelost zijn... (ff vlug geschreven der kunnen dus hier en daar nog typfouten inzitten...)

peis ni da da werkt in ie5 met die widths en borders .. (in FF met webdeveloper tool: use border box model, geeft toch iets raar ze

)

[EZ] · 26 apr 2006

Ma hoe kunde eiglijk padding laten werken in FF én IE?
Want als'k het in FF correct wil zien dan moet van de width 10 px als de padding 5 px is.
Maar dan wordt het in IE niemeer goed weergegeve

Quilombo · 26 apr 2006

gewoon de elementen in uw div margins meegeven, werkt hetzelfde als padding op uw div (wilt ge padding-top op uw div, pakt dan voor t bovenste element margin-top; wilt ge padding-left op uw div pakt ge margin-left voor al de element die de linkerkant van uw div raken and so on ... ge begrijpt het wel

)

iets met een width combineren met een border of padding is meestal geen goed idee =p

[EZ] · 26 apr 2006

Is da de bedoeling da u text div (daar heb'k een margin van 5px ingesteld) dan langs alle kanten 5px krimpt?

Anyway, 'k heb gwn de rand van die text div wit gemaakt en nu ziede da nie en is't zelfde als padding

Merci

Nu nog 1 ding: horizontaal centreren, in FF is da al zo gedaan maar in IE nie

EDIT: De div moet dus gecentreerd worden he, de inoud nie...

Quilombo · 26 apr 2006

:/

die margin moet ge op de elementen IN uw div zette, nie op uw div zelf

volgens mij verstaat ge t verschil tussen padding en margin nie goe

als ge een margin van 5px op uw div zet betekent dat dat uw div ervoor zorgt dat er 5px BUITEN uw div geen ander element staat

bij padding daarentegen, als ge da toepast op uw textdiv, zorgt die ervoor da elk element BINNEN die textdiv 5px verwijderd is van de rand van uw textdiv (ook al hebt ge gene border, da speelt geen rol)

maaaaaar aangezien ge een width hebt opgegeven voor die textdiv zet ge daar dus best geen padding op, maar wel margins op de elementen in uw div

zoek maar ewa css tuto's btw

edit: zet u site is online

edit2: horizontaal centreren: margin-left en margin-right op auto zetten
wilt ge dat het ook werkt in ie5, zet dan in uw body text-align: center; en dan bij uwe container zette het terug op left

Xavez · 26 apr 2006

http://www.w3.org/TR/REC-CSS2/box.html

[EZ] · 26 apr 2006

site
Ma het margin probleem is misschien nie 100% "pro" opgelost, ma 't ziet der wel uit zoals'k wil in IE en in FF, dus dan is't voor mij goe...

Da horizontaal centrere ga'k nu doen (dus sta nog nie online

)

EDIT:
'k Heb het ook horizontaal gecentreerd op Quilombo's wijze...
('t sta al online i.p.v. de oude index)

Nu ga'k den inhoud wa verbeteren.

EDIT²:
Is iFrame de enige manier om wanneer er op een link geklikt wordt, tekst te laden in een andere of diezelfde div???

Quilombo · 26 apr 2006

nee, ge kunt ook met gewone frames werken

euhm, der bestaat idd een mogelijkheid omdat met divs te doen maar die is heeeeeeeeeeeeeel omslachtig en moeilijk, link heb k hier nie ma ge zou er toch niks meedoen

doe het maar met een iframe zou k zegge

edit: t gebruik van height kan ik u ten stelligste afraden, laat uw divs maar zelf aan de hand van uw inhoud bepalen hoe hoog ze wordt, IE beziet height namelijk als min-height, en FF gewoon als height (waardoor je, als je meer content krijgt een probleem hebt

)

als ge t per sé wilt gebruiken, zet er dan tenminste een ; achter =p

en uwe border rond uw text div heeft nie echt zin als die dezelfde kleur heeft als uw achtergrond; nogmaals zet al uw text in een <p> behalve de <ul> natuurlijk en pas op die p en ul een margin(-left) van 5px toe, en doe die 5px margin weg van uw div

[EZ] · 27 apr 2006

Oops

Dienen heigt heb'k weggedaan.
Den border heb'k verwijderd.

Mijnen tekst ga'k nu in een <p> zette me de margin.

EDIT:
Gedaan, 't sta hier.

EDIT²:
Da van da iFrame snap'k eiglijk nie goe

Moete dan 2 iFrames maken in uwen div? (ene me de links en 1ne me de pagina zelf)

Quilombo · 27 apr 2006

jup zo moet het
alleen die height: auto; bij je container hoeft niet, das automatisch auto

[EZ] · 27 apr 2006

Ma eiglijk gaat het ook me gewone frames?
En als'k het goe begrijp (da da'k op Google gevonde en gelezen heb

) is nen iFrame gwn nen 'onzichtbaren' frame, dus da wordt dan wrs alleen gebruikt voor de layout binnen 1 div nie te moeten opsplitsen en al?

[EZ] · 27 apr 2006

'k Heb hier nu al wa zitten teste me die frames, ma 't lukt nie echt...

Hier is de code:

Code:

<html>
<head>
<title>.:PiMP:. gunz clan</title>
<style type="text/css">
<!--
ul {list-style-type: square}
p {margin: 5px}
body {
background: url(bg.jpg);
font-family: arial, tahoma, verdana;
color: black;
font-size: 12pt;
font-weight: bold;
text-align: center
}
#container {
width: 700px;
margin-left: auto;
margin-right: auto;
text-align: left
}
#picture {
width: 700px;
}
#text {
width: 700px;
background: white
}
-->
</style>
</head>
<body>
<div id="container">
<div id="picture"><img src=logo.jpg></div>
<div id="text">
<iframeset border=0 rows="20,*">
<iframe src="list.html">
<iframe src="bg.html" name="window-1">
</iframeset>
</div>
</div>
</body>
</html>

Als't lukt me die frams ga'k al de css-font-tags wel wegdoen en in 1 external style sheet zetten

En als'k die "iframe" verander naar "frame" dan is der totaal niets

Quilombo · 27 apr 2006

nu ja we gaan je geen html/css leren he
ik zou zeggen, leer het eerst zelf eens, en als je nog problemen hebt, probeer ze dan eerst zelf op te lossen, want zomaar elke keer naar hier komen.. nu ja

ik zit vaak ook zelf op een stom probleem uren te proberen hoor

maar dan vergeet t je t wel nooit, en de voldoening is meer als je t zelf gevonden hebt

http://www.w3schools.com/ neem die html en css cursus nog maar es volledig door
en deze: http://www.wpdfd.com/editorial/basics/index.html
en de tuto's hier: http://css.maxdesign.com.au/listamatic/
en op www.positioniseverything.net vind je talloze bugs

http://www.w3schools.com/tags/tag_iframe.asp je tags zijn dus zelfs totaal niet correct

Archief - HTML: Goed in firefox slecht in IE

koebeest

Legacy Member

awesome

Legacy Member

NeoNeke

Legacy Member

Bram

Legacy Member

koebeest

Legacy Member

[EZ]

Legacy Member

Quilombo

Legacy Member

Quilombo

Legacy Member

[EZ]

Legacy Member

Quilombo

Legacy Member

[EZ]

Legacy Member

Quilombo

Legacy Member

Xavez

Legacy Member

[EZ]

Legacy Member

Quilombo

Legacy Member

[EZ]

Legacy Member

Quilombo

Legacy Member

[EZ]

Legacy Member

[EZ]

Legacy Member

Quilombo

Legacy Member