IE stellt Gallerie falsch dar

Tattoomaus78 · 25 Oktober 2007

Erstmal ein liebes Hallo in die Runde :)

Ich hoffe, ihr könnt mir helfen. Ich bin blutiger Anfänger in Sachen html/css und bin trotzdem mit großem Ehrgeiz dabei, mir die Materie selbst beizubringen und in meiner ersten eigenen HP umzusetzen. Mittlerweile bin ich jedoch an meine Grenzen gestoßen und finde auch weit und breit keine Lösung für mein Problem. Nun hoffe ich, hier Hilfe zu finden.

Nach tagelangem Abmühen habe ich nun meine Galerie so, wie ich sie haben möchte...total stolz über mein Ergebins wage ich einen Blick in den IE und bin fast vom Stuhl gekippt...da stimmt an der Darstellung rein gar nix mehr...die Thumbnails sind in alle verschoben und ich weiss nicht, wo ich anfangen soll, um den Fehler zu finden.

mein css:

Code:

body 
{
background:url("images/bg.jpg");
background-repeat:repeat;
background-color: #3A3A2F; 
font-size: 16px;
font-family: verdana, arial, helvetica, sans-serif;
color: #C1B77C;
margin: 0px auto;
height: 100%;
text-align: center;
}

#sitecontainer{
text-align: left;
width: 770px;
margin: auto;
z-index: 0;
top: 25px;
background-color:    #3A3A2F;
margin-top: 20px;
}

#header{
height:    134px;
width: 770px;
background-color:    #3A3A2F;
background:    url("images/header.jpg");
background-repeat: no-repeat;
}

#menue {
position: relative;
width: 770px;
height: 50px;
padding: 0;
background: #3A3A2F;
}

#nav {
position: absolute;
top: 0px;
list-style: none;
margin: 0;
padding: 0;
height: 50px;
display: inline;
overflow: hidden;
width: 780px;
}

#nav li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#nav a {
float: left;
padding: 50px 0 0 1px;
overflow: hidden;
height: 0px !important;
*height :20px; 
}

#home a  {
width: 152px;
background: url("images/home.jpg") top left no-repeat;
}
#home a:hover {
width: 152px;
background: url("images/home_over.jpg") top left no-repeat;
}

#nav #home a:active, #nav a.selected {
width: 152px;
background: url("images/home_over.jpg") top left no-repeat;
}

#about a  {
width: 157px;
background: url("images/about.jpg") top left no-repeat;
}
#about a:hover {
width: 157px;
background: url("images/about_over.jpg") top left no-repeat;
}

#nav #about a:active, #nav a.selected {
width: 157px;
background: url("images/about_over.jpg") top left no-repeat;
}

#art a  {
width: 152px;
background: url("images/home.jpg") top left no-repeat;
}

#art a:hover {
width: 152px;
background: url("images/home_over.jpg") top left no-repeat;
}

#nav #art a:active, #nav a.selected {
width: 152px;
background: url("images/home_over.jpg") top left no-repeat;
}

#guest a  {
width: 157px;
background: url("images/about.jpg") top left no-repeat;
}

#guest a:hover {
width: 157px;
background: url("images/about_over.jpg") top left no-repeat;
}

#nav #guest a:active, #nav a.selected {
width: 157px;
background: url("images/about_over.jpg") top left no-repeat;
}

#contact a  {
width: 152px;
background: url("images/home.jpg") top left no-repeat;
}

#contact a:hover {
width: 152px;
background: url("images/home_over.jpg") top left no-repeat;
}

#nav #contact a:active, #nav a.selected {
width: 152px;
background: url("images/home_over.jpg") top left no-repeat;
}

#bilder {
  width:auto;
  padding:5px;
  margin:20px 80px;
}
#bilder img {
  margin: 10px;
}

und hier das html:

Code:

<body>
<div id="sitecontainer">
    <div id="header">
    </div>
        <div id="menue">
            <ul id="nav">
            <li id="home"><a href="index.html">Home</a></li>
            <li id="about"><a href="about.html">about</a></li>
            <li id="art"><a href="art.html#">artworks</a></li>
            <li id="guest"><a href="#">guestbook</a></li>
                  <li id="contact"><a href="#">contact</a></li>
            </ul>
        </div>
 <div id="bilder">
 <a href="images/someone.jpg" rel="lightbox[roadtrip]" title="someone to watch you"><img src="images/someonethumb.jpg"  width="80" height="80" align="left" border="0" alt="" /></a>

<a href="images/checkmate.jpg" rel="lightbox[roadtrip]" title="checkmate"><img src="images/checkmatethumb.jpg"  width="80" height="80" align="left" border="0" alt="" /></a>
 
<a href="images/rays.jpg" rel="lightbox[roadtrip]" title="rays of light"><img src="images/raysthumb.jpg"  width="80" height="80" align="left" border="0" alt="" /></a>
  
<a href="images/green.jpg" rel="lightbox[roadtrip]" title="green"><img src="images/greenthumb.jpg"  width="80" height="80" align="left" border="0" alt="" /></a>  
  
<a href="images/protect.jpg" rel="lightbox[roadtrip]" title="protect me"><img src="images/protectthumb.jpg"  width="80" height="80" align="left" border="0" alt="" /></a>  

...usw.
  

   </div> 
</div>
</body>
</html>

Ich hoffe ich hab alles richtig gepostet und freu mich auf eure Hilfe.

Grüßli

IE stellt Gallerie falsch dar

Tattoomaus78

Neues Mitglied

Neueste Beiträge