Just nu i M3-nätverket
Jump to content

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


Recman

Recommended Posts

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

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...