Trenger hjelp til design; IE & transparency mm.

[prøvekanin]

God dag, lenge siden jeg har skrevet noe her nå!

 

Har den siste uka jobbet litt med et prosjekt, og jeg har så smått gått i gang å skrive koden og mekke sammen det meste.

 

Men som vanlig - IE skaper heftige problemer..

 

Nå er jeg nokså rusten, etter ca. et år uten å ha arbeidet med webdesign, men det går da sånn någenlunde .

 

Sida.

 

Har først og fremst optimalisert sida for Firefox, og til dels Opera (noen margin-feil der tror jeg, det rettes lett), men jobber nå med IE. (Hvis noen ser andre "bugs", si gjerne fra.)

 

Hvis du sammenligner sida i Firefox og IE vil du lett se to ting;

 

- *Fikset*Menyen synes ikke i IE (Tror dette er relatert til display: none, men finner ingen løsning).

- Alpha Transparency på innholdsboksene. Hvite rammer rundt fordi IE ikke har innebygd PNG-støtte. Har jobbe litt med å få AlphaImageLoader-filteret til å funke, uten hell.

 

Hovedinnholdet er også skjøvet et godt stykke opp i headeren, men dette har jeg løst lokalt, må bare gå løs med !important....

 

Hvis noen har en løsning, eller kommer på elementære ting jeg kan ha glemt, fyr løs! Trenger all tilbakemelding jeg kan få .

Endret 17. november 2006 av prøvekanin

[Ståle]

Det finnes en png fix for IE mener jeg.. se om jeg finner linken igjen.

[Haraldson]

Det finnes en png fix for IE mener jeg.. se om jeg finner linken igjen.

http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

[prøvekanin]

Takk for tilbakemelding, begge to.

 

Har forsåvidt løst problemet med menyen nå, etter litt omkoding. Det duger.

 

Når det gjelder PNG-problemet;

 

Har lest noe lignende før, men problemet mitt er som følgende:

 

Det bildet jeg har transparency på bruker jeg som bakgrunnsbilde for å lage innholdsboksene mine - og disse ligger dermed ikke i en img-tag.

 

Noen forslag til løsninger? Finnes det en måte der bildet ikke trenger å ligge i en img-tag?

 

Slik ser forresten koden til boksene ut:

 

HTML:

Klikk for å se/fjerne innholdet nedenfor

<div class="item">

			<h2><span>En overskrift</span></h2>
			<span class="posted">Posted by Hunturn, 16.20 Nov 15th</span>
			<p>Her kommer et avsnitt.</p>
			<ul class="end">
				<li><a href="#">Comments (0)</a></li>
			</ul>

		</div>

 

CSS:

Klikk for å se/fjerne innholdet nedenfor

.item h2		{
position:		relative !important;
position:		static;
bottom:			20px;
background:		url(images/news_bg_top.png) top left no-repeat;
padding-top:	25px;
padding-left:	15px;
margin-bottom:	0;
			}

.item			{
background:		url(images/news_bg.png) top left repeat-y;
width:			478px;
margin:			0 15px 70px 15px;
			}

.end			{
list-style-type:none;
background:		url(images/news_bg_bottom.png) bottom left no-repeat;
padding:		15px;
position:		relative;
top:			20px;
			}

[Haraldson]

Tenkte faktisk ikke over at det krevde img-taggen for å fungere.

 

img {
behavior: url("pngbehavior.htc");
}

 

Hva om du prøver å sette denne på elementene dine? ---->

 

.item, .item h2, .end {
behavior: url("pngbehavior.htc");
}

 

 

Bare et skudd i blinde, egentlig.

Edit: Søkte litt etter flere metoder, men alle hadde det til felles at du trenger img.

Endret 17. november 2006 av Mr.Berg

[prøvekanin]

Yes, får rett og slett prøve meg litt frem med det .