Re: [css-d] ie/6 float-drop {was: Warnings...]
MEM wrote:
Sorry for this classic issue... :s
As it states here:
http://www.positioniseverything.net/easyclearing.html
I'm trying to apply the clear fix method to the parent of the element I
wanted to fix.
But IE-6 seems to ignore it, and the right column still drops.
The html:
http://www.nuvemk.com/rebelate/rebelatehome/home2.html
I see general misplacement of the content element on the page in IE6,
maybe it is related with the no-appliance of clearfix method ?
Márcio
What is the cause of the right-column float drop in IE/6:
1/ it is not properly cleared?
2/ the left-column is too wide?
3/ the left-column is too wide /and/ the float needs to be cleared?
4/ none of the above?
/Start/ with the left-column is too wide. Consequently, the right-column
drops because it does not have a wide enough berth to slip into.
#content
{
border: 1px solid red; - :: add ::
overflow: hidden; - :: add ::
}
And put IE/6 in quirksmode by adding this declaration immediately above
the doctype:
?xml version=1.0 encoding=utf-8?
Add this:
body {text-align: center;}
to center the page rail-to-rail in IE/6.
All of the above will not fix the problem. It will isolate the issue(s).
Please see:
http://www.satzansatz.de/cssd/onhavinglayout.html
and
http://www.positioniseverything.net/explorer.html
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] img border
Hi,
I have this that works well:
img { border:10px solid #7B2E91 }
I would like to do one on top of another, something like this:
img { border:10px solid #7B2E91 }
img { border:20px solid #00 }
Is there a way to do this?
TIA,
Victor
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ie/6 float-drop {was: Warnings...]
What is the cause of the right-column float drop in IE/6:
1/ it is not properly cleared?
2/ the left-column is too wide?
3/ the left-column is too wide /and/ the float needs to be cleared?
4/ none of the above?
Thanks for the steps. I will follow then in further float drop issues.
/Start/ with the left-column is too wide. Consequently, the right-
column
drops because it does not have a wide enough berth to slip into.
So a simple math problem?
Left-column + right-column + respective margins bigger then container, then,
drop?
I have made this counts, and it gives me 930 of 950 available on the
wrapper, so I suppose the problem don't rely on the width.
If we put display:inline on my float elements; those double margins values
disappear on IE6.
http://www.positioniseverything.net/explorer/doubled-margin.html
#content
{
border: 1px solid red; - :: add ::
overflow: hidden; - :: add ::
}
Why overflow: hidden; ?
I'm probably wrong but, it seems that it's nothing to do with actually
hiding the overflow, since I suppose rarely we would like to hide the
overflow.
According to the source provided,
http://www.satzansatz.de/cssd/onhavinglayout.html
Overflow, when not set to auto, is one of the properties responsible for
giving *hasLayout* to true on a given element.
Without overflow: hidden; neither IE or FF were displaying the background
image. My question is:
*why was ff not displaying the background image?*
When we do: overflow:hidden; both, FF and IE displays the background image.
However, firefox had placed the content side by side with the header:
http://www.nuvemk.com/rebelate/rebelatehome/home3.html
IE puts the content below the header. (even if I don't float, so I presume
it deals differently with the attribute hidden of the overflow property?
Anyway, since firefox is a nice browser, I have left floated the content and
it worked.
Since float is also a property that triggers hasLayout property to true, I
have removed overflow:hidden;
To make the story short:
Thanks! :)
Final result:
http://www.nuvemk.com/rebelate/rebelatehome/home4.html
http://www.nuvemk.com/rebelate/rebelatehome/css/home4.css
Please advice:
On IE 6 and IE 7, the footer is 1 or 2 to the right and overlaps the below
content.
I have seen two solutions:
Apply clear:both; on the footer. It's there.
Take out, structurally, the footer from the wrapper. (I preferred to not do
this).
Any other suggestions?
Thanks a lot,
Márcio
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] img border
Victor Subervi wrote:
I have this that works well:
img { border:10px solid #7B2E91 }
I would like to do one on top of another, something like this:
img { border:10px solid #7B2E91 }
img { border:20px solid #00 }
It won't work, since the latter rule just overrides the former.
You could use the outline property to create a simulation of a second
border, using
img { outline:20px solid #00 }
as the second rule. Howover, outline has essentially more limited support
than border. Moreover, outline is rather special, as it appears around an
element's box and may thus cover other content - though you might use img
{ margin: 20px; } to create space for the outline.
Alternatively, you could wrap the img element inside another element and set
the other border on that element. This gets somewhat awkward, though, as you
would need to make the container dimensioned according to the img
dimensions.
The most reliable way is to not use CSS at all for the borders. Simply use
your favorite image processing software to add the desired borders into the
images themselves.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] img border
--
I have this that works well:
img { border:10px solid #7B2E91 }
I would like to do one on top of another, something like this:
img { border:10px solid #7B2E91 }
img { border:20px solid #00 }
Is there a way to do this?
-
Perhaps something like this:
img {
background-color: #000;
padding: 10px;
border: 20px solid #7b2e91;}
HTH,
Karey Cummins
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ie/6 float-drop {was: Warnings...]
MEM wrote:
So a simple math problem?
Left-column + right-column + respective margins bigger then container, then,
drop?
I guess so. The IE/6 box-model is known to have issue with width: you
can't cram 5 pounds of apples in a 3 pound bag.
Why overflow: hidden; ?
To enclose the floats. To establish a block. To clear. Sometimes hidden
is used with compliant browsers and IE/6 is fed visible. Either way, you
may have been correct in not using it in this particular situation. My
approach is holistic. We'll both need to rely among those of a linear
mind-set for an exact, scientific explanation of some matters...
Final result:
http://www.nuvemk.com/rebelate/rebelatehome/home4.html
Please advice:
On IE 6 and IE 7, the footer is 1 or 2 to the right and overlaps the below
content.
I have seen two solutions:
Apply clear:both; on the footer. It's there.
Take out, structurally, the footer from the wrapper. (I preferred to not do
this).
Any other suggestions?
Not sure about the width issue. Have you tried feeding IE/6.0 an
explicit width?
And I think you mean the content /above/ the footer is clipped?
Try this for that.
The parent of the box that touches the footer in IE/6 and is clipped in
IE/7 is #content.
IE/7
*:first-child+html #content {padding-bottom: 10px;overflow: hidden;}
IE/6
* html #content {padding-bottom: 10px;}
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
