Re: [css-d] Head Scratchers
Frank McClung schrieb:
I'm new to CSS, so please forgive these very simple questions.
It's not as simple as mentioned.
2. #nextstep and #ebay are correct in Firefox, but the #submast
background image is still covered up.
Correct the 'ddd' typos: paddding: 0px; in your stylesheet. You should
validate your files.
1. Having problems in IE getting the boxes on the right to line up in
the right column (#nextstep and #ebay) to line up and #submast to show up.
a) The right margin of the right-float is doubled.
http://positioniseverything.net/explorer/doubled-margin.html
Fix:
#nextstep { ... display:inline; }
#ebay { ... display:inline;}
b)That's a dilemma in IE6:
div id=submast
div id=nextstep.../div
div id=ebay ... /div
/div
- #submast must have a appropriate dimension for its background-image.
- but with this dimension, it will contain the floating childs, and will
be expanded by their heights. (Apply a background:red; to see what I
mean.) In consequence, the following container is pushed down by the
height of the floats, no matter what height was applied to #submast.
Fix: rearrange
div id=nextstep.../div
div id=ebay ... /div
div id=submastnbsp;/div
and omit the width:
#submast { border: medium none ; margin: 0px; /*width: 800px;*/ height:
94px; background:red url(subtopmast.jpg) no-repeat; }
3. Bottom of the page is cut off in IE.
3. Not entirely sure what's causing this.
#maincontent determines the height of the page, but you have positioned
is relatively to its static position. Looks like IE determines the
viewport height before the offset of its content.
Fix:
use a 'margin-top' instead of 'top'
#maincontent { border: medium none; margin: 0px;
background-image:url(path);
/*position: relative;*/ margin-top: 116px;
width: 800px;}
---
Hope that's all what I've changed.
regards, Ingo
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Head Scratchers
Ingo. Thanks so much for fixing the IE doubled margin issue and moving
#submast up to where it should be. I've felt a bit lost in the sea of CSS
hacks (I'm trying to resist the urge to go back to tables!). CSS-Discuss is
the only thing keeping me from drowning!
Still have 2 issues with this page:
http://www.computerrecycling.us/subpage3.htm
1. In both IE6 and Firefox, the #submast background url
(http://www.computerrecycling.us/images/subtopmast.jpg) is not showing up.
Is this because it is being overwritten by #maincontent's background URL is
overwriting it?
2. Tried the fix you suggested and it threw everything off. But did try this
fix and it does not cut off the text in IE6. No clue why but seems to work
position: static; margin-top: 116px;
- Frank
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Ingo Chao
Sent: Saturday, May 14, 2005 7:36 AM
To: [EMAIL PROTECTED]
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] Head Scratchers
Frank McClung schrieb:
I'm new to CSS, so please forgive these very simple questions.
It's not as simple as mentioned.
2. #nextstep and #ebay are correct in Firefox, but the #submast
background image is still covered up.
Correct the 'ddd' typos: paddding: 0px; in your stylesheet. You should
validate your files.
1.Having problems in IE getting the boxes on the right to line up in
the right column (#nextstep and #ebay) to line up and #submast to show up.
a) The right margin of the right-float is doubled.
http://positioniseverything.net/explorer/doubled-margin.html
Fix:
#nextstep { ... display:inline; }
#ebay { ... display:inline;}
b)That's a dilemma in IE6:
div id=submast
div id=nextstep.../div
div id=ebay ... /div
/div
- #submast must have a appropriate dimension for its background-image.
- but with this dimension, it will contain the floating childs, and will
be expanded by their heights. (Apply a background:red; to see what I
mean.) In consequence, the following container is pushed down by the
height of the floats, no matter what height was applied to #submast.
Fix: rearrange
div id=nextstep.../div
div id=ebay ... /div
div id=submastnbsp;/div
and omit the width:
#submast { border: medium none ; margin: 0px; /*width: 800px;*/ height:
94px; background:red url(subtopmast.jpg) no-repeat; }
3.Bottom of the page is cut off in IE.
3. Not entirely sure what's causing this.
#maincontent determines the height of the page, but you have positioned
is relatively to its static position. Looks like IE determines the
viewport height before the offset of its content.
Fix:
use a 'margin-top' instead of 'top'
#maincontent { border: medium none; margin: 0px;
background-image:url(path);
/*position: relative;*/ margin-top: 116px;
width: 800px;}
---
Hope that's all what I've changed.
regards, Ingo
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Head Scratchers
Cancel that last request on why #submast wasn't showing the background
url...bad path.
All is well...for now! Thanks.
/ Frank
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Ingo Chao
Sent: Saturday, May 14, 2005 7:36 AM
To: [EMAIL PROTECTED]
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] Head Scratchers
Frank McClung schrieb:
I'm new to CSS, so please forgive these very simple questions.
It's not as simple as mentioned.
2. #nextstep and #ebay are correct in Firefox, but the #submast
background image is still covered up.
Correct the 'ddd' typos: paddding: 0px; in your stylesheet. You should
validate your files.
1.Having problems in IE getting the boxes on the right to line up in
the right column (#nextstep and #ebay) to line up and #submast to show up.
a) The right margin of the right-float is doubled.
http://positioniseverything.net/explorer/doubled-margin.html
Fix:
#nextstep { ... display:inline; }
#ebay { ... display:inline;}
b)That's a dilemma in IE6:
div id=submast
div id=nextstep.../div
div id=ebay ... /div
/div
- #submast must have a appropriate dimension for its background-image.
- but with this dimension, it will contain the floating childs, and will
be expanded by their heights. (Apply a background:red; to see what I
mean.) In consequence, the following container is pushed down by the
height of the floats, no matter what height was applied to #submast.
Fix: rearrange
div id=nextstep.../div
div id=ebay ... /div
div id=submastnbsp;/div
and omit the width:
#submast { border: medium none ; margin: 0px; /*width: 800px;*/ height:
94px; background:red url(subtopmast.jpg) no-repeat; }
3.Bottom of the page is cut off in IE.
3. Not entirely sure what's causing this.
#maincontent determines the height of the page, but you have positioned
is relatively to its static position. Looks like IE determines the
viewport height before the offset of its content.
Fix:
use a 'margin-top' instead of 'top'
#maincontent { border: medium none; margin: 0px;
background-image:url(path);
/*position: relative;*/ margin-top: 116px;
width: 800px;}
---
Hope that's all what I've changed.
regards, Ingo
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
