Re: [css-d] Nested lists in columns
Hey Dan,
Here's the issue on your site:
(http://www.calvarygreenmeadow.com/schedule.htm)
In order to capture the floated elements, we have to alter the way the
browsers handle them. Under normal circumstances, floated elements are
given special consideration within the document flow. This is more or
less the essence of what makes them floated.
In this situation, we want them to be treated differently, so we have to
toggle this behavior. For standards-compliant browsers, we can use this
rule (in this case) to capture the floated elements:
~~~
.schedule li
{
overflow: hidden;
}
~~~
Internet Explorer has more trouble with this, requiring that we activate
the MS proprietary hasLayout property. There's a number of ways to do
this. In the original code I sent you, I used the MS zoom property.
This is unique to MS and does not validate. It also probably looked
pretty useless, which is maybe why you dropped it from your styles.
A better way to activate this behavior (as far as I'm concerned) is
through the use of display:inline-block. This CSS property is not
completely supported by IE -- it only works on elements with a default
display of inline. Interestingly enough, however, is the fact that it
will trigger the required hasLayout behavior we need to capture the
float. More interesting is that configuring the display back to the
desired setting doesn't de-activate hasLayout.
Thus, using this rule should allow all browsers to show consistent results:
~~~
.schedule li
{
display: inline-block;
}
.schedule li
{
display: block;
overflow: hidden;
}
~~~
They must be broken up into two separate rules as above or IE will not
activate hasLayout for the element.
In your current live version, the rule you need to replace begins around
line 131.
I wasn't sure if my explanation above was entirely clear, s...by way
of *further* explanation, consider an image floated in a paragraph:
~~~
p img {
float:left;
}
~~~
pp
p Homer Jay Simpson is a fictional main character in the animated p
p television series The Simpsons andp
p i___i father of the eponymous family. p
p i _//_\\ i p
ppi,//. ippp
i / \i
i _/ |i
i(.-,--. |i
i/o/ o \ / i
i\_\/ /\/\ i
i(__`--' ._) i
i/ `-. | i
i ( ,`-. | i
i`-,--\_ ) |-. i
i _`.__.' ,-' \i
i|\ ) _.-'|i
ii-\.'\ ,--+. i
i .' .' \,-'/ \ i
i / / / \ i
Demonstrated above is the default browser behavior regarding floats.
Under normal circumstances, this is exactly what we want so that when we
include another paragraph about Homer, we get this:
pp
p Homer Jay Simpson is a fictional main character in the animated p
p television series The Simpsons andp
p i___i father of the eponymous family. p
p i _//_\\ i p
ppi,//. ippp
i / \i
pi _/ |i
p i(.-,--. |i He is voiced by Dan Castellaneta and p
p i/o/ o \ / i first appeared on television, along with p
p i\_\/ /\/\ i the rest of his family, in The Tracey p
p i(__`--' ._) i Ullman Show short Good Night on April p
p i/ `-. | i 19, 1987. Homer was created and designed p
p i ( ,`-. | i by cartoonist Matt Groening while he was p
p i`-,--\_ ) |-. i waiting in the lobby of James L. Brooks' p
p i _`.__.' ,-' \i office. Groening had been called to pitch p
p i|\ ) _.-'|i a series of shorts based on Life in Hell p
p ii-\.'\ ,--+. i but instead decided to create a new set p
p i .' .' \,-'/ \ i of characters. He named the character p
p i / / / \ i after his father Homer Groening. Afterp
p appearing on The Tracey Ullman Show for p
p three years, the Simpson family got their own series on Fox, which p
p debuted December 17, 1989. p
p p
pp
Note, however, that changing the styles like this:
~~~
p {
display: inline-block; /* For MSIE gte
Re: [css-d] .content problem
Georg:
Your answers is so good that I printed them great advises. I really
appreciated your help.
Thank you very much,
Paul
- Original Message -
From: Gunlaug Sørtun gunla...@c2i.net
To: etsk jung et...@hotmail.com
Sent: Monday, January 05, 2009 8:31 AM
Subject: Re: .content problem
etsk jung wrote:
Georg:
Thank you very much! I read the DW manual and another book on CSS but in
vain, it is you solved the problem.
I am so frustrated why there are no good literature on CSS Thank you,
it is really nice of you to help.
Paul
Well, Paul,
I have only read one book on CSS - mentioned here...
http://www.gunlaug.no/rips/rips_080903.html
...as my good friend Ingo Chao sent me a free copy. Good book, but not
really anything new to me in it - he borrowed and expanded on some of
my ideas in addition to his own :-)
There's a lot of literature on how to create both simple and a bit more
advanced layouts with CSS, but no-one would dare try to write about how
to handle all the various browser bugs and other peculiarities.
There are millions of bugs and bug-combinations, and the map changes
with each new browser release. Such a book would end up the size of a
phone-book, which would have to be updated every few months.
CSS is best learned directly from the source...
http://www.w3.org/Style/CSS/#specs
...and tested for support across browser-land. One way to test is
through minimal test pages, like the few I've listed here...
http://www.gunlaug.no/contents/wd_1_02_03.html
That way you can get a real sense of what works and what doesn't, and
can make choices for what to do with and include in real designs.
The only way to become a good web designer/coder is through practicing,
practicing and more practicing, and even that will only work well if you
apply strict quality control at every step of the way and don't let
anyone throw you off.
regards
Georg
Date: Tue, 30 Dec 2008 14:02:18 +0100
From: gunla...@c2i.net
To: et...@hotmail.com
CC: css-d@lists.css-discuss.org
Subject: Re: .content problem
Paul Jung wrote:
have been working very hard to find the problem why the map of
http://www.chinafood.sk/ doesn't display correct in IE, it always sinks
to the bottom, please help!
To use the correct terminology: it doesn't sink - it gets pushed
down because there's not enough space for it where you want it to stay.
All caused by bugs in IE6 (and older).
1: remove or zero out the backside margins on both side-columns - for
_all_ browsers. Those margins do nothing but make the layout
unnecessarily tight in good browsers, and too tight when IE6' bugs are
added.
What you need there is this...
.thrColFixHdr #sidebar1 {margin-right: 0;}
.thrColFixHdr #sidebar2 {margin-left: 0;}
2: the main-column is positioned by its own margins, and IE6 (and older)
throws in its 3px-jog bug as addition to the left margin, and its
auto-expansion bug to the width affecting the right side margin.
The right side margin isn't doing any good in any browser since the
main-column has width and self-aligns left where it rides on its left
margin, so unless you plan to reverse the document's direction you
should serve the following to _all_ browsers...
.thrColFixHdr #mainContent {margin-right:0;}
3: now there's only the 3px-jog bug to take care of in IE6 (and
older).
Place this in your !--[if IE] ...
* html .thrColFixHdr #mainContent {margin-left: 302px;}
...which will make IE6 calculate 302px + 3px(bug) = 305px for the left
margin, and align all elements correctly.
4: As mentioned before: the !--[if IE] should be rewritten as
!--[if lte IE 7]
As it is now you risk feeding IE8 and all its successors styles they
will have no need for, and that can only provoke unknown bugs in the
future.
5: go through all pages that may be affected to catch any misalignments,
as those IE6 bugs interact with each other and the effects can't be
predicted unless all pages contain exactly the same source-code and are
affected by exactly the same styling in all the same places.
That's not a very likely scenario :-)
regards
Georg
--
http://www.gunlaug.no
_
Invite your mail contacts to join your friends list with Windows Live
Spaces. It's easy!
http://spaces.live.com/spacesapi.aspx?wx_action=createwx_url=/friends.aspxmkt=en-us
--
http://www.gunlaug.no
__
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] CSS and SVG tests
http://www.css-zibaldone.com/test/svg/ HTH ^.^/ -- http://www.css-zibaldone.com http://www.css-zibaldone.com/test/ (English) http://www.css-zibaldone.com/articles/ (English) http://mimicry.css-zibaldone.com (Blog) http://www.flickr.com/photos/gabrieleromanato/ (Flickr) __ 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] Field not flowing in IE7/6
I have a form field in a p tag that's not flowing in IE7 the way that I expect. http://sph.umd.edu/home/test_css.cfm The dropdown start_day_segment (displays A.M.) should be next to the dropdown Start Time. It is on Safari and Firefox. How do I get it to do so on IE? What am I doing wrong? thanks for any help. -- Daniel Kessler University of Maryland College Park School of Public Health 3302E SPH Building College Park, MD 20742-2611 Phone: 301-405-2545 http://sph.umd.edu __ 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] Field not flowing in IE7/6
Daniel Kessler wrote: I have a form field in a p tag that's not flowing in IE7 the way that I expect. http://sph.umd.edu/home/test_css.cfm The dropdown start_day_segment (displays A.M.) should be next to the dropdown Start Time. It is on Safari and Firefox. How do I get it to do so on IE? What am I doing wrong? Not validating the markup before posting to the list :-) . thanks for any help. I think you'll need more structure to make it happen cross-browser. See if this meets your need: http://www.chelseacreekstudio.com/ca/cssd/opt.html Cursory checked with font-scaling in IE/6, IE/7, Camino, Mac Safari, MacOpera, Mac FF. hth -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.com/ __ 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/
