background tab/sliding door question

[sw9]

I've been staring at this code for 2 hours in firebug trying to get this to work and it's killing me! If you take a look at the navbar on this page you'll see my menu's left and right corners are rounded appropriately with my background images: http://dev.miasole.com/customers

 

However, I can't get it to work on this page where it's the active page: http://dev.miasole.com/contact-us

 

I've tried changing the margins on the ul.links but then it bumps my text for 'contact us' down.

 

Can anyone tell me what I need to do with this? Thanks SO much in advance!!

[haku]

Nice little Drupal site you've got there 

 

Try this:

 

1) Remove <div class="primary-left">

2) change the css for your menu to the following (remove any current CSS first to prevent conflicts)

 

#navbar-inner ul
{
  margin:0;
  padding:0;
  width:900px;
}

#navbar-inner li
{
  width:150px; // 1/6 the width of the <ul>
  height: 62px; // the height of the <ul>
  float:left;
  margin:0;
  padding:0;
}

#navbar-inner li.first
{
  background: url(images/nav-left.png) no-repeat left top;
}

#navbar-inner li.last
{
  background: url(images/nav-right.png) no-repeat right top;
}

#navbar-inner li a
{
  display:block;
  height:62px;
  width: 150px;
  text-align:center; // this will horizontally center the text
  line-height:62px; // this will vertically center the text
}

 

You may need to do a little adjusting, but this should take care of it for the most part.

 

[sw9]

thanks so much, haku! that got me started, i appreciate it very much. the site looks great now!

[sw9]

I think I might be losing my mind over here and probably need to get away from the computer. I though this was/is working great, and it seems to be if you look at this page: http://dev.miasole.com/company (look at far left menu item, it looks good). Now look at this page: http://dev.miasole.com/company/management-team

 

So far as I can see, it looks to me like all the classes are the same, being applied in the same order (using Firebug to see this). So I cannot for the life of me figure out why the far left image is overlapping on this page. Any suggestions?

[haku]

You have set an image on the <a> tag contained in the <li> tag. As the <a> tag is a child of the <li> tag, the image in the <a> tag will always be rendered over top the image in the <li> tag.

 

Get rid of images on your .active a tags, and apply background images only to the <li> tags. 

[sw9]

thanks, haku.the image on the a tag is actually only the tiny arrow (12x7). but your post made me revisit it once again. i tried to put it on the lis again but this doesn't work because i have to have a right border and padding brought down, which seems to mess everything else up when i do that.

 

BUT i was able to fix it. on that particular active trail i set the width to be 10px less than elsewhere, and then i could give it a left-margin of 10px to push it over the image. it works! thanks for the inspiration.

[haku]

Just to give you a heads up, that's going to cause you grief when you look at it in IE.

 

To make it cross-browser compatible, I would stick with only the little arrow as the background image, and a transparent background. right now you have the whole tab as the background image (no transparent background). Then for the active left image, extend it from just the rounded end so that it's actually the whole tab.

This way you don't have to add the margin and change the width for the <a> tag, and it will keep your code cross-browser compatible.