Re: [css-d] Div Positioning

[Gunlaug Sørtun]

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/

[css-d] Div Positioning

[Robert Swilley]

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] Some css questions

[Gunlaug Sørtun]

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...

...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...

...but the effect is (for the most part) pretty similar to what we
expect from more standard compliant browsers when we introduce "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"...


"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/

Re: [css-d] Random padding in firefox...

[Bill Brown]

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)

-- 

__
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]

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  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/

[css-d] Page Check Please

[hairball]

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.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] Hide labeled link [a rel]

[Bill Brown]

> 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.

-- 

__
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]

[Brian Funk]

Luigi Assom wrote:

> I have the following class which style many different links.
> 
> Date
>  rel="category tag">Mostra Tutti  and  tag:
> 
> link_i1,  rel="tag">link_i2,
> 
> Modifica
> 
> I want to hide all the links labeled rel="tag", maintaining visibility
> for the rest of the content.


add a class to those elements and use {visibility: hidden;}

example:


Brian

__
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

[Bill Brown]

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/

-- 

__
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

[4css aka deb]

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/

[css-d] Hide labeled link [a rel]

[Luigi Assom]

Hi all!

I hope this mailing list will help.

I have the following class which style many different links.

Date
Mostra Tutti  and  tag:

link_i1, link_i2,

Modifica




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/

Re: [css-d] Random padding in firefox...

[Gunlaug Sørtun]

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/