...

View Full Version : Alignment Problem In IE7 + Opera



Lottario
07-30-2007, 08:09 PM
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:

<?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:

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 :)

twodayslate
07-30-2007, 08:13 PM
Link?

Lottario
07-30-2007, 08:17 PM
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).

twodayslate
07-30-2007, 08:23 PM
If you want the menu centered get rid of float left


#tab_menu{
height:32px;
float: left;
white-space:nowrap;
}

to
#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.

Lottario
07-30-2007, 08:33 PM
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.

_Aerospace_Eng_
07-30-2007, 08:57 PM
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.

Lottario
07-30-2007, 09:02 PM
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).

_Aerospace_Eng_
07-30-2007, 09:22 PM
We still need to see the output.

Lottario
07-30-2007, 09:26 PM
Output it is then! :)


<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>

_Aerospace_Eng_
07-30-2007, 09:38 PM
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.

<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

ul.menu {
margin: 0;
padding: 0;
list-style:none;
height:32px;
background: #F7F7F7;
text-align:center;
line-height:32px;
}

ul.menu li {
display:inline;
}

twodayslate
07-30-2007, 09:40 PM
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

Lottario
07-30-2007, 09:47 PM
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.

_Aerospace_Eng_
07-30-2007, 09:49 PM
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.

twodayslate
07-30-2007, 09:49 PM
n/m Aerospace beat me again!

Lottario
07-30-2007, 09:59 PM
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 :)

_Aerospace_Eng_
07-30-2007, 10:21 PM
Which do you want, a vertical or horizontal list?

Lottario
07-31-2007, 02:04 PM
Oops, my mistake, I should've been paying more attention to what I was typing. I meant to say that when I add any link formatting, it changes from horizontal to vertical. The horizontal one is what I want. Sorry about that.

EDIT: Going line by line through the text formatting and commenting out problem areas (with a whole bunch of trial and error), I've gotten the look I want while remaining horizontal. However, the menu still doesn't center. Looking at the non-formatted version, it seems that it never did quite center, its just more obvious with the formatted text. With the text fully formatted, the space on the right side of the menu is about 3 times greater than that on the left side. Without formatted text, the space on the right side is still greater, however not by nearly as much. I've attached some screenshots to help visually, since theres no live site. The top menu in the screenshots is centered, the lower one is the one with the problem.

_Aerospace_Eng_
07-31-2007, 06:16 PM
So you are using images for your links? I'm guessing background images. If this is the case then each image has a set width. Add up all of widths of the images and set the width of the table equal to the width of the images and use margin:auto; on the table.

Lottario
07-31-2007, 06:24 PM
No, the menu with the problem is the one thats pure text in the screenshots. The only place there was an image included in the code for that menu was in

#tab_menu a#active_menu-nav, but thats since been commented out (and never actually applied anyways, now that I look at it. I took the suffix off the menu a while ago, and forgot to get rid of that bit of code. D'oh!).

EDIT: Adding a fixed width of 1280px (my screen resolution width) to #table.tabmenul{} will center the menu in both IE7 and FF. However, I'm assuming that this only works if the screen width is set to 1280px. A width of auto does not allow the menu to center. It has to be possible to allow for variations in screen resolution and still center the menu somehow, right?

Lottario
08-01-2007, 03:01 PM
Got it centered! I noticed that without any CSS coding related to the menu, the menu centered itself, so from there, it was just a matter of figuring out what made it go off-center. The menus now a little lower than I wanted it (can't put in any top margins without throwing it off-center for some reason), but I can live with that, its only 12px :)

Thank you VERY much for your help, I would've never gotten this without you :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum