[SOLVED] Position of a form inside a div.

[Ban]

I have a div that contains a horizontal menu. Works fine.

Now I want to put a form inside that horizontal menu.

 

When I use the code below, it displays ok in IE, but in FF (my normal browser) it puts the form below the menu.

Can anyone tell me why and help me fix this?

 

Thanks,

Ban.

 

Menu

 

<ul class="menu">

<li class="link"><a href="<?php echo $home_dir; ?>index.php" title="Home">Home</a></li>
<li class="link"><a href="<?php echo $members_dir; ?>roster.php" title="Roster">Roster</a></li>
<li class="link"><a href="<?php echo $home_dir; ?>constitution.php" title="Constitution">Constitution</a></li>

<?php if(!isset($_SESSION['access'])){ ?>
<li class="link"><a href="<?php echo $members_dir; ?>register.php" title="Register">Register</a></li>

<?php } else{ ?>

<li class="link"><a href="<?php echo $members_dir; ?>update_profile.php" title="Update your profile">My Profile!</a></li>
<li class="link"><a href="<?php echo $members_dir; ?>logout.php" title="Logout">Log out</a></li>

<?php } if(isset($_SESSION['access']) && $_SESSION['access'] > 1){ ?>

<li class="link" style="list-style: none; list-style-image: none; text-align: left; font-weight: bold; text-decoration: underline;">Admin</li>
<li class="link"><a href="<?php echo $admin_dir; ?>update_profile.php" title="Update a profile">Members</a></li>

<?php } ?>

</ul>

<form class="loginform" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">

<input type="text" value="User" name="username" id="username" size="10" onfocus="this.value=''" />
<input type="password" value="Password" name="password" id="password" size="10" onfocus="this.value=''" />
<input type="submit" name="login" id="login" value="Login" />

</form>

</div>

 

CSS

 

.menualign {
width: 100%;
height: 25px;
border: 1px solid black;
background-image: url(../images/bar_zonder.png);
}

ul.menu {
padding: 0px;
margin: 0px;
}

.loginform {
margin-bottom: 0px;
text-align: right;
}

[nadeemshafi9]

first off all get rid off every space in that code everything should be <div></div><img>kljdsfgfdg<div></div>

 

 

then come back to me

[nadeemshafi9]

it will mst probs work if not slowley start reducing teh size of teh text box until u get to 1px and see if it drops bak on top, if this dosent work ur gona have to float it right and margin top

[wildteen88]

Always apply default margin/padding to block level elements. Different Browsers use different padding/margin values for block level elements.

.loginform {
margin: 0;
        padding: 0;
text-align: right;
}

 

first off all get rid off every space in that code everything should be <div></div><img>kljdsfgfdg<div></div>

 

 

then come back to me

That makes no sense what so ever and does contribute the problem in hand.

[Ban]

Thanks for the replies, but it's not working yet. I've been screwing around with the code.. a lot xD.

It has something to do with the height property I put into .menualign ul {}. When I remove that, it doesn't show the background, but it does position the form nicely behind the menu.

(This is all in FF)

 

.menualign ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
height: 30px;
background-image: url(../images/bar_zonder.png);
background-repeat: repeat-x;
}

.menualign ul li a {
text-decoration: none;
display: block;
width: 150px;
height: 25px;
margin: 0px;
padding: 0px;
float: left;
color: #C7F4FD;
}

.menualign ul li a:hover {
background-image: url(../images/bar_met.png);
font-weight: bold;
}

.menualign form {
margin: 0px;
padding: 0px;
}

 

<div class="menualign">

<ul class="menu">

<li class="link"><a href="<?php echo $home_dir; ?>index.php" title="Home">Home</a></li>
<li class="link"><a href="<?php echo $members_dir; ?>roster.php" title="Roster">Roster</a></li>
<li class="link"><a href="<?php echo $home_dir; ?>constitution.php" title="Constitution">Constitution</a></li>

<?php if(!isset($_SESSION['access'])){ ?>
<li class="link"><a href="<?php echo $members_dir; ?>register.php" title="Register">Register</a></li>

<?php } else{ ?>

<li class="link"><a href="<?php echo $members_dir; ?>update_profile.php" title="Update your profile">My Profile!</a></li>
<li class="link"><a href="<?php echo $members_dir; ?>logout.php" title="Logout">Log out</a></li>

<?php } if(isset($_SESSION['access']) && $_SESSION['access'] > 1){ ?>

<li class="link" style="list-style: none; list-style-image: none; text-align: left; font-weight: bold; text-decoration: underline;">Admin</li>
<li class="link"><a href="<?php echo $admin_dir; ?>update_profile.php" title="Update a profile">Members</a></li>

<?php } ?>

</ul>

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" class="loginform">

<input type="text" value="User" name="username" id="username" size="10" onfocus="this.value=''" />
<input type="password" value="Password" name="password" id="password" size="10" onfocus="this.value=''" />
<input type="submit" name="login" id="login" value="Login" />

</form>

</div>

[nadeemshafi9]

Always apply default margin/padding to block level elements. Different Browsers use different padding/margin values for block level elements.

.loginform {
margin: 0;
        padding: 0;
text-align: right;
}

 

first off all get rid off every space in that code everything should be <div></div><img>kljdsfgfdg<div></div>

 

 

then come back to me

That makes no sense what so ever and does contribute the problem in hand.

 

i have solved these problems like this at least 7 or 8 times in IE it happens

[Ban]

Problem was a table in the rest of the code. Nothing to do with the CSS. Ah well. That's what you get when you go from tables to CSS layouts xD. Thanks for the help