Visningsproblem i IE 6

2006-11-13, 15:25 #1

Medlem

Reg: Sep 2006

Inlägg: 423

Jag har gjort en sida som ska se ut ungefär såhär:
http://img147.imageshack.us/img147/4906/raettti9.jpg

Problemet är att i IE6 (jag har inte testat i IE7) visas inte rubriken eller den översta orangea diven korrekt första gången den ritas ut (allt annat är rätt):
http://img134.imageshack.us/img134/4982/felim5.jpg
När man scrollat ner på sidan och scrollar upp igen ritas allt ut rätt. I FF visas allt korrekt.
Relevant HTML:

Kod:

<p class="header1">Kontaktpersoner</p>

<div class="orange" style="border-bottom:0px;">
	<div class="kontakt_image">
		<img src="/images/personal/img_missing.png" width="150" height="188" />
	</div>
	<div class="kontakt_info">
		[personinfo borttagen]
	</div>
	<div style="clear:both;"></div>
</div>
[Fler likadana divar]

Relevant CSS:

Kod:

div.orange {
	background-color:#FFAA00;
	padding:15px;
	border: #000000 1px solid;
        display:block;
}
div.kontakt_info{
	float:left;
	border:1px solid #000000;
	margin-left:20px;
	padding:4px;
	background:#FFFFFF;
}

div.kontakt_image{	
	float:left;
}

Någon som haft samma problem och vet hur man rättar till det?

Citera

2006-11-13, 16:57 #2

Medlem

Reg: Mar 2005

Inlägg: 892

Jag får inte exakt det problemet du beskriver, här så blir det vita spår efter muspekaren när man scrollar istället.

Sätt float:left; även på div.orange så ska det fixa sig (samt clear:left; för att få dom under varandra).
Detta gör även att du måste sätta en bred på diven om du vill bibehålla utseendet.

Får man förresten föreslå lite annan kod?
Personligen skulle jag gjort såhär istället.

HTML-kod:

<h1>Kontaktpersoner</h1>

<ul id="kontaktlista">

<li>
    <img src="http://www.flashback.info/image.php?u=135727&amp;dateline=1157826047" />
    <dl>
        <dt>Namn</dt>
        <dd>Namnet</dd>
        <dt>Efternamn</dt>
        <dd>Efternamnet</dd>
        <dt>E-post</dt>
        <dd>namn@domain.se</dd>
        <dt>Telfon</dt>
        <dd>342348623</dd>
     </dl>
</li>

[En 'li' för varje person]
</ul>

Med CSS:

Kod:

ul#kontaktlista{
     background: #fa0;
     color: #000;
     border-bottom: solid #000 1px;
     padding: 0;
     margin: 0;
     float: left;
     width: 80%;
}

ul#kontaktlista li{
     border: solid #000;
     border-width: 1px 1px 0;
     list-style-type: none;
     float: left;
     width: 100%;
     padding: 0 0 14px;
     margin: 0;
}

ul#kontaktlista li img{
     width: 150px;
     height: 188px;
     float: left;
     margin: 14px 14px 0;
}

ul#kontaktlista li dl{
     border: solid #000 1px;
     background: #fff;
     color: #000;
     margin: 20px 0 0;
     padding: 5px;
     float: left;
}

Lite mer 'semantiskt' samt att du får en kant längst ner också.

Citera

2006-11-13, 17:50 #3

Medlem

Reg: Sep 2006

Inlägg: 423

Tack så mycket för hjälpen! Tyvärr går det inte att göra exakt som du föreslår. Jag börjar däremot förstå felet lite bättre, så då borde jag snart hitta någon lagom bra lösning.

Citera

2006-11-13, 18:31 #4

Medlem

Reg: Sep 2006

Inlägg: 423

Om någon skulle stöta på samma problem så går det att lösa genom att sätta 'line-height' på container-diven (den vita på mina bilder). Tack ännu en gång för hjälpen att lokalisera problemet, PhoenixNox.

Citera

Visningsproblem i IE 6

Skapa ett konto eller logga in för att kommentera

Skapa ett konto

Logga in