Buttons in main pg header

[kburner]

OK. but you need to check your site in IE8.

You are correct -- I can not get IE8 to work when logged in. I even added to stylesheet...

#navMain ul li a {
float: left;
margin-top: 1.2em;
margin-left: 0.1em;
margin-right: 3.5em;
padding: 0 .25em;
width: 100%; /* cancel margin fix for other browsers */
overflow: visible;
}

Works fine in FF. Also, having issues with secure/non-secure because of my social bookmarkers in my header. I have that question in another zencart forum.

Kim

[kburner]

You are correct -- I can not get IE8 to work when logged in. I even added to stylesheet...

#navMain ul li a {
float: left;
margin-top: 1.2em;
margin-left: 0.1em;
margin-right: 3.5em;
padding: 0 .25em;
width: 100%; /* cancel margin fix for other browsers */
overflow: visible;
}

Works fine in FF. Also, having issues with secure/non-secure because of my social bookmarkers in my header. I have that question in another zencart forum.

Kim

On day #3 with buttons not lined up correctly in IE when logged in. Works fine when not logged in.

I went through stylesheet.css with:

.forward
#navmain ul li a
#navmain ul

I have tried all kinds of combinations to get this to work....and it still does not.

Am I in the correct css file? Suggestions?

Kim

[clydejones]

On day #3 with buttons not lined up correctly in IE when logged in. Works fine when not logged in.

I went through stylesheet.css with:

.forward
#navmain ul li a
#navmain ul

I have tried all kinds of combinations to get this to work....and it still does not.

Am I in the correct css file? Suggestions?

Kim

This is from the view page source on your site. The closing </ul> is in the wrong place it should be placed before the closing </div>. I've highlighted it below. Open includes/templates/YOUR_TEMPLATE/common/tpl_header.php and make the correction and see if that helps.

 <div id="navMain">
    <ul class="forward">
    <li><p style="text-align: left; margin-top: -5px; margin-bottom: -5px"><a href="https://www.burnerbooks.com/index.php?main_page=login"><img src="images/Login.gif" border="0" alt=""></a></li>
    <li><p style="text-align: left; margin-top: -5px; margin-bottom: -5px"><a href="https://www.burnerbooks.com/index.php?main_page=account"><img src="images/My_Account.gif" border="0" alt=""></a></li>
  <li><p style="text-align: left; margin-top: -5px; margin-bottom: -5px"><a href="http://www.burnerbooks.com/index.php?main_page=shopping_cart"><img src="images/Shopping_Cart.gif"border="0" alt=""></a></li>  

</div></ul>

[kburner]

This is from the view page source on your site. The closing </ul> is in the wrong place it should be placed before the closing </div>. I've highlighted it below. Open includes/templates/YOUR_TEMPLATE/common/tpl_header.php and make the correction and see if that helps.

 <div id="navMain">
    <ul class="forward">
    <li><p style="text-align: left; margin-top: -5px; margin-bottom: -5px"><a href="https://www.burnerbooks.com/index.php?main_page=login"><img src="images/Login.gif" border="0" alt=""></a></li>
    <li><p style="text-align: left; margin-top: -5px; margin-bottom: -5px"><a href="https://www.burnerbooks.com/index.php?main_page=account"><img src="images/My_Account.gif" border="0" alt=""></a></li>
  <li><p style="text-align: left; margin-top: -5px; margin-bottom: -5px"><a href="http://www.burnerbooks.com/index.php?main_page=shopping_cart"><img src="images/Shopping_Cart.gif"border="0" alt=""></a></li>  

</div></ul>

I changed coding around and still does not work. Coding needed to be in correct place. Thank you.

Which one should I put code into?

.forward
#navmain ul
#navmain ul li a

I have tried a number of combination's..any suggestions.

Thank, Kim

[clydejones]

I changed coding around and still does not work. Coding needed to be in correct place. Thank you.

Which one should I put code into?

.forward
#navmain ul
#navmain ul li a

I have tried a number of combination's..any suggestions.

Thank, Kim

Kim, I probably would have handled things a bit differently.

First I would have positioned the logoWrapper as relative.

Then positioned navmain as absolute and to the right.

Next I would have created a sliding door button for the <li> declarations and included that in the stylesheet instead of having those inline styles

I would have then created individual classes for each button.

.login
.account
.cart

Then the coding in tpl_header.php would have looked like this:

<div id="navMain">
<ul>
<li class="login"><a href="https://www.burnerbooks.com/index.php?main_page=login"><span>login</span></a></li>
<li class="account"><a href="https://www.burnerbooks.com/index.php?main_page=account"><span>My account</span></a></li>
<li class="cart"><a href="http://www.burnerbooks.com/index.php?main_page=shopping_cart"><span>Shopping Cart</span></a></li>
</ul>
</div>

[kburner]

Kim, I probably would have handled things a bit differently.

First I would have positioned the logoWrapper as relative.

Then positioned navmain as absolute and to the right.

Next I would have created a sliding door button for the <li> declarations and included that in the stylesheet instead of having those inline styles

I would have then created individual classes for each button.

.login
.account
.cart

Then the coding in tpl_header.php would have looked like this:

<div id="navMain">
<ul>
<li class="login"><a href="https://www.burnerbooks.com/index.php?main_page=login"><span>login</span></a></li>
<li class="account"><a href="https://www.burnerbooks.com/index.php?main_page=account"><span>My account</span></a></li>
<li class="cart"><a href="http://www.burnerbooks.com/index.php?main_page=shopping_cart"><span>Shopping Cart</span></a></li>
</ul>
</div>

Looks like I am doing it your way...

positioned the logoWrapper as relative.
#logoWrapper {
width: 1000px;
height: 110px;
background-image:url(../images/header_example_four.jpg);
text-align: right;
background-repeat:no-repeat;
margin: 0em;
padding: 0em;
position: relative;
}

navmain as absolute and to the right.
#navMain ul li a {
float: right;
margin-top: 1.2em;
margin-left: 0.1em;
margin-right: 3.5em;
position: absolute;
}

created a sliding door button for the <li> declarations and included that in the stylesheet instead of having those inline styles

???? not sure how to do this???

created individual classes for each button - located at end of stylesheet

.login {
}

.account {
}

.cart{
}


Kim

[clydejones]

Looks like I am doing it your way...

positioned the logoWrapper as relative.
#logoWrapper {
width: 1000px;
height: 110px;
background-image:url(../images/header_example_four.jpg);
text-align: right;
background-repeat:no-repeat;
margin: 0em;
padding: 0em;
position: relative;
}

navmain as absolute and to the right.
#navMain ul li a {
float: right;
margin-top: 1.2em;
margin-left: 0.1em;
margin-right: 3.5em;
position: absolute;
}

created a sliding door button for the <li> declarations and included that in the stylesheet instead of having those inline styles

???? not sure how to do this???

created individual classes for each button - located at end of stylesheet

.login {
}

.account {
}

.cart{
}


Kim

This is what your css should look like:

#navMain {
	margin:0;
	font-size: 1.1em;
	line-height: normal;
	width: 160px;
	position:absolute;
	top:5px;
	right:5px;
}
#navMain ul {margin:0;padding: 0;display:block;list-style:none;}
#navMain li a {
   padding: 8px 0 0 35px;
	height:24px;
   text-decoration:none;
   background: url(../images/tableft.gif) no-repeat left top;
   color:#000;	
}
#navMain ul li a span {
   display:block;
   background: url(../images/tabright.gif) right top;
   padding:2px 15px 2px 6px;
   }
#navMain ul li a:hover {background-position:0% -42px;}
#navMain ul li a:hover span {padding:2px 15px 2px 6px;background-position:100% -42px;}

This is what your modified tpl_header.php should look like:

<div id="navMain">
    <ul>
<?php if ($_SESSION['customer_id']) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><span><?php echo HEADER_TITLE_LOGOFF; ?></span></a></li>
<?php
      } else {
        if (STORE_STATUS == '0') {
?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><span><?php echo HEADER_TITLE_LOGIN; ?><span></a></li>
<?php } } ?>

    <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>

<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><span><?php echo HEADER_TITLE_CART_CONTENTS; ?></span></a></li>
<?php }?>
</ul>
</div>

save your sliding door tableft.gif and tabright.gif to
includes/templates/YOUR_TEMPLATE/images

Attachment 6460
Attachment 6461

[kburner]

This is what your css should look like:

#navMain {
	margin:0;
	font-size: 1.1em;
	line-height: normal;
	width: 160px;
	position:absolute;
	top:5px;
	right:5px;
}
#navMain ul {margin:0;padding: 0;display:block;list-style:none;}
#navMain li a {
   padding: 8px 0 0 35px;
	height:24px;
   text-decoration:none;
   background: url(../images/tableft.gif) no-repeat left top;
   color:#000;	
}
#navMain ul li a span {
   display:block;
   background: url(../images/tabright.gif) right top;
   padding:2px 15px 2px 6px;
   }
#navMain ul li a:hover {background-position:0% -42px;}
#navMain ul li a:hover span {padding:2px 15px 2px 6px;background-position:100% -42px;}

This is what your modified tpl_header.php should look like:

<div id="navMain">
    <ul>
<?php if ($_SESSION['customer_id']) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><span><?php echo HEADER_TITLE_LOGOFF; ?></span></a></li>
<?php
      } else {
        if (STORE_STATUS == '0') {
?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><span><?php echo HEADER_TITLE_LOGIN; ?><span></a></li>
<?php } } ?>

    <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>

<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><span><?php echo HEADER_TITLE_CART_CONTENTS; ?></span></a></li>
<?php }?>
</ul>
</div>

save your sliding door tableft.gif and tabright.gif to
includes/templates/YOUR_TEMPLATE/images

Attachment 6460
Attachment 6461

Hi Clyde,

Been working hard to change two files, but still does not work. Not sure what I am doing wrong.

[clydejones]

Hi Clyde,

Been working hard to change two files, but still does not work. Not sure what I am doing wrong.

Try changing the css with the following:

#navMain ul {margin:0;padding: 0;list-style:none;}
#navMain li a {
padding: 8px 0 0 35px;
display:block;
height:24px;
text-decoration:none;
background: url(../images/tableft.gif) no-repeat left top;
color:#000;
}

You may need to adjust the padding somewhat also.

[clydejones]

Try changing the css with the following:

#navMain ul {margin:0;padding: 0;list-style:none;}
#navMain li a {
padding: 8px 0 0 35px;
display:block;
height:24px;
text-decoration:none;
background: url(../images/tableft.gif) no-repeat left top;
color:#000;
}

You may need to adjust the padding somewhat also.

Don't forget to include the <span> </span> tags.

<div id="navMain">
    <ul>
<?php if ($_SESSION['customer_id']) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><span><?php echo HEADER_TITLE_LOGOFF; ?></span></a></li>
<?php
      } else {
        if (STORE_STATUS == '0') {
?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><span><?php echo HEADER_TITLE_LOGIN; ?></span></a></li>
<?php } } ?>

    <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><soan><?php echo HEADER_TITLE_MY_ACCOUNT; ?></span></a></li>

<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><span><?php echo HEADER_TITLE_CART_CONTENTS; ?></span></a></li>
<?php }?>
</ul>
</div>