Fixed Width 1.3.5 - v1.x Store Design & Templates

View New Content

Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

You cannot start a new topic
You cannot reply to this topic

Fixed Width 1.3.5 Rate Topic

baballuci
Senior Member
Members
Join Date: 02-Mar 06
969 posts

Posted 05 October 2007 - 09:52 PM #1

If any one is interested, change in styles.css:

Here is what worked for me. In style.css add the following: (at the top)

div#wrapper {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    top: 0px;
    width:950px; /* set to required site width */
    background-color: #ffffff;
}

In index.tpl add the red parts:

<body>
[COLOR="red"]<div id="wrapper">[/COLOR]

{if 'SKINS_PANEL'|defined}
{include file="demo_skin_selector.tpl"}
{/if}
	<a name="top"></a>
	{* http://blog.html.it/layoutgala/LayoutGala14.html *}
	<div class="header">{include file="top.tpl"}</div>
	{include file="main.tpl"}
	<div class="footer">{include file="bottom.tpl"}</div>
	{include file="common_templates/loading_box.tpl"}

[COLOR="Red"]</div>[/COLOR]
</body>

Charlie

truem
Senior Member
Members
Join Date: 22-Jun 07
263 posts

Posted 06 October 2007 - 06:20 PM #2

I really needed this

tnx

tmhs
Member
Members
Join Date: 23-Oct 07
63 posts

Posted 23 October 2007 - 01:18 PM #3

Strangely this won't work. ie loses left hand columns until it's refreshed ???

I've always used this on sites and never had an issue. Weird ???

Sometimes I use a 'clearfix' fix that slots in as a class

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

It pops in a dot which forces ie to get a grip! lol (that's my non techie term

)

I just need to add class=clearfix in the div to see if it works...

tmhs
Member
Members
Join Date: 23-Oct 07
63 posts

Posted 23 October 2007 - 01:50 PM #4

I added the clearfix to the css file and also wrapped the whole page (within <body> tags in index.tpl) in a div with the right attributes.

Still left hand column dissapears in IE 6 (need to test 6 as most IE users will use it). Press home and it's gone....refresh page and it appears!

Why can't they all just be like Firefox!

body {
    background-color: #ffffff;
    width: 912px;
    margin-left: auto; 
    margin-right: auto;
}

Mentioned in first post should simply work :confused:

tmhs
Member
Members
Join Date: 23-Oct 07
63 posts

Posted 23 October 2007 - 02:36 PM #5

OK...just ignore my stupidness :oops:

I just went back to basics (I've been concentrating for the past years on not using tables) and wrapped a table around it and it works perfectly.

Stupid w3 saying tables should be avoided! hehe

I love em

<body>
<table align="center" width="920" border="0" cellspacing="0" cellpadding="0" style="height: 100%">
  <tr>
    <td>
	
	{if 'SKINS_PANEL'|defined}
{include file="demo_skin_selector.tpl"}
{/if}
	<a name="top"></a>
	{* http://blog.html.it/layoutgala/LayoutGala14.html *}
	<div class="header">{include file="top.tpl"}</div>
	{include file="main.tpl"}
	<div class="footer">{include file="bottom.tpl"}</div>
	{include file="common_templates/loading_box.tpl"}
	
	</td>
  </tr>
</table>
</body>

Simple as that

bholland
Senior Member
Members
Join Date: 16-May 06
129 posts

Posted 24 October 2007 - 04:50 PM #6

tmhs,

You can get it to be a fixed width, you should just add a wrapping element instead of trying to set the width on the body tag. You basically did the when you added that table. Try this:

In your index.tpl file before anything else is included add this:

<div id="wrapper">

Then at the bottom of your index.tpl before the closing of the body tag add:

</div>

Then in your styles.css file add this:


#wrapper { 
	margin: 0 auto;
 	width: 970px;
}

That should work for you,

B

tmhs
Member
Members
Join Date: 23-Oct 07
63 posts

Posted 24 October 2007 - 05:04 PM #7

Cheers fella

I did that first off (thought I'd said :oops:

) but ie6 didn't like it at all. The left column kept dissapearing!

I added the clearfix to the css file and also wrapped the whole page (within <body> tags in index.tpl) in a div with the right attributes.

I had called it contianer but it didn't work. For the first time since I've used a container!

bholland
Senior Member
Members
Join Date: 16-May 06
129 posts

Posted 24 October 2007 - 06:57 PM #8

Ahhh, sorry...I was reading too quickly.

I'll take a look at the CSS of the left column and see what's going on...the joys of IE6.

B

EDIT:

I quickly looked in FireBug and I'm guessing it has to do with the negative margins on the the left & right colum. I would strip out any of the margin properties and the min width property on the inner column.

Let me know if that works (or what havoc it causes).

MikeFold
Senior Member
Members
Join Date: 24-Nov 06
1034 posts

Posted 24 October 2007 - 07:25 PM #9

I have not done a lot of researching 1.3.5 yet...(just dabbling)

I don't see anyone pointing to the 2nd style sheet for IE "exceptions"
styles_ie.css

does this possibly have anything to do with some of the conflicts?

[SIZE="1"]Seamlessly Upgraded to 1.3.5sp4 from 1.3.4sp3
Live: Playboy Collectors Gallery
(Adult)[/SIZE]

[SIZE="2"]LOOKING FOR A FEW COPIES OF THE NEW LITHUANIA PLAYBOY ISSUES...AND COLOMBIA ISSUES.....
FEEL FREE TO Private Message Me....THANKS[/SIZE]

[SIZE="1"]Slightly Modded Default Red | Zardos Lightbox | Sitemap | Multicards Payment Mod |
Cart & Checkout Pages Modified |
[/SIZE]

tmhs
Member
Members
Join Date: 23-Oct 07
63 posts

Posted 24 October 2007 - 07:30 PM #10

Ahhh, sorry...I was reading too quickly.
I quickly looked in FireBug and I'm guessing it has to do with the negative margins on the the left & right colum. I would strip out any of the margin properties and the min width property on the inner column.

Let me know if that works (or what havoc it causes).

It doesn't work and isn't any different to what was first tried really. IE hates it. It's fine on refresh but not when the page first loads. It's a load issue if you ask me

The removal of margins doesn't do anything but wreck the layout.

Anywho...I got it working, like I said above, and I'm not going to tempt fate with IE 6 anymore :lol:

so I'll stick to the table for now. Is IE7 any better? I'm staying clear for now as I find if I can get something to work in IE6 then the world will be happy and most people are probably still using 6. hehe

But I agree with you that a table shouldn't be necessary and the div should work.

Thanks for you efforts fella. It always impresses me when people give their time.

cyraa
Junior Member
Members
Join Date: 12-Oct 07
21 posts

Posted 28 October 2007 - 05:29 AM #11

How can I center the site after I set a fixed width?

baballuci
Senior Member
Members
Join Date: 02-Mar 06
969 posts

Posted 08 November 2007 - 05:11 PM #12

Here is what worked for me. In style.css add the following: (at the top)

div#wrapper {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    top: 0px;
    width:950px; /* set to required site width */
    background-color: #ffffff;
}

In index.tpl add the red parts:

<body>
[COLOR="red"]<div id="wrapper">[/COLOR]

{if 'SKINS_PANEL'|defined}
{include file="demo_skin_selector.tpl"}
{/if}
	<a name="top"></a>
	{* http://blog.html.it/layoutgala/LayoutGala14.html *}
	<div class="header">{include file="top.tpl"}</div>
	{include file="main.tpl"}
	<div class="footer">{include file="bottom.tpl"}</div>
	{include file="common_templates/loading_box.tpl"}

[COLOR="Red"]</div>[/COLOR]
</body>

Charlie

JerrysPaintball
Member
Members
Join Date: 27-Jun 07
60 posts

Posted 08 November 2007 - 09:44 PM #13

I was having a similar problem. The weird thing was that I was able to use the CSS code to set fixed width for the main website, but for the "partner" site, it only worked in firefox... both using the basic template. After toying wth it a bit, I finally wrapped the partner page in a table to make it fixed width.

What I don't understand is why the same code doesn't work consistently on both pages. Probably something else is conflicting on the partner page, but we are squred away now.

1.3.5 about to make the switch...
Free Shipping + Real Time Shipping Mod

btrials
Senior Member
Members
Join Date: 03-Jul 07
195 posts

Posted 26 November 2007 - 01:13 AM #14

Wow baballuci, thank you so much! Your code fixed my sideboxes that were disappearing for no reason. I couldn't figure it out!!!

I think I can fix my site now tonight and sleep with ease

tmhs
Member
Members
Join Date: 23-Oct 07
63 posts

Posted 02 January 2008 - 08:54 AM #15

I went back to a css holder as eventhough IE6 prefered the table IE7 hated it. The div didn't work for me in IE6 but works a treat in IE7 and as IE7 is now the most popular it's the lesser of two evils.

I could never workout why IE6 didn't like the Div as I've used them for years. Oh well....it's great now

shazer7
Member
Members
Join Date: 28-Apr 06
80 posts

Posted 12 March 2008 - 11:50 AM #16

OK...just ignore my stupidness

I just went back to basics (I've been concentrating for the past years on not using tables) and wrapped a table around it and it works perfectly.

Stupid w3 saying tables should be avoided! hehe

I love em
<body>
<table align="center" width="920" border="0" cellspacing="0" cellpadding="0" style="height: 100%">
  <tr>
    <td>
	
	{if 'SKINS_PANEL'|defined}
{include file="demo_skin_selector.tpl"}
{/if}
	<a name="top"></a>
	{* http://blog.html.it/layoutgala/LayoutGala14.html *}
	<div class="header">{include file="top.tpl"}</div>
	{include file="main.tpl"}
	<div class="footer">{include file="bottom.tpl"}</div>
	{include file="common_templates/loading_box.tpl"}
	
	</td>
  </tr>
</table>
</body>
Simple as that

I am trying to do this also what file do I edit?

Current version: 1.3.5-sp1

ThomH
Senior Member
Members
Join Date: 20-Nov 07
1644 posts

Posted 12 March 2008 - 06:27 PM #17

I am trying to do this also what file do I edit?

skins/"your_skin"/customer/index.tpl

WebGraphiq offers a wide range of professionally developed, ready to use CS-Cart add-ons to provide additional functionality and boost your sales. The oldest active CS-Cart add-on development team. -- Since 2006 --

CS-CART ADD-ONS | FREE QUOTE | CS-CART DEVELOPMENT | @webgraphiq

wkress
Member
Members
Join Date: 25-Mar 08
48 posts

Posted 26 March 2008 - 03:11 PM #18

Man ... I've tried both the "Table" solution and the "Wrapper" solution - both work but not for all browsers.

I'm out of options.

Without "Table" or "Wrapper", just the fixed width in the style.css and running IE 6 I get this strange off-set left column (see below) that pops back in place if I just move the cursor over it.

Anyway I'm open to other ideas. It's messen with me.

Posted Image

JesseLeeStringer
Senior Member
Members
Join Date: 11-Aug 06
4127 posts

Posted 26 March 2008 - 03:23 PM #19

Man ... I've tried both the "Table" solution and the "Wrapper" solution - both work but not for all browsers.

I'm out of options.

Without "Table" or "Wrapper", just the fixed width in the style.css and running IE 6 I get this strange off-set left column (see below) that pops back in place if I just move the cursor over it.

Anyway I'm open to other ideas. It's messen with me.

Having visited your website it looks fine, If you'ld prefer change it to the unedited version (the image you displayed) and I'll see what magic I possess. Btw did you add Margin:0px auto to the body tag before? I can't see it atm

I've moved on from CS-Cart to WooC******** - If you need anything I can be of little help.

wkress
Member
Members
Join Date: 25-Mar 08
48 posts

Posted 26 March 2008 - 04:04 PM #20

Jesse:

I tried adding margin:0px auto; to the style.css but no improvement.

You were looking at the current site - I'm working on a new site -

URL -

http://74.52.75.2/~c.../shop/index.php

Have at it!

Nearly Normal Warren

Back to v1.x Store Design & Templates

Fixed Width 1.3.5 Rate Topic

Skin and Language

Execution Stats