Archief - CSS : andere weergave in IE

Cypher · 21 jul 2005

eerst en vooral wil ik es goed vloeken op M$ IE want in opera en firefox werkt alles goe

anyway ik heb een paar probleemkes met CSS en internet exploder

hieronder vindt ge mijne css, de layout kan ik nog niet vrijgeven... die houden we voor de releasedate; dus ik hoop dat dit voldoende is voor de css gurus.

Code:

/* links */

a:link { color: #D3BA87; }
a:visited { color: #000000; }
a:active { color: #FFFFFF; }

/* alle html tags */

body {
	background-color: #857D6B;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: xx-small;
	margin: 0px auto;
}
img {
	border: 0px solid black;
}

/* extra classes */

.main {
	margin: 0px auto 0px auto;
	width: 875px;
}
.nav {
	background-image: url('images/zijstukuitschuifstukje.gif');
	background-repeat: repeat-y;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	width: 160px;
	text-align: left;
}
.rest {
	position: relative;
	padding: 0px 0px 0px 0px;
	left: 175px;
	top: -450px;
	width: 650px;
}

.footer {
	position: relative;
	top: -350px;
	text-align: center;
	padding: 5px;
	width: 875px;
}

.news {
	padding: 5px;
	border-style: solid;
	border-color: black;
	border-width: 1px;
	margin: 0px 0px 10px 0px;
}

.newstitle {
	background-color: #7D7C79;
	border-style: solid;
	border-color: #9A8555;
	border-width: 1px;
	padding: 1px 10px 1px 10px;
}
.newsmain {
	padding: 5px 10px 5px 10px;
}
.newsbottom {
	background-color: #9A8555;
	border-style: solid;
	border-color: #7D7C79;
	border-width: 1px;
	padding: 1px 10px 1px 10px;
}
.newsrechts {
	text-align: right;
}

ff een voorbeeld van hoe de html code er ongeveer uitziet:

Code:

<html>
<body>
	<div class="main">
		<img>
		<div class="nav">
			<img>
		</div>
		<div class="rest">
			<div class="news">
				<div class="newstitle">newstitle</div>
				<div class="newsbottom">Posted by Cypher <span class="newsrechts">12 Comments</span></div>
				<div class="newsmain">newspost</div>
			</div>
			
		</div>
		<div class="footer">
			&copy; 2005 
		</div>
	</div>
</body>
</html>

de volgende probleemkes doen zich voor in IE maar niet in FF of opera:

- site is niet in t midden gealigned zoals in FF of opera
- er is een opening tussen de img die in main staat en die img die in nav staat

de volgende probleemkes doen zich in alle 3 de browsers voor:

- ik kan nog een halve pagina naar beneden scrollen terwijl daar helemaal niks meer staat

- ik krijg die "comments" in de <span> niet naar rechts

Indien er opmerkingen zijn over mijn css code over dingen die beter anders gedaan kunnen worden mogen die ook altijd gepost worden. ik wil altijd wel bijleren.

greetz

Rombo · 21 jul 2005

het is heel moeilijk om zonder ne layout te zien zoiets als dit op te lossen, zeker als het gaat om browserverschillen

in uwe body kunt ge mss eens text-align: center; proberen te zetten om da gecentreerd te krijgen

probeer ipv die span dan eens ne gewone div te gebruiken eventueel met ne float:right; ofzo

tikketim · 21 jul 2005

- site is niet in t midden gealigned zoals in FF of opera
Kijk ens in de sticky

- er is een opening tussen de img die in main staat en die img die in nav staat
Waarschijnlijk iets met de padding of margin temaken , zet dat eens op 0

de volgende probleemkes doen zich in alle 3 de browsers voor:

- ik kan nog een halve pagina naar beneden scrollen terwijl daar helemaal niks meer staat

ergens een hoogte te hoog ingesteld of een div over het hoofd gezien ?

- ik krijg die "comments" in de <span> niet naar rechts
probeer eens met float:right;

Boddah · 21 jul 2005

site centreren doe ik zo:

in body: text-align: center;
in main div: margin-left: auto; margin-right: auto; text-align: left;

orez · 21 jul 2005

Code:

/* layout divs */
#container {
	width: 800px;
	margin: 30px auto 5px auto;
	line-height: 1.2;
}

container = gecentreerd... works perfect here...

En steek s uw newstitle, newspost & newsposter in

h-tags
p-tags
span-tags ... om dan toch semantisch correct te willen zijn ... niet alles hoort in een div ya kno :/

Lashknife · 22 jul 2005

nee, de spacing fout bij images in IE is geen padding/margin fout, maar simpelweg omdat mensen CONTINUE vergeten met whitespace rekening te houden en IE doet hier moeilijk over. (discussie blijft wiens fout het is, IE die zegt: daar hoort geen whitespace te staan dus zet ze dan ook niet, of de anti-IE: whitespace dient ignored te worden)

Hoe dan ook
<div><img /></div>
is niet hetzelfde als
<div>
<img>
</div>
omdat gij zowel voor als achter uw img een enter doet (zelfs al is het om uw code overzichtelijker te houden), het geeft extra whitespace en IE valt hierover. Weg ermee dus.

Cypher · 22 jul 2005

merci voor de replies...

ivm met whitespaces... het is IE wel die alles verknoeit... in html code moogde normaal 10 enters achtereen doen dan moet een fatsoenlijke browser die negeren.

float:right; werkt wel alleen maar in opera. in IE en FF staat t dan wel rechts maar nimeer op dezelfde lijn om een of andere bizarre reden.

Merci voor jullie hulp al. Ik weet dat dit niet makkelijk is zonder layout maar die houden we graag voor onszelf atm

orez · 22 jul 2005

anyhow met wat deftige css enzo, hoeft een img ook niet in een div te staan...

ge zet veel te veel in divs naar mijn mening... daarmee creeër je ook dergelijke problemen hé..

servi · 22 jul 2005

moderator noot :
je topic bevat geen prefix, een verkeerd prefix of heeft een onduidelijke titel.
Gelieve een duidelijke titel met een bijhorend correct prefix te gebruiken.
Voor meer informatie over prefixen kan je terecht op regels en prefixen !!!.
Je topic is aangepast en je hebt een een waarschuwing gekregen, gelieve in het vervolg er op te letten.

Cypher · 22 jul 2005

jawadde ze zijn hier streng :eek:

mja ru`orez ik wil altijd bijleren eh

moet ik dan gewoon voor mijn images een bepaalde class aanmaken?

tikketim · 23 jul 2005

Normaal gezien mag je alleen je image tag gebruiken voor images die belangrijk zijn voor je site zoals een logo en een foto van armstrong naast een artikel dat hij de tour heeft gewonnen ofzo.
Andere images die voor de layout van je site gebruikt worden gewoon met css als achtergrond instellen voor bv divv , span , h , p , ... tags

[ImpacT] · 23 jul 2005

Hmm, blijkbaar dringt het toch nog altijd niet door bij de nieuwe "coders" onder ons. Het <div>'s coden is niet ter vervanging van <table>'s, please leert eerst de achtergrond van zo te coden in plaats van erin te vliegen zonder dat je er iets van weet, want je code trekt dan echt op niks.

'k Ga mezelf maar quoten

[ImpacT] zei:
Ooit van Semantic Coding gehoord ?? Daar draait heel dit soort "coderen" rond als je dit doorhebt dan kan je fatsoenlijk je webistes maken, weet je dit niet, dan zal je website op zich wel werken, maar is het eigenlijk volledig verkeerd volgens de standaarden. En zo zijn er hier zoveeel mensen die het nog steeds niet door hebben.

http://www.andybudd.com/archives/2004/05/semantic_coding/
http://www.tekstenuitleg.net/artikelen/zelf_website_maken/6
http://annevankesteren.nl/2004/11-structurering.nl.html

Genoeg over te vinden. Als je alles en nog wat in <div>'s gaat zitten gooien, ben je NIET goed bezig.

Zal klein voorbeeldje geven wat hier al mis is.

PHP:

<html>
<body>
  <div class="main">
    <img />
    <div class="nav">
      <img />
    </div>
    <div class="rest">
      <div class="news">
        //is een titel... dus maak hier dan ook <h1> van
        <div class="newstitle">newstitle</div>
        //is eigenlijk een 2de titel, dus logisch gevolg <h2>
        <div class="newsbottom">Posted by Cypher <span class="newsrechts">12 Comments</span></div>
        //is een stuk tekst, maak hier dan <p> ofzo van
        <div class="newsmain">newspost</div>
      </div>
    </div>
    <div class="footer">&copy; 2005</div>
  </div>
</body>
</html>

ook even uw code wat beter uitgelijnd, allé vind ik toch. Die tabs, 'k heb het daar totaal niet op, maar soit da's puur persoonlijk.

Lashknife · 23 jul 2005

Cypherke zei:
merci voor de replies...

ivm met whitespaces... het is IE wel die alles verknoeit... in html code moogde normaal 10 enters achtereen doen dan moet een fatsoenlijke browser die negeren.

float:right; werkt wel alleen maar in opera. in IE en FF staat t dan wel rechts maar nimeer op dezelfde lijn om een of andere bizarre reden.

Merci voor jullie hulp al. Ik weet dat dit niet makkelijk is zonder layout maar die houden we graag voor onszelf atm

euh, float right werkt wel, alleen niet zoals jij het verwacht. De point van floats is dat je eerst de elementen zet die je wil floaten tov de volgende elementen.

Code:

<div style="float:right">rechts</div>
<div>gewone div zonder float</div>

en je zal zien dat de floatdiv rechts van de opvolgende divs geplaatst wordt.

Cypher · 24 jul 2005

impact gij weet alles toch zo subtiel en vriendelijk over te brengen eh

ge zult wsl wel gelijk hebben ma ik ben geen pro designer eh man.

anyway ik zal t eindresultaat wel es laten zien as de site volledig af is. zal wel tegen eind augustus zijn ofzo

(ja sommige mensen hebben ook 2e zit)

as er nog iets is dan zal k t hier wel es bijposten

[ImpacT] · 24 jul 2005

Cypherke zei:
impact gij weet alles toch zo subtiel en vriendelijk over te brengen eh
ge zult wsl wel gelijk hebben ma ik ben geen pro designer eh man.

Ik zen ook geen pro-designer, mor ik u gewoon wa toeleggen op't geen met wat ge bezig zijt, zou soms geen kwaad kunnen.
En da'k redelijk to-the-point ben, simpel... zo leerde tenmiste iets, rond de pot draaien is nie aan mij besteed.

dJeez · 24 jul 2005

Lashknife zei:
omdat gij zowel voor als achter uw img een enter doet (zelfs al is het om uw code overzichtelijker te houden), het geeft extra whitespace en IE valt hierover. Weg ermee dus.

Het rare is dat als je een <br/> achter de <img> zet (wel er vlak tegen hé), IE doet alsof er geen vuiltje aan de lucht is

.

Archief - CSS : andere weergave in IE

Cypher

Legacy Member

Rombo

Legacy Member

tikketim

Legacy Member

Boddah

Legacy Member

orez

Legacy Member

Lashknife

Legacy Member

Cypher

Legacy Member

orez

Legacy Member

servi

Legacy Member

Cypher

Legacy Member

tikketim

Legacy Member

[ImpacT]

Legacy Member

Lashknife

Legacy Member

Cypher

Legacy Member

[ImpacT]

Legacy Member

dJeez

Legacy Member