Conflict/Issue With Two List (li)

I am having a conflict/issue with two lists, one is the products and one is the pagination (page numbers). The products list is working correctly, but the pagination list seems like it's bringing over the products list attributes.

Here is the html and css code for those lists:
http://codepen.io/anon/pen/BsGIx

I'm a css newbie. All help will be appreciated.

 

Here is the page where I'm having the issue: http://www.houstonwheelandtire.com/ford-mustang-2012-wheels?p=2

 

1) would REALLY help if you weren't opening and closing PHP willy nilly on EVERY blasted line.

2) your example code is broken markup since the PHP isn't running.

3) your example code only has one list, and I'm not really seeing any conflict like you mentioned.

4) stop using STRONG to do a B's job -- since you probably aren't weighting or providing "more emphasis" to the word "pages".

<?php

if ($this->getLastPageNum()>1) {
	echo '
		<div class="pages">
			<b>', $this->__('Page:'), '</b>
			<ol>';
		
	if (!$this->isFirstPage()) echo '
				<li>
					<a class="previous', (
						$this->getAnchorTextForPrevious() ? '' : ' i-previous'
					), '" href="', $this->getPreviousPageUrl(), '" title="', $this->__('Previous'), '">',(
						$this->getAnchorTextForPrevious() ?: '
							<img
								src="' . $this->getSkinUrl('images/pager_arrow_left.gif') . '"
								alt="' . $this->__('Previous') . '" class="v-middle"
							/>'
					),'</a>
				</li>';
			
			
	if ($this->canShowFirst()) echo '
				<li><a class="first" href="', $this->getFirstPageUrl(), '">1</a></li>';

	if ($this->canShowPreviousJump()) echo '
				<li><a class="previous_jump" href="', $this->getPreviousJumpUrl(), '">...</a></li>';
	
	foreach ($this->getFramePages() as $_page) echo (
		$this->isPageCurrent($_page) ? '
				<li class="current">' . $_page . '</li>' : '
				<li><a href="' . $this->getPageUrl($_page) . '">' . $_page . '</a></li>'
	);
	
	if ($this->canShowNextJump() echo '
				<li><a class="next_jump" href="', $this->getNextJumpUrl(), '">...</a></li>';
		
	if ($this->canShowLast()) echo '
				<li><a class="last" href="', $this->getLastPageUrl(), '">', $this->getLastPageNum(), '</a></li>';

	if (!$this->isLastPage()) echo '
				<li>
					<a
						class="next', ($this->getAnchorTextForNext() ? '' : ' i-next'), '"
						href="', $this->getNextPageUrl(), '"
						title="', $this->__('Next'), '"
					>, (
						$this->getAnchorTextForNext() ?: '
							<img
								src="' . $this->getSkinUrl('images/pager_arrow_right.gif') . '"
								alt="' . $this->__('Next') . '"
								class="v-middle"
							/>'
					),'</a>
				</li>';
			
	echo '
				</ol>
		<!-- .pages --></div>';
	
}

if ($this->getUseContainer() echo '
	</div>';

Code (markup):

Almost half the code...

Really as to your problem though, impossible to diagnose given how little you've given us and how broken it is. I would suggest analyzing your real 'live' copy outputting markup with a tool like firebug or dragonfly to figure out where/what it's inheriting from. You may also be having invalid/improper markup biting you as that can screw up inheritance -- particularly if you fail to close something.

 

Just look for the css rule ".brand-links li" on your css files and replace it with this:
.brand-links li {background: #fff;border: 1px solid #C4C6C8;float: left;text-align: center !important;width: 14px;}

Hope it helps.

 

Hi Ricardo,

That solution fixed the pagination problem, but it messed up the products list. Is there a way to create another css rule just for the pagination list?

 

Keep the old style and add this line:

.catalog-category-view .brand-links li {background: #fff;border: 1px solid #C4C6C8;float: left;text-align: center !important;width: 14px;}

Let me know.

 

It looks somewhat better now, but it's still not the correct height or aligning correctly. Here is what it's supposed to look (If I delete the ".brand -links li" altogether it works properly, but it messes up the products list):

 

Sent you pm.