Re: [css-d] Random padding in firefox...
David Hucklesby wrote:
Indeed that works. But I'm as confused as Jerod here - I don't see
evidence of margins on anything here. The only element that's likely
to have a margin is the UL, and Jerod has expressly set that to
zero. And poking around with Firebug, I can't see what is
overflowing.
So Collapsing Margin Bug does not seem to be an explanation.
The margins in question are on #headerText h2 and #headerText h3. Remove
the top and bottom margins on those two elements, and the need to
contain collapsing margins in #header is gone.
The confusion comes from the fact that the vertical margins that are
collapsing, creates a gap at the same place regardless of whether they
are top or bottom margins.
Since margins in themselves are invisible there's no way I can prove
which element the top vs. the bottom margins get attached to for the
case at hand. However, the top of #header and the bottom of #toolbar
meet where the gap appears, so both these elements probably get an extra
margin out of the collapsing margin process. This gap won't become
larger than the largest vertical margin that ends up there - 10px.
Comment out #headerText h2{margin-bottom:10px;} and there will only be a
5px gap, since the other vertical margins that are involved are all 5px
tall. The gap will stay at 5px until all vertical margins on h2/h3 are gone.
regards
Georg
--
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] Hide labeled link [a rel]
Hi all! I hope this mailing list will help. I have the following class which style many different links. p class=postmetaDate a href=link title=Visualizza tutti gli articoli in Mostra Tutti rel=category tagMostra Tutti/a and tag: a href=link_i1 rel=taglink_i1/a, a href=link_i2 rel=taglink_i2/a, a href=link title=Modifica articoloModifica/a/p I want to hide all the links labeled rel=tag, maintaining visibility for the rest of the content. Is it possible? How to do that via CSS ? Thank you so much!! __ 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] Some css questions
I have been away from coding for over a year due to illness and am trying to get my brain back into coding again. And being self taught I am sure there were things previous to my illness that I could have still learned from more studying. My questions are related to floats and IE7. I had a layout that worked with IE6 really great, however, I used the alsett clearing method, which I am finding isn't one that works in IE7? (though a site I had done before becoming sick is still working in IE7, though the person whom I did the site for is now working on the code himself, ugh. The page does display in IE7 though with the alsett clearing being used, this I don't understand.) There are a few difficulties that I am having. Understanding has layout is the main one. I have read so much about it, but for some reason it isn't clicking in. Over flow hidden used for clearing? Also the use of zoom? Forgive my questions, but as I stated it has been a while for me and I feel like I have lost a lot of what I had within my brain over the past year plus. Any help would be so greatly appreciated, there are so many different layouts out there and I really need to brush up on my skills again. Thanks in advance cssaddict __ 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] Some css questions
4css aka deb wrote: Any help would be so greatly appreciated, there are so many different layouts out there and I really need to brush up on my skills again. Glad you're feeling better. Your questions cover a broad range of topics and replying to them would require a fairly lengthy email. Maybe have a quick look at the CSS-D Wiki to see if some of your answers can be found there. [1]:http://css-discuss.incutio.com/ -- !-- ! Bill Brown macnim...@gmail.com ! Web Developologist, WebDevelopedia.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/
Re: [css-d] Hide labeled link [a rel]
I want to hide all the links labeled rel=tag, maintaining visibility
for the rest of the content.
In theory, you could use this attribute selector:
a[rel~=tag]{display:none}
In practice, IE lte 6 do not support the attribute selector. You could
use a javascript solution for the older IEs or simply progressively
enhance the site for browsers that support the attribute selector.
--
!--
! Bill Brown macnim...@gmail.com
! Web Developologist, WebDevelopedia.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/
[css-d] Page Check Please
OK I have this page it works fine in Safari, FF on Mac. I did take notice that if I added a wrapper around the header to the footer the maincontent bgcolor moves to the top of the manicontent section. Now if I move the closing div for the maincontent so it is outside of the footer closing div the manicontent bgcolor covers the maincontent area but my footer is inside the maincontent. What am I doing wrong ? How to fix ? Help GREATLY appreciated!! http://home.comcast.net/~s.oravec/index.htmlhttp://home.comcast.net/%7Es.oravec/index.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/
Re: [css-d] Random padding in firefox...
Thanks all for the replies...the overflow: hidden does indeed do the trick,
and Georg's explanation makes sense. The 1px border is still up on the site,
because you can't *really* tell that it's there and I'm still playing with
it to figure this out, so if anyone else wants to mess with it in firebug,
you're still able to.
Thanks for the help!
-Jerod
On Fri, Jan 16, 2009 at 3:52 AM, Gunlaug Sørtun gunla...@c2i.net wrote:
David Hucklesby wrote:
Indeed that works. But I'm as confused as Jerod here - I don't see
evidence of margins on anything here. The only element that's likely
to have a margin is the UL, and Jerod has expressly set that to
zero. And poking around with Firebug, I can't see what is
overflowing.
So Collapsing Margin Bug does not seem to be an explanation.
The margins in question are on #headerText h2 and #headerText h3. Remove
the top and bottom margins on those two elements, and the need to
contain collapsing margins in #header is gone.
The confusion comes from the fact that the vertical margins that are
collapsing, creates a gap at the same place regardless of whether they
are top or bottom margins.
Since margins in themselves are invisible there's no way I can prove
which element the top vs. the bottom margins get attached to for the
case at hand. However, the top of #header and the bottom of #toolbar
meet where the gap appears, so both these elements probably get an extra
margin out of the collapsing margin process. This gap won't become
larger than the largest vertical margin that ends up there - 10px.
Comment out #headerText h2{margin-bottom:10px;} and there will only be a
5px gap, since the other vertical margins that are involved are all 5px
tall. The gap will stay at 5px until all vertical margins on h2/h3 are
gone.
regards
Georg
--
http://www.gunlaug.no
--
Jerod Venema
Frozen Mountain Software
http://www.frozenmountain.com/
919-368-5105
__
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] Random padding in firefox...
Jerod Venema wrote: Thanks all for the replies...the overflow: hidden does indeed do the trick, [snip] ...I'm still playing with it to figure this out... I just sent something like this to the list a while back, so pardon the redundancy, but it seemed to help some folks, so here it is again: Brief ASCII Overview of Collapsing Margins: Key: [m] = margin, [p] = padding, [b] = border I think it helps to think of margins as broken lines, or like the teeth of a zipper, so that the top and bottom margins might be represented like this: m m m m m m m m m m m m m m m (#px top margin) Lorem ipsum dolor sit amet... m m m m m m m m m m m m m m (#px bottom margin) m m m m m m m m m m m m m m m (#px top margin) Lorem ipsum dolor sit amet... m m m m m m m m m m m m m m (#px bottom margin) Visualizing it that way helps to make sense of why they collapse. The teeth fall into and around each other, resulting in a collapsed margin like this: m m m m m m m m m m m m m m m (#px top margin) Lorem ipsum dolor sit amet... m (#px collapsed top/bottom margin) Lorem ipsum dolor sit amet... m m m m m m m m m m m m m m (#px bottom margin) To switch the margins to a solid form, we can add padding or borders, which act as a sort of filling and make the margins solid like this: m (#px top margin) p (#px top padding) Lorem ipsum dolor sit amet... p (#px bottom padding) m (#px non-collapsed bottom margin) m (#px non-collapsed top margin) p (#px top padding) Lorem ipsum dolor sit amet... p (#px bottom padding) m (#px bottom margin) ...or use borders which achieve the same effect. m (#px top margin) b (#px top border) Lorem ipsum dolor sit amet... b (#px bottom border) m (#px non-collapsed bottom margin) m (#px non-collapsed top margin) b (#px top border) Lorem ipsum dolor sit amet... b (#px bottom border) m (#px bottom margin) -- !-- ! Bill Brown macnim...@gmail.com ! Web Developologist, WebDevelopedia.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/
Re: [css-d] Some css questions
4css aka deb wrote: I had a layout that worked with IE6 really great, however, I used the alsett clearing method, which I am finding isn't one that works in IE7? The method works... http://www.tanfa.co.uk/archives/show.asp?var=300 ...it is only a question about how one applies it. Understanding has layout is the main one. I have read so much about it, but for some reason it isn't clicking in. The series of triggers for Layout in IE is non-standard... http://www.satzansatz.de/cssd/onhavinglayout.html ...but the effect is (for the most part) pretty similar to what we expect from more standard compliant browsers when we introduce block formatting... http://www.w3.org/TR/CSS21/visuren.html#block-formatting Both Layout and block formatting establish a box with a calculated area which contains all in-flow content/elements and isolates all content/elements from what's outside this box's area. - Note that floats are in-flow elements, as they are interacting with all other in-flow elements. Thus Layout and block formatting contain floats. - Absolute and fixed positioned elements are take out of the flow - they do not interact with in-flow elements. Thus Layout and block formatting do not contain these positioned elements. - IE7 and older complicates positioning a bit since they can only absolute position an element out of a box/container if that box/container has Layout. - Layout in itself is a bug the people behind IE made extensive use of to counteract other bugs in the Trident engine - a quick but problematic way to fix things. They are taking a somewhat more sound approach for IE8 - fixing and/or avoiding the actual bugs, so we can rely more on what's written in the standards when IE8 final arrives. Over flow hidden used for clearing? Not for clearing, but for block formatting. See above. Also the use of zoom? In this context IE's proprietary zoom is just another trigger for Layout - a hasLayout trigger if you like. See Thoughts on IE hack management... http://onhavinglayout.fwpf-webdesign.de/hack_management/ Zoom does of course have its own effects beyond that, as do all Layout and block formatting triggers. You must keep this basic vs. additional effects in mind when choosing clearing and containment methods, or else you may run out of options and not know how to solve design problems. Forgive my questions, but as I stated it has been a while for me and I feel like I have lost a lot of what I had within my brain over the past year plus. You may as well take advantage of that loss, and clear out any other misconceptions you may have collected over the years. Both standards and browsers' implementation of them have changed over the years, and old concepts tend to become less accurate and in many cases misleading over time because of this. It's a natural/logical process. A bit OT, but I tend to perform clear, update, refine concepts processes on my brain at irregular intervals - quite often really, to avoid being hampered by old information, observations and potential misconceptions. In a field as unfinished/unstable as web design, such frequent personal unlearn, relearn, refine processes are necessary if one wants to keep phase with progress and keep track of regress. Old browsers (and their bugs) never die, they just fade away - unfortunately :-) regards Georg -- 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] Div Positioning
Hello, I've got a stripped down version of my site's header here: http://www.rswilley.com/layout/index.html I'm having an issue with the navigation in IE7. If you take a look at it you will see that the nav buttons are too low. Why is there so much gap in IE7? If you look at it in Firefox it is basically where I want it. Am I going to have to use two different styles and set the top of the nav container or is it an issue with my code? Thanks, Robert __ 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] Div Positioning
Robert Swilley wrote:
http://www.rswilley.com/layout/index.html
I'm having an issue with the navigation in IE7. If you take a look
at it you will see that the nav buttons are too low. Why is there so
much gap in IE7? If you look at it in Firefox it is basically where
I want it.
1: wrong selector. There's no ul inside #navlist - #navlist _is_ the ul.
2: vertical margin/padding defaults are left in place - you've only
zeroed them on the left side (or at least tried to do so), and these
defaults are not the same across browser-land.
Make it...
#navlist {
margin: 0;
padding: 0;
white-space: nowrap;
}
...and all browsers will agree - on one set of styles.
regards
Georg
--
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/
