Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    New Coder
    Join Date
    Jul 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Alignment Problem In IE7 + Opera

    Hi everyone. I've just finished up making a template for my website, but it seems to have an issue displaying in IE7 and Opera (displays fine in FF and Netscape). The problem is the menu is supposed to be horizontally centered, but instead appears left aligned. I've looked for ways to fix this using Google, and ended up finding a trick using containers, but for some reason, it doesn't work for me. Maybe I'm just doing it wrong. Any help making this menu center would be much appreciated.

    HTML:
    Code:
    <?php if($this->countModules('breadcrumb')):?>
    <table class="tabmenul" cellpadding="0" cellspacing="0">
    <tr>
    <td class="tabmenu_middle">
    <div id="tab_menu">
    
    				<jdoc:include type="modules" name="breadcrumb" />
    </div>
    </td>
    </tr>
    </table>
    <?php endif;?>
    CSS:
    Code:
    table.tabmenul{
    
    margin-top:-15px;
    margin-left:auto;
    margin-right:auto;
    float:left;
    
    }
    
    
    
    td.tabmenul_middle{
    
    background: #F7F7F7;
    
    padding: 0;
    
    margin:0;
    
    width:auto;
    float:left;
    
    }
    
    
    
    #tab_menu{
    
    height:32px;
    float: left;
    
    white-space:nowrap;
    
    }
    
    
    
    #tab_menu ul {
    
      margin: 0;
    
      padding: 0;
    
      list-style:none;
    
    }
    
    
    
    #tab_menu li {
    
    	float: left;
    
    	background: transparent none repeat scroll 0%;
    
    	margin: 0;
    
    	padding: 0;
    
    }
    
    
    
    #tab_menu a {
    
      font-family: Arial, Helvetica, sans-serif;
    
      font-size: 12px;
    
      font-weight: bold;
    
      float:left;
    
      display:block;
    
      height: 24px;
    
      line-height: 24px;
    
      padding: 0 20px;
    
      color: #000;
    
      text-decoration: none;
    
    }
    
    
    
    #tab_menu a:hover {
    
      color: #135cae;
    
    }
    
    
    
    #tab_menu a#active_menu-nav {
    
    	margin-top:2px;
    
    	height: 21px;
    
    	line-height: 21px;
    
    	background-position: 0 0;
    
    	  background: url(../images/white/mw_menu_active_bg.png) 0 0 repeat-x;
    
      color: #fff;
    
    }
    I'm using a DOCTYPE of XHTML 1.0 Transitional. Any help making this centered would be much appreciated. Thanks in advance

  • #2
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    Link?
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #3
    New Coder
    Join Date
    Jul 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    But the rules said no links.....

    And unfortunately, there is no link yet. The sites still being developed locally in a CMS (just in the content adding stages now).

  • #4
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    If you want the menu centered get rid of float left
    Code:
    #tab_menu{
    height:32px;
    float: left;
    white-space:nowrap;
    }
    to
    Code:
    #tab_menu{
    height:32px;
    text-align: center;
    white-space:nowrap;
    }
    You can post a link to your page. The reason we have that rule (which this is the first time I have heard about that rule) is becuase of spammers.

    I need to visually see what is wrong in order to help you. Also make sure your page validates.
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #5
    New Coder
    Join Date
    Jul 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Lol, my bad on the rule, I saw it on a different site and for some reason applied it to this one (its been a LONG day with this CSS issue, lol).

    Changing the float to text-align didn't fix the issue. It stayed the same in IE and in FF (didn't try Netscape/Opera).

    If it'll help visually, I can start posting screenshots of the problem.
    Last edited by Lottario; 07-30-2007 at 08:39 PM.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code with the php in it does us no good. Its not like we can magically tell what the php generates. Post the generated code.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New Coder
    Join Date
    Jul 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The PHP shouldn't affect the alignment of the output at all though (actually, I shouldn'tve even included it in the code I posted). The PHP simply checks to see if a module is positioned in the "breadcrumb" area of the template before executing the code to display it. So if theres nothing published to breadcrumb by the CMS, it just doesn't construct the table or the div that would contain the module if it were published (and theres definitely no problem with the module code, I've got it working perfectly in two other places on the site).

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    We still need to see the output.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    New Coder
    Join Date
    Jul 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Output it is then!

    Code:
    <table class="tabmenul" cellpadding="0" cellspacing="0">
    <tr>
    <td class="tabmenu_middle">
    <div id="tab_menu">
    				<ul class="menu"><li class="item122"><a href="http://localhost/perspecsys/index.php?option=com_content&amp;view=article&amp;id=93&amp;Itemid=122"><span>Overview</span></a></li><li class="item119"><a href="http://localhost/perspecsys/index.php?option=com_content&amp;view=article&amp;id=91&amp;Itemid=119"><span>Compliance</span></a></li><li class="item120"><a href="http://localhost/perspecsys/index.php?option=com_content&amp;view=article&amp;id=92&amp;Itemid=120"><span>Security</span></a></li><li class="item115"><a href="http://localhost/perspecsys/index.php?option=com_content&amp;view=article&amp;id=55&amp;Itemid=115"><span>Financial</span></a></li><li class="item116"><a href="http://localhost/perspecsys/index.php?option=com_content&amp;view=article&amp;id=54&amp;Itemid=116"><span>Telco</span></a></li><li class="item117"><a href="http://localhost/perspecsys/index.php?option=com_content&amp;view=article&amp;id=56&amp;Itemid=117"><span>Manufacturing</span></a></li><li class="item118"><a href="http://localhost/perspecsys/index.php?option=com_content&amp;view=article&amp;id=57&amp;Itemid=118"><span>Retail</span></a></li></ul>
    
    </div>
    </td>
    </tr>
    </table>

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Why did you float everything? That was the first cause of your problem. Then you are over complicating things. There is no need for the table or even that div around the navigation. This is all you need.
    Code:
    <ul class="menu">
    	<li class="item122"><a href="http://localhost/perspecsys/index.php?option=com_content&amp;view=article&amp;id=93&amp;Itemid=122"><span>Overview</span></a></li>
    	<li class="item119"><a href="http://localhost/perspecsys/index.php?option=com_content&amp;view=article&amp;id=91&amp;Itemid=119"><span>Compliance</span></a></li>
    	<li class="item120"><a href="http://localhost/perspecsys/index.php?option=com_content&amp;view=article&amp;id=92&amp;Itemid=120"><span>Security</span></a></li>
    	<li class="item115"><a href="http://localhost/perspecsys/index.php?option=com_content&amp;view=article&amp;id=55&amp;Itemid=115"><span>Financial</span></a></li>
    	<li class="item116"><a href="http://localhost/perspecsys/index.php?option=com_content&amp;view=article&amp;id=54&amp;Itemid=116"><span>Telco</span></a></li>
    	<li class="item117"><a href="http://localhost/perspecsys/index.php?option=com_content&amp;view=article&amp;id=56&amp;Itemid=117"><span>Manufacturing</span></a></li>
    	<li class="item118"><a href="http://localhost/perspecsys/index.php?option=com_content&amp;view=article&amp;id=57&amp;Itemid=118"><span>Retail</span></a></li>
    </ul>
    Lose the table. You can probably lose the spans as well unless you plan on using some type of image replacement technique.

    Here is the corresponding CSS
    Code:
    ul.menu {
    margin: 0;
    padding: 0;
    list-style:none;
    height:32px;
    background: #F7F7F7;
    text-align:center;
    line-height:32px;
    }
    
    ul.menu li {
    display:inline;
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #11
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    Try margin: 0 auto; instead of text-align: middle;.

    Get rid of the float: lefts and add margin: 0 auto;

    edit:// beat me to it Aerospace
    Last edited by twodayslate; 07-30-2007 at 09:43 PM.
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #12
    New Coder
    Join Date
    Jul 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Its overcomplicated by necessity. The site is made in a content management system, so all the menu items and everything are taken care of outside of the template. The template is supposed to be able to merely hold the menu module. All the information about the menu items (along with all the information about any other page content) is passed along later, when the user is about to view the page.

    The float:lefts end up being required in most of the areas I have them, or further layout issues occur (the menu will actually shift up and left a bit if I take out certain ones, or go vertical and off-center if I take out all) in Firefox.

    EDIT: twodayslate's reply came after I started this one, so in response to his(hers?) reply:

    margin: 0 auto instead of the float:left makes the menu at least display the same in both IE and FF, so its a step in the right direction I think. However, the menu is off-center, and displays vertically instead of horizontally.
    Last edited by Lottario; 07-30-2007 at 09:50 PM.

  • #13
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Then I guess leave the tables and div there though you still don't need the floats. You can pretty much remove the CSS from the table and td cells surrounding that nav. I hate it when people say "but its done by a CMS" because one can easily customize the CMS to fit their needs. I do it all of the time.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #14
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    n/m Aerospace beat me again!
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #15
    New Coder
    Join Date
    Jul 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Using the CSS you suggested Aerospace, the menu now centers in IE, assuming I don't format the links. Oddly enough, it seems any link formatting causes the menu to change to vertical from horizontal. I liked the text the way it was, is there something in the link formatting I can change to allow the look of the links to remain the same, but still have a vertical list?

    And thank you both very much for your help so far, and for putting up with a n00b like me


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •