Links mittels CSS formatieren

Sunday

hallo,

ich versuche eine linkliste zu erstellen, die mittels CSS formatiert werden. Im IE sieht das Ergebnis so aus, wie ich es mir wünsche, im Firefox erhalten die Links allerdings nicht die geforderte Breite von 35px. Woran liegt das? Wird das im Firefox etwa nicht unterstützt oder erlaubt sich der IE hier irgendwelche Eigenheiten?

/* Werte für Formatierung der Seiteliste */
#PageList_Content
{
}

#PageList_Content p 
{
	font-size:   10px; 
	margin:      5px 5px 5px 5px; 
	line-height: 1.5em; 
	text-align:  center;
}

/* Standardwerte für Links im Bereich PageList_Content */
#PageList_Content p a 
{
	width:       35px;
	color:       #073b6d; 
	font-size:   10px; 
	font-family: verdana, arial, helvetica, sans-serif; 
	text-align:  center;
}

<div id="PageList_Content">
  <p>
    <a href="ziel1.html">1</a>
    <a href="ziel2.html">2</a>
    <a href="ziel3.html">3</a>

<!-- Auszug Liste wird normalerweise mittels Smarty erstellt -->

  </p>
</div>

MORL

Ein a-Tag ist ein Inline-Element und du kannst ihm via CSS nicht einfach so eine Breite zuweisen. Du musst dem Element schon noch sagen, das es ein Blockelement sein soll.

a {
 display:block;
 width:35px;
}

EDIT: Die Links werden dann natürlich auch wie Blockelemente behaldelt und nicht mehr nebeneinander dargestellt. Hierzu solltest du mal einen Blick auf die Eigenschaft float werfen

Sunday

hi,

danke schonmal, mit block und float, sieht es zumindest auf den ersten blick so aus wie ich es gerne hätte. allerdings zerschiesst mir das auch den rahmen den ich ringsherum habe, d.h. die float-elemente liegen dann ausserhalb des rahmens!

ne idee?

/* Äußerer Rahmen um die Seitenliste */
#PageList_FrameOut 
{
	border-right:     #000000 1px solid; 
	border-top:       #000000 1px solid; 
	border-left:      #000000 1px solid; 
	border-bottom:    #000000 1px solid; 
	margin-top:       0px;
	margin-left:      0px;
	margin-right:     0px;
	margin-bottom:    0px;
	background-color: #ffffff;
}

/* Innerer Rahmen um die Seitenliste */
#PageList_FrameIn
{
	border-right:   #000000 1px solid; 
	border-top:     #000000 1px solid; 
	border-left:    #000000 1px solid; 
	border-bottom:  #000000 1px solid; 
	margin:         1px; 
	padding-top:    10px;
	padding-bottom: 10px;
}

<div id="PageList_FrameOut">
  <div id="PageList_FrameIn">
    <div id="PageList_Content">
      <p>
        <a href="ziel1.html">1</a>
        <a href="ziel2.html">2</a>
        <a href="ziel3.html">3</a>

<!-- Auszug Liste wird normalerweise mittels Smarty erstellt -->

      </p>
    </div>  
  </div>  
</div>

MORL

Du musst das float natürlich auch beenden. Um das allen Browser recht zu machen ist es am besten ein div-Element mit einer Höhe von 1px und der Eigenschaft clear:left/right/both nach dem floatenden Elementen einzubringen

.cl { height:1px; clear:left; font-size:1px; }

<div id="PageList_FrameOut">
  <div id="PageList_FrameIn">
    <div id="PageList_Content">
      <p>
        <a href="ziel1.html">1</a>
        <a href="ziel2.html">2</a>
        <a href="ziel3.html">3</a>
        <div class="cl">&nbsp;</div>
<!-- Auszug Liste wird normalerweise mittels Smarty erstellt -->

      </p>
    </div>  
  </div>  
</div>