Just nu i M3-nätverket
Gå till innehåll

"CSS-bild" olika i olike webbläsare...?


Recman

Rekommendera Poster

Var ett bra tag sedan jag höll på med hemsidor, var på den gamla goda tiden när det räckte med enkla html-kunskaper och lite enklare CSS...

Men nu blev jag sugen på att göra om min hemsida och vill då kunna använda mig av "lager-funktionen" i CSS som jag tycker låter som ett smidigt sätt att få det så som jag vill ha. MEN...så klart krånglar det.

 

Främst är det just nu hur bilderna visas. Anpassar jag i CSS-mallen så det ser ok ut i IE7 så hamnar inte bilden på exakt samma ställe i IE6 eller FF (testat i senaste bara).

 

Se den bifogade bilden (från IE7), under linsen nere till höger är det nu en glipa (mellan bild och den grå linjen under) på några pixlar (den ska egentligen bort helt), kollar jag i FF eller IE6 så är glipan större...

 

CSSmallen (just den bilden styrs av #cornerpx):

html, body { 
margin: 0; 
padding: 0; 
border: 0; 
font-size: 7.5pt; 
line-height: 13pt; 
font-family: "Lucida Sans", Verdana, Arial, Helvetica, sans-serif;
}

a:link { color: #000000; }
a:visited { color: #000000; }
a:active { color: #000000; }
a:hover { color: #cccccc; }

h1 {
font-size: 16pt; 
color: #333333; 
font-family: "courier new", courier, Georgia, "Times New Roman", Times, serif; 
position: relative; 
top: 9px
}

h3 {
font-size: 8pt; 
color: #333333; 
position: relative; 
top: 9px
}

#layout {
background: url(image/background_container.jpg);
width: 760px;
height: 557px;
position: absolute;
left: 50%; top: 50%;
margin-left: -380px;
margin-top: -278px;
z-index: 1;
}

#meny {
margin-top: 44px;
margin-left: 515px;
z-index: 2;
}

#meny_home {
position: absolute;
margin-top: 44px;
margin-left: -400px;
z-index: 2;
}

#content {
margin-top: 1px;
margin-left: 40px;
width: 680px; height: 450px;
z-index: 3;
}

#copyright {
margin-top: 15px;
margin-left: 540px;
width: 170px; height: 15px;
z-index: 4;
}

#px_linking {
background-color: #c1c1c1;
position: absolute;
margin-top: 434px;
margin-left: 614px;
width: 66px; height: 16px;
z-index: 5;
}

#cornerpx {
position: absolute;
margin-top: 240px;
margin-left: 451px;
z-index: 2;
}

#textbox {
position: absolute;
margin-top: 60px;
margin-left: 40px;
width: 600px; height: 350px;
z-index: 8;
}

 

Och hela dokumenten ser ut så här:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml">

<head profile="http://gmpg.org/xfn/11">
<title>mjacobsson.se Photo</title>	

<link rel="stylesheet" href="[adress]/style.css" type="text/css" media="screen" />

</head>

<body bgcolor="#717173">

<div id="layout">
<div id="meny_home">
<A onmouseover="document.nav4.src='[adress]/image/link_home_h.jpg';" onmouseout="document.nav4.src='[adress]/image/link_home.jpg';" href="[adress]/index.php"><img height=10 alt=Home src="[adress]/image/link_home.jpg" width=33 border=0 name=nav4  hspace="3"></a>
</div>

<div id="meny">
<A onmouseover="document.nav1.src='[adress]/image/link_portfolio_h.jpg';" onmouseout="document.nav1.src='[adress]/image/link_portfolio.jpg';" href="[adress]/portfolio.php"><img height=10 alt=Portfolio src="[adress]/image/link_portfolio.jpg" width=55 border=0 name=nav1  hspace="3"></a>
<A onmouseover="document.nav2.src='[adress]/image/link_information_h.jpg';" onmouseout="document.nav2.src='[adress]/image/link_information.jpg';" href="[adress]/information.php"><img height=10 alt=Information src="[adress]/image/link_information.jpg" width=71 border=0 name=nav2 hspace="3"></a>
<A onmouseover="document.nav3.src='[adress]/image/link_contact_h.jpg';" onmouseout="document.nav3.src='[adress]/image/link_contact.jpg';" href="[adress]/contact.php"><img height=10 alt=Contact src="[adress]/image/link_contact.jpg" width=48 border=0 name=nav3 hspace="3"></a>
</div>
	<div id="content">

	<div id="cornerpx">
	<img src="[adress]/image/lens.jpg" width="229" height="208">
	</div>

			<div id="textbox">
			<h1>Portfolio</h1>
			<h3>
			<a href="photos/nature/001_DSC_6486.php">Nature ></a><p>
			<a href="photos/people/001_DSC_5560.php">People ></a><p>
			<a href="photos/animals/.php">Animals ></a><p>
			<a href="photos/sports/.php">Sports ></a><p>
			<a href="photos/misc/001_DSC_2853_3.php">Misc ></a><p>
			</h3>
			</div>
	</div>

	<div id="copyright">
	Copyright Mattias Jacobsson 2008
	</div>

</div>


</body>

</html>

 

[bild bifogad 2008-05-20 18:36:09 av Recman]

1053840_thumb.jpg

Länk till kommentar
Dela på andra webbplatser

Du kan ju lägga bilden på linsen som en bakgrundsbild. Lättare att positionera då.

 

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

×
×
  • Skapa nytt...