webForumDet fria alternativet

Fel i justering

1 svar · 248 visningar · startad av ejick

ejickMedlem sedan mars 2001895 inlägg
#1

Hej,

jag håller på att göra en enklare meny men resultatet blir inte samma i FF och IE (som vanligt) hur som helst. Menyn ser ut på följande sätt:

  <div id="header">
    <dl>
      <ul>
        <li><a href="#">LÄNK #1</a></li>
	<li><a href="#">LÄNK #2</a></li>
	<li><a href="#">LÄNK #3</a></li>
	<li><a href="#">LÄNK #4</a></li>
	<li><a href="#">LÄNK #5</a></li>
      </ul>
      <dd>
        <form>
	  <fieldset>
	    <input type="text" name="s" />
	    <input type="submit" value="OK" />
	  </fieldset>
	</form>
      </dd>
    </dl>
    <br style="clear:both" />
  </div>

Sedan, för att justera detta använder jag följande stilmall:

form,fieldset {
    margin: 0;
}
#header dl {
    float: left;
    width: 690px;
    margin: 0;
    padding: 0;
}
#header ul {
    float: left;
    width: 470px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#header li {
    float: left;
    margin: 0 1px 0 0;
}
#header li a {
    width: 93px;
    display: block;
}
#header dd {
    float: right;
    width: 220px;
    margin: 0;
    padding: 0;
}
#header dd fieldset {
    width: 220px;
    border: 0;
    margin: 0;
    padding: 0;
}

HUr ska jag få allt att hamna på samma rad i IE?

tantenMedlem sedan nov. 20051 596 inlägg
#2

Finns förmodligen många sätt, men jag skulle nog gjort något så här för

<div id="header">
  <ul>
   <li><a href="#">länk #1</a></li>
   <li><a href="#">länk #2</a></li>
   <li><a href="#">länk #3</a></li>
   <li><a href="#">länk #4</a></li>
   <li><a href="#">länk #5</a></li>
      </ul>
       </div>
        <form>
	  <fieldset>
	    <input type="text" name="s" />
	    <input type="submit" value="OK" />
	  </fieldset>
	</form>

och i css

	
form,fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    float: left;
}
#header {
    float: left;
    width: auto;
    margin: 0;
    padding: 0;
}
#header ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
#header li {
    float: left;
    margin: 0 7px 0 7px;
}
#header li a {
     text-transform: uppercase;
  }

utan ha bredd någonstans.
Men det beror förstås på vad som finns mer på sidan.
Kanske kan ge någon idé i alla fall :)

130 ms totalt · 3 externa anrop · v20260731065814-full.fb544a5a
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
127 ms — hämta tråd, inlägg och bilagor (db)