Designprobleme mit IE & FF (natürlich Div Probleme)

matibaski · 18 März 2007

Moin!
Ich raste bald aus!!
Ich baue nun eine Webseite von Tabellen in Container um.
Doch da gibt es tausende fehler, obwohl alles stimmt.
Höhen, Breiten, usw...
Firefox macht da tausende fehler.
Content-Container ist linksbündig beim FF beim IE ists zentriert.

Lange rede....
Hier ist der Code:

HTML:

<html>

<head>
<meta http-equiv="Content-Language" content="de-ch">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Exponent - Sviramo sve vrste vaših zabava</title>

<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>

<div id="all">
 <div id="top_title">Exponent &bull; sviramo sve vrste vaših zabava</div>
 <div id="pic">
  <div class="pic" style="float:left;">Slike</div>
  <div class="pic" style="float:left;">Slike2</div>
  <div class="pic" style="float:left;">
   <img src="images/marinko_klein.png" style="width:123px; height:105px; border:0px;" alt="" /><br />
   Marinko<br />
   Bubanj
  </div>
  <div class="pic" style="float:left;">Slike2</div>
  <div class="pic" style="float:left;">Slike2</div>
  <div class="pic" style="width: 123px; border-right:0px;">Slike2</div>
  <div class="abstand"></div>
  <div class="menu_main">
   <table cellspacing="0" style="width:600px; height:22px; border:1px dashed #ffffff;; text-align:center; font-size:15px;">
    <tr>
     <td style="width:100px; border-right:1px dashed #ffffff;">
      <a href="index.php?site=home" class="menu">Home</a>
     </td>
     <td style="width:100px; border-right:1px dashed #ffffff;">
      <a href="index.php?site=onama" class="menu">O nama</a>
     </td>
     <td style="width:100px; border-right:1px dashed #ffffff;">
      <a href="index.php?site=servis" class="menu">Servis</a>
     </td>
     <td style="width:100px; border-right:1px dashed #ffffff;">
      <a href="index.php?site=kontakt" class="menu">Kontakt</a>
     </td>
     <td style="width:100px; border-right:1px dashed #ffffff;">
      <a href="index.php?site=galerija" class="menu">Galerije</a>
     </td>
     <td style="width:100px;">
      <a href="index.php?site=community" class="menu">Community</a>
     </td>
    </tr>
   </table>
  </div>
 </div>
  
 <div id="content">
  <div id="Info" style="height: 350px">
   <img src="images/exponent_klein.png" style="width:185px; height:35px; border:0px; border-bottom:1px solid #ffffff;" alt="" /><br />
  </div>

  <div id="Inhalt" style="height: 350px;">
   <?php
    $site = $_GET['site'];
    switch($site)
    {
    case 'home' : include"_private/content/home.php"; break;
    case 'onama' : include"_private/content/onama.php"; break;
    case 'servis' : include"_private/content/servis.php"; break;
    case 'kontakt' : include"_private/kontakt.php"; break;
    case 'galerija' : include"_private/galerija.php"; break;
    case 'galerija_zenica' : include"_private/galerija_zenica.php"; break;
    case 'galerija_zenica_frame' : include"_private/galerija_zenica_frame.php"; break;
    case 'community' : include"_private/community.php"; break;
    default: include"_private/content/home.php"; break;
    }
   ?>
  </div>
 </div>
 <div id="abstand_bottom"></div>
</div>

</body>

</html>

Ganz einfach mti Containern aufgestellt.

Hier ist die style.css

Code:

/* allg. Formatierungen */
body {
margin:0px;
background-color:#000000;
background-image:url(images/bg_star.gif);
background-repeat:no-repeat;
font-size:11px;
font-family:Verdana,Arial;
color:#ffffff;
}

/* Div's */
#all {
position:absolute; 
top:0px; 
left:0px; 
width:100%; 
text-align:center;
vertical-align:middle;
}


#top_title {
margin:auto; 
width:750px; 
text-align:center; 
height:25px;
border:1px solid #ffffff;
font-size:14px;
font-weight:bold;
vertical-align:middle;
}

#pic {
margin:auto;
text-align:center;
width:750px;
height:190px;
border:1px solid #ffffff;
border-top:0px;
}

.pic {
text-align:center;
float: left; width: 22em;
width:125px;
height:135px;
border:0px;
border-bottom:1px solid #fffffff;
border-right:1px solid #fffffff;
}

.abstand {
height:15px;
}

.menu_main {
text-align:center;
width:750px;
height:22px;
border:0px;
}

#content {
width:750px;
height:350px;
text-align:left;
border:1px solid #ffffff;
border-top:0px;
background:transparent;
}

div#Info {
float:left; 
width:185px;
padding:4px;
text-align:left;
}

div#Inhalt {
border-left:1px solid #ffffff;
padding:4px;
width:535px;
text-align:left;
}


#abstand_bottom {
height:20px;
background:transparent;
}

/* Menü */
.menu {
color:#ffffff;
background: transparent;
display: block;
}

a.menu:link, a.menu:active, a.menu:visited {
text-decoration:none;
}

a.menu:hover {
background-color:#6A6A6A;
text-decoration:none;
}

.menu:hover{
background-color: #6A6A6A:
}

Das ganze ist in einem positioniertem Div.
Die Hauptprobleme sind:
Rahmen um die jeweiligen Inhalte.
Obwohl alle 750px breit sind, sind die einen breiter als es sein muss.
Die Tabelle mit der Navigation wird im FF nach links oben geschoben. kA wieso.
Wie gesagt, der Content-Teil ist linkbündig, wobei der Header Teil zenteirt ist beim FF. Beim IE ist's noch so einigermassen okay.

Also hier ist der ganze Spass:
www.exponent-bend.com

PS: Ist'n lahmer Server. Ist auch nicht meiner ;)

Ich hoffe, ihr wisst wieso das so ist.
Das ist mein erstes Grossprojekt mit Containern.

MfG, matibaski

edit:
Hab's mal geschafft, alles zu zentrieren.
Hab margin:auto; vergessen.
Ich versuche es weiterhin zu korrigieren.

N43 · 18 März 2007

Hallo,

statt float:none musst du clear:left verwenden. Das hebt das umfließen wieder auf.

Zur Breite: Die ist bei mir nur im 2 Block zu klein, haste aber auch auf 749px statt 750px stehen. Falls das im IE dann wieder anders ist kannste mit dem child-Operator arbeiten (der IE versteht den nicht) und da die speziellen angaben für FF machen.

N43

Designprobleme mit IE & FF (natürlich Div Probleme)

matibaski

Guest

N43

Neues Mitglied

Neueste Beiträge