21 replies [Last post]
ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi

Using techniques from other sources, such as positioniseverything and paul o'b (and they probably from others, such as the css-creator form this forum) I have built a css page layout tool.

The layouts it makes seem to work in IE6, Opera 7.23, NN 7.1 and Fireox 0.8, but what about IE 5.x and IE Mac, or older Mozilla variants, or other browsers.

What SHOULD the tool do:

1. Make xhtml code for either 2 or 3 column design.
2. Page layout is full screen height, expanding if content dictates.
3. Page height determined by tallest column - other columns expand to match.
4. Minimal use of images to achieve effect (ie side columns do NOT use background images, and an image is used for Moziall browsers behind the center column, but not actually IN the center column container.

It is NOT a full width generator.

Loads of options on widths, colors, backgrounds, etc.

Anyway, you get the idea.

For now, I need it testing in other browsers. Particularly, make some code and copy it from the textarea box and try it out. A demo layout of your page is also shown.

The link is here (for now), down the page:

[edit: new address]

http://209.216.241.33/ctindex.php

Thanks for any testing you do!

Trevor

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

New CSS Layout Tool Requires Testing in Other Browsers

Hi ClevaTreva,
I must have missed something :? the "Click here for the generator tool " takes you too a finished layout. I was expecting a form to fill out.
Possibly you are linking to the wrong page http://207.44.137.103/css_variable_border_3_columned_pagemaker.php

Hope that helps

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

New CSS Layout Tool Requires Testing in Other Browsers

Hi

What SHOULD happen is the finished layout opens, and that opens the form which is here:

[edit: new address]

http://209.216.241.33/pagemaker_form.php

That means two windows SHOULD open when you click the orginal link. I just tried it now on my machine and it did just that.

What browser were you using?

It requires java to be enabled, but doesn't use cookies.

Trevor

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

New CSS Layout Tool Requires Testing in Other Browsers

Hi Trevor,
I was using FireFox 0.8, with java enabled.
I have just tried it again in Firefox and still only one window opened.
In IE I get to see the other window.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

New CSS Layout Tool Requires Testing in Other Browsers

Hi

Curious. I tried it with firefox on my local server and it works, but not on the web. I really need to try to make it work another way anyway, I'll look into this.

But, once both pages are opened, they do interact with each other!

Strange.

The ctindex page now has both links on and a note about this strange behavior.

Trevor

d3signmonk3y
d3signmonk3y's picture
Offline
Enthusiast
Toledo, Ohio
Last seen: 19 years 18 weeks ago
Toledo, Ohio
Timezone: GMT-4
Joined: 2003-07-29
Posts: 59
Points: 0

New CSS Layout Tool Requires Testing in Other Browsers

Here are a couple screen shots from IE 5.2.3 on mac OS X 10.2.8.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

New CSS Layout Tool Requires Testing in Other Browsers

Hi Trevor,
Once FireFox has both windows are open they do interact.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

New CSS Layout Tool Requires Testing in Other Browsers

d3signmonk3y wrote:
Here are a couple screen shots from IE 5.2.3 on mac OS X 10.2.8.

Thanks for the reply.

I can see that the problem with the layout for the three column design is probably terminal. I can see what is wrong, the screenshot gives me all the clues I need - thanks Smile . As to the main ctindex page, I am amazed it showed even that, as that page wasn't designed for ANY older browser. The DOM Menu needs DOM support, and the MAC IE isn't supported.

I will note that the design does NOT work with that browser/OS combo on the revised ctindex page uploaded today.

Trevor

LubTex
Offline
newbie
Lubbock TX
Last seen: 18 years 40 weeks ago
Lubbock TX
Timezone: GMT-6
Joined: 2004-02-26
Posts: 2
Points: 0

Safari looks good

It seems to work for Safari on OS X 10.2. I will try to check Mozilla and Firefox as well.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Re: Safari looks good

LubTex wrote:
It seems to work for Safari on OS X 10.2. I will try to check Mozilla and Firefox as well.

Thanks for that reply. I am goping to review the code this weekend to make sure any necessary hacks I missed out are added! I note that Big John has posted a new version of his 3 column layout on his www.positioniseverything.net site too.

Trevor

allan smith
Offline
Enthusiast
Last seen: 11 years 28 weeks ago
Timezone: GMT+1
Joined: 2004-01-20
Posts: 53
Points: 2

New CSS Layout Tool Requires Testing in Other Browsers

I have Safari 1.2 (v125) under OS 10.3.2 layout does not work
image attached
Great tool - but as I use a MAC I'll have to wait for the fix - appreciate you letting me know
I can always test for you on OS9.2,10.1,10.2,10.3 IE5.2 and Safari

Allan Smith
Web Manager
Telford Steam Railway

allan smith
Offline
Enthusiast
Last seen: 11 years 28 weeks ago
Timezone: GMT+1
Joined: 2004-01-20
Posts: 53
Points: 2

oops - missed the attach

here is the safari screen grab

Allan Smith
Web Manager
Telford Steam Railway

allan smith
Offline
Enthusiast
Last seen: 11 years 28 weeks ago
Timezone: GMT+1
Joined: 2004-01-20
Posts: 53
Points: 2

attach problem

cant seem to get attach to work!?
I will put at
http://www.telfordsteamrailway.co.uk/newcss/safari.pdf
this will upload at 18:00 GMT today (Tuesday)

Allan Smith
Web Manager
Telford Steam Railway

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Re: attach problem

allan smith wrote:
cant seem to get attach to work!?
I will put at
http://www.telfordsteamrailway.co.uk/newcss/safari.pdf
this will upload at 18:00 GMT today (Tuesday)

Hi, that gave a 404 at 22:17 GMT.

I have looked at Big John's new version and have grabbed a few ideas.

The result is I have a new version (NOT yet uploaded) that seems to work much better and is smaller in code AND uses only one image to support gecko engined browsers for a basic FULL height layout. The basic layout forces same color for left and right columns, but otherwise looks the same.

As the new layout lends itself better to 3D designs, I am adding 3D appearance support to the tool as we speak. This will allow different colors for the left and right columns, should you want it, but it is intended to allow really cool looking full 3D designs with little effort.

Most importantly, I've added quite a few mac hacks for IE.

Trevor

allan smith
Offline
Enthusiast
Last seen: 11 years 28 weeks ago
Timezone: GMT+1
Joined: 2004-01-20
Posts: 53
Points: 2

404 error

Sorry - family crisis prevented timely upload

Now up

It might be my probem - right click on the 2 images and both want to save as 'untitled.bmp' - advice please

If you want to contact me off-list (via my website contacts page) I will be happy to test on
MAC OSX 10.1, 10.2, 10.3 -
with Netscape 7.1, IE 5.2, Safari 1.2

Mac OS 9.2 with IE - cant remember version of the top of my head

Allan Smith
Web Manager
Telford Steam Railway

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Re: 404 error

allan smith wrote:
Sorry - family crisis prevented timely upload

Now up

It might be my probem - right click on the 2 images and both want to save as 'untitled.bmp' - advice please

If you want to contact me off-list (via my website contacts page) I will be happy to test on
MAC OSX 10.1, 10.2, 10.3 -
with Netscape 7.1, IE 5.2, Safari 1.2

Mac OS 9.2 with IE - cant remember version of the top of my head

Hi Allan

Not sure why the two images aren't giving the correct name in the save dialog, as the server is most certainly feeding the right name. A strange one that, I will look into it and see if I can figure out why.

I can see the image now of the screen shot. There are two faults with it that I can see.

One (the obvious one) is that Safari (which I assume is Gecko engined) isn't rendering the min-height:100% correctly. I may be able to figure this out. This is, however, a bug in the Gecko engine, which requires a hack to fix, if I can.

The missing internal border between the center and right columns has been fixed in the next release.

Trevor

allan smith
Offline
Enthusiast
Last seen: 11 years 28 weeks ago
Timezone: GMT+1
Joined: 2004-01-20
Posts: 53
Points: 2

Missing images

are you sure thd 'fault' is not caused because the images are not saved - so the css can not find them

Allan Smith
Web Manager
Telford Steam Railway

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Re: Missing images

allan smith wrote:
are you sure the 'fault' is not caused because the images are not saved - so the css can not find them

Hi

Well, the images come up as the correct names in IE only, I find. Other browsers treat them differently. I am working on a solution.

I have a sample code output from the new version of the tool. It works OK in latest vers of IE, Opera and Mozilla:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Your Title Here</title>
<style type="text/css" media="all">
html,body{margin:0;padding:0;border:0;height:100%;}
body{
font-family:verdana,arial,sans-serif;
background-color:#EEEEEE;
color:#000000;
min-width:782px;
text-align:center;
}
.clear{
clear:both;
}
#fullheightcontainer{
text-align:left;
margin:0px;
margin-left:auto;
margin-right:auto;
position:relative;
width:782px;
height:100%;
}
.wrapper{
margin:0px;
text-align:left;
width:780px;
min-height:100%;
height:100%;
border:#000000 solid;
border-width:0px 1px;
background:#FFCCCC;
}
body[xmlns] .wrapper{
height:auto;
background:url(mozwrapperbg.png) repeat-y 0;
}
.outer{
position:relative;
margin-left:150px;
width:478px;
border:#000000 solid;
border-width:0px 1px;
background:#ADD8E6;
height:100%;
}
/*** The next style hack for widths are NOT needed if no internal side borders are needed ***/
* html .outer{
width:480px;
w\idth:478px;
}
.float-wrap{
width:478px;
margin-right:-1px;
float:left;
height:100%;
}
.left{
width:152px;
float:left;
position:relative;
margin-left:-151px;
}
*>html .left{width:151px;}
.container-left{
width:150px;
}
.right{
float:left;
width:152px;
margin-right:-150px;
margin-left:-1px;
position:relative;
}
/* \*/
* html .right{
margin-left:0px;
margin-right:-500px;
mar\gin-right:-152px;
}
/* Above style hidden from Mac IE */
.container-right{
/* \*/width:150px; /* Hidden from IE-mac */
margin-left:3px;
}
/* \*/
* html .container-right{
fl\oat:right;
margin-left:2px;
mar\gin-left:0px;
}
/* Above style hidden from Mac IE */
/* \*/
* html .left{margin-right:-3px;}
/* */
.center{
width:478px;
float:right;
/* \*/
margin-left:-1px;
/* Hidden from IE-mac */
}
#clearheadercenter{height:72px}
#clearheaderleft{height:72px}
#clearheaderright{height:72px}
#clearfootercenter{height:52px}
#clearfooterleft{height:52px}
#clearfooterright{height:52px}
#footer{
width:780px;
clear: both;
height:50px;
border:1px solid #000000;
border-top:1px solid #000000;
background-color:#FFFFCC;
text-align:center;
position:absolute;
overflow:hidden;
margin-top:-52px;
}
* html #footer{
\height:52px;
he\ight:50px;
}
#header{
position:absolute;
text-align:center;
top:0px;
width:780px;
height:70px;
background-color:#FFFFCC;
border:1px solid #000000;
border-bottom:1px solid #000000;
overflow:hidden;
}
* html #header{
\height:72px;
he\ight:70px;
}
* html #wrapper,* html #footer,* html #header{
width:782px;
w\idth:780px;
}
div,p{margin:0}
</style>
<!--[if IE]>
<style type="text/css" media="all">
.outer{word-wrap:break-word;}
</style>
<![endif]-->
</head>
<body onload="document.layoutgeneratorform.submit();">
<div id="fullheightcontainer">
<div class="wrapper">
<div class="outer">
<div class="float-wrap">
<div class="center">
<div id="clearheadercenter"></div>
This is the<br />Center<br />
<div id="clearfootercenter"></div>
</div>
<div class="left">
<div id="clearheaderleft"></div>
<div class="container-left">
This is the Left Sidebar<br />
</div>
<div id="clearfooterleft"></div>
</div>
</div>
<div class="right">
<div id="clearheaderright"></div>
<div class="container-right">
This is the Right Sidebar<br />
</div>
<div id="clearfooterright"></div>
</div>
<br class="clear" />
</div>
</div>
<div id="header">
This is the Header (with Fixed Height)
</div>
<div id="footer">
This is the Footer (with Fixed Height)
</div>
</div>
</body>
</html>

Moz browsers need the attached file too. This image changes according to options selected, so don't use it if you change width's borders or colors!

Let me know what you think.

[Edited on 12 March to fix a bug in IE Mac and fix a typo on one line]

Trevor

allan smith
Offline
Enthusiast
Last seen: 11 years 28 weeks ago
Timezone: GMT+1
Joined: 2004-01-20
Posts: 53
Points: 2

new code

great
I'll give it a whirl on th mac

no attchment found

Allan Smith
Web Manager
Telford Steam Railway

allan smith
Offline
Enthusiast
Last seen: 11 years 28 weeks ago
Timezone: GMT+1
Joined: 2004-01-20
Posts: 53
Points: 2

test on MAC

Tested on 10.3.2

Netscape 7.1Header and footer visible with centered text
3 cols all with text extremely close to LH border
Scalin window - whole page scales and footer remains visible at all time

IE 5.2
As above except
RH scroll bar presnt at all times and must scroll window to see footer
Text in RH col strays across into centre col by 1 or 2 pixel - difficult to tell but top bar of T is clearly visible on left of internal margin

Safari - at first I thought it was ok - but when I enlarged the window I found the footer halfwy up the page and 3 cols continuing below
Text position as netscape

remember this is without the image

I cannot get attaches to work - but as I said if you contact me off list via www.telfordsteamrailway.co.uk contact page I can email screen grab to you

or wait till I get home tonight

Allan

Allan Smith
Web Manager
Telford Steam Railway

allan smith
Offline
Enthusiast
Last seen: 11 years 28 weeks ago
Timezone: GMT+1
Joined: 2004-01-20
Posts: 53
Points: 2

oS 9.2.2

I tested on OS 9.2.2 with IE5.1.7 (this is newest version available for OS 9)

Appearance is same os with 5.2 in previous email - except
the outer frame is 'glued' to left hand edge of window

Allan

Allan Smith
Web Manager
Telford Steam Railway

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

New CSS Layout Tool Requires Testing in Other Browsers

Hi All

Just to let you know I've moved server, so the tool is now at this address:

http://209.216.241.33/ctindex.php

It is now at v2.55d and is bug free as far as I know!

Trevor