[WSG] IE weird display problem

2004-09-30 Thread MirAGe01 



I'm working 
on a page that will consist of 2 columns that will sit inside a wrapper div 
container. I set the left column to float left with a width of 400px. The right 
column is set with a margin-left of 400px and a width of 200px. The width of the 
wrapper container is 600px. The right column is getting pushed down in IE6+. If 
I remove the px from the width of the right column so the style reads simply 
width:200; then the right column lines up correctly with the left column. I've 
never heard of this before and it makes no sense to me. You can see my code 
below with the problem in bold.

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml"headmeta http-equiv="Content-Type" 
content="text/html; charset=utf-8" /titleUntitled 
Document/titlestyle type="text/css" media="screen"body 
{padding:0;margin:0;}#wrapper 
{width:600px;margin:10px auto;}#left 
{float:left;width:400px;}#right 
{width:200; /* if I put a unit here such 
as "px" then the column doesn't line up 
*/margin-left:400px;}/style/head

bodydiv id="wrapper"div 
id="left"left side 
text/divdiv id="right"right 
side 
text/div/div/body/html

Thanks for 
you help.
/*/[ Michael Turnwall 
]weblog | resume/*/

Re: [WSG] IE weird display problem

2004-09-30 Thread Isabel Santos 



Michael:

Simple but not perfect:

if you can live with a 3px margin different in 
different browsers:

#right {width:197px; /* if I put a unit 
here such as "px" then the column doesn't line up 
*/margin-left:400px;}

IE renders a 3px margin on adjacent divs in certain 
circunstances.
This will take that out; in other browsers, if you 
have different backgrounds for each div this solution isn't 
suitable.

If you can make it a float:

#right {width:200px; /* if I put a unit 
here such as "px" then the column doesn't line up 
*/float:right;}

More complex ones need some testing.

They involve getting rid of the IE margin without 
affecting other browsers, or using negative margins IE only.

You could try taking a look at some good tips 
in:
http://www.positioniseverything.net/articles/hollyhack.html


Well, 06:00h, I'm crashing...

Isabel Santos

  - Original Message - 
  From: 
  MirAGe01 
  To: Web Standards Group 
  Sent: Friday, October 01, 2004 5:11 
  AM
  Subject: [WSG] IE  weird display 
  problem
  
  I'm 
  working on a page that will consist of 2 columns that will sit inside a 
  wrapper div container. I set the left column to float left with a width of 
  400px. The right column is set with a margin-left of 400px and a width of 
  200px. The width of the wrapper container is 600px. The right column is 
  getting pushed down in IE6+. If I remove the px from the width of the right 
  column so the style reads simply width:200; then the right column lines up 
  correctly with the left column. I've never heard of this before and it makes 
  no sense to me. You can see my code below with the problem in 
  bold.
  
  !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
  Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml"headmeta http-equiv="Content-Type" 
  content="text/html; charset=utf-8" /titleUntitled 
  Document/titlestyle type="text/css" media="screen"body 
  {padding:0;margin:0;}#wrapper 
  {width:600px;margin:10px auto;}#left 
  {float:left;width:400px;}#right 
  {width:200; /* if I put a unit here such 
  as "px" then the column doesn't line up 
  */margin-left:400px;}/style/head
  
  bodydiv id="wrapper"div 
  id="left"left side 
  text/divdiv 
  id="right"right side 
  text/div/div/body/html
  
  Thanks for 
  you help.
  /*/[ Michael Turnwall 
  ]weblog | resume/*/

RE: [WSG] IE weird display problem

2004-09-30 Thread [EMAIL PROTECTED] 
Hello,

I tried your code. What worked for me is giving the right div a
float:right; It worked for both IE6 and FF.

- regnard



Original Message:
-
From: MirAGe01 [EMAIL PROTECTED]
Date: Thu, 30 Sep 2004 21:11:28 -0700
To: [EMAIL PROTECTED]
Subject: [WSG] IE  weird display problem


I'm working on a page that will consist of 2 columns that will sit inside a
wrapper div container. I set the left column to float left with a width of
400px. The right column is set with a margin-left of 400px and a width of

200px. The width of the wrapper container is 600px. The right column is
getting pushed down in IE6+. If I remove the px from the width of the right
column so the style reads simply width:200; then the right column lines up
correctly with the left column. I've never heard of this before and it makes
no sense to me. You can see my code below with the problem in bold.
 
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
titleUntitled Document/title
style type=text/css media=screen
body {
 padding:0;
 margin:0;
}
#wrapper {
 width:600px;
 margin:10px auto;
}
#left {
 float:left;
 width:400px;
}
#right {
 width:200; /* if I put a unit here such as px then the column doesn't
line up */
 margin-left:400px;
}
/style
/head
 
body
div id=wrapper
 div id=left
  left side text
 /div
 div id=right
  right side text
 /div
/div
/body
/html
 
Thanks for you help.

/*/
   [ Michael Turnwall ]
  http://www.houseofmirage.com/blog weblog |
http://www.houseofmirage.com/resume.htm resume
/*/ 

 



mail2web - Check your email from the web at
http://mail2web.com/ .


**
The discussion list for  http://webstandardsgroup.org/

Proud presenters of Web Essentials 04 http://we04.com/
 Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004

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

RE: [WSG] IE weird display problem

2004-09-30 Thread MirAGe01 
is all you did is add float:right to the stylesheet rule #right? 

-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] 
Sent: Thursday, September 30, 2004 10:07 PM
To: [EMAIL PROTECTED]
Subject: RE: [WSG] IE  weird display problem

Hello,

I tried your code. What worked for me is giving the right div a
float:right; It worked for both IE6 and FF.

- regnard



Original Message:
-
From: MirAGe01 [EMAIL PROTECTED]
Date: Thu, 30 Sep 2004 21:11:28 -0700
To: [EMAIL PROTECTED]
Subject: [WSG] IE  weird display problem


I'm working on a page that will consist of 2 columns that will 
sit inside a
wrapper div container. I set the left column to float left 
with a width of
400px. The right column is set with a margin-left of 400px and 
a width of

200px. The width of the wrapper container is 600px. The right column is
getting pushed down in IE6+. If I remove the px from the width 
of the right
column so the style reads simply width:200; then the right 
column lines up
correctly with the left column. I've never heard of this 
before and it makes
no sense to me. You can see my code below with the problem in bold.
 
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
titleUntitled Document/title
style type=text/css media=screen
body {
 padding:0;
 margin:0;
}
#wrapper {
 width:600px;
 margin:10px auto;
}
#left {
 float:left;
 width:400px;
}
#right {
 width:200; /* if I put a unit here such as px then the 
column doesn't
line up */
 margin-left:400px;
}
/style
/head
 
body
div id=wrapper
 div id=left
  left side text
 /div
 div id=right
  right side text
 /div
/div
/body
/html
 
Thanks for you help.

/*/
   [ Michael Turnwall ]
  http://www.houseofmirage.com/blog weblog |
http://www.houseofmirage.com/resume.htm resume
/*/ 

 



mail2web - Check your email from the web at
http://mail2web.com/ .


**
The discussion list for  http://webstandardsgroup.org/

Proud presenters of Web Essentials 04 http://we04.com/
 Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004

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






**
The discussion list for  http://webstandardsgroup.org/

Proud presenters of Web Essentials 04 http://we04.com/
 Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004

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

RE: [WSG] IE weird display problem

2004-09-30 Thread MirAGe01 



Thanks for the link.

  
  
  From: Isabel Santos 
  [mailto:[EMAIL PROTECTED] Sent: Thursday, September 30, 2004 
  10:05 PMTo: [EMAIL PROTECTED]Subject: Re: [WSG] 
  IE  weird display problem
  
  Michael:
  
  Simple but not perfect:
  
  if you can live with a 3px margin different in 
  different browsers:
  
  #right {width:197px; /* if I put a unit 
  here such as "px" then the column doesn't line up 
  */margin-left:400px;}
  
  IE renders a 3px margin on adjacent divs in 
  certain circunstances.
  This will take that out; in other browsers, if 
  you have different backgrounds for each div this solution isn't 
  suitable.
  
  If you can make it a float:
  
  #right {width:200px; /* if I put a unit 
  here such as "px" then the column doesn't line up 
  */float:right;}
  
  More complex ones need some testing.
  
  They involve getting rid of the IE margin without 
  affecting other browsers, or using negative margins IE only.
  
  You could try taking a look at some good tips 
  in:
  http://www.positioniseverything.net/articles/hollyhack.html
  
  
  Well, 06:00h, I'm crashing...
  
  Isabel Santos
  
- Original Message - 
From: 
MirAGe01 
To: Web Standards Group 
Sent: Friday, October 01, 2004 5:11 
    AM
    Subject: [WSG] IE  weird display 
problem

I'm 
working on a page that will consist of 2 columns that will sit inside a 
wrapper div container. I set the left column to float left with a width of 
400px. The right column is set with a margin-left of 400px and a width of 
200px. The width of the wrapper container is 600px. The right column is 
getting pushed down in IE6+. If I remove the px from the width of the right 
column so the style reads simply width:200; then the right column lines up 
correctly with the left column. I've never heard of this before and it makes 
no sense to me. You can see my code below with the problem in 
bold.

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml"headmeta http-equiv="Content-Type" 
content="text/html; charset=utf-8" /titleUntitled 
Document/titlestyle type="text/css" 
media="screen"body 
{padding:0;margin:0;}#wrapper 
{width:600px;margin:10px auto;}#left 
{float:left;width:400px;}#right 
{width:200; /* if I put a unit here 
such as "px" then the column doesn't line up 
*/margin-left:400px;}/style/head

bodydiv id="wrapper"div 
id="left"left side 
text/divdiv 
id="right"right side 
text/div/div/body/html

Thanks 
for you help.
/*/[ Michael 
Turnwall ]weblog | resume/*/

RE: [WSG] IE weird display problem

2004-09-30 Thread Nick Cowie 

IE renders a 3px margin on adjacent divs in certain circunstances.
This will take that out; in other browsers, if you have different 
backgrounds for each div this solution isn't suitable.

That will be the IE Three Pixel Text-Jog 
http://www.positioniseverything.net/explorer/threepxtest.html

You are not the first person to be caught out by it.

Nick
**
The discussion list for  http://webstandardsgroup.org/

Proud presenters of Web Essentials 04 http://we04.com/
 Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004

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