[css-d] Does line-height override height in IE6 and lower?

[Matt Dawson]

Hi all -

It may turn out that I need to describe the particulars of my problem, but
first I thought I'd try paring the case down to just its bare essentials.

I have an unordered list. Each list item is a single word long and has a
height of 12px applied to it. However, in IE6, the base line-height I've
applied earlier in the document (which is part of a collection of general
browser reset rules I use for all my projects) is calculating to a value
larger than 12px. In all browsers except IE6 and lower, changing the height
does what I expect. That is, if I make the height of the list element 2px,
all but 2px of the list element's content disappears. In IE6, because the
line-height is calculating to a larger value, changing the height has no
effect.

Is this part of an already documented bug? I've been googling for a good
hour trying to find another documented instance of this, and I can't find
anything.

Thanks for your help!

Matt
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] A strange Safari bub - related to negative margin?

[Matt Dawson]

Hi all -

I've never encountered a Safari-only bug before. I'm stumped.

The draft page with the problem can be seen here:

http://thenestedtest.com/waterworks/ww_d1.html

The CSS for it is here:

http://thenestedtest.com/waterworks/styles.css

The problem is with the navigation. In Firefox, Opera, Camino, the rollovers
work as planned. The line items each receive a top border that just overlaps
the dashed top border set on the ul. I accomplished this by putting a
negative margin on the links within each li. On hover, I also adjusted the
padding to make the text stay visually put on rollover.

But then in Safari, some combo of the padding and the negative margin causes
the text to jog up and down by one pixel.

Again, I'm STUMPED.  Does anyone have an idea of what might be going on?

Thanks!

matt
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] A strange blockquote issue in IE6 - hasLayout related

[Matt Dawson]

> It looks like the 'Magik Creeping Text'[1] bug. I knew it as 'the MSIE
> staircase'.



Thanks, Georg! I looked all over PIE - I don't know how I missed this
article.

What a strange bug. I don't think I'll ever really understand hasLayout.
It's getting to the point where if a bug looks completely nonsensical, I
just assume it's a hasLayout bug. The first thing I do is add height: 1%;

Matt
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] A strange blockquote issue in IE6 - hasLayout related

[Matt Dawson]

Hi all -

So I have this problem, and I found a fix. Now I'm looking for *why.*

Here's the site: www.thenestedfloat.com
Here's the css:
http://www.thenestedfloat.com/wp-content/themes/ThickFloat/style.css

On my blog, any time I use a blockquote, all text in the left column that
follows the blockquote has its margins re-rendered in IE6. The result is
that the left side of that main content column is clipped.

The fix was to trigger hasLayout on the blockquotes - I used height: 1%;

So without seeing the problem in action, is there anyone that has insight
into the *why* of this? Why does an element not having layout impact the
flow of the rest of the document?

I wish there was some way I could mark a list post as "low priority," as
this is a question of purely academic interest.

Thanks!

Matt
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Sidebar getting dropped in lte IE6

[Matt Dawson]

Probably a problem with the italics. Anyway. Try
>   #content {overflow-x:hidden}
> and apply this hack via a Conditional Comment.
>
> Ingo
>
> --
> http://www.satzansatz.de/css.html



Excellent! That worked! Thanks, Ingo.

Now: why did it work?

1) I've never heard of a bug that causes italics to influence the width of
an element. How does that work?

2) As I understood it, overflow-x is a CSS3 property that isn't supported by
IE6. So why does feeding that declaration solve the situation?

Thanks again!

Matt
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Sidebar getting dropped in lte IE6

[Matt Dawson]

Hi all -

Once again, IE 6 and under has me stumped.

On this page:

http://www.southernenvironment.org/newsroom/philreed/winners.htm

the photo and blurb that should be up there next to the center column
content is getting pushed down, right past the bottom of the content column.
The thing that has me confused is that this page:

http://www.southernenvironment.org/newsroom/philreed/judges.htm

is almost identical on a structural level, but doesn't exhibit the same
behavior. When I compare the two files, the only difference as far as I can
see is the number of unordered lists in the center column. That, and the
first file doesn't use any h3's in the content column. I've focused on those
two differences in my debugging, but no dice.

Both these pages draw on two CSS files, which can be found here:

http://www.southernenvironment.org/css/main.css
http://www.southernenvironment.org/css/philreed.css

Totally confused! Any ideas?

Thanks for your help -

Matt
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] different browswer views

[Matt Dawson]

There are a number of different pay sites out there, and if you want
super-reliable, fast service, they may be the way to go.

browsershots.org is what I use. It's an amazing free resource. The only
downside is that you have to wait - sometimes a couple hours depending on
which browser you're most concerned about. Plus, sometimes the browser you
may need the most isn't offered at that exact moment. But usually I've found
that the IE browsers are available, and they return results pretty quick.

Plus, again, you can't beat free.

matt
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Browser alignment differences

[Matt Dawson]

Still, if you ever end up with a page where there is a small amount of
content - especially on a big screen - that container will still stretch to
the bottom of the page, leaving a largely empty column.

...but I'm glad it's working!

Try adding...
>
> html, body {height: 100%;}
> #container {min-height: 100%;}
> * html #container {height: 100%;}
>
> ...and restyle the background to avoid visible overflow...
>
> html, body {background: #fff url(../images/bg.jpg) center repeat-y; }
>
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Browser alignment differences

[Matt Dawson]

>
> Sadly, none of that did anything to fix the problem. Any ideas on making
> the
> container extend down to 100% of the vertical space?



Well, for starters, you might want to think about changing your use of that
background image. If you make the container div wide enough to contain the
image bg image(looks to be approx. 750px?), tile the image down that, and
then wrap the content in another div, you'll have more flexibility.
Ultimately, you probably won't want the shadow to tile all the way down to
the bottom of the page if the content isn't long enough to fill the screen.
If that's the case, you'll want to learn how to clear a container (
http://www.quirksmode.org/css/clearing.html). Clearfixing (google it) is
another option.

This is also likely to fix your current borders problem.

IMO, it's hard to do too much layout testing until you have more dummy
content on the page. You may want to beef up your html with some more test
material (like columns, images, text, etc)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Browser alignment differences

[Matt Dawson]

I'm not sure if this will actually fix your problem, but I think you
intended to place your text-align: center declaration on the body, not on
the container. (That is, I think you intend to use this to correctly center
your layout for IE 5. If that's the case, put it on the body element
instead.) That *might* fix your problem.

Also not a direct answer, but I notice that in FF, the black 1px border on
your h1 overlaps your body background image by one pixel on each side.
Wouldn't it be easier to shrink the image by two pixels, and bring your
border inside the body background image? I've found that overlapping like
this makes things unnecessarily complicated - and might also be contributing
to this problem you're seeing in IE.

Let us know if that helps.

Matt
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How to Filter Out Explorer 7 and Below

[Matt Dawson]

> The real foolishness is arguing over browser "market share" and
> which browsers are "worth supporting" and what consitutes being in
> the "minority", among other things.  Any browser can be a minority
> browser, depending on the site in question.  On my web site, for
> example, IE/Win (all versions) is a clear minority browser.  On other
> sites, the story will be different.  So let's concentrate on whether
> hacks are useful or not, please.



Excellent point - I really need to keep reminding myself of that.

I just wish I could get my boss to understand that it's a problem when page
x renders like a busted up jigsaw puzzle in Firefox - especially when a full
sixth of our total audience uses it.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How to Filter Out Explorer 7 and Below

[Matt Dawson]

The reason this hack rubs me the wrong way is that you're using the hack to
pass a value to FF and other compliant browsers. IE7 gets the unblemished,
unhacked version. It's the exact opposite of the way I usually work.

(Also, calling Safari a "minority browser" is absolute foolishness.
Konqueror or Epiphany *maybe* but definitely not Safari.)

matt
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Totally stumped on an IE 6 bug...HELP!

[Matt Dawson]

Thanks, Gunlaug. That worked great!

The only problem remaining seems to be that, according to what
browsershots.org is showing me, IE 5.0 reads height:1% and collapses the
container around its contents. Do you know if there's a separate solution
for that browser? (It's not a deal breaker, as IE5.0 appears to deal with it
just fine.)

Thanks!

Matt

On 1/22/07, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote:
>
> Matt Dawson wrote:
>
> > www.thenestedfloat.com/examples/prism/index.html
>
> You're running into IE6' 'auto-expansion' bug - IE6 doesn't respect
> declared dimensions on containing-elements if content is too big.
>
> A couple of elements are pushing their containers - they are too wide,
> and IE has problems calculating how wide each element/container really
> should be in the end.
>
> The following addition / correction should bring old IE back on track...
>
> div#nav ul {width: auto; height: 1%;}
> div#footer {width: auto;}
>
> regards
> Georg
> --
> http://www.gunlaug.no
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Totally stumped on an IE 6 bug...HELP!

[Matt Dawson]

This one has officially gotten the best of me.

I have this layout:

www.thenestedfloat.com/examples/prism/index.html

with CSS located here:

www.thenestedfloat.com/examples/prism/style.css

It works exactly how I want it to in all browsers except IE 6 and under. The
problem: while the nav bar spans the entire "wrap" div, the other elements
(including, most noticeably here) the footer. If you look at the footer, it
extends almost the whole width of the wrap, but comes about 40px short. (The
same is true of the header and content divs, but I'm away from an ftp
program with which to make the problem more apparent.

I'm absolutely stumped. Clearly, it's a horizontal formatting issue, but
I've tried taking virtually all the horizontal formatting off this layout to
try and find the culprit, but with no luck!

Any ideas?

Thanks in advance!

Matt
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] how to hyperlink a background image?

[Matt Dawson]

I think everyone might be misunderstanding her question.

She may just be referring to image replacement, which is a perfectly valid
technique used all over the place:
http://www.mezzoblue.com/tests/revised-image-replacement/

matt


> i don't think you should do this.  Users expect links to be indicated
> visually and if they just click on some part of a page at random and
> it sends them back to your home page they are likely to get all
> frustrated and just go away.  Unless you are dealing with a
> specifically limited audience who can learn the convention (say a
> group of folks behind a cooporate firewall), I'd stay away from doing
> this, even if you can.
>
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] s inside inline s break free of their containers

[Matt Dawson]

> Everything is unstyled apart from li{display:inline} and the , which
> has strong padding - but the y-padding extends beyond the ancestral
> elements.


It would help to have some context regarding what you're trying to
accomplish. It would make sense that padding on your anchor elements would
extend outside of the list items, because they're inline, and therefore
subject to the inline box model (important because vertical margins and
padding don't render the same way .)

Also: the anchors are also inline (unless you're declaring them to be
display:block) and so shouldn't have any vertical padding to begin with. So
*are* you declaring them to be display:block?

More specifics would help.

Matt
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Problem with images and floats

[Matt Dawson]

I should also point out that your namespace was correct for XHTML
1.0Transitional - just not the XHTML
1.1 that you're using in this document.

Matt
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Problem with images and floats

[Matt Dawson]

This is a total shot in the dark, but it sounds a whole bunch like you're
triggering quirks mode in IE. (Those sound like standard IE5 behaviors - and
while I'm not sure that's exactly how many IE5 behaviors are triggered by
quirks mode, I know some of them are.)

On looking at your namespace definition, it looks like you have an extra
variable in there - an unnecessary lang="en" attribute-value pair.

You should use:

http://www.w3.org/1999/xhtml"; xml:lang="en">

Yours reads:

http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">

Let me know if this fixes anything. I'm very curious.

Matt
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Request for site check (and critique if you've got time!)

[Matt Dawson]

Thanks David and Ian!

David - I've been having problems with that extra horizontal scroll for some
time - it just keeps popping back up. For some reason, when I add padding to
the global nav links, it IE6+ wants to push the global nav out of the
defined box I've set for it. (I won't go too much farther into it than that,
as I've now found a solution). Thanks for pointing it out!  Also: that
missing "a" was actually an escaped a I was using in a hack to target IE5,
but because you caught that other bug, it forced me to find another way to
deal with the problem - so now my page is validating again.  Whew!


On 1/14/07, ~davidLaakso <[EMAIL PROTECTED]> wrote:
>
> Matt Dawson wrote:
> > http://www.thenestedfloat.com
> >
> > I'd really appreciate a site check. I'm on a mac, so I've done only
> limited
> > testing in all versions of IE/Win.
> > Matt
> re: xp
> Looking good in latest version of opera and ff. If it makes any
> difference to you, you are drawing a small horizontal scroll bar in
> ie7.0 and ie 6.0 (but not in ie/5.5 nor 5.01). Your very nice logo is a
> no-show in the dead ie/5.01. The page holds a very nice font scaling
> with and without a side bar in place and folds nicely. A missing letter
> "a" in margin is keeping your css file from validating without error
> (tsk, tsk). It is a nice, clean,  minimal design. Nice job, Matt.
> Best,
> ~dL
>
> --
> http://chelseacreekstudio.com/
>
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] color:none?

[Matt Dawson]

As far as I know, the transparent value is only defined for use with color
in the CSS3 specs and is, as of yet, unsupported by any browser.

If you find I'm wrong about that, let me know - it'd be mighty useful.

Matt
On 1/15/07, Bjoern Hoehrmann <[EMAIL PROTECTED]> wrote:
>
> * [EMAIL PROTECTED] wrote:
> >Is there a way to set a font color to none? I want to make some
> >graphic-only buttons in a multi-skin site, and I can't remove the values.
>
> It is generally possible to use `transparent` as color; where that does
> not work you could set the color to the background color, and if that is
> not possible, you could try to remove the text with the 'content'
> property; if that does not work either, then there is no good way.
>
> By the way, its best to start new threads using the New Mail feature of
> your mail client instead of replying to some other message and changing
> the subject.
> --
> Björn Höhrmann · mailto:[EMAIL PROTECTED] · http://bjoern.hoehrmann.de
> Weinh. Str. 22 · Telefon: +49(0)621/4309674 · http://www.bjoernsworld.de
> 68309 Mannheim · PGP Pub. KeyID: 0xA4357E78 · http://www.websitedev.de/
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] color:none?

[Matt Dawson]

"none" is not a valid value for the color property. Now, I assume what
you're trying to do is make the text of a link not display. There are a
number of ways to replace text with an image. The best place to start your
research is at Dave Shea's mezzoblue site. He keeps an updated tally of all
the techniques to replace text with images.

http://www.mezzoblue.com/tests/revised-image-replacement/


On 1/15/07, [EMAIL PROTECTED] <
[EMAIL PROTECTED]> wrote:
>
> Is there a way to set a font color to none? I want to make some
> graphic-only buttons in a multi-skin site, and I can't remove the values.
>
> --
> Marc Luzietti
> Flagship Project
> Bayview Financial, L.P.
> (305) 341-5624
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] page check please

[Matt Dawson]

Though I believe everything is working as you intend, I would suggest
rethinking the header rollover trick. When I roll over the header image, the
image extends, and thus increases the height of the page. But then if I move
on to the navigation bar - in an effort to navigate to a particular section
- the page shrinks, and my mouse pointer is effectively "pulled away" from
the nav bar. i have to scroll up the page to get to it, now that the page
has reverted to its shorter length.

For what it's worth, I'm on Firefox 2.0 on the mac. I'm actually not sure
how other browsers handle this type of scenario - though now I'm intrigued
to find out!

matt

On 1/13/07, Jehangir Larry <[EMAIL PROTECTED]> wrote:
>
> Appreciate a page check - different user agents (specially older IE), with
> suggestions for improvement.
> www.teerthyatri.com
> Many TIA.
> Larry
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Request for site check (and critique if you've got time!)

[Matt Dawson]

Hi everyone -

I've recently finished a redesign of my site, a blog dedicated to - what
else! - web design and web standards.

http://www.thenestedfloat.com

I'd really appreciate a site check. I'm on a mac, so I've done only limited
testing in all versions of IE/Win. Let me know if you find anything amiss.
(I'm particularly concerned that all parts of the design - header, body, and
footer - are all centered, as I know centering using auto margins in IE can
be problematic, and I'm mixing my methods here.)

Also, I'd really appreciate any feedback you have about the look or feel of
the site.

Thanks so much!

Matt
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Page check for newbite

[Matt Dawson]

The short answer is no, that's not possible. Granted, you could do some
complex math and set up max and min widths for the containing element, but
that's not universally supported and...well, it's just overly complicated.

If you want to use percentage margins to separate the columns, consider
floating them to position instead.  This will require an extra container div
to hold the three columns, as your current markup would have them floating
up to the top of your header.

Floating isn't the only option: you could also wrap those columns in a div,
center the containing div, and use relative positioning to place the columns
within the containing div. It all depends on the final look you want.

(If you need more specific help on this, I'd be glad to consult off list.)

Matt

On 1/12/07, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote:
>
> Wow, what an easy fix. Thanks.
>
> Another question: how to think about px versus percentage when setting up
> the margins for these boxes on the galleries page? I'd like to use
> percentages to accommodate different size viewports, but if my boxes are
> px-sized, is that possible?
>
> Before CSS, I used to think of myself as a very logical person ...
>
> Beth
>
>
> -Original Message-
> From: [EMAIL PROTECTED]
> [mailto:[EMAIL PROTECTED] On Behalf Of Matt Dawson
> Sent: Friday, January 12, 2007 5:07 PM
> To: [EMAIL PROTECTED]
> Cc: css-d@lists.css-discuss.org
> Subject: Re: [css-d] Page check for newbite
>
>
> Yeah, it applies on that page too.
>
> Fixed position can be a bit tricky for that very reason. Floats will push
> each other out of the way and never overwrite each other, but the same
> can't
> be said for positioned elements. Any time you use positioning, you need to
> test (or at least think through) as many conceivable scenarios as
> possible.
>
> Matt
>
> On 1/12/07, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote:
> >
> > Thanks so much. (The specific reason I set it up the way I originally
> had
> > it was ignorance :) although I don't have that excuse, really, after
> going
> > through Eric Meyer's really excellent book *CSS Web Site Design*.)
> >
> > I guess that same solution would apply to my wrong-headed layout here?:
> > http://www.callibeth.com/galleries.htm
> >
> > Beth
> >
> >
> > -Original Message-
> > From: [EMAIL PROTECTED]
> > [mailto:[EMAIL PROTECTED] On Behalf Of Matt Dawson
> > Sent: Friday, January 12, 2007 4:36 PM
> > To: [EMAIL PROTECTED]; css-d@lists.css-discuss.org
> > Subject: Re: [css-d] Page check for newbite
> >
> >
> > For starters, it's a very attractive first css layout. Congrats!
> >
> > I noticed one thing right away- and I don't think it has anything to do
> > with
> > the Safari problem you mention.
> >
> > Your layout scheme for the three columns (defined in index.css) is a
> > little
> > wonky. If I resize the size of my browser window, the left two
> > boxes/columns
> > (Calligraphy & Book Arts and Art Prints for Sale) stay relatively still,
> > while the Weddings & Celebrations box/column, moves wildly about. The
> > reason
> > for this can be found in this code:
> >
> > #col1 {
> > width: 150px;
> > left: 330px;
> > background-image: url(../site_images/A.jpg);
> > }
> > #col2 {
> > width: 150px;
> > left: 555px;
> > background-image: url(../site_images/B.jpg);
> > }
> > #col3 {
> > width: 150px;
> > right: 330px;
> > background-image: url(../site_images/C.jpg);
> > }
> >
> > The problem is that third column is being position relative to the right
> > side while the other two are relative to the left. What you end up with
> is
> > a
> > scenario at certain browser window sizes where the third column obscures
> > one
> > or both of columns 1 and 2.
> >
> > Easy fix though, right? All you have to do is position col3 with the
> left
> > offset property.
> >
> > (Was there a specific reason you set it up the way you have it?)
> >
> > Matt
> >
> > On 1/12/07, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote:
> > >
> > > My first CSS website. And my first post (hope it's not a duplicate),
> > > although I've been trying to follow and learn from the discussions for
> > > several weeks.
> > >
> > > http://www.callibeth.com/index.htm
> > > Alt

Re: [css-d] Page check for newbite

[Matt Dawson]

Yeah, it applies on that page too.

Fixed position can be a bit tricky for that very reason. Floats will push
each other out of the way and never overwrite each other, but the same can't
be said for positioned elements. Any time you use positioning, you need to
test (or at least think through) as many conceivable scenarios as possible.

Matt

On 1/12/07, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote:
>
> Thanks so much. (The specific reason I set it up the way I originally had
> it was ignorance :) although I don't have that excuse, really, after going
> through Eric Meyer's really excellent book *CSS Web Site Design*.)
>
> I guess that same solution would apply to my wrong-headed layout here?:
> http://www.callibeth.com/galleries.htm
>
> Beth
>
>
> -Original Message-
> From: [EMAIL PROTECTED]
> [mailto:[EMAIL PROTECTED] On Behalf Of Matt Dawson
> Sent: Friday, January 12, 2007 4:36 PM
> To: [EMAIL PROTECTED]; css-d@lists.css-discuss.org
> Subject: Re: [css-d] Page check for newbite
>
>
> For starters, it's a very attractive first css layout. Congrats!
>
> I noticed one thing right away- and I don't think it has anything to do
> with
> the Safari problem you mention.
>
> Your layout scheme for the three columns (defined in index.css) is a
> little
> wonky. If I resize the size of my browser window, the left two
> boxes/columns
> (Calligraphy & Book Arts and Art Prints for Sale) stay relatively still,
> while the Weddings & Celebrations box/column, moves wildly about. The
> reason
> for this can be found in this code:
>
> #col1 {
> width: 150px;
> left: 330px;
> background-image: url(../site_images/A.jpg);
> }
> #col2 {
> width: 150px;
> left: 555px;
> background-image: url(../site_images/B.jpg);
> }
> #col3 {
> width: 150px;
> right: 330px;
> background-image: url(../site_images/C.jpg);
> }
>
> The problem is that third column is being position relative to the right
> side while the other two are relative to the left. What you end up with is
> a
> scenario at certain browser window sizes where the third column obscures
> one
> or both of columns 1 and 2.
>
> Easy fix though, right? All you have to do is position col3 with the left
> offset property.
>
> (Was there a specific reason you set it up the way you have it?)
>
> Matt
>
> On 1/12/07, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote:
> >
> > My first CSS website. And my first post (hope it's not a duplicate),
> > although I've been trying to follow and learn from the discussions for
> > several weeks.
> >
> > http://www.callibeth.com/index.htm
> > Although this page looks as I want it to in Firefox/PC and IE7/PC, I
> > understand that this page doesn't do well in Safari/MAC -- the first and
> > third letter boxes fall below the viewport, and middle box doesn't show
> up
> > at all. Any clues as to how to fix it?
> >
> > Any other advice appreciated. I'm afraid my CSS has midstream-project
> > spread. I'm not sure whether I should reference the CSS files. In case
> > yes:
> > http://www.callibeth.com/css/main.css
> > http://www.callibeth.com/css/index.css
> >
> > Regards,
> >
> > Beth Lee
> > Tallahasee, Florida
> > www.callibeth.com
> > callibeth.blogspot.com
>
>
>
>
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Page check for newbite

[Matt Dawson]

For starters, it's a very attractive first css layout. Congrats!

I noticed one thing right away- and I don't think it has anything to do with
the Safari problem you mention.

Your layout scheme for the three columns (defined in index.css) is a little
wonky. If I resize the size of my browser window, the left two boxes/columns
(Calligraphy & Book Arts and Art Prints for Sale) stay relatively still,
while the Weddings & Celebrations box/column, moves wildly about. The reason
for this can be found in this code:

#col1 {
width: 150px;
left: 330px;
background-image: url(../site_images/A.jpg);
}
#col2 {
width: 150px;
left: 555px;
background-image: url(../site_images/B.jpg);
}
#col3 {
width: 150px;
right: 330px;
background-image: url(../site_images/C.jpg);
}

The problem is that third column is being position relative to the right
side while the other two are relative to the left. What you end up with is a
scenario at certain browser window sizes where the third column obscures one
or both of columns 1 and 2.

Easy fix though, right? All you have to do is position col3 with the left
offset property.

(Was there a specific reason you set it up the way you have it?)

Matt

On 1/12/07, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote:
>
> My first CSS website. And my first post (hope it's not a duplicate),
> although I've been trying to follow and learn from the discussions for
> several weeks.
>
> http://www.callibeth.com/index.htm
> Although this page looks as I want it to in Firefox/PC and IE7/PC, I
> understand that this page doesn't do well in Safari/MAC -- the first and
> third letter boxes fall below the viewport, and middle box doesn't show up
> at all. Any clues as to how to fix it?
>
> Any other advice appreciated. I'm afraid my CSS has midstream-project
> spread. I'm not sure whether I should reference the CSS files. In case
> yes:
> http://www.callibeth.com/css/main.css
> http://www.callibeth.com/css/index.css
>
> Regards,
>
> Beth Lee
> Tallahasee, Florida
> www.callibeth.com
> callibeth.blogspot.com
>
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] understanding negative margins and floats

[Matt Dawson]

It took me a minute to figure out what you were asking - but once I popped
the hood, it makes sense.

Floating an element takes it out of the normal flow of the document. In the
case of your navigation bar (on the left), you have 4 nearly-identical
speced elements (ie same size, proportions, etc.) each one having a class
"navigation." The rules about where an element floats *to* in any given
document can be pretty complicated. But the simple explanation is that they
float relative to their containing element.  Since all of these navigation
divs have the same containing element (in this case, the "body" element),
AND because there's no room for them to cozy up next to each other in order
(because they're width is costrained) they're all going to float to the same
location.  Notice that the last navigation bar (the one with its color set
to green) is the one on top, as you'd expect).

The important part is that first one, though: a floated element is taken out
of the normal flow of the document. They can be contained in a couple of
ways; one of the simplest (but sometimes problematic) solutions is to also
float whichever element you want to be the container for the box in
question.

For a good float tutorial, check out Eric Meyer's CSS: The Definitive
Guide.
It has the best explanation of floating behavior I've seen.

Personally, negative margin layouts make my head hurt.




On 11/30/06, mean dspt <[EMAIL PROTECTED]> wrote:
>
> Hi, I was experimenting with layouts from Layout Gala
> http://blog.html.it/layoutgala/
> it uses exessively negative margins and floats for layouts. I've
> modified one of the layouts, and added some new divs. The sample page
> is there http://pmplus.org/layout7.html You can notice the side
> columns are strangely rendered.
> I can't understand the behaviour of .navigation and .extra divs. Why
> are they stacked one over each other, instead of running one beneath
> another? there's no absolute or relative positioning used...
> What rules make them overlap?
>
> Yegor
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Help with a CSS bug specific to dreamweaver...

[Matt Dawson]

HOLY CRAP!  I can't believe that worked.  Wow.  Thanks, Philippe!

You're right - this should be filed under most ridiculous bug fix ever.

Matt

On 10/25/06, Philippe Wittenbergh <[EMAIL PROTECTED]> wrote:
>
>
> On Oct 25, 2006, at 6:38 AM, Matt Dawson wrote:
>
> > And here's where the problem is: I've applied a tiled background
> > image to
> > #main_body to make the blue main content column stretch to the
> > footer, even
> > if the right sidebar is longer.  Works fine in all browsers.
> >
> > BUT in dreamweaver, adding this tiled image to the background
> > through css
> > causes all of my text to "black out" in design view - that is, it
> > looks like
> > someone took a black higlighter to those two columns.
> >
> > As I've mentioned in past emails, I have to use Dreamweaver, as
> > it's the
> > software we've committed to as an organization.
>
> They *still* haven't fixed that bug ?
> I reported that problem while beta testing Dreamweaver back in 2004.
> (and I haven't used that app since those betas timed out).
>
> The fix that worked back then is absolutely stupid.
> background: url(../images/lt_blue_tile_homepage.gif) repeat-y 0px 0px;
> note the addition of px to position co-ordinates: instead of 0 0 make
> it 0px 0px.
>
> Philippe
> ---
> Philippe Wittenbergh
> <http://emps.l-c-n.com>
>
>
>
>
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Help with a CSS bug specific to dreamweaver...

[Matt Dawson]

Hi all -

I've already gotten so much great help from the list on this project - so
thanks to everyone.

My problem is I have this css-based layout:

http://www.southernenvironment.org/test/index2.html

that works in all browsers but IE5 and IEMac (I'm working on separate hacks
for those), but has an annoying bug in dreamweaver.

My layout is based on instructions from Dan Cederholm's Bulletproof Web
Design.  In short, I have three columns.  The main content column and the
right sidebar are situated in a wrapper div (called #main_body) that are
floated to the left.

And here's where the problem is: I've applied a tiled background image to
#main_body to make the blue main content column stretch to the footer, even
if the right sidebar is longer.  Works fine in all browsers.

BUT in dreamweaver, adding this tiled image to the background through css
causes all of my text to "black out" in design view - that is, it looks like
someone took a black higlighter to those two columns.

As I've mentioned in past emails, I have to use Dreamweaver, as it's the
software we've committed to as an organization.

Has anyone encountered this problem?  Is there a fix?

(Oh, and I did also ask about this on the Adobe forums.  So I apologize if
any of you already came across this question there...)

Mat
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Using Dreamweaver with standards-based websites?

[Matt Dawson]

Wow!  I'm away from my email for a day and look at all the terrific
replies!  Thanks to everyone for your advice.

For those who mentioned it'd be easier if you could see the design, I've
posted it here:

http://www.southernenvironment.org/test/home_redraft.html

For comparison sake, check out the current live version of our homepage

http://www.southernenvironment.org/index.htm

Table soup.  Seriously.  Wanna feel my pain?  Lift the hood on that bad boy
and take a gander.

So anyway, I'm aware that my css for the redesign is a bit soupy itself; if
I were to move forward, I'd start breaking this puppy into some separate
sheets - one for main page layout, one for fonts, maybe one for images.  Our
site has more than 150 individual pages,  with at least half a dozen
different kinds of layouts, so it'd be tricky (and fun) to figure out the
best way to organize the css.

My main problems right now in dreamweaver: the left most column (what we
call the toc, or table of contents) completely dissapears from the design
view in dreamweaver 8.  Someone mentioned negative margins wreaking havoc.
Could that be it?   Also: the header navigation and the footer are a bit
quirky.  In dreamweaver, the header list items "double up" (ie. "Our
Programs" appears on two lines rather than one - not a big deal).  Looks
fine in all browsers I've tried.

Also an issue: the footer is a bit wonky in dreamweaver - the blue border
beneath the footer navigation shows in dreamweaver as longer than the border
currently applied to the bottom of the three column container.  Again, looks
fine in all browsers.  But then again, I'm not very pleased with the way the
footer looks now.

The most annoying problem is that missing table of contents.  Any ideas?

Unfortunately, the overall layout of the site isn't really up for discussion
right now in our organization.  For instance, elminating (or at least
drastically simplifying) the table of contents - as I'd like to do - isn't
an option.  But I'd love to hear your opinions on the overall look of the
page.

Thanks so much to everyone for your help!

matt

On 10/17/06, Stephanie Leary <[EMAIL PROTECTED]> wrote:
>
> Matt Dawson wrote:
> 
> > I downloaded the trial version of Dreamweaver 8 and.no dice.  The
> page
> > is every bit as fractured in design mode in 8 as it was in MX.
> >
> > Is all hope lost?  I won't be able to get approval for reworking our
> website
> > with a CSS layout unless there's some program out there that would let
> > people make simple WYSIWYG edits.  Is there another editor out there
> that
> > might work?  Is there a setting in Dreamweaver that I'm just
> missing?  Or am
> > I just SOL?
>
> Dreamweaver handles some CSS layouts better than others. Negative margins
> almost always give me trouble, for example, but I've had good luck with a
> lot of the layouts from positioniseverything.net. If you're going for
> something relatively standard, like 2 or 3 columns with a header and
> footer,
> try downloading a handful of sample layouts from the usual suspects and
> see
> what works.
>
> If you have a minute, let Adobe know what kind of layout you were trying
> to
> use: http://www.adobe.com/cfusion/mmform/index.cfm?name=wishform
>
> They do pay attention to that form -- or at least Macromedia did; I
> presume
> there's still someone listening on the other end. Filing a bug report
> won't
> solve your immediate problem, but it might lead to better support in DW9.
>
> --
> Stephanie Leary
> Web Communications Specialist
> Texas A&M University System
> http://tamus.edu
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Using Dreamweaver with standards-based websites?

[Matt Dawson]

I work as a web manager for a smallish nonprofit.  Though I'm the primary
keeper of the site, there are a number of others in the org that edit it.
Dreamweaver is the program that everyone's familiar with, so that's what we
use.

In my spare time, I've been redesigning the homepage with CSS - I want so
badly to switch from our table based layout to something that I can actually
understand.  All of my redrafting has been done by handcoding.  I didn't
think twice about the fact that it looked like crud in Dreamweaver MX, as
I'm aware that its support for CSS is extremely weak.

Well, I finished a draft last night, and having heard that Dreamweaver 8 had
far stronger CSS support, I started getting excited.  If Dreamweaver 8 made
my redraft editable in design mode, maybe I could sell this to everyone else
who works on our site.

I downloaded the trial version of Dreamweaver 8 and.no dice.  The page
is every bit as fractured in design mode in 8 as it was in MX.

Is all hope lost?  I won't be able to get approval for reworking our website
with a CSS layout unless there's some program out there that would let
people make simple WYSIWYG edits.  Is there another editor out there that
might work?  Is there a setting in Dreamweaver that I'm just missing?  Or am
I just SOL?

Thanks for your help!

Matt
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Centering a floated, unordered list in its container.

[Matt Dawson]

Hi all -

I'm STUMPED.  I'm sure most of you use unordered lists to do horizontal
navigation bars.  You're taking an unordered list, floating the list items
to the left, and applying padding and margins to space the items out, apply
background images, etc.

But now that it's floated, what if you want to center the list in, say a
containing div?  That's what I'm trying to do, and I've gotten myself
totally stumped.

You all may not need the example, but the code looks something like this:


 
  ...
  ...
  ...
 


The whole div is contained by another div that is floated and cleared
because of the way I've done the overall page layout.  And as I said, the
list items area floated left to get them to snap horizontal.  The page is
fixed width, 720px.  How can I center this in a  way that increasing or
decreasing the font size in the browser isn't going to totally break the
centering?

HELP!

(And thanks :) )

Matt
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Adding a top border makes DIV snap to the top. Why?

[Matt Dawson]

Hello all -

Here's a very basic question. I've set up a very basic example html file
attached to this email.  In it and the css file also attached, you'll see
that I'm setting up a centered content column with a fixed width of 500px
and fluid borders.

In most pages, I would in fact these elements to behave just as they are
here - the content column is centered and is "snapped to" the top of its
parent, the "body" element.

But if I delete the red border on the content column, the column unsnaps
from the top of the body.  Why is that?

I know the example html file is very basic, and something about its
simplicity probably explains this behavior.

Oh, I'm viewing in Firefox 1.5.

Thanks for your help!

Matt
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Using "display: inline;" for navigation lists

[Matt Dawson]

Hello all -

I'm a complete CSS novice, with only about ten months HTML experience (all
learned from helping with a table-based redesign of my company's website)
and only one month of self study in xhtml, css, and standards-based coding.
So, you know, take pity on me and stuff.

On a couple sites that I've looked at in the last couple weeks (Dan
Cederholm's simplebits.com being a perfect example), the  elements that
make up the navigation bar are styled to float: left.  However, on Dan's
site, I don't see a display: inline rule applied to any part of that list.
I noticed that in the first chapter of his Web Standards Solutions, you use
display: inline to take the "first step" towards making the example list
horizontal.

What's the benefit of displaying the list as inline if floating each 
element left within the containing block could accomplish the same effect?
Are there any examples where you *have* to use the display: inline rule to
acheive the intended effect of taking a list of  elements and making
them align horizontally.  In looking at a bunch of different examples from
across the web, I see that this style is used pretty consistently for this
kind of use.  I just can't figure out *why.*

Thanks so much for your help!

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