Aligning Header and Attributes

[Amabelle]

Hi Again - it seems like I'm on here desperate for help every couple of days! I'm using V 1.3.9h and would once again be very grateful for any help or tips.

How do I align my header so that it remains center with the drop down menu (Category Tab Simple Dropdown Menu) directly underneath each category? Right now the sub categories are aligning to the far left? (www.amabelle.elementfx.com/shop)

I have this coding:
#navCatTabsDropdown li
{
position:relative;
}

#navCatTabsDropdown * li ul
{
visibility:hidden;
position:absolute;
z-index: 100;
margin-top: 1px;
margin-bottom: 15px;
margin-left: 2px;
margin-right: 0px;
width:210px
}

#navCatTabsDropdown * li:hover ul
{
visibility:visible;
background-color:#6B503E;
border: 1px outset;
white-space:nowrap;
}
</style>
Thank you for your time!

[haredo]

Well what i see in Firefox when I hover over Signature Scents all the subcategories are centered instead of left justified...

[Amabelle]

Haredo once again thank you so much for your quick reply! The Signature Scents is fine, but when I hover over any of the other categories, they are all aligned left (where the Sig Scents) are instead of being under their designated category.

I'm not sure if this is something I need to address inside the main stylesheet.css?

[haredo]

I am puzzled on this, but please be patient and wait for a fellow zenner to read this thread ...

[Amabelle]

Thanks Haredo, nice to know I've got good company...
Interesting note, when I do this :
#navCatTabsDropdown li
{
float: left
position: relative;
}

Everything aligns itself beautifully but it's on the left. I'd like it to be centered if possible.
I've tried searching the forums but no one else has come up with anything this odd. This coding was directly copied and pasted from the mod?

[lat9]

I'd try to help, but your site is not loading ...

... now that it's loaded, all the category-tabs look the same.

[Amabelle]

Hi lat9 - thanks for replying. my site is here: www.amabelle.elementfx.com/shop it might not have been loading because i've been trying all sorts of combinations etc but it's now 12:45 in the morning and I can feel my brains leaking out of my ears.

Whilst everything is now aligning (albeit to the left) I've now discovered I can't change the font colour lest it (and the background) goes clear. I think I shall try this again after some sleep!

[dbltoe]

It looks okay to me in firefox, chrome and safari but they are all compensating for the bad html in the menu and bad css structure. Therefore, each one shows different views and colors.

Not familiar with the mod, but can't believe it would have the <br /> tags mixed in between the <li> tags. They appear to be used to add line space to the drop-down options. Once you start a ul or ol list, everything should be inside the li tags or the browser will do strange things with the output.

Also, the css style call is placed inside a div and is confusing everything. The css should be added to the stylesheet, remove the <br /> from between the <li>, and change the #navCatTabsDropdown li to add line-height: 1.5em; and adjust as necessary.

[Amabelle]

Thanks for replying dbltoe! I really appreciate it. I'll give it a go and see how things work out :)

[Amabelle]

Success!! I followed dbltoe's suggestions (thank you, thank you, thank you) and
- removed the css from the php file, put it inside the stylesheet.css
- cleaned up the .css to the best of my ability
- added the line height of 1.5em

For anyone else who encountered this problem - hope this helps:

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
  margin: 0em;
  background-color: #26160a;
  width: 100%;
  color: #fff0df;
  font-size: 11pt;
  font-weight: normal;
  height: 40px;
}
#navCatTabsDropdown li {
	float:left;
	position:relative;
	padding 5px;
	line-height: 1.5em;
}
#navCatTabsDropdown li ul{
margin: 1px 0px 5px 2px;
background-color: #af5980;
visibility: hidden;
position: absolute;
z-index: 100;
width: 215px;
color: #f6d2e4;
}
#navCatTabsDropdown li:hover ul {
visibility:visible;
background-color: #af5980;
color: #ffffcc;
border: 1px outset;
white-space:nowrap;
}
#navMain ul, #navSupp ul, #navCatTabs ul {
margin: 0 0 0 4em;
padding: 0.5em 0em 0.5em 1em;
width: 100%;
list-style-type: none;
text-align: center;
line-height: 1.5em;
color: #fff0df;
}
#navMain ul li, #navSupp ul li, #navCatTabs ul li {
 display: inline;
}
#navMain ul li a {
 margin: 0;
  padding: 0em 0.5em;
  color: #ffffcc;
  text-decoration: none;
  white-space: nowrap;
  float: right;
}
#navSupp ul li a, #navCatTabs ul li a {
  margin: 0;
  padding: 0em 0.5em;
  color:#ffffcc;
  text-decoration: none;
  white-space: nowrap;
}