Aligning div content to the top.

L

liunx

Guest
In opera the div is aligned at the right top where it should but IE and Firefox align it at the bottom.

Here is the css code I use to align the div:
.navbox { float: right; position: relative; left: 0px; top: 0px; }

but how can I make sure the content is alligned at the top of the div and not at the bottom.:
Div setup:
<div id="top-banner"><a href=http://www.webdeveloper.com/forum/archive/index.php/"{U_INDEX}"><img src="templates/subSquare/images/logo.gif" border="0" alt="{L_INDEX}" /></a> <div class="navbox"><ul><li class="menulink"><a href="{U_INDEX}">{SITENAME}</a> <ul> <li><a href="{U_FAQ}">{L_FAQ}</a></li> <li><a href="{U_SEARCH}">{L_SEARCH}</a></li> <li><a href="{U_MEMBERLIST}">{L_MEMBERLIST}</a></li> <li><a href="{U_GROUP_CP}">{L_USERGROUPS}</a></li> <!-- BEGIN switch_user_logged_in --> <li><a href="{U_PROFILE}">{L_PROFILE}</a></li> <!-- END switch_user_logged_in --> <li><a href="{U_PRIVATEMSGS}">{L_PRIVATEMSGS}</a></li> <!-- BEGIN switch_user_logged_out --> <li><a href="{U_REGISTER}">{L_REGISTER}</a></li> <!-- END switch_user_logged_out --> <li><a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a></li> </ul> </li></ul></div></div>We need the full HTML and CSS to help you.maybe even a link to the working site to look at too . . .<!-- m --><a class="postlink" href="http://dev.doublejweb.net/">http://dev.doublejweb.net/</a><!-- m -->

I want the button with the dropdown menu that you see at the right had side at the top.

In opera it is at the top but in Fire fox and IE it is shown at the bottom of the div it's in.try changing this:
<div id="top-banner"><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php?sid=ec2be5d34ff286c784cf44cc2b84ffb7"><img src="templates/subSquare/images/logo.gif" border="0" alt="yourdomain.com Forum Index" /></a>
<div class="navbox"><ul><li class="menulink"><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php?sid=ec2be5d34ff286c784cf44cc2b84ffb7">yourdomain.com Forum Index</a>

<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"faq.php?sid=ec2be5d34ff286c784cf44cc2b84ffb7">FAQ</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"search.php?sid=ec2be5d34ff286c784cf44cc2b84ffb7">Search</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"memberlist.php?sid=ec2be5d34ff286c784cf44cc2b84ffb7">Memberlist</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"groupcp.php?sid=ec2be5d34ff286c784cf44cc2b84ffb7">Usergroups</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"privmsg.php?folder=inbox&sid=ec2be5d34ff286c784cf44cc2b84ffb7">Private Messages</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"profile.php?mode=register&sid=ec2be5d34ff286c784cf44cc2b84ffb7">Register</a></li>

<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"login.php?sid=ec2be5d34ff286c784cf44cc2b84ffb7">Log in</a></li>
</ul>
</li></ul>
</div></div>
to this:
<div id="top-banner">
<div class="navbox"><ul><li class="menulink"><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php?sid=ec2be5d34ff286c784cf44cc2b84ffb7">yourdomain.com Forum Index</a>

<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"faq.php?sid=ec2be5d34ff286c784cf44cc2b84ffb7">FAQ</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"search.php?sid=ec2be5d34ff286c784cf44cc2b84ffb7">Search</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"memberlist.php?sid=ec2be5d34ff286c784cf44cc2b84ffb7">Memberlist</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"groupcp.php?sid=ec2be5d34ff286c784cf44cc2b84ffb7">Usergroups</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"privmsg.php?folder=inbox&sid=ec2be5d34ff286c784cf44cc2b84ffb7">Private Messages</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"profile.php?mode=register&sid=ec2be5d34ff286c784cf44cc2b84ffb7">Register</a></li>

<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"login.php?sid=ec2be5d34ff286c784cf44cc2b84ffb7">Log in</a></li>
</ul>
</li></ul>
</div><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php?sid=ec2be5d34ff286c784cf44cc2b84ffb7"><img src="templates/subSquare/images/logo.gif" border="0" alt="yourdomain.com Forum Index" /></a></div>

If you position a floated element after another (your banner image in this case) it will appear beneath it in most browsers.

So just do you navbox menu before the banner image href. Hope that makes sense.

I might even change the .navbox to this:
.navbox { float: right;}

Ian

P.S. you misspelled design in your credit on the bottom left of the page :)Thank you it is now alligned correctly.
(btw that typo was fixed but since the styles is still in development I'm too lazy to upload the graphic.)

But now I still have a little issue with the menu:
On another site this menu works in IE perfectly only my menu only drops down in FireFox and Opera browser, IE does not do the dropdown thingie it is supposed to do.

Anyone know a solution to that?(I dont know where to look for the problem any more if its either in the java script or in the css:

Css code:
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
float: left;
position: relative;
width: 150px;
}
li ul {
display: none;
position: absolute;
left: 0;
}
li > ul {ntop: auto; left: auto; }
li:hover ul, li.over ul{ display: block; }

the javascript can be found here:
<!-- m --><a class="postlink" href="http://dev.doublejweb.net/templates/subSquare/javascript.js">http://dev.doublejweb.net/templates/sub ... ascript.js</a><!-- m -->
(note that first to functions are not with the dropdown menu)
 
You must log in or register to reply here.
Back
Top