[WSG] Never ending cross browser problems! Lets just do IE!
Title: Message OK, so I have started fresh, and this time started testing in FireFox first (the page validates). Everything going well, except that in Firefox there is a space between the top banner and banner underneath, thus breaking up the wording "the right way". I also can't seem to figure out what the whitespace space is that covers the two columns just under the "Domain Extension Lists". Not to bad, just two problems in Firefox. But now when I look at it in Mozilla or Internet Explorer everything is a mess, I am at a loss here, is it even possible to achieve the same result for all 3 browsers? I am guessing its not, so that puts me in a position where I need to choose between the browsers, and I will need to go for IE, or I go back to a table layout, which I am sure will work in all browsers but will make me look like a fool in the Web Standards community, again, I have to choose for number one as I am inbusiness to make money, and my clients pay me not the Web Standards community. UNLESS someone very wise is able to help me out I am tossing up between just IE or Table layout HELP! Taco Fleur - CEOPacific Fox http://www.pacificfox.com.au an industry leader with commercial IT experience since 1994 ** Web Design and Development ** SMS Solutions, including developer API ** Domain Registration, .COM for as low as AUSD$15 a year, .COM.AU for AUSD$50 two years! ** Seamless Merchant integration ** We endorse PayPal, accept payments online now!
Re: [WSG] Styling legends and fieldsets
A little bit on the legend tag and Internet Explorer at the IEBlog http://blogs.msdn.com/ie/archive/2005/10/12/480242.aspx Hope this can be somewhat helpfull to you. Actually it might make you even more frustrated, but it's definitely related and worth the read. Vincent
RE: [WSG] Never ending cross browser problems! Lets just do IE!
Is there someone who can tell me why the widths are not the same in different browsers for this layout? It appears that in IE the second column gets pushed of the screen due to the left column being bigger. Kay, sorry but this looks like a major problem to me in IE. Taco Fleur - CEO Pacific Fox http://www.pacificfox.com.au an industry leader with commercial IT experience since 1994 . ** Web Design and Development ** SMS Solutions, including developer API ** Domain Registration, .COM for as low as AUSD$15 a year, .COM.AU for AUSD$50 two years! ** Seamless Merchant integration ** We endorse PayPal, accept payments online now! -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Kay Smoljak Sent: Wednesday, 19 October 2005 8:46 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Never ending cross browser problems! Lets just do IE! Hi Taco, Here's what I would recommend in future - forget the graphics. Start by working out what layout model you're going to use. Maybe find an example to start with. Next, put your basic boxes in - again, don't worry about the graphics, just colour each div with a background colour so you can see which is which. Simple stuff - masthead, body, footer. Test it cross browser until you have it working the way you want. Then add the next layer of complexity, checking in each browser as you go, and adding graphics last. To be honest, the problems you're having in IE on this site don't look too serious - it looks like the widths aren't quite right. Try making the right hand column div narrower - different browsers tend to calculate widths slightly differently. If you don't test in each browser as you go, you won't know which elements are working and what's causing the problems. -- Kay Smoljak http://kay.zombiecoder.com/ On 10/19/05, Taco Fleur - Pacific Fox [EMAIL PROTECTED] wrote: PS: the url: www.startregistration.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Never ending cross browser problems! Lets just do IE!
Also, the background seems to be missing in IE. Taco Fleur - CEO Pacific Fox http://www.pacificfox.com.au an industry leader with commercial IT experience since 1994 . ** Web Design and Development ** SMS Solutions, including developer API ** Domain Registration, .COM for as low as AUSD$15 a year, .COM.AU for AUSD$50 two years! ** Seamless Merchant integration ** We endorse PayPal, accept payments online now! -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Kay Smoljak Sent: Wednesday, 19 October 2005 8:46 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Never ending cross browser problems! Lets just do IE! Hi Taco, Here's what I would recommend in future - forget the graphics. Start by working out what layout model you're going to use. Maybe find an example to start with. Next, put your basic boxes in - again, don't worry about the graphics, just colour each div with a background colour so you can see which is which. Simple stuff - masthead, body, footer. Test it cross browser until you have it working the way you want. Then add the next layer of complexity, checking in each browser as you go, and adding graphics last. To be honest, the problems you're having in IE on this site don't look too serious - it looks like the widths aren't quite right. Try making the right hand column div narrower - different browsers tend to calculate widths slightly differently. If you don't test in each browser as you go, you won't know which elements are working and what's causing the problems. -- Kay Smoljak http://kay.zombiecoder.com/ On 10/19/05, Taco Fleur - Pacific Fox [EMAIL PROTECTED] wrote: PS: the url: www.startregistration.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Never ending cross browser problems! Lets just do IE!
On 10/19/05, Taco Fleur - Pacific Fox [EMAIL PROTECTED] wrote: Is there someone who can tell me why the widths are not the same in different browsers for this layout? It appears that in IE the second column gets pushed of the screen due to the left column being bigger. Kay, sorry but this looks like a major problem to me in IE. So make it a few pixels narrower, to allow some wiggle room? -- Kay Smoljak http://kay.zombiecoder.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Never ending cross browser problems! Lets just do IE!
Yes, but then the question still remains, why is it different in both browsers? If I do not get to understand why, then I will be allowing 'wiggle room' for some 'unknown reason' for the rest of my career. Taco Fleur - CEO Pacific Fox http://www.pacificfox.com.au an industry leader with commercial IT experience since 1994 . ** Web Design and Development ** SMS Solutions, including developer API ** Domain Registration, .COM for as low as AUSD$15 a year, .COM.AU for AUSD$50 two years! ** Seamless Merchant integration ** We endorse PayPal, accept payments online now! -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Kay Smoljak Sent: Wednesday, 19 October 2005 9:21 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Never ending cross browser problems! Lets just do IE! On 10/19/05, Taco Fleur - Pacific Fox [EMAIL PROTECTED] wrote: Is there someone who can tell me why the widths are not the same in different browsers for this layout? It appears that in IE the second column gets pushed of the screen due to the left column being bigger. Kay, sorry but this looks like a major problem to me in IE. So make it a few pixels narrower, to allow some wiggle room? -- Kay Smoljak http://kay.zombiecoder.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Never ending cross browser problems! Lets just do IE!
Got it, http://www.positioniseverything.net/explorer/doubled-margin.html Cheers. Taco Fleur - CEO Pacific Fox http://www.pacificfox.com.au an industry leader with commercial IT experience since 1994 . ** Web Design and Development ** SMS Solutions, including developer API ** Domain Registration, .COM for as low as AUSD$15 a year, .COM.AU for AUSD$50 two years! ** Seamless Merchant integration ** We endorse PayPal, accept payments online now! -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of James Gollan Sent: Wednesday, 19 October 2005 9:29 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Never ending cross browser problems! Lets just do IE! There are a variety of issues in IE with these types of layouts. Most of them can be fixed using a couple of rules. The first thing that I would be checking is putting a display:inline declaration on all floated columns. www.positioniseverything.net is one of the best sources of information on IE specific bugs, although I notice now that alot of their articles require a subscription. Taco Fleur - Pacific Fox wrote: Is there someone who can tell me why the widths are not the same in different browsers for this layout? It appears that in IE the second column gets pushed of the screen due to the left column being bigger. Kay, sorry but this looks like a major problem to me in IE. Taco Fleur - CEO Pacific Fox http://www.pacificfox.com.au an industry leader with commercial IT experience since 1994 . ** Web Design and Development ** SMS Solutions, including developer API ** Domain Registration, .COM for as low as AUSD$15 a year, .COM.AU for AUSD$50 two years! ** Seamless Merchant integration ** We endorse PayPal, accept payments online now! -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Kay Smoljak Sent: Wednesday, 19 October 2005 8:46 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Never ending cross browser problems! Lets just do IE! Hi Taco, Here's what I would recommend in future - forget the graphics. Start by working out what layout model you're going to use. Maybe find an example to start with. Next, put your basic boxes in - again, don't worry about the graphics, just colour each div with a background colour so you can see which is which. Simple stuff - masthead, body, footer. Test it cross browser until you have it working the way you want. Then add the next layer of complexity, checking in each browser as you go, and adding graphics last. To be honest, the problems you're having in IE on this site don't look too serious - it looks like the widths aren't quite right. Try making the right hand column div narrower - different browsers tend to calculate widths slightly differently. If you don't test in each browser as you go, you won't know which elements are working and what's causing the problems. -- Kay Smoljak http://kay.zombiecoder.com/ On 10/19/05, Taco Fleur - Pacific Fox [EMAIL PROTECTED] wrote: PS: the url: www.startregistration.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Never ending cross browser problems! Lets just do IE!
Background bug solved, only thing left is the space between the top banner
and the one underneath, there is a one or two pixel space breaking up the
words The right way and only in Mozilla.
#content #banner_main
{
margin: 0px 30px 0px 30px;
padding: 10px 0px 0px 0px;
}
#content #banner_secondary
{
margin: 0px 30px 0px 30px;
}
div id=banner_mainimg src=/_resource/image/banner_main01.gif alt=
width=172 height=112img src=/_resource/image/banner_main02.jpg
alt= width=551 height=112/divdiv id=banner_secondaryimg
src=/_resource/image/banner_secondary01.gif alt= width=364
height=116img src=/_resource/image/banner_secondary02.gif alt=
width=359 height=116/div
Taco Fleur - CEO
Pacific Fox http://www.pacificfox.com.au
an industry leader with commercial IT experience since 1994 .
** Web Design and Development
** SMS Solutions, including developer API
** Domain Registration, .COM for as low as AUSD$15 a year, .COM.AU for
AUSD$50 two years!
** Seamless Merchant integration
** We endorse PayPal, accept payments online now!
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Taco
Fleur - Pacific Fox
Sent: Wednesday, 19 October 2005 9:44 PM
To: wsg@webstandardsgroup.org
Subject: RE: [WSG] Never ending cross browser problems! Lets
just do IE!
Now that's some good feedback, you beauty!
That worked, don't know why, but it worked, if you got a link
that explain the reasoning behind this, that would be great,
in the meantime I'll see if I can find something about it.
That leaves me only with a couple of little bugs, the main
one being the background with the shadows on both sides not
showing up in IE, the one on the #content.
Taco Fleur - CEO
Pacific Fox http://www.pacificfox.com.au
an industry leader with commercial IT experience since 1994 .
** Web Design and Development
** SMS Solutions, including developer API
** Domain Registration, .COM for as low as AUSD$15 a year,
.COM.AU for AUSD$50 two years!
** Seamless Merchant integration
** We endorse PayPal, accept payments online now!
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of James Gollan
Sent: Wednesday, 19 October 2005 9:29 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Never ending cross browser problems! Lets
just do IE!
There are a variety of issues in IE with these types of
layouts. Most of
them can be fixed using a couple of rules. The first thing
that I would
be checking is putting a display:inline declaration on all floated
columns. www.positioniseverything.net is one of the best sources of
information on IE specific bugs, although I notice now that alot of
their articles require a subscription.
Taco Fleur - Pacific Fox wrote:
Is there someone who can tell me why the widths are not the same in
different browsers for this layout? It appears that in IE
the second
column gets pushed of the screen due to the left column
being bigger.
Kay, sorry but this looks like a major problem to me in IE.
Taco Fleur - CEO
Pacific Fox http://www.pacificfox.com.au
an industry leader with commercial IT experience since 1994 .
** Web Design and Development
** SMS Solutions, including developer API
** Domain Registration, .COM for as low as AUSD$15 a year,
.COM.AU for
AUSD$50 two years!
** Seamless Merchant integration
** We endorse PayPal, accept payments online now!
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Kay Smoljak
Sent: Wednesday, 19 October 2005 8:46 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Never ending cross browser problems! Lets
just do IE!
Hi Taco,
Here's what I would recommend in future - forget the
graphics. Start
by working out what layout model you're going to use.
Maybe find an
example to start with.
Next, put your basic boxes in - again, don't worry about the
graphics, just colour each div with a background colour
so you can
see which is which. Simple stuff - masthead, body,
footer. Test it
cross browser until you have it working the way you want.
Then add
the next layer of complexity, checking in each browser as you go,
and adding graphics last.
To be honest, the problems you're having in IE on this site don't
look too serious - it looks like the widths aren't quite
right. Try
making the right hand column div narrower - different
browsers tend
to calculate widths slightly differently.
If you don't test in each browser as you go, you won't know which
elements are working and what's causing the problems.
--
Kay Smoljak
http://kay.zombiecoder.com/
On 10/19/05, Taco Fleur - Pacific Fox [EMAIL PROTECTED]
wrote:
PS: the url: www.startregistration.com
**
The
Re: [WSG] Never ending cross browser problems! Lets just do IE!
Taco Fleur - Pacific Fox or I go back to a table layout, which I am sure will work in all browsers but will make me look like a fool in the Web Standards community, --- Now that's some good feedback, you beauty! That worked, don't know why, but it worked, if you got a link that explain the reasoning behind this, that would be great, in the meantime I'll see if I can find something about it. See? There's never any need to go back to table layouts :-) -- C Montoya rdpdesign.com ... liquid.rdpdesign.com ... montoya.rdpdesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Re: digest for wsg@webstandardsgroup.org
Original message sent on the Wed, 19 Oct 2005 22:29:49 1000 by wsg@webstandardsgroup.org ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** In evidence piece of your code containig images element definition div id=banner_main img src=/_resource/image/banner_main01.gif alt= width=172 height=112 img src=/_resource/image/banner_main02.jpg alt= width=551 height=112 /div div id=banner_secondary img src=/_resource/image/banner_secondary01.gif alt= width=364 height=116 img src=/_resource/image/banner_secondary02.gif alt= width=359 height=116 /div Right, IMHO in this case you don't need 2 division so what happen if you close all the four images in the same division ? Give a me a feedback Regards Morpheus ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Never ending cross browser problems! Lets just do IE!
Taco Fleur - Pacific Fox wrote: PS: the url: www.startregistration.com http://www.startregistration.com OK, so I have started fresh, and this time started testing in FireFox first (the page validates). Everything going well, except that in Firefox there is a space between the top banner and banner underneath, thus breaking up the wording the right way. I also can't seem to figure out what the whitespace space is that covers the two columns just under the Domain Extension Lists. Not to bad, just two problems in Firefox. But now when I look at it in Mozilla or Internet Explorer everything is a mess, I am at a loss here, is it even possible to achieve the same result for all 3 browsers? I am guessing its not, so that puts me in a position where I need to choose between the browsers, and I will need to go for IE, or I go back to a table layout, which I am sure will work in all browsers but will make me look like a fool in the Web Standards community, again, I have to choose for number one as I am in business to make money, and my clients pay me not the Web Standards community. UNLESS someone very wise is able to help me out I am tossing up between just IE or Table layout HELP! *Taco Fleur *- CEO Pacific Fox http://www.pacificfox.com.au http://www.pacificfox.com.au/ an industry leader with commercial IT experience since 1994 … ** Web Design and Development ** SMS Solutions, including developer API ** Domain Registration, .COM for as low as AUSD$15 a year, .COM.AU for AUSD$50 two years! ** Seamless Merchant integration ** We endorse *PayPal https://www.paypal.com/au/mrb/pal=BYLS5532RWQWS*, accept payments online now! Don't give up just yet. It is very possible to get identical results in all major browsers, even without all the hacks some people love employing. You're pretty close right now. There's a couple minor issues, but they mostly come from you laying out your background images the way you would with tables as a habit. I remember the same frustrations not too long ago. As you said, your client and the payment you'll receive is number one, especially if you need the money. I'm sure I'll be flamed for that statement, but reality is reality. If you go through my portfolio, you'll find stuff that uses tables and some that don't, it all depends on the situation. In real world business, things can't always be perfect. We strive for perfection. I ALWAYS try to use pure CSS, for my layouts, and as I grow as a developer, I get better and better at it, even when making my mockups in photoshop, I already am planning how the layout will be coded up. You'll get to that point too as long as you always TRY to get it perfect. Only trial and error will teach you about the browser bugs and how to resolve them. Now get that site done and get paid! Joseph R. B. Taylor Sites by Joe, LLC 408 Route 47 South Cape May Court House, NJ 08210 (609) 335-3076 http://sitesbyjoe.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Re: digest for wsg@webstandardsgroup.org
2005/10/19, [EMAIL PROTECTED] [EMAIL PROTECTED]: Original message sent on the Wed, 19 Oct 2005 22:29:49 1000 by wsg@webstandardsgroup.org ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** In evidence piece of your code containig images element definition div id=banner_main img src=/_resource/image/banner_main01.gif alt= width=172 height=112 img src=/_resource/image/banner_main02.jpg alt= width=551 height=112 /div div id=banner_secondary img src=/_resource/image/banner_secondary01.gif alt= width=364 height=116 img src=/_resource/image/banner_secondary02.gif alt= width=359 height=116 /div Right, IMHO in this case you don't need 2 division so what happen if you close all the four images in the same division ? Give a me a feedback Regards Morpheus ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** hmm I'm not sure what are you talking about?! ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Styling legends and fieldsets
It depends how you want to style it mostly times you can whip moz and IE into shape (with margin, position, and padding) but I've always found Opera to be problematic. Usually I've had to revisit the visual design. Make a case that a form is a special information object (e.g. interactive) where it's constiuents need to be treated as a single unit, thus form elements need to be differentiated (visually) from the normal flow of the page. Legends aren't headings (in relation to the page), but labels that summarise a collection of form controls. kind regards Terrence Wood. Mike Brown said: This really is a rhetorical question born of frustration, but why is the styling of legends and fieldsets so bad across browsers? ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Styling legends and fieldsets (Out of office until Nov 1)
Hello, I am out of the office until Nov 1. I will have limited access to email so for any urgent queries please contact [EMAIL PROTECTED] on (04) 474 8884. Thanks, Andy wsg 10/20/05 08:43 It depends how you want to style it mostly times you can whip moz and IE into shape (with margin, position, and padding) but I've always found Opera to be problematic. Usually I've had to revisit the visual design. Make a case that a form is a special information object (e.g. interactive) where it's constiuents need to be treated as a single unit, thus form elements need to be differentiated (visually) from the normal flow of the page. Legends aren't headings (in relation to the page), but labels that summarise a collection of form controls. kind regards Terrence Wood. Mike Brown said: This really is a rhetorical question born of frustration, but why is the styling of legends and fieldsets so bad across browsers? ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Never ending cross browser problems! Lets just do IE!
Yes that was it, thanks a million guys.. I could not have done it without
your help.
Taco Fleur - CEO
Pacific Fox http://www.pacificfox.com.au
an industry leader with commercial IT experience since 1994 .
** Web Design and Development
** SMS Solutions, including developer API
** Domain Registration, .COM for as low as AUSD$15 a year, .COM.AU for
AUSD$50 two years!
** Seamless Merchant integration
** We endorse PayPal, accept payments online now!
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Bert Doorn
Sent: Wednesday, 19 October 2005 10:43 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Never ending cross browser problems! Lets
just do IE!
G'day
Background bug solved, only thing left is the space between the top
banner and the one underneath, there is a one or two pixel space
breaking up the words The right way and only in Mozilla.
The problem is that by default, images (in Mozilla) have a
vertical-align of baseline, which leaves a bit of a gap.
Try adding: #content img { vertical-align: top; }
...or anything other than baseline.
Regards
--
Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] Never ending cross browser problems! Lets just do IE!
In Mozilla the space at the bottom of the page does not appear, anyone any idea why in Mozilla its gone and in IE its there just where I want it? Taco Fleur - CEO Pacific Fox http://www.pacificfox.com.au an industry leader with commercial IT experience since 1994 . ** Web Design and Development ** SMS Solutions, including developer API ** Domain Registration, .COM for as low as AUSD$15 a year, .COM.AU for AUSD$50 two years! ** Seamless Merchant integration ** We endorse PayPal, accept payments online now! ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] liquid faux columns
Hi All
I'm working on a project in its initial stages and thought about using a
simple background image to create flexible columns. Here's a sketch:
| |
| |
| |
| |
Sounds simple enough? However, I'd like the columns to be flexible. So, my
first thought was to create two background images, one for the right and one
for the left and apply them to the div and another element. But that doesn't
sound like the best idea, I still need them to vary their distances. Here's
my next idea: create a single background image of a line. Apply it as the
background with a style like this:
#targeted-div {background: url(line.gif} 33% 0 repeat-y;}
and just for simplicity
#inner-div {background: url(line.gif} 66% 0 repeat-y;}
I'd try this out right now, but I'm editor less at this moment.
Has anyone tried something like this? Do you have any suggestions? Wouldn't
it be nice if we could use the new CSS properties for multiple backgrounds?
Thanks
Ted
www.tdrake.net
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] liquid faux columns
Hi Ted,
I haven't tried it out, but at WE05 in one of the presentations there was
images given a percentage width for fluididity. Check it out:
http://we05.com/podcast/ Russ Weakley's one.
I guess you could apply it to backgrounds too??? I've been meaning to
try it myself.
But yes, it will be LOVELY when we can have multiple backgrounds!!
Rachel
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of Ted Drake
Sent: Thursday, 20 October 2005 12:02 p.m.
To: wsg@webstandardsgroup.org
Subject: [WSG] liquid faux columns
Hi All
I'm working on a project in its initial stages and thought about using a
simple background image to create flexible columns. Here's a sketch:
| |
| |
| |
| |
Sounds simple enough? However, I'd like the columns to be flexible. So, my
first thought was to create two background images, one for the right and one
for the left and apply them to the div and another element. But that doesn't
sound like the best idea, I still need them to vary their distances. Here's
my next idea: create a single background image of a line. Apply it as the
background with a style like this:
#targeted-div {background: url(line.gif} 33% 0 repeat-y;}
and just for simplicity
#inner-div {background: url(line.gif} 66% 0 repeat-y;}
I'd try this out right now, but I'm editor less at this moment.
Has anyone tried something like this? Do you have any suggestions? Wouldn't
it be nice if we could use the new CSS properties for multiple backgrounds?
Thanks
Ted
www.tdrake.net
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] liquid faux columns
Ted Drake wrote:
Sounds simple enough? However, I'd like the columns to be flexible.
So, my first thought was to create two background images, one for the
right and one for the left and apply them to the div and another
element. But that doesn't sound like the best idea, I still need them
to vary their distances. Here's my next idea: create a single
background image of a line. Apply it as the background with a style
like this: #targeted-div {background: url(line.gif} 33% 0 repeat-y;}
and just for simplicity
#inner-div {background: url(line.gif} 66% 0 repeat-y;}
I'd try this out right now, but I'm editor less at this moment.
Has anyone tried something like this? Do you have any suggestions?
Wouldn't it be nice if we could use the new CSS properties for
multiple backgrounds?
Hi Ted,
Due to poupular demand ;), I've implemented faux-columns techniques on a
few liquid layouts here:
http://www.tjkdesign.com/articles/liquid.asp (see thumbnails at the bottom
of the document).
% values match, which mean 20% of an image will be positionned in relation
to the same percentage for the element (background).
Thierry | www.TJKDesign.com
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] liquid faux columns
Hi Terry,
The last layout is a bit off in firefox 1.5beta for me.
Well, maybe a bit more than a bit. The righ div is overlapping the center.
Thanks
ted
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of Thierry Koblentz
Sent: Wednesday, October 19, 2005 5:12 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] liquid faux columns
Ted Drake wrote:
Sounds simple enough? However, I'd like the columns to be flexible.
So, my first thought was to create two background images, one for the
right and one for the left and apply them to the div and another
element. But that doesn't sound like the best idea, I still need them
to vary their distances. Here's my next idea: create a single
background image of a line. Apply it as the background with a style
like this: #targeted-div {background: url(line.gif} 33% 0 repeat-y;}
and just for simplicity
#inner-div {background: url(line.gif} 66% 0 repeat-y;}
I'd try this out right now, but I'm editor less at this moment.
Has anyone tried something like this? Do you have any suggestions?
Wouldn't it be nice if we could use the new CSS properties for
multiple backgrounds?
Hi Ted,
Due to poupular demand ;), I've implemented faux-columns techniques on a
few liquid layouts here:
http://www.tjkdesign.com/articles/liquid.asp (see thumbnails at the bottom
of the document).
% values match, which mean 20% of an image will be positionned in relation
to the same percentage for the element (background).
Thierry | www.TJKDesign.com
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] liquid faux columns
Hi Ted,
Here is an example:
http://www.maxdesign.com.au/presentation/liquid-layouts/background.htm
HTH
Russ
Sounds simple enough? However, I'd like the columns to be flexible. So, my
first thought was to create two background images, one for the right and one
for the left and apply them to the div and another element. But that doesn't
sound like the best idea, I still need them to vary their distances. Here's
my next idea: create a single background image of a line. Apply it as the
background with a style like this:
#targeted-div {background: url(line.gif} 33% 0 repeat-y;}
and just for simplicity
#inner-div {background: url(line.gif} 66% 0 repeat-y;}
I'd try this out right now, but I'm editor less at this moment.
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] liquid faux columns
Ted Drake wrote: Hi Terry, The last layout is a bit off in firefox 1.5beta for me. Well, maybe a bit more than a bit. The righ div is overlapping the center. Thanks Hi Ted, I know, I do mention it on the page. But it's not a problem with the layout, it's a Gecko bug [1]. I don't rush on last builts ;) it's Alex Robinson who warned me about it. [1] https://bugzilla.mozilla.org/show_bug.cgi?id=312777 Thierry | www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] liquid faux columns
From: Ted Drake [EMAIL PROTECTED] Hi All I'm working on a project in its initial stages and thought about using a simple background image to create flexible columns. Here's a sketch: Hi Ted, It's probably a toss of the dice in determining if fewer users have images or javascript disabled, and since this is not a mission critical behavior, a scripted solution might be advantageous - if not more flexible: http://www.projectseven.com/tutorials/css/pvii_columns/ Hope it helps (and hope it doesn't start a holy war :-) Al Sparber PVII http://www.projectseven.com Designing with CSS is sometimes like barreling down a crumbling mountain road at 90 miles per hour secure in the knowledge that repairs are scheduled for next Tuesday. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Never ending cross browser problems! Lets just do IE!
On 10/19/05, Taco Fleur - Pacific Fox [EMAIL PROTECTED] wrote: I am at a loss here, is it even possible to achieve the same result for all 3 browsers? Hi Taco We web developers are the only people who will view a site across multiple browsers simultaneously. Most other visitors will hit it with their favourite browser and they won't know that their is a 3px gap in some other browser. The answer here is to be cool, stay smooth and let go of the per pixel mentality or it will drive us nuts. I remember Russ (I think) once said he had some visitors to a site using Some Ancient Piece of Cruft 4.x and they got a plain vanilla site. To them it worked perfectly and they didn't care (or know) that there was a completely different layout in a browser they had never heard of. The only exception to the rule is if the bug breaks the layout in a major way so that the content becomes inedible to our users (ermmm peers). Then it definitely needs to be fixed. Cheers James
