layout problems with change to sidebox

17 Sep 2007, 09:32

#1

New Zenner

Join Date:: Aug 2007
Posts:: 24
Plugin Contributions:: 0

layout problems with change to sidebox

Hi guys,

URL: http://codebluegroup.co.uk/ios/shop/

I've been developing a new template for Zen Cart with a design given to me for the last week or so, and being completely new to this, I've had the usual problems that I suspect anyone would have.

The main problem at the moment is one of the sideboxes; as dictated in the layout the 'information' sidebox is further most top sidebox which is stretched across the central column (.centralColumn). I've got the layout looking almost there in Firefox (although something isn't stretching far enough vertically to keep the drop shadows at the side) and in IE, the #navBreadCrumb and .centralColumn aren't moving down into the space below the stretched 'information' sidebox.

I'm sure this concerns the CSS elements mentioned, can anyone shed any light on this or why the page's background isn't going all the way to the bottom of the page?

Thanks in advance

17 Sep 2007, 10:57

#2

kobra

Black Belt

Join Date:: Aug 2005
Posts:: 31,500
Plugin Contributions:: 4

Re: layout problems with change to sidebox

Your column widths are not matching the contained box widths and you do appear to be using the right column but it still is rendering as a div/table

try setting these in the admin

admin > config > layout settings > Column Width - Left > to match your > Column Width - Left Boxes

and try turning off the right column

admin > config > layout settings > Column Right Status - Global

See what happens

17 Sep 2007, 11:11

#3

mikeeeeeeey

New Zenner

Join Date:: Aug 2007
Posts:: 24
Plugin Contributions:: 0

Re: layout problems with change to sidebox

Thanks for the reply kobra, I've tried adjusting those settings in the admin section, and they haven't changed much, except I no longer have to use the 'left: 50px' in the CSS for the breadcrumb and the main content and the bread crumb header is a better size now.

Its still as messed up as it was in IE though :blink: grrrr IE! and I think its the 'top: 180px' which is making the page longer than it should be (with the drop shadows) so hopefully if I can find out how position the main content without using 'top' then I think I should be fine.

17 Sep 2007, 11:20

#4

kobra

Black Belt

Join Date:: Aug 2005
Posts:: 31,500
Plugin Contributions:: 4

Re: layout problems with change to sidebox

I think that you have added tables for your dropshadow that are inside the mainwrapper.

You might look at the home page of this site and how the tables for the drop shadow exist outside of the mainwrapper. FF and IE(quirks) measure these differently and may be your issue

17 Sep 2007, 11:32

#5

mikeeeeeeey

New Zenner

Join Date:: Aug 2007
Posts:: 24
Plugin Contributions:: 0

Re: layout problems with change to sidebox

They do exist inside mainWrapper, I'll get rid of them for the time being, but until then do you know what's going on with the centralColumn in IE? I've exhausted everything I can think of.

Thanks for you're continued help btw!

17 Sep 2007, 13:30

#6

kobra

Black Belt

Join Date:: Aug 2005
Posts:: 31,500
Plugin Contributions:: 4

Re: layout problems with change to sidebox

I think that once you remove them it will straighten out - as I am fairly sure this is a realestate issue

17 Sep 2007, 13:46

#7

mikeeeeeeey

New Zenner

Join Date:: Aug 2007
Posts:: 24
Plugin Contributions:: 0

Re: layout problems with change to sidebox

They're out and it's still doing the same in IE... should I be using absolute or relative positioning (if any) for the .centralColumn ?

or is this something to do with the single column aspect of the admin > tools > layout boxes controller ?

17 Sep 2007, 14:06

#8

kobra

Black Belt

Join Date:: Aug 2005
Posts:: 31,500
Plugin Contributions:: 4

Re: layout problems with change to sidebox

relative to the containing div should be sufficient

You should have the items as left column??

Did you set this to be single and code around it?

17 Sep 2007, 14:14

#9

mikeeeeeeey

New Zenner

Join Date:: Aug 2007
Posts:: 24
Plugin Contributions:: 0

Re: layout problems with change to sidebox

If its single or left it doesn't change the way it looks in either browser.
The div's are all relative, I just don't understand why the content won't slide underneath the header. This is so confusing!

17 Sep 2007, 14:19

#10

kobra

Black Belt

Join Date:: Aug 2005
Posts:: 31,500
Plugin Contributions:: 4

Re: layout problems with change to sidebox

Just noticed that you seem to be missing mainWrapper div from your view source Normally it is like this:

<div id="mainWrapper">

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="contentMainWrapper">
  <tr>

Yours looks like this:

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="contentMainWrapper">
  <tr>

Check your files and most probably tpl_main_page.php

So you have no containing div

17 Sep 2007, 14:23

#11

mikeeeeeeey

New Zenner

Join Date:: Aug 2007
Posts:: 24
Plugin Contributions:: 0

Re: layout problems with change to sidebox

I've just had a look and the mainWrapper is there, but there's no table starting tag directly underneath...is that wrong? It looks like this:

[HTML]
<div id="mainWrapper">


<div id="headerWrapper">[/HTML]

17 Sep 2007, 14:28

#12

kobra

Black Belt

Join Date:: Aug 2005
Posts:: 31,500
Plugin Contributions:: 4

Re: layout problems with change to sidebox

Your code looks to be from tpl_header.php and no mainWrappper is there by default it looks like this:

<?php
  // Display all header alerts via messageStack:
  if ($messageStack->size('header') > 0) {
    echo $messageStack->output('header');
  }
  if (isset($_GET['error_message']) && zen_not_null($_GET['error_message'])) {
  echo htmlspecialchars(urldecode($_GET['error_message']));
  }
  if (isset($_GET['info_message']) && zen_not_null($_GET['info_message'])) {
   echo htmlspecialchars($_GET['info_message']);
} else {

}
?>


<!--bof-header logo and navigation display-->
<?php
if (!isset($flag_disable_header) || !$flag_disable_header) {
?>

<div id="headerWrapper">
<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">
    <ul class="back">

tpl_main_page.php has the div in question and this is unless you have made edits and then I would have to see exactly what you changed

?>

<div id="mainWrapper">
<?php
 /**
  * prepares and displays header output
  *
  */

17 Sep 2007, 14:41

#13

mikeeeeeeey

New Zenner

Join Date:: Aug 2007
Posts:: 24
Plugin Contributions:: 0

Re: layout problems with change to sidebox

I've checked both files and they look like your above post, but to be sure I've replaced them with their original files and the page looks exactly the same.

Is it something to do with the CSS in the stylesheet and/or the divs in controls in sideboxes/tpl_information.php?

here's the code for that if it helps and thanks for the help :)

[HTML]
$linksarr = array("shippinginfo","privacy","conditions","contact_us","site_map");

$content = '';
$content .= '<div class="informationMain"><div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent">';
$content .= '<div class="informationHeader"></div>';
$content .= "\n" . '<ul style="margin: 0; padding: 0; list-style-type: none;">' . "\n";
for ($i=0; $i<5; $i++) {
//$content .= '<li>' . $information[$i] . '</li>' . "\n";
$content .= '<div class="infoLink"><a href="index.php?main_page=' . $linksarr[$i] . '"><img src="includes/templates/ios/images/information/' . $i . '.png" /></a></div>' . "\n";
if($i !== 4){
$content .= '<div class="informationSideboxHrs"></div>';
}
}
$content .= '</ul>' . "\n";
$content .= '</div><div class="imageHeader"></div></div>';
[/HTML]

17 Sep 2007, 14:47

#14

kobra

Black Belt

Join Date:: Aug 2005
Posts:: 31,500
Plugin Contributions:: 4

Re: layout problems with change to sidebox

Look at your view source in your browser - there is no mainWrapper div that is rendering

17 Sep 2007, 14:53

#15

kobra

Black Belt

Join Date:: Aug 2005
Posts:: 31,500
Plugin Contributions:: 4

Re: layout problems with change to sidebox

I've checked both files and they look like your above post, but to be sure I've replaced them with their original files and the page looks exactly the same.

If you replaced them both your header would not look as you have it designed

Where(path) did you replace these and are you looking at these?

17 Sep 2007, 15:01

#16

mikeeeeeeey

New Zenner

Join Date:: Aug 2007
Posts:: 24
Plugin Contributions:: 0

Re: layout problems with change to sidebox

I replaced them within the template files - includes/templates/mytemplate/common/

The header background image is defined in the stylesheet so I can change the header design without using those files?

I'm really sorry, but I'm unsure on what you mean about the mainWrapper div. I've managed to put a black border around it so surely it must be rendering?

17 Sep 2007, 15:39

#17

kobra

Black Belt

Join Date:: Aug 2005
Posts:: 31,500
Plugin Contributions:: 4

Re: layout problems with change to sidebox

When viewing your main page in your browser right click in the window and select "view source" and the generated html will be displayed....It is here that the normal location for the mainWrapper is not being rendered and this leads me to belive that these are not from default files

17 Sep 2007, 15:51

#18

mikeeeeeeey

New Zenner

Join Date:: Aug 2007
Posts:: 24
Plugin Contributions:: 0

Re: layout problems with change to sidebox

I've copied the template_default directory, renamed it 'ios' so now this is my new template directory.

The only files I've replaces are css/stylesheet.css, the images folder, and sideboxes/tpl_information.php

These are the only files I have replaced, so other than those there are all default files.

Is it at around line 57 you expect to see the mainWrapper html?

17 Sep 2007, 16:00

#19

kobra

Black Belt

Join Date:: Aug 2005
Posts:: 31,500
Plugin Contributions:: 4

Re: layout problems with change to sidebox

As I posted earlier - By default it should be in between these two lines:

</div>
RIGHT HERE
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="contentMainWrapper">
  <tr>