Mooi onder elkaar zien te krijgen ie

[gebruiker78]

hallo,
ik heb dit probleem

<div id="nav">
<li><a href="2.php">Home</a></li>
<li><a href="2.php?blog=own">Own blogs</a></li>
<li><a href="2a.php">Search</a></li>
<li><a href="2.php?blog=favorite">Favorite</a></li>
</div>
<?php
if(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false) { echo '<br />'; }
?>
<br />
<form method="POST" action="?blog=upload">
<span style="font-size:0.8em;color:grey;margin-right:2px;">Message: </span><span id="feedbackshow" style="font-size:0.8em;color:grey;"></span>
<textarea id="blog" name="blog" maxlength="2001" rows="7" cols="52"><?php if(isset($_GET['n'])){ echo '@'.$_GET['n'].' '; } ?><?php if(isset($_GET['hashtag'])){ echo '#'.$_GET['hashtag'].' '; } ?><?php if(isset($_GET['profile'])){ echo '@'.$_GET['profile'].' '; } ?><?php if(isset($blog)){ echo $blog; } ?></textarea><br />
<input type="submit" value="Blog" class="button"> <span style="font-size:0.8em;color:grey;"><a href="javascript:;" onmousedown="toggleDiv('addimagelink');">Add image</a> <a href="javascript:;" onmousedown="toggleDiv('addvideolink');">Add video</a></span><br />

#nav {
	float: left;
	margin: 0 0 0 0;
	padding: 0;
	list-style: none;
	background-color: rgb(29,100,250); 
	font: 13px "Verdana", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
}
#nav li {
	float: left; 
}
#nav li a {
	display: block;
	padding: 0px 5px;
	text-decoration: none;
	color: white;
}
#nav li a:hover {
	color: white;
	background-color: rgb(29,140,250); }

In google chrome komt het mooi zo te staan:
Menu balk
message:
<textarea></textarea>
maar in ie:
menu balk message:
<textarea></textarea>

ik los dit probleem op door:

<?php
if(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false) { echo '<br />'; }
?>

maar dan word het wel een heel dik gat.
plaatjes =):
http://imageshack.us/photo/my-images/155/testerrrrr.jpg/

 

[csshunter]

Cross-browser:

<div id="nav">
   ...
</div>
<div style="clear: left"></div>
<form ... enz.

Alle list-items worden links gefloat, om daaronder te komen moeten deze floats vrijgemaakt worden met een "clear".
Dan kan de <br /> in de html vervallen *), en het <form> komt er dan onder als het goed is.
Mocht het verticaal te dicht op elkaar komen te staan, dan kan je met een margin-top voor het <form> wat fijnregeling toepassen.

Moet het trouwens geen <ul id="nav"> zijn? - Of anders nog de <ul> en de </ul> binnen de #nav zetten!

Met vriendelijke groet,
CSShuinter
_________
Het eerstvolgende niet-gefloate element komt zonder "clear" aansluiten tegen de laatste float. De <br /> die je toepast, laat de tekst wel naar de volgende regel gaan (er staat dan een lege regel naast de floats), maar kennelijk heeft IE een iets kleinere regelafstand, zodat er nog net twee regels naast de floats passen (de lege regel en die van de message) voordat er onder gedoken moet worden. En dan wordt met een extra <br /> de afstand weer te groot.

 

[gebruiker78]

Hoevaak moet ik nog zeggen dat je mijn held bent? ^.^

 

[csshunter]

Niet te vaak, dan ga ik naast mijn schoenen lopen en krijg ik van die afgesleten voeten.