Re: [WSG] IE float quest
On Dec 18, 2005, at 11:45 PM, Bert Doorn wrote: Seems a bit of overkill for a single rule. I avoid hacks wherever possible, but if you do need one, it's better placed in the CSS file (e.g. with a * html hack). Bert, I rarely use hacks for my sites and never really learn how to use them. IE conditional comments is the one I recently picked up and always try not to use it - however sometimes it seems a bit foolish to wasting half a day (in this particular case it has been more than 6 hours) to try to solve a problem in IE, and I must say I am more than foolish in most cases when dealing with IE bugs because of my refusal to use hacks. I haven't got time to look through the whole CSS file (reverse- engineering) to find the cause of each problem, but given you use exact pixel widths in many places, chances are that they aren't adding up (with IE's float bugs adding 3 pixels here and there). I'd give it a bit of slack - maybe some of your problems will be solved by removing some of the widths. You have raised a very point, I removed some of the widths and it's working now, although still not perfect. There is still gap appears when scroll. This looks like a whole different issue involves with other css declaration. I may need to post another new message for help. http://sl.lotusseeds.com/request3.html Thank you very much for your help! tee ** 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] IE float quest
Tee,
I suspect the problem is the IE box model. You have set a width and padding for
#formWrapper.
Increasing the width of the #container by 20px, which is the amount of padding
on the #formWrapper, seems to fix the problem.
#container { width: 825px; ...}
cheers,
Geoff.
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] Behalf Of tee
Sent: Monday, 19 December 2005 4:26 PM
To: wsg@webstandardsgroup.org
Subject: [WSG] IE float quest
Greeting,
I'd been working on solving this problem in the last three hours
however I can't seemed to pinpoint the cause.
In IE 6/ 5.5, my form drops to the bottom. I know this is a
common IE
bug and I was able to solve the problem in other sites by declaring
clear left (or both or right) or display: inline. Except this time.
This one is the perfect solution I wanted:
http://sl.lotusseeds.com/request1.html
and the css:
#formWrapper { clear: right; position: relative; /* declaring
position: relative or not doesn't seem matter to IE in this case*/
font: 0.82em/1.5em Lucida Grande, Arial, Helvetica,
sans-serif;
color: #4F4F4F;
border: 2px solid #eee;
background: #F3F3F3;
width: 400px;
padding: 0px 20px 20px;
margin: 30px 30px 0px 10px;
}
Except that it drops to the bottom, here is the screen shot if you
are a Mac user.
http://sl.lotusseeds.com/ie.jpg
So I declared 'display: inline' in the #formWrapper, it solves the
problem but my background color shrinks to a small square above the
the form in Firefox and Opera (both PC and Mac); in Safari and IE,
the background color completely gone.
Here is the page.
http://sl.lotusseeds.com/request.html
and the css:
.#formWrapper {clear: right; display: inline;
font: 0.8em/1.5em Lucida Grande, Arial, Helvetica, sans-serif;
color: #4F4F4F;
border: 2px solid #eee;
background: #F3F3F3;
width: 400px;
padding: 0px 20px 20px;
margin: 30px 30px 0px 10px;
}
I know when asking help from this list, a validated page and
css is a
must - well, I do have my HTML validated and the 99.8% of CSS are
validated too, except that I used the -moz-border-radius that the
W3C validator gave me error - hope this is acceptable :)
Thank you!
tee
**
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] IE float quest -SOLVED
On Dec 19, 2005, at 1:40 AM, Geoff Pack wrote:
Tee,
I suspect the problem is the IE box model. You have set a width and
padding for #formWrapper.
Increasing the width of the #container by 20px, which is the amount
of padding on the #formWrapper, seems to fix the problem.
#container { width: 825px; ...}
Hi Geoff, it doesn't quite work unfortunately, adding 25px to the
#container creates other problem for footer and the extra white
background for #content width.
I managed to solve the problem by eliminating the widths in certain
areas and with a IE conditional comments.
http://sl.lotusseeds.com/request3.html
Still have a minor problem to sovle at the bottom of the form, where
a gap appears when browser browser gets scroll.
Thanks for the suggestin anyway!
tee
**
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] IE float quest -SOLVED
Tee,
I think you are making things complicated for yourself. You don't need
conditional comments or the IE7 script just to get column widths to match
across browsers.
The trick to taming the box model problems of IE is to never set width and
(horizontal) padding for the same element. If you want padding, set it on a
nested element, or set margins directly on all children of the element.
When I made my suggestion, I wasn't just guessing - I saved the file locally
and changed the width and the gap disappeared. I wasn't meaning it to be a
complete fix, just to show the cause. Removing the width is good too.
Personally, I would just set the width of #content2 to match the rounded
corners, remove the padding, and set margins (but no widths) on the headings,
paras and the form inside #content2. Sorry I wasn't clearer in my last post.
Might have saved you some effort.
cheers,
Geoff
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] Behalf Of tee
Sent: Monday, 19 December 2005 9:53 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] IE float quest -SOLVED
On Dec 19, 2005, at 1:40 AM, Geoff Pack wrote:
Tee,
I suspect the problem is the IE box model. You have set a
width and
padding for #formWrapper.
Increasing the width of the #container by 20px, which is
the amount
of padding on the #formWrapper, seems to fix the problem.
#container { width: 825px; ...}
Hi Geoff, it doesn't quite work unfortunately, adding 25px to the
#container creates other problem for footer and the extra white
background for #content width.
I managed to solve the problem by eliminating the widths in certain
areas and with a IE conditional comments.
http://sl.lotusseeds.com/request3.html
Still have a minor problem to sovle at the bottom of the form, where
a gap appears when browser browser gets scroll.
Thanks for the suggestin anyway!
tee
**
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] IE float quest
G'day So I declared 'display: inline' in the #formWrapper, it solves the problem but my background color shrinks to a small square above the the form in Firefox and Opera (both PC and Mac); in Safari and IE, the background color completely gone. Have you tried display:inline-block ? It's valid CSS [1], Mozilla ignores it and it ~may~ do what you want it to in MSIE. [1] http://www.w3.org/TR/CSS21/visuren.html#propdef-display 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 **
Re: [WSG] IE float quest
On Dec 18, 2005, at 9:42 PM, Bert Doorn wrote:
Have you tried display:inline-block ? It's valid CSS [1], Mozilla
ignores it and it ~may~ do what you want it to in MSIE.
[1] http://www.w3.org/TR/CSS21/visuren.html#propdef-display
Hi Bert, no, display:inline-block doesn't work however your
suggestion prompted to use the IE conditional comments in my html'
.head tag.
http://sl.lotusseeds.com/request2.html
!--[if IE]
style
#formWrapper {display: inline;
background: #fff;
}
/style
![endif]--
It fixed partial problem, still the background color out of whack. IE
doesn't pick up the white background color I declared, on top of
that, when I scroll down, it shows a gap with a background image of
the #content ; if I click on a input field, it disappears.
See the screen shot.
http://sl.lotusseeds.com/ie2.jpg
I really appreciate if you have a clue how to fix it.
Best,
tee
**
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] IE float quest
G'day Hi Bert, no, display:inline-block doesn't work however your suggestion prompted to use the IE conditional comments in my html' .head tag. Seems a bit of overkill for a single rule. I avoid hacks wherever possible, but if you do need one, it's better placed in the CSS file (e.g. with a * html hack). I haven't got time to look through the whole CSS file (reverse-engineering) to find the cause of each problem, but given you use exact pixel widths in many places, chances are that they aren't adding up (with IE's float bugs adding 3 pixels here and there). I'd give it a bit of slack - maybe some of your problems will be solved by removing some of the widths. 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 **
