RE: [WSG] Win IE hacks -- Please help!

[Janelle Clemens]

Hi Ben.   I tried your code but it is not giving what I need.  It's a design
thing.   Not my design as we have designers that are designing the
templates.   My job is to make the html look like their comps.   Here are
the examples:

http://www.sgi.com/tempie.html

The first is your code.   The second is divs using float left.  The third is
display: table-cell;  (the third looks perfect in Firefox).

I need the borders of all 3 cells to match up.   Like I said it is a design
thing.   So far my best solution is a simple table giving each cell the
background image that creates the border. 

Do you know if IE7 will acknowledge the display value table-cell?

Thanks for your help by the way.
:-)



-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of Ben Curtis
Sent: Wednesday, August 17, 2005 9:50 AM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Win IE hacks -- Please help!


On Aug 16, 2005, at 9:45 PM, Janelle Clemens wrote:

> Thanks Ben.  Unfortunately it is not for tabular data but page  
> layout.   But
> let me clarify that.  The main template (topnav, sidenav, footer) is 
> in a tabless format and validated.  The content area will have a 2 
> row,
> 3 column
> layout.   Each cell will contain content, like highlights or list of
> products, but not relate to eachother in a tabular fashion.   
> However each
> cell has a bottom border that need to match up so if one cell expands 
> in
> height I need the rest to expand at the same rate.   Only a table  
> can give
> this or display: table-cell.


I think your previous training with tables has taught you to look at things
on a page, instead of things being properties of the content.  
For example:

- you see that the bottom borders of two cells in one row need to line up on
the page

- I see that there are two equally important content areas which are
themselves related; I need to illustrate these relationships by placing the
content areas side by side, and making them visually take up the same space
as each other.

Coding XHTML+CSS is much easier when you look at the semantics first.  
They share a bottom border. Why? What does this mean? It means they are a
group.


 div.blockContent {
 float:left;
 width:100%;
 border-bottom:2px solid #000;
 }
 div.blockContent div {
 float:left;
 width:50%;
 }



 blah blah blah
 blah blah blah blah blah blah blah blah blah blah blah blah


 blah blah blah blah blah blah blah blah blah blah blah blah
 blah blah blah


Notice: the borders matching up on the page indicate that the "cells"  
are related, and since the border is the relationship, the border property
gets assigned to the element that relates them -- the parent div.

(The "float:left;" on the parent div is just so that it stretches to enclose
all of the floating children. Since the width is 100%, it has no other
effect.)

-- 

 Ben Curtis : webwright
 bivia : a personal web studio
 http://www.bivia.com
 v: (818) 507-6613




**
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] Win IE hacks -- Please help!

[Ben Curtis]

On Aug 16, 2005, at 9:45 PM, Janelle Clemens wrote:

Thanks Ben.  Unfortunately it is not for tabular data but page  
layout.   But
let me clarify that.  The main template (topnav, sidenav, footer)  
is in a
tabless format and validated.  The content area will have a 2 row,  
3 column

layout.   Each cell will contain content, like highlights or list of
products, but not relate to eachother in a tabular fashion.   
However each
cell has a bottom border that need to match up so if one cell  
expands in
height I need the rest to expand at the same rate.   Only a table  
can give

this or display: table-cell.



I think your previous training with tables has taught you to look at  
things on a page, instead of things being properties of the content.  
For example:


- you see that the bottom borders of two cells in one row need to  
line up on the page


- I see that there are two equally important content areas which are  
themselves related; I need to illustrate these relationships by  
placing the content areas side by side, and making them visually take  
up the same space as each other.


Coding XHTML+CSS is much easier when you look at the semantics first.  
They share a bottom border. Why? What does this mean? It means they  
are a group.



div.blockContent {
float:left;
width:100%;
border-bottom:2px solid #000;
}
div.blockContent div {
float:left;
width:50%;
}



blah blah blah
blah blah blah blah blah blah blah blah blah blah blah  
blah



blah blah blah blah blah blah blah blah blah blah blah  
blah

blah blah blah


Notice: the borders matching up on the page indicate that the "cells"  
are related, and since the border is the relationship, the border  
property gets assigned to the element that relates them -- the parent  
div.


(The "float:left;" on the parent div is just so that it stretches to  
enclose all of the floating children. Since the width is 100%, it has  
no other effect.)


--

Ben Curtis : webwright
bivia : a personal web studio
http://www.bivia.com
v: (818) 507-6613




**
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] Win IE hacks -- Please help!

[Ingo Chao]

Janelle Clemens wrote:

I am uncomfortable with hacks and am trying to avoid them as much as
possible.  I really appreciate all the links and info on Win IE hacks that
everyone has been giving but reading about how they work is not helping.  I
could really use an example of how to implement them.  


We have some hacks in use here:
http://www.satzansatz.de/cssd/onhavinglayout.html#hack

Links to the relevant descriptions of the Holly Hack, underscore hack 
and Conditional Comments are included, and an example of how to serve to 
pre-IE7 and IE7.


I hope this is in keeping with the mission of the list, and nobody must 
leave.


Ingo

--
http://www.satzansatz.de/css.html
**
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] Win IE hacks -- Please help!

[Janelle Clemens]

Thanks Ben.  Unfortunately it is not for tabular data but page layout.   But
let me clarify that.  The main template (topnav, sidenav, footer) is in a
tabless format and validated.  The content area will have a 2 row, 3 column
layout.   Each cell will contain content, like highlights or list of
products, but not relate to eachother in a tabular fashion.  However each
cell has a bottom border that need to match up so if one cell expands in
height I need the rest to expand at the same rate.   Only a table can give
this or display: table-cell.   The table-cell would be perfect for this
issue except for Win IE.   So far I have it in a single table with styled
cells but was wondering if there is a trick to get Win IE to render
table-cell correctly or some way to do this tabless.

I am uncomfortable with hacks and am trying to avoid them as much as
possible.  I really appreciate all the links and info on Win IE hacks that
everyone has been giving but reading about how they work is not helping.  I
could really use an example of how to implement them.   Can you give me an
example of CC being used in a style sheet?

Thanks,
Janelle



-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of Ben Curtis
Sent: Tuesday, August 16, 2005 7:19 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Win IE hacks -- Please help!


On Aug 16, 2005, at 3:10 PM, Janelle Clemens wrote:

> My recent headache is trying to create a column/row of cells, like 
> what tables used to be used for, but with the display properties 
> table, table-row, table-column, table-cell.


Use a table.

Tables are valid HTML. You style them with CSS. When you have tabular data,
using anything else is unsemantic and wrong. If you have rows and columns,
then you have tabular data. Use a table.

The table tag is not banned for use in XHTML+CSS sites. Using tables to lay
your page out is a bad idea, but anything other than tables for tabular data
is a worse idea. Don't throw the baby out with the bathwater.


Oh, and regarding hacks for IE: remember that IE7 is coming out very soon,
and anything that relies on a parsing bug may behave unpredictably. Using "*
html" will likely mean that you will apply your hack to IE7 before you even
see how it does without the hack.  
Your best (only?) bet is the conditional comment option.

Remember: "Only hack the dead."

-- 

 Ben Curtis : webwright
 bivia : a personal web studio
 http://www.bivia.com
 v: (818) 507-6613




**
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] Win IE hacks -- Please help!

[Ben Curtis]

On Aug 16, 2005, at 3:10 PM, Janelle Clemens wrote:

My recent headache is trying to create a column/row of cells, like  
what

tables used to be used for, but with the display properties table,
table-row, table-column, table-cell.



Use a table.

Tables are valid HTML. You style them with CSS. When you have tabular  
data, using anything else is unsemantic and wrong. If you have rows  
and columns, then you have tabular data. Use a table.


The table tag is not banned for use in XHTML+CSS sites. Using tables  
to lay your page out is a bad idea, but anything other than tables  
for tabular data is a worse idea. Don't throw the baby out with the  
bathwater.



Oh, and regarding hacks for IE: remember that IE7 is coming out very  
soon, and anything that relies on a parsing bug may behave  
unpredictably. Using "* html" will likely mean that you will apply  
your hack to IE7 before you even see how it does without the hack.  
Your best (only?) bet is the conditional comment option.


Remember: "Only hack the dead."

--

Ben Curtis : webwright
bivia : a personal web studio
http://www.bivia.com
v: (818) 507-6613




**
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] Win IE hacks -- Please help!

[Drake, Ted C.]

Bookmark http://www.positioniseverything.net/ 
It has saved many people from restless nights.

Whenever IE is causing you to scream at the wall, visit the site and it will
tell you how to fix that particular bug.

Ted


-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of Janelle Clemens
Sent: Tuesday, August 16, 2005 3:10 PM
To: 'wsg@webstandardsgroup.org'
Subject: [WSG] Win IE hacks -- Please help!

We are redesigning our company website and I am in charge of creating the
templates.  We are moving into XHTML and pure stylesheets which has been
(and is still) a really amazing learning curve.  We have always had to code
cross browser but with this redesign we are finally chucking Netscape 4.7
and Mac IE (yippie).   Windows IE has always been our savior as far as doing
what you wanted it to do but now that we are moving into pure css and
tabless we have suddenly discovered the evils of Win IE.

I have searched high and low to find ways around IE css issues but have
recently stumbled on the underscore (underscore in front of the css tag,
i.e. _height).   I've also seen slash stars which I have tried to decipher
but got a headache instead.   We currently are using a sniffer for Win IE
but I would really like to try keep the win_ie.css as minimal as possible.
What good hacks are there for Win IE like the underscore where other
browsers don't render.   Oh, yeah, I found the star (* html, * body) one as
well.   That's a good one too.   But it would be nice to have a full list
for a one stop shop.  :-)

My recent headache is trying to create a column/row of cells, like what
tables used to be used for, but with the display properties table,
table-row, table-column, table-cell.  And after seeing how beautifully they
are rendered in Firefox/Mozilla/Netscape 7 I want to figure out how to force
Win IE to render them too.   Any suggestions?   Oh yeah, I can not give set
heights to the divs because the content is flexible (more or less depending
on the page).

Thanks,
Janelle
**
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] Win IE hacks -- Please help!

[Thierry Koblentz]

Janelle Clemens wrote:
> I have searched high and low to find ways around IE css issues but
> have recently stumbled on the underscore (underscore in front of the
> css tag, i.e. _height).   I've also seen slash stars which I have
> tried to decipher but got a headache instead.   We currently are
> using a sniffer for Win IE but I would really like to try keep the
> win_ie.css as minimal as possible. What good hacks are there for Win
> IE like the underscore where other browsers don't render.   Oh, yeah,
> I found the star (* html, * body) one as well.   That's a good one
> too.   But it would be nice to have a full list for a one stop shop. 

I'd favor Conditional Comments over IE/Win hacks
I've written something on CC:
http://www.tjkdesign.com/articles/cc.asp

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] Win IE hacks -- Please help!

[Jan Brasna]

And sorry for the order :)

Comments should be the first choice, then CSS only (but mind the IE7...) 
and after all of these the nonvalidating (like underscore).


--
Jan Brasna aka JohnyB :: www.alphanumeric.cz | www.janbrasna.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] Win IE hacks -- Please help!

[Jan Brasna]

Help yourself here:



Or, eventually, I'd rather go with: 



--
Jan Brasna aka JohnyB :: www.alphanumeric.cz | www.janbrasna.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] Win IE hacks -- Please help!

[Janelle Clemens]

We are redesigning our company website and I am in charge of creating the
templates.  We are moving into XHTML and pure stylesheets which has been
(and is still) a really amazing learning curve.  We have always had to code
cross browser but with this redesign we are finally chucking Netscape 4.7
and Mac IE (yippie).   Windows IE has always been our savior as far as doing
what you wanted it to do but now that we are moving into pure css and
tabless we have suddenly discovered the evils of Win IE.

I have searched high and low to find ways around IE css issues but have
recently stumbled on the underscore (underscore in front of the css tag,
i.e. _height).   I've also seen slash stars which I have tried to decipher
but got a headache instead.   We currently are using a sniffer for Win IE
but I would really like to try keep the win_ie.css as minimal as possible.
What good hacks are there for Win IE like the underscore where other
browsers don't render.   Oh, yeah, I found the star (* html, * body) one as
well.   That's a good one too.   But it would be nice to have a full list
for a one stop shop.  :-)

My recent headache is trying to create a column/row of cells, like what
tables used to be used for, but with the display properties table,
table-row, table-column, table-cell.  And after seeing how beautifully they
are rendered in Firefox/Mozilla/Netscape 7 I want to figure out how to force
Win IE to render them too.   Any suggestions?   Oh yeah, I can not give set
heights to the divs because the content is flexible (more or less depending
on the page).

Thanks,
Janelle
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list & getting help
**