Div Container CSS Positionierungs Prob

@Storm

Hmm hab nun meinen ganzen hover/mouseover keam gemeistert nun hab ich aber ein anderes problen und zwar... ich hab nen div-container und der schaut im ff anders als im Ie auf hmm wie kann ich das denn mal einheitlich machen?

Dankööö

Greetz Storm

rincewind

mit sogenannten browser-hacks... --> de.wikipedia.org

am besten ist es, in solch einer anfrage das konkrete beispiel zu inkludieren, dh gib mir den quelltext, oder den link zu der seite, auf der das problem auftritt

@Storm

Link gibts leider noch nicht....

****=namen die ned gezeigt werden dürfen......

Schaut so aus und das Hover pic odben ist bei FF halt verschoben // oder bei IE je nachdem wo ich es optimire.....

[Blockierte Grafik: http://img148.imageshack.us/img148/4416/hoverpicck6.png]

Die CCS

Code

#maincontent {
   width: 600px;
   margin: 0px;
   padding: 0px;
   text-align: center;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   border-collapse: collapse;
}
.tabelle {
   width: 580px;
   border: none;
   border-collapse: collapse;
   vertical-align: top;
}
td {
   text-align: left;
   vertical-align: top;
   border-collapse: collapse;
}
.headline {
   font-size: 20px;
   font-weight: bold;
   color: #CC0033;
   padding-left: 10px;
}
.subheadline {
   font-size: 14px;
   font-weight: bold;
   color: #CC0033;
   padding-left: 10px;
}
.contleft {
   font-size: 9px;
}
.contmiddle {
   text-align: left;
   margin: 0px;
   padding: 0px;
}
.contright {
   font-size: 10px;
   padding-left: 10px;
}
hr {
    color: #CC0033;
    width: 100%;
    height: 1px;
    margin-top: 200px;
}


/****** ------ Beginn **** ------ ******/
/* ------ **** - ****-Darstellung global ------ */
div#**** {  /* Gibt Position der Gesamten Galarie an */
   width: auto; /* 623px; */
   position: absolute; /* AF geändert von relative auf absolute */
   left: -26px; /* AF neu */
   margin: 0px auto 0; /* Original 41px Abstand */
   padding-left: 0px; /* Abstand nach links, Original 65px */
   top: 175px;
}
div#**** p {  /* Schrift Position "Fahren sie bitte mit maus über bilder....." */
   left: 5px;
   padding-left: 5px;
   position: absolute;
   text-align: left;
   top: 190px;
   width: 140px; /* nur IE 5.x */
   width/**/:/**/ 140px;
}
div#**** li { /* gibt Breite der Bilder an */
   float: left;
   margin: 0px; /* vorher 0 0 0 0; AF */
   width: 47px;
}
div#**** li a { /* gibt Höhe der Bilder an */
   display: block;
   height: 33.3px;
}
div#**** li span { /* vergrößert bilder und Verschiebt alles.... */
   display: none;
}
div#**** a { /* Rahmen der Kleinen Bilder (Mouseout) */
   border: 1px solid #999;
}
div#**** a:focus, div#**** a:hover { /* Rahmen der Kleinen Bilder (Mouseover) */
   border: 1px solid #000;
}
div#**** a:focus span, div#**** a:hover span { /* Position des Mouseover erzeugten Bildes */
   display: block;
   height: 100px;
   position: absolute;
   right: 0; /* Original 0 */
   top: -127px; /* Original 0 */
   left: 38px; /* AF neu */
   width: 140px; /* Original 264px */
   padding-top: 3px; /* auf 3px geaendert - Original kein Eintrag, AF */
}
div#**** a img {
   border: none;
}


/* **** der Bilder-Darstellung, jede Seite hat eigenen Bilderordner */


div#**** ul {
height: 100px;/* Original 353px */
list-style: none;
position: relative ;/* Original relative */  
width: 450px;/* Original 623px */
top: 100px;
left: 0px;
}


div#**** li#bild-1 a {
background: url(images/****/bild-1-klein.png);
}


div#**** li#bild-2 a {
background: url(images/****/bild-2-klein.png);
}


div#**** li#bild-3, div#**** li#bild-6 {
margin-right: 300px;
}


div#**** li#bild-3 a {
background: url(images/****/bild-3-klein.png);
}


div#**** li#bild-4, div#**** li#bild-4 {
clear: left;
}


div#**** li#bild-4 a {
background: url(images/****/bild-4-klein.png);
}


div#**** li#bild-5 a {
background: url(images/****/bild-5-klein.png);
}


div#**** li#bild-6 a {
background: url(images/****/bild-6-klein.png);
}
}
/****** ------ Ende **** ------ ******/

Alles anzeigen

& html

HTML

<html>
<head>


<title>**********************</title>
<link rel="stylesheet" type="text/css" href="../contentstyle.css" />
<style type="text/css" href="../contentstyle.css" />
/* Style für die **** der Bilder-Darstellung, jede Seite hat eigenen Bilderordner */


div#**** ul {
height: 100px;/* Original 353px */
list-style: none;
position: relative ;/* Original relative */  
width: 450px;/* Original 623px */
top: 100px;
left: 0px;
}


div#**** li#bild-1 a {
background: url(images/****/bild-1-klein.png);
}


div#**** li#bild-2 a {
background: url(images/****/bild-2-klein.png);
}


div#**** li#bild-3, div#**** li#bild-6 {
margin-right: 300px;
}


div#**** li#bild-3 a {
background: url(images/****/bild-3-klein.png);
}


div#**** li#bild-4, div#**** li#bild-4 {
clear: left;
}


div#**** li#bild-4 a {
background: url(images/****/bild-4-klein.png);
}


div#**** li#bild-5 a {
background: url(images/****/bild-5-klein.png);
}


div#**** li#bild-6 a {
background: url(images/****/bild-6-klein.png);
}


</style>    
</head>
<body>
<div id="maincontent">


<table class="tabelle" border="0" summary="content">


  <tr>
    <td rowspan="3">[img]images/****/bild-1-gross.png[/img]</td>
    <td></td>
    <td width="50"></td>
  </tr>
  <tr>
    <td class="tabelleheadline" colspan="2" height="30">[img]images/****/wuerfel.gif[/img]<span class="headline">*****************</span></td>
  </tr>
  <tr>
    <td colspan="2" class="contright">


****************************************************************************************************************************************************************************************************************************************************************************************************</p></td>
  </tr>
    <tr>
    <td colspan="3"></td>
  </tr>




      <tr>
    <td class="contleft">[img]images/****/Impression.png[/img]


[img]images/****/bild-3-gross.png[/img]
    <td colspan="2" class="contright">


**************************************************************************************************************************************************</p>



************************************************************************************************************************************************************************************************************************************************************</p>



******************************************************************************************************************************</p> </td>
  </tr>
      <tr><td></td>
          <td></td>
          <td>






          

          [img]images/****/Download.png[/img]</td></tr>




</table>




<hr color="#CC0033">


<div id="****">
    <ul>
        <li id="bild-1">[url='#']<span>[img]images/****/bild-1-gross.png[/img]</span>[/url]
        <li id="bild-2">[url='#']<span>[img]images/****/bild-2-gross.png[/img]</span>[/url]
        <li id="bild-3">[url='#']<span>[img]images/****/bild-3-gross.png[/img]</span>[/url]
        <li id="bild-4">[url='#']<span>[img]images/****/bild-4-gross.png[/img]</span>[/url]
        <li id="bild-5">[url='#']<span>[img]images/****/bild-5-gross.png[/img]</span>[/url]
        <li id="bild-6">[url='#']<span>[img]images/****/bild-6-gross.png[/img]</span>[/url]
    [/list]
</div>

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

Alles anzeigen

Div Container CSS Positionierungs Prob

Tags

Benutzer online in diesem Thema