Back To Programming / Scripting / Coding Forum

Firefox / IE Alignment Issue

  • HollyHunter
  • Newbie
  • Newbie
  • User avatar
  • Joined: Jun 02, 2009
  • Posts: 13
  • Status: Offline

Post June 23rd, 2009, 3:35 am

Hello All

I have an issue where the links in my navigation menu are aligning correctly in Firefox (in the middle vertically) but in Internet Explorer they are aligning at the bottom and I can't work out why as my CSS knowledge isn't great - hoping somebody can help me a little bit.

This is the code for the navigation menu in the template:

Code: [ Select ]
<!-- IF loggedin -->
  <br>   
  <table width="900" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td height="20" bgcolor="#CCCCCC">
 
            <div id="usernav_wrap">
                <div id="usernav">
                    <ul>
                        <li class="first">{anchor:url1="account/home/",url2="index.php?m=account_home",name="core|usermenu_profile"}</li>
                        <!-- IF settings.enable_messaging -->
                            <li><a href="{virtual_path}{ifelse:settings.fancy_urls,"1","account/messages/","index.php?m=account_messages"}" title="{lang:"core","usermenu_messages"}">{lang:"core","usermenu_messages"}<!-- IF session.new_messages > "0" --> ({session.new_messages})<!-- ENDIF --></a></li>
                        <!-- ENDIF -->
                        <!-- IF settings.enable_guestbooks -->
                            <!-- IF session.new_guestbooks > "0" -->
                                <li><a href="{virtual_path}{ifelse:settings.fancy_urls,"1","account/guestbook/unapproved/","index.php?m=account_guestbook&p=unapproved"}" title="{lang:"core","usermenu_guestbook"}">{lang:"core","usermenu_guestbook"} ({session.new_guestbooks})</a></li>
                            <!-- ELSE -->
                                <li>{anchor:url1="account/guestbook/",url2="index.php?m=account_guestbook",name="core|usermenu_guestbook"}</li>
                            <!-- ENDIF -->
                        <!-- ENDIF -->
                        <!-- IF settings.enable_blogs -->
                            <li>{anchor:url1="account/blog/",url2="index.php?m=account_blog",name="core|usermenu_blog"}</li>
                        <!-- ENDIF -->
                        <!-- IF settings.enable_pictures -->
                            <li>{anchor:url1="account/albums/",url2="index.php?m=account_albums",name="core|usermenu_pictures"}</li>
                        <!-- ENDIF -->
                        <!-- IF settings.enable_videos -->
                            <li>{anchor:url1="account/videos/",url2="index.php?m=account_videos",name="core|usermenu_videos"}</li>
                        <!-- ENDIF -->
                        <!-- IF settings.enable_audio -->
                            <li>{anchor:url1="account/audio/",url2="index.php?m=account_audio",name="core|usermenu_audio"}</li>
                        <!-- ENDIF -->
                        <!-- IF settings.enable_events -->
                            <li>{anchor:url1="account/events/",url2="index.php?m=account_events",name="core|usermenu_events"}</li>
                        <!-- ENDIF -->
                        <!-- IF settings.enable_friends -->
                            <!-- IF session.new_friends > "0" -->
                                <li><a href="{virtual_path}{ifelse:settings.fancy_urls,"1","account/friends/requests/","index.php?m=account_friends&p=requests"}" title="{lang:"core","usermenu_friends"}">{lang:"core","usermenu_friends"} ({session.new_friends})</a></li>
                            <!-- ELSE -->
                                <li>{anchor:url1="account/friends/",url2="index.php?m=account_friends",name="core|usermenu_friends"}</li>
                            <!-- ENDIF -->
                        <!-- ENDIF -->
                        <!-- IF settings.enable_favorites -->
                            <li>{anchor:url1="account/favorites/",url2="index.php?m=account_favorites",name="core|usermenu_favorites"}</li>
                        <!-- ENDIF -->
                        <li>{anchor:url1="account/settings/",url2="index.php?m=account_settings",name="core|usermenu_settings"}</li>
                        <li>{anchor:url1="account/logout/",url2="index.php?m=account_logout",name="core|usermenu_logout"}</li>
                    </ul>
                </div>
            </div>
    </tr>
  </table>
</div>
<!-- ENDIF -->
  1. <!-- IF loggedin -->
  2.   <br>   
  3.   <table width="900" border="0" cellspacing="0" cellpadding="0">
  4.     <tr>
  5.       <td height="20" bgcolor="#CCCCCC">
  6.  
  7.             <div id="usernav_wrap">
  8.                 <div id="usernav">
  9.                     <ul>
  10.                         <li class="first">{anchor:url1="account/home/",url2="index.php?m=account_home",name="core|usermenu_profile"}</li>
  11.                         <!-- IF settings.enable_messaging -->
  12.                             <li><a href="{virtual_path}{ifelse:settings.fancy_urls,"1","account/messages/","index.php?m=account_messages"}" title="{lang:"core","usermenu_messages"}">{lang:"core","usermenu_messages"}<!-- IF session.new_messages > "0" --> ({session.new_messages})<!-- ENDIF --></a></li>
  13.                         <!-- ENDIF -->
  14.                         <!-- IF settings.enable_guestbooks -->
  15.                             <!-- IF session.new_guestbooks > "0" -->
  16.                                 <li><a href="{virtual_path}{ifelse:settings.fancy_urls,"1","account/guestbook/unapproved/","index.php?m=account_guestbook&p=unapproved"}" title="{lang:"core","usermenu_guestbook"}">{lang:"core","usermenu_guestbook"} ({session.new_guestbooks})</a></li>
  17.                             <!-- ELSE -->
  18.                                 <li>{anchor:url1="account/guestbook/",url2="index.php?m=account_guestbook",name="core|usermenu_guestbook"}</li>
  19.                             <!-- ENDIF -->
  20.                         <!-- ENDIF -->
  21.                         <!-- IF settings.enable_blogs -->
  22.                             <li>{anchor:url1="account/blog/",url2="index.php?m=account_blog",name="core|usermenu_blog"}</li>
  23.                         <!-- ENDIF -->
  24.                         <!-- IF settings.enable_pictures -->
  25.                             <li>{anchor:url1="account/albums/",url2="index.php?m=account_albums",name="core|usermenu_pictures"}</li>
  26.                         <!-- ENDIF -->
  27.                         <!-- IF settings.enable_videos -->
  28.                             <li>{anchor:url1="account/videos/",url2="index.php?m=account_videos",name="core|usermenu_videos"}</li>
  29.                         <!-- ENDIF -->
  30.                         <!-- IF settings.enable_audio -->
  31.                             <li>{anchor:url1="account/audio/",url2="index.php?m=account_audio",name="core|usermenu_audio"}</li>
  32.                         <!-- ENDIF -->
  33.                         <!-- IF settings.enable_events -->
  34.                             <li>{anchor:url1="account/events/",url2="index.php?m=account_events",name="core|usermenu_events"}</li>
  35.                         <!-- ENDIF -->
  36.                         <!-- IF settings.enable_friends -->
  37.                             <!-- IF session.new_friends > "0" -->
  38.                                 <li><a href="{virtual_path}{ifelse:settings.fancy_urls,"1","account/friends/requests/","index.php?m=account_friends&p=requests"}" title="{lang:"core","usermenu_friends"}">{lang:"core","usermenu_friends"} ({session.new_friends})</a></li>
  39.                             <!-- ELSE -->
  40.                                 <li>{anchor:url1="account/friends/",url2="index.php?m=account_friends",name="core|usermenu_friends"}</li>
  41.                             <!-- ENDIF -->
  42.                         <!-- ENDIF -->
  43.                         <!-- IF settings.enable_favorites -->
  44.                             <li>{anchor:url1="account/favorites/",url2="index.php?m=account_favorites",name="core|usermenu_favorites"}</li>
  45.                         <!-- ENDIF -->
  46.                         <li>{anchor:url1="account/settings/",url2="index.php?m=account_settings",name="core|usermenu_settings"}</li>
  47.                         <li>{anchor:url1="account/logout/",url2="index.php?m=account_logout",name="core|usermenu_logout"}</li>
  48.                     </ul>
  49.                 </div>
  50.             </div>
  51.     </tr>
  52.   </table>
  53. </div>
  54. <!-- ENDIF -->



And this is the associated CSS:


Code: [ Select ]
/* ********** [ USER NAVIGATION ] ********** */
 
div#usernav_wrap {
    height: 20px;
    background: ##CCCCCC }
 
    div#usernav {
        margin: 0px auto;
        width: 900px; }
 
        div#usernav ul {
            list-style: none; }
 
            div#usernav li {
                padding: 0px 0px;
                background: url("usermenu_div.gif") no-repeat;
                float: left; }
 
            div#usernav li.first {
                padding: 0px 0px 0px 10px;
                background: none; }
 
                div#usernav ul li a {
                    padding: 6px 10px 0px 18px;
                    height: 20px;
                    display: block;
                    float: left;
                    font: 10px Verdana, Arial, Helvetica, sans-serif;
                    color: #666666;
                    text-decoration: none; }
 
                    div#usernav ul li a:hover {
                        text-decoration: underline; }
  1. /* ********** [ USER NAVIGATION ] ********** */
  2.  
  3. div#usernav_wrap {
  4.     height: 20px;
  5.     background: ##CCCCCC }
  6.  
  7.     div#usernav {
  8.         margin: 0px auto;
  9.         width: 900px; }
  10.  
  11.         div#usernav ul {
  12.             list-style: none; }
  13.  
  14.             div#usernav li {
  15.                 padding: 0px 0px;
  16.                 background: url("usermenu_div.gif") no-repeat;
  17.                 float: left; }
  18.  
  19.             div#usernav li.first {
  20.                 padding: 0px 0px 0px 10px;
  21.                 background: none; }
  22.  
  23.                 div#usernav ul li a {
  24.                     padding: 6px 10px 0px 18px;
  25.                     height: 20px;
  26.                     display: block;
  27.                     float: left;
  28.                     font: 10px Verdana, Arial, Helvetica, sans-serif;
  29.                     color: #666666;
  30.                     text-decoration: none; }
  31.  
  32.                     div#usernav ul li a:hover {
  33.                         text-decoration: underline; }


And the problem in image form:

Image


Any ideas much appreciated.

Thanks

Holly x
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post June 23rd, 2009, 3:35 am

  • devilwood
  • Silver Member
  • Silver Member
  • User avatar
  • Joined: Nov 18, 2007
  • Posts: 429
  • Status: Offline

Post June 23rd, 2009, 2:06 pm

Just try removing the unordered list tag.

You may have to add

display:inline;

to your li like this: I'm not sure why your links are showing up in a line.

Code: [ Select ]

div#usernav li {
                padding: 0px 0px;
                background: url("usermenu_div.gif") no-repeat;
                float: left;
                display:inline;
}
  2. div#usernav li {
  3.                 padding: 0px 0px;
  4.                 background: url("usermenu_div.gif") no-repeat;
  5.                 float: left;
  6.                 display:inline;
  7. }


I'd first just remove the <ul></ul> .
  • HollyHunter
  • Newbie
  • Newbie
  • User avatar
  • Joined: Jun 02, 2009
  • Posts: 13
  • Status: Offline

Post June 23rd, 2009, 3:26 pm

Thanks for the suggestion devilwood, that just removed all of the formatting from the links and bunched them together, not the answer unfortunately.

Just trying to get them vertically centered.

Appreciate the effort though :)

All ideas appreciated ....?


Holly x
  • devilwood
  • Silver Member
  • Silver Member
  • User avatar
  • Joined: Nov 18, 2007
  • Posts: 429
  • Status: Offline

Post June 24th, 2009, 12:48 pm

I should be able to get this soon so here's try #2. I've had the same issue you're having, but I can't remember which project that I finally got it working on. Try the following as I think it's similar to the html structure you're looking for.

Code: [ Select ]

<div id="navigation">
<div align="center">    
<li><a href="main.html" target="_self">Home</a></li>
<li><a href="about.html" target="_self">About</a></li>
<li><a href="properties.html" target="_self">Properties</a></li>
<li><a href="sprojects.html" target="_self">Special Projects</a></li>
<li><a href="videos.html" target="_self">Videos</a></li>
<li><a href="news.php" target="_self">News and Events</a></li>
<li><a href="testimonials.html" target="_self">Testimonials</a></li>
<li><a href="links.php" target="_self">Links</a></li>         
</div>
</div>
  2. <div id="navigation">
  3. <div align="center">    
  4. <li><a href="main.html" target="_self">Home</a></li>
  5. <li><a href="about.html" target="_self">About</a></li>
  6. <li><a href="properties.html" target="_self">Properties</a></li>
  7. <li><a href="sprojects.html" target="_self">Special Projects</a></li>
  8. <li><a href="videos.html" target="_self">Videos</a></li>
  9. <li><a href="news.php" target="_self">News and Events</a></li>
  10. <li><a href="testimonials.html" target="_self">Testimonials</a></li>
  11. <li><a href="links.php" target="_self">Links</a></li>         
  12. </div>
  13. </div>


Code: [ Select ]

#navigation {
background-color:#6d6d4a;
border-top: 1px #999967 solid;
border-bottom: 1px #999967 solid;
border-left: 2px #999967 solid;
border-right: 2px #999967 solid;
padding-left:0;
margin-left:0;
float: left;
left: 0px;
width: 99.5%;
height: 20px;
}

#navigation li {
top:0;
border:none;
position: relative;
padding:0;
display:inline;
margin-right: .75em;
}

#navigation li a{
    font: 14px/18px Arial, Helvetica, sans-serif;
    color: #48231A;
    text-decoration: none;
}

#navigation li a:hover {
    color: #000000;
}
  2. #navigation {
  3. background-color:#6d6d4a;
  4. border-top: 1px #999967 solid;
  5. border-bottom: 1px #999967 solid;
  6. border-left: 2px #999967 solid;
  7. border-right: 2px #999967 solid;
  8. padding-left:0;
  9. margin-left:0;
  10. float: left;
  11. left: 0px;
  12. width: 99.5%;
  13. height: 20px;
  14. }
  16. #navigation li {
  17. top:0;
  18. border:none;
  19. position: relative;
  20. padding:0;
  21. display:inline;
  22. margin-right: .75em;
  23. }
  25. #navigation li a{
  26.     font: 14px/18px Arial, Helvetica, sans-serif;
  27.     color: #48231A;
  28.     text-decoration: none;
  29. }
  31. #navigation li a:hover {
  32.     color: #000000;
  33. }
  • Rabid Dog
  • Web Master
  • Web Master
  • User avatar
  • Joined: May 21, 2004
  • Posts: 3229
  • Loc: South Africa
  • Status: Offline

Post June 30th, 2009, 1:40 pm

set your div height and set your line height to the same value. then set your vertical align to middle

Code: [ Select ]
 
#usernav{
line-height: 30px;
height: 30px;
vertical-align: middle;
}
 
  1.  
  2. #usernav{
  3. line-height: 30px;
  4. height: 30px;
  5. vertical-align: middle;
  6. }
  7.  
Watch me grow

Page 1 of 1

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: this213 and 183 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.