Breadcrumb trail background to far to right

[jhande]

I am working on a fresh install of osC 2.3.3 on my XAMPP Localhost.

 

The background bar image goes past the right column edge (about 10px).

 

I have checked using Firefox and I can't find anything that could be causing it.

 

I double checked my files and can't find anything wrong.

 

Any ideas where to look?

[PupStar]

open catalog/ext/960gs/960_24_col.css and search for

 

grid_24{width:950px}

 

change this at your peril as I do not fully understand the 960 grid system myself and just muddle through lol

[jhande]

Thank you Mark, I will give it a try.

[multimixer]

I would not change anything in the 960 grid css file. Any change to the rules for class grid_24 will affect the store all over and break the layout.

 

css is "cascading" that mean, that any rules that come later in the pageload process for the same object will overwrite the previous rules. You can leave any existing css files in peace and add your new rules to your own css file. This can be the default catalog/stylesheet.css or any other custom css file you want to include.

 

At the same time, you need to be specific and target exactly the element you want to style

 

To the original question:

 

The "breadcrumb" area is located in file catalog/includes/header.php and look like this

 

<div class="grid_24 ui-widget infoBoxContainer">
 <div class="ui-widget-header infoBoxHeading"><?php echo '  ' . $breadcrumb->trail(' » '); ?></div>
</div>

 

You can see it is wrapped into class "grid_24". This class gives a width of 950 pixels + a margin of 5 pixels to the left and right. Same happens with the other elements, like the right column that is wrapped into "grid_4" class and also has a margin of 5px left and right

 

According to the grid system, the issue you show on the image should not be, since it exist, it must be caused by something you did. That is one more reason not to change the grid system but to look for the reason why your layout is not same as the defaullt.

 

From the image it looks like the breadcrumb has not the 5px on the left/right. It's impossible to say something for sure, but it could be that you added "alpha" and "omega" classes to the breadcrumb div, or a fixed width, or a padding to it in the stylesheet etc

 

You need to examine all rules that apply to that div, disable them 1 by 1 till things go to normal again.

[jhande]

Thank you George for the reply and helpful info.

 

I have not changed anything in any stylesheets yet, or any classes in files.

 

I did change an little bit of code for the Header Shortcut Buttons, just so certain ones will show up depending on where a person is logged in or not.

 

Below is the original bit of code before I changed it:

<div id="header" class="grid_24">
 <div id="storeLogo"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'store_logo.png', STORE_NAME) . '</a>'; ?></div>
 <div id="headerShortcuts">
<?php
 echo tep_draw_button(HEADER_TITLE_CART_CONTENTS . ($cart->count_contents() > 0 ? ' (' . $cart->count_contents() . ')' : ''), 'cart', tep_href_link(FILENAME_SHOPPING_CART)) .
   tep_draw_button(HEADER_TITLE_CHECKOUT, 'triangle-1-e', tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL')) .
   tep_draw_button(HEADER_TITLE_MY_ACCOUNT, 'person', tep_href_link(FILENAME_ACCOUNT, '', 'SSL'));
 if (tep_session_is_registered('customer_id')) {
   echo tep_draw_button(HEADER_TITLE_LOGOFF, null, tep_href_link(FILENAME_LOGOFF, '', 'SSL'));
 }
?>
 </div>
<script type="text/javascript">
 $("#headerShortcuts").buttonset();
</script>
</div>
<div class="grid_24 ui-widget infoBoxContainer">

 

Here is what I changed it to:

<div id="header" class="grid_24">
 <div id="storeLogo"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'store_logo.png', STORE_NAME) . '</a>'; ?></div>
 <div id="headerShortcuts">
<?php
 if (tep_session_is_registered('customer_id')) {
   echo tep_draw_button(HEADER_TITLE_CHECKOUT, 'triangle-1-e', tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL')) .
  tep_draw_button(HEADER_TITLE_MY_ACCOUNT, 'person', tep_href_link(FILENAME_ACCOUNT, '', 'SSL')) .
  tep_draw_button(HEADER_TITLE_LOGOFF, null, tep_href_link(FILENAME_LOGOFF, '', 'SSL'));
   } else {
 echo tep_draw_button(HEADER_TITLE_LOGIN, null, tep_href_link(FILENAME_LOGIN, '', 'SSL')) .
   tep_draw_button(HEADER_TITLE_CREATE_ACCOUNT, null, tep_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL'));
 }
?>
 </div>
<script type="text/javascript">
 $("#headerShortcuts").buttonset();
</script>
</div>
<div class="grid_24 ui-widget infoBoxContainer">

 

Guess I'll change that back to the original and see what happens. But I can not see why that should effect it (maybe I'm missing something?).

[jhande]

Well I reverted back to the original header.php file and I still have the issue.

 

Uhm... I did alter the breadcrumb trail just to delete the "Top" link and changed Catalog to Home.

 

I'll keep searching or better yet replace any files I edited back to originals (which hasn't been many).

[jhande]

Dang...

 

My bad :blush:

 

Thank you George for pointing me in kind of the right direction.

 

I was given a tip to edit my stylesheet to add space between the infoboxes. :-

 

Although it added space it also pushed the background image.

[PupStar]

I was given a tip to edit my stylesheet to add space between the infoboxes. :-

 

Although it added space it also pushed the background image.

 

hands up in the air, my fault sorry :'(

 

rookie mistake doh! :boom:

 

in my own defense lol I always remove the breadcrumb from the header :kiss:

 

Mark

[jhande]

No problem Mark.

 

I appreciate the help. :thumbsup: