✔ CSS div box fehlerhaft im FF. IE und Opera gehen wunderbar

[donrayden]

ich bin am verzweifeln, warum will der FF das css nicht richtig darstellen


hier der css code:

.navbar
{
}  

.mainDiv
{
  width:185px;
}

.topItem
{
  font: bold 12px tahoma,verdana,sans-serif;
  letter-spacing: 0;
  background: url("arrow-up-title.jpg") no-repeat 0 0;
  background-position:center center;
  background-repeat:no-repeat;
  border: 1px solid #000000;
  width: 185px;
  height: 25px;
  color: #000000;
  cursor:pointer;
  text-indent:10px;
}

.topItemOver
{
  text-indent:10px;
  font: bold 12px tahoma,verdana,sans-serif;
  letter-spacing: 0;
  background: url("arrow-up-title-on.jpg") no-repeat 0 0;
  background-position:center center;
  background-repeat:no-repeat;
  border: 1px solid #000000;
  height: 25px;
  width: 185px;
  color: #428eff;
  cursor:pointer;
}

.topItemClose
{
  text-indent:10px;
  font: bold 12px tahoma,verdana,sans-serif;
  letter-spacing: 0;
  background: url("arrow-down-title.jpg") no-repeat 0 0;
  background-position:center center;
  background-repeat:no-repeat;
  border: 1px solid #000000;
  height: 25px;
  width: 185px;
  color: #000000;
  cursor:pointer;
}


.topItemCloseOver
{
  text-indent:10px;
  font: bold 12px tahoma,verdana,sans-serif;
  letter-spacing: 0;
  background: url("arrow-down-title-on.jpg") no-repeat 0 0;
  background-position:center center;
  background-repeat:no-repeat;
  border: 1px solid #000000;
  height: 25px;
  width: 185px;
  color: #428eff;
  cursor:pointer;
}



.dropMenu
{
  font: bold 12px tahoma,verdana,sans-serif;	
  background-color: #d6dff7;
  color: #000;
  border: 1px solid #000000;
  border-width: 0 1px 1px 1px;
  filter:alpha(opacity=100);
  padding-top:0px;
  padding-bottom:0px;
}

.subMenu
{
   display:block;
}
  

.subItem
{
   margin-left:10px;
   margin-top:2px;
   height:18px;
   font: 12px tahoma,verdana,sans-serif;	
   text-decoration:none;
   color: #000000;
   
}


.subItem a
{
   margin-left:10px;
   font: 12px tahoma,verdana,sans-serif;	 	
   text-decoration:none;
   color: #000000;
}

.subItemOver
{
   margin-left:10px;
   margin-top:2px;
   font: 12px tahoma,verdana,sans-serif;	  
   height:18px;
   color: #428eff;
}

.subItemOver  a
{
   margin-left:10px;
   font: 12px tahoma,verdana,sans-serif;
   cursor:pointer;	
   color: #428eff;
   text-decoration:underline;
   cursor:pointer;
}


.drop
{
   border-left:1px solid black;
   border-right:1px solid black;	
}

und hier der html code:

<!-- *********************************Start Menu****************************** -->
<div class="mainDiv" >
<div class="topItem"><img src=./include/designs/design_10/images/buttons/pixel.gif height=17><img src=./logo2.png border=0> Login</div>        
<div class="dropMenu" ><!-- -->
	<div class="subMenu" style="display:inline;">
<div class="subItem"><table width="100%" border="0" cellspacing="0" cellpadding="10">
   <tr> 
    <td>
	  Hallo &nbsp;
		<br />
		<br />
		<a class="box" href="?m=forum&um=privmsg">Nachrichten</a> (0)<br>
			
		</td>
  </tr>
</table>
</div>

</div>
</div>
</div>
<!-- *********************************End Menu****************************** -->
<!-- *********************************Start Menu****************************** -->
<div class="mainDiv" >
<div class="topItem"  ><img src=./include/designs/design_10/images/buttons/pixel.gif height=17><img src=./logo2.png border=0> Zufallsbild</div>        
<div class="dropMenu" ><!-- -->
	<div class="subMenu" style="display:inline;">
	<div class="subItem"><table width="100%" border="0" cellpadding="2" cellspacing="0"><tr><td align="center">
    <a href="include/images/gallery/Offizielle Eroeffnung und Pressekonferenz 29-04-2006_mini-P4290007.JPG" rel="lightbox">
    <img src="include/images/gallery/Offizielle Eroeffnung und Pressekonferenz 29-04-2006_mini-P4290007_small.JPG" width="170" alt="" border=0><br>Vollansicht
    </a></td></tr></table></div>
		
   </div>
</div>
</div>
<!-- *********************************End Menu****************************** -->

das ganze anzusehen auf http://www.paintballpark-eifel.de ... die boxen "login" und "zufallsbild" werden im FF falsch dargestellt...im IE und Opera gehts...

 

[threadi]

Versuche mal die HTML-Fehler zu beseitigen die der Validator meldet: http://validator.w3.org/check?uri=http://www.paintballpark-eifel.de/ - wenn es danach noch nicht geht könnte man es sich genauer anschauen. So wie es jetzt ist würde man nur raten

 

[donrayden]

naja die wc3 fehler sind alle mehr oder weniger unerheblich und haben nicht viel mit dem css problem zu tun

 

[threadi]

Hab da aber auch ein nicht geschlossenes <center> und solche Dinge gesehen

 

[vendy]

Mh ich weiß nicht wo der Fehler jetzt genau liegt? Im FF sieht alles etwas ungenau aus. Sprich hier und da verschiedene größen und Abstände.

 

[Maik]

Hi,

deklariere mal einen Doctype für das Dokument, wie beispielsweise diesen hier:

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

und ziehe in den Klassen .topItem, .topItemOver, .topItemClose, .topItemCloseOver die Rahmenstärke von der Breiten- und Höhenangabe ab:

width: 183px; /* 185px - 2*1px (border-left + border-right) = 183px */
height: 23px;  /* 25px - 2*1px (border-top + border-bottom) = 23px */

Durch die fehlende Dokumenttyp-Angabe wird der IE und Opera <9 in den Quirksmodus gesetzt und interpretieren dann das Boxmodell falsch.

Und bitte beachte die Netiquette bzgl. der Groß- und Kleinschreibung. Vielen Dank.