Why isn't EZPagesTop a <UL>?

This seems soo odd to me. I'm trying to customize this area (using the Classic Template), but the EZPagesTop doesn't use a UL or LI. Is there any reason for this? Is there an easy way to convert it to be this way, so that I may customize it via stylesheets?
Thanks!

They have there own tags for css
https://www.zen-cart.com/tutorials/index.php?article=117

Actually, I just added it in. I modified the tpl_ezpages_bar_header file and added it in... ;)

huh- I don't see anything in that link talking about CSS- can you explain a little more?

Here's my new problem with this setup:

My Site

I added in a UL and LI tags into the tpl_ezpages_header_bar file- works great, until...

I need to remove that final divider image on the right side of the 'Made in the USA!' link... normally I would do this-

<li><a style="background-image: none;" href="#">

That would remove that image in a hard-coded UL LI. However, since this UL LI is dynamically generated, I don't have access to add that in on a specific link/li.

Any suggestions on how to remove this?

I appreciate the help!

Change the background-position to left and make it apply only to the second and following items:```
#navEZPagesTop ul a {
background-image: none;
background-repeat: no-repeat;
background-position: left;
padding-right: 10px;
padding-left: 10px;
display: block;
line-height: 75px;
text-decoration: none;
font-size: 1.5em;
font-weight: bold;
color: #008aff;
}

#navEZPagesTop ul li+li a {
background-image: url('../images/sitenavdivider.png');}

Also, you should delete the original rules that apply to these links, as they are completely overridden by your new rules.```
#navEZPagesTop a {
	color: #008aff;
	text-decoration: none;
	}

#navEZPagesTop a:hover {
  color: #b8def0;
  }

WHOA. Now THAT IS COOL! I had no idea you could do that within CSS! I seriously thought I would have to have some custom piece of PHP code written, and/or just drop the entire thing and hard code the links in manually! TOO COOL!

Guys, thank you SOO MUCH for all the help! I am learning soo much from all your input!

Hi Glen (or any others!)-
Question on this. I just looked at the site using FireFox ver 3.017, and the EZPages Links are all shifted funny. The 'BUY' link is where it's supposed to be, but all the remaining ones are shifted DOWN a little bit. I imagine it has something to do with the CSS li+li line? Not sure.

The odd thing is- using FireFox 3.57 and IE it looks fine. Any suggestions?

I did notice that you had some business with a huge line-height (which made the simple border-left I was going to suggest not an option); maybe if you convert the styling to a more standard arrangement with padding/margins to get the spacing, it will work better in FF3.0.

The li+li line can only affect whether a background image shows, so I doubt that is the problem in itself.

Hi Glen-
Thanks for the response. I'm not exactly sure what a more standard way is, since I'm soo new to CSS (but learning quickly!). The line height I'm using is because the background image itself is 75x tall. When I use a smaller line height, it cuts off that image. I made some changes- but still getting the same results.

Any suggestions?

I appreciate it!

Your styling looks appropriate now. I saw a line-height: 75px; in there before.

Using borders, left, right or both, on any kind of link selector, causes the ez-page header bar to drop the last item half its height. This doesn't happen anywhere else, but is a problem we saw recently on someone else's site and were unable to figure out. Maybe a close look at the code for that will reveal something about why it happens only there.

View source shows you missing the </ul> for this list, even though Firebug displays an </ul> in the correct place:```html

<!--bof-header ezpage links--> <div id="navEZPagesTop"> <ul> <li><a href="http://www.hcgsupply.com/store/">Buy</a></li>   <li><a href="http://www.hcgsupply.com/store/index.php?main_page=page&id=19&chapter=1">The Science</a></li>   <li><a href="http://www.hcgsupply.com/store/index.php?main_page=page&id=31">The Rules</a></li>   <li><a href="http://www.hcgsupply.com/store/index.php?main_page=page&id=18">Success Stories</a></li>   <li><a href="http://www.hcgsupply.com/store/index.php?main_page=page&id=20">Recipes</a></li>   <li><a href="http://www.hcgsupply.com/store/index.php?main_page=page&id=23">FAQ's</a></li>   <li><a href="http://www.hcgsupply.com/store/index.php?main_page=page&id=16">Made in the USA!</a></li> </div> <!--eof-header ezpage links--> ```

ugggh. Well, the first link, BUY, is in the right spot. All the others are off by 1/2 or so. Again, it's only occuring in FF 3.0, NOT IE or FF3.5. I'm beyond frustrated. It just doesn't make any sense.

Would it matter if I switched from 'padding-left' or 'padding-top' to 'padding: 0px, 10px, 3px, 0px' type format?

I'm just clear out of ideas. I DID add in the </ul> and still no fix. :censored:

Do you think if I hard-coded it in it would fix it?

I REALLY don't want to do that, but it's better than having it like this! :(

The browser can't tell if the HTML it sees was hard-coded or dynamically generated, so that can't make a difference.

I know that a <ul> is a totally appropriate way of organizing the links, but it seems as if that is what is causing the problem in this case. You can get the same styling with just a div and a set of links (the original setup), so I would try going back to that and see what you can get. (Save the code you have now, in case the other way doesn't work better.)

Glen-
How would I do that? It seems like the original code is just a php loop that dynamically writes an <a href> statement into the page. How do I tell it to add the divider line at the end of each link, etc etc? Sorry, just don't know this stuff that well. I REALLY appreciate you taking the time to help me out!

The whole code content of tpl_ezpages_bar_header.php is this:```php
include(DIR_WS_MODULES . zen_get_module_directory('ezpages_bar_header.php'));
?>

<?php if (sizeof($var_linksList) >= 1) { ?> <div id="navEZPagesTop"> <?php for ($i=1, $n=sizeof($var_linksList); $i<=$n; $i++) { ?> <a href="<?php echo $var_linksList[$i]['link']; ?>"><?php echo $var_linksList[$i]['name']; ?></a><?php echo ($i < $n ? EZPAGES_SEPARATOR_HEADER : '') . "\n"; ?> <?php } // end FOR loop ?> </div> <?php } ?> ```which builds <div id="navEZPagesTop"> <a href="etc...>Name</a>separator <a href="etc...>Name</a>separator <a href="etc...>Name</a> </div>

The separator can be null (set in admin).

So you can style```
#navEZPagesTop {
margin: 0;
padding: 20px 0.5em 0.5em 25px;
background-image: url('../images/ezpagesbg.png');
background-repeat: no-repeat;
height: 75px;
width: 800px;
}

#navEZPagesTop a {
display: block;
float: left;
background-image: none;
background-repeat: no-repeat;
background-position: left;
padding: 0 10px;
line-height: 1.5em;
text-decoration: none;
font-size: 1.4em;
font-weight: bold;
color: #008aff;
}

#navEZPagesTop a+a {
background-image: url('../images/sitenavdivider.png');
}

#navEZPagesTop a:hover {
color: #ffffff;
}

Hi Glenn-

I tried your posted code, but unfortunately, it's the same results. Again, works great in FF 3.5 and IE, but FF3.0- nodda. I am posting a screenshot so you can see. It adjusts it all down right after the very 1st divider next to the 'BUY' link...

It seems like it's starting right after that 1st link. Doesn't make sense to me- it posts the 1st link just fine. But then moves everything after it down. It SHOULD be all consistent- why it would change after the 1st one, I don't get it. Is there something funky with how FF3.0 processes CSS code, or a version of it?

ok- process of elimination. I took out the CSS code that increments that background

#navEZPagesTop a+a {
background-image: url('../images/sitenavdivider.png');
}

That produced the same results (except with no background, obviously). So now we know that's not the problem. We're using the original code. Man this is frustrating. There's got to be something obvious... I'm stumped.

ok- I just tried bumping the 'Buy' page to a later position in order. It did the same thing with another page- so it's whatever is right after that first link (no matter what page it is) is producing the bump in code. grrrrrr..... :yuck:

It is conceivable that the particular build of FF3.0 you are using has a CSS rendering bug. I can't think of a rational cause or fix for it, either.

The screenshot shows the identical effect from the other end that happens with a border on the links (that one drops the very last one in the row). The effects ought to be related - two bugs that do the same thing is stretching credibility.