Re: [css-d] 3px holly hack - not working for my needs
-- Original Message -- From: Scott Holdeman [EMAIL PROTECTED] Date: Tue, 17 Jan 2006 09:15:17 -0700 is it always the case that a block level element cannot (should not) be contained in an inline element? Yes. See Jukka Korpela's pages for an outline view of what can be nested in what. http://www.cs.tut.fi/~jkorpela/html/nesting.html http://www.cs.tut.fi/~jkorpela/html/strict.html Could you be more specific about the competing selectors that you are referring to? - I'm not sure I understand. I aplolgize for taking so long to reply to this, and one result is that I no longer recall specifically what these were. But I believe you had some selectors you were trying to get to work that were not as specific as later selectors (for example, one was a class selector and one was an ID selector - IDs are more specific than classes) and so the class selector declarations were being overridden by the ID selector declarations. I hope that helps, ~holly __ 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] 3px holly hack - not working for my needs
Thank you Holly! That seemed to do the trick (and was driving me crazy). A couple of questions: I realize that it was causing me problems in this example, but is it always the case that a block level element cannot (should not) be contained in an inline element? Could you be more specific about the competing selectors that you are referring to? - I'm not sure I understand. Thanks again, Scott From: Holly Bergevin [EMAIL PROTECTED] Reply-To: [EMAIL PROTECTED] Date: Mon, 16 Jan 2006 19:50:10 -0600 To: css-d@lists.css-discuss.org, Scott Holdeman [EMAIL PROTECTED] Subject: Re: [css-d] 3px holly hack - not working for my needs From: Scott Holdeman [EMAIL PROTECTED] My demo page: http://demo.tectonicsolutions.com/test/ie_3px_fix.html I am wanting to float an image (block) to the left of a container then using a large left margin position the accompanying text in what would become a right column. I am encountering the 3px jog bug in ie but the Holly Hack is not entirely working for my needs because following paragraphs are not getting indented. First, take a look at your code. Even when you create demos (especially?) you should make sure that you are dealing with valid code. You have four instances of two different IDs on your page. While I don't think that is causing any problem for IE in this case, you still should change those to classes for the purposes of reusing them on the same page. Additionally, you have wrapped two paragraphs in a span in your last example. Paragraphs are block elements and therefore cannot be placed within a span (an inline element). If you change that element to a div, you will have greater success in getting what you want. Finally, you have competing selectors that are making it impossible for browsers to do what you want them to do. __ 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-d] 3px holly hack - not working for my needs
Perhaps I need to explore a different approach altogether, but the one I was hoping to use is causing me problems: I created an explanation of my problem based on the Holly Hack demo (http://www.positioniseverything.net/sidepages/jogfix.html) My demo page: http://demo.tectonicsolutions.com/test/ie_3px_fix.html I am wanting to float an image (block) to the left of a container then using a large left margin position the accompanying text in what would become a right column. I am encountering the 3px jog bug in ie but the Holly Hack is not entirely working for my needs because following paragraphs are not getting indented. (see demo) . Any help/suggestions are very welcome. Thanks in advance. -Scott --- Tectonic Network Scott Holdeman Senior Web Designer __ 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] 3px holly hack - not working for my needs
From: Scott Holdeman [EMAIL PROTECTED]
My demo page:
http://demo.tectonicsolutions.com/test/ie_3px_fix.html
I am wanting to float an image (block) to the left of a container then
using a large left margin position the accompanying text in what would
become a right column.
I am encountering the 3px jog bug in ie but the Holly Hack is not entirely
working for my needs because following paragraphs are not getting indented.
First, take a look at your code. Even when you create demos (especially?) you
should make sure that you are dealing with valid code. You have four instances
of two different IDs on your page. While I don't think that is causing any
problem for IE in this case, you still should change those to classes for the
purposes of reusing them on the same page.
Additionally, you have wrapped two paragraphs in a span in your last example.
Paragraphs are block elements and therefore cannot be placed within a span (an
inline element). If you change that element to a div, you will have greater
success in getting what you want.
Finally, you have competing selectors that are making it impossible for
browsers to do what you want them to do.
The following should do what you'd like, assuming you're willing to wrap your
right column content in a div.
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=en lang=en
head
title Three Pixel Gap Fix /title
meta http-equiv=content-Type content=text/html; charset=iso-8859-1 /
style type=text/css
body {
margin: 20px ;
padding: 0;
font-size: 80%;
background: #cdc;
font-family: verdana,sans-serif;
}
#wrapper { /*** This wrapper is just to make the demo the same at all screen
sizes. ***/
width: 500px;
border: 3px solid red;
margin: 0 0 50px 0;
}
#floatbox {
float: left;
width: 100px;
height: 50px;
font-size: 1.4em;
font-weight: bold;
color: #46d;
background: #6d6;
}
p {background: #dd9;}
#textbox {margin: 0 0 0 110px;}
#textbox p {
margin: 0;
border: 1px solid #fff;
}
/* \*/
* html #textbox {
height: 1%;
argin-left: 0;
}
/* */
/style
/head
body
div id=wrapper
div id=floatbox
Float
/div
div id=textbox
p
The red bordered box is a wrapper to give the demo a consistent width, and has
no effect on the various IE problems in question. It can be eliminated without
changing the jog fix. br /
This paragraph (black border) should have a 10px gap between it and the float.
There will be no
3px text jog within the paragraph where the float ends in IE/win. Take that,
M$! Buahaha!! br /
/p
p
The red bordered box is a wrapper to give the demo a consistent width, and has
no effect on the various IE problems in question. It can be eliminated without
changing the jog fix. br /
This paragraph (black border) should have a 10px gap between it and the float.
There will be no
3px text jog within the paragraph where the float ends in IE/win. Take that,
M$! Buahaha!! br /
/p
/div
/div
/body
/html
(Do note that there are spaces added in all the tags in the above example so
that my mail client doesn't render the HTML.)
I hope that helps,
~holly
__
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/
