Re: [css-d] @media tv

[Gunlaug Sørtun]

Ingo Chao wrote:

> How would a generic media types string look like for the visual media
> group in CSS2.1?
> 
> @media screen, projection, handheld

> is this correct?

'tv' gets the "fit to width" treatment for medium resolution devices by 
Opera, and some 'screen' layouts - like mine - simply don't work well 
when given that treatment. So, I think @media 'tv' has its place for 
separate styling.

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] clear floats is clearing my right hand column!!

[Gunlaug Sørtun]

Chris Blake wrote:

> A long time ago I found an easy way to clear floats.

> [...]

> I hope it's a good method because I remember being really pleased 
> because it's a lot easier than other methods that I'd found.

In your case a change from "clear: both" to "clear: left" will work.
However, having extra clearing-elements in the markup is only good for
odd cases, not as a general solution.

> http://pendulum8.com/karst.test/staff.php

For cases like that it's better to "contain floats" than to clear them.
Also, there's no need to add extra container divs just to keep images
and paragraphs together. Paragraph hold related images just fine, so why
not put those images in there, contain them, and delete the unnecessary
divs?.

Example:



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] Headline Background overlapping floated Div

[Gunlaug Sørtun]

Tony Lush wrote:
>> On this page http://tinyurl.com/mo88uz the headlines in the left
>> column under "Course Description" go the full width of the
>> containing Div and overlap the 30% width, right-floated Div to the
>> right.
>> 
>> Is there a way to prevent this?

Try something along these lines...

h3 {margin-right: 260px;}
.course_right h3 {margin-right: 0;}

...and tune till you're happy with the result.

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] IE7 bugs

[Gunlaug Sørtun]

Joseph Sims wrote:

>> And the left sidebar carries white all the way down the page... obscuring 
>> the 
>> background that is supposed to create the "faux columns" look - example: 
>> http://www.titancom.net/dev/hec/JS/about.html.

> Can noone give me advice with this? Is it legal to bump a topic? It kind of 
> fell out of the loop.

Declare...
body {background: transparent;}
...and it will look like IE7 and older behave, even if they don't.

The reason for this is that the body element has "Layout" in old IE, and 
therefore expands to below footer - covering the background on the html 
element in the process.

Not so in better browsers, as your many float styles keep #page, and 
thereby the body element, from expanding below the header.

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] negative margin in safari and Opera

[Gunlaug Sørtun]

JGardner wrote:

> I am looking for information regarding how opera and safari handle 
> negative margins.

Same as Gecko (Firefox etc.) and IE.

> I am working on a site - http://www.lauramcguire.com/ which I used a 
> negative margin to place the navigation at the top right of the web 
> page.

> It works fine in I.E. and Firefox but does not show up in safari and 
> opera.  Any assistance is greatly appreciated.

Check where the element is in Opera and Safari _without_ the negative
margin. What you'll see is the difference in how Opera and Safari on on
side and Firefox and IE on the other side _line up floats_ that comes
after non-floating elements.

To get the same line-up in all browsers, make the nave-styling even out
those float-handling differences. In your case this will work...

#nav {
float:right;
position:relative;
margin-top:-35px;
width: 100%;
text-align: right;
}

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] What's your preference -- fluid, elastic, or fixed?

[Gunlaug Sørtun]

Glow wrote:

> So, just out of curiosity -- what's your particular preference and
> why?

Screens and UA windows come in all shapes and sizes and on ever more
devices. The web is flexible, and so am I - with mediaqueries to catch
edge cases for even more flexibility in the most capable User agents.

That doesn't mean everything has to be flexible, as it's usually not
much of a problem to mix flexible with fixed and 'em'-sized. It all
depends on the job at hand and what/who it's targeted at.

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] Drop Down Menus

[Gunlaug Sørtun]

Asha Nair wrote:

> www.faithlandchurch.org.au

Add...

#menu {clear: left;}

...to make IE8 render as intended.

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] site check, particularly on ie6 ?

[Gunlaug Sørtun]

snak detek+0r wrote:

>> Index and all inside pages: Neither Opera or The IEs are capable of
>>  scaling line-height set in pixels. Try a raw number for 
>> line-height.
> 
> wow. didn't even know i could do that. the w3 site doesn't even 
> mention that you can use px, but everyone and their mom seem to, 
> including ALA, some grid-layout people, etc. sheesh. i normally use 
> em, when starting from scratch, but apparently that's wrong too?

No, 'em' for line-height isn't wrong. The resulting line-height is just
calculated different from when raw numbers are used.

For line-height:'em' values gives line-heights based on actual font-size
for an element's parent, which is ok if that's what you want. When raw
numbers (no unit) are used, line-height is calculated from actual
font-size of the element itself, which in most cases gives the best result.

>> Index: Minimum font-size 24px breaks the h-nav and does a little 
>> number on the text in right column.
> 
> i'm not sure what you mean by this? i don't have any fonts nearly 
> that big. and i also couldn't see what you're talking about in 
> ff/chrome. today i got ahold of ie6, and still didn't see it.

David is referring to a browser setting - 'minimum font size' option -
that some end-users set to resize text on _all_ sites...


...without having to bother with resizing or zooming on individual sites.

Observations across the web indicates that few web designers know
about, or test for, this option. The result is that many sites break
under the stress of browsers' 'minimum font size'.

(Note: Fx 3+ resizes text more or less like Safari does for the 'minimum
font size' option in most but apparently not in all cases. Google Chrome
doesn't seem to have this option.)

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] horizontal nav-- camino/seamonkey

[Gunlaug Sørtun]

David Laakso wrote:

> 

> Both browsers collapse the nav vertically and neither honor
> border-top on  ul li a .

Try the combination of...

#n ul li a {
display: -moz-inline-box;
display : inline-block;
}

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] IE and font size

[Gunlaug Sørtun]

Maxim Soloviev wrote:

> http://ares-pearl-b1.nakea.net/ Could you please help me figure out 
> why text looks s big in IE6/7/8.

Flawed markup in header. A span is not an empty, self-closing, element,
and, unlike most other browsers, IE can't treat it as if it was and
recover from this flaw.
The result is that "font-size: 20pt" is applied to all text following
the header in IE/win, apart from the headlines that have font-size
defined in the stylesheet. 20pt is indeed quite large.

This is flawed...


 
 



...and should be corrected to this...



 
 



The HTML validator doesn't flag the error because it checks the markup
as if it was properly served XHTML - following XML rules where such
self-closing of most elements is allowed. IE/win doesn't support
properly served XHTML and has no idea about such rules, and your
document isn't properly served XHTML anyway - it is HTML.



Note that once the markup flaws are corrected, all font-sizes you have
defined in pixels in the stylesheets kicks in. This means IE/win can't
resize the text.

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] h3 with layout is clearing a float in IE6

[Gunlaug Sørtun]

lev rickards wrote:

> http://sandbox.hgci2.net/

> Ideal case: 1) all div#comparisons h3's have layout 2) everything
> within div#comparisons stays to the right of the navigation list.

Total width of h3 with padding and all is to large to fit, and IE6
doesn't handle overflow properly.

Easiest solution:

1: remove width references on all h3.
2: add...

#comparisons h3 {height: 1%; }



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] css or javascript hacks for firefox

[Gunlaug Sørtun]

Alan Gresley wrote:

> This part of the hack,
> 
> |*:not(|
> 
> causes a parsing error. Is this fixed in Firefox 3.5b4? I must admit 
> that your hackery (possibly combining structural pseudo class support
> and parsing errors) is hackier than mine. :-)

I'm not surprised :-)
However, keep in mind that I only test hacks to check progress and see
what one can get away with in various browser versions. I do not use
hacks for anything serious.

Also: validity is not an issue (for me) in such test-stylesheets.

> 
>  Does Firefox 3.5b4 now send those images above the text line?

Yes.

> The same test case but with your hack.
> 
> 

No.

> 
> 
> 

I usually don't check what's on such bug lists unless I run into a
specific bug in a real-world case, so I have no idea what the status is
for those bugs in latest versions of affected browsers.

---

Those who utilize bugs in relatively new browsers for anything serious,
will have to check and update every time a new version is released --
not only the browser they try to target but nearly all browsers. There
are 4 major engines one has to keep track of, and one has to check at
least the last 2-3 generations/versions of each. There are also between
25 and 30 individual browsers that use these 4 engines, and many lag one
or more generations/versions behind the major browser on each engine.

Staying on top of all these while trying to target/hack individual
versions, should keep any web developer busy. If one wants to use ones
time for something else, one better not enter such a hacking-race in the
first place.

---

Testing browsers, with hacks and all, in ways/places where it doesn't
hurt no matter the outcome, is of course an entirely different matter.

That's what I do...

...and I focus on engine versions, not individual, "named", browsers.
For each major or minor modification to my browser targeting stylesheet...

...I also test in at least two dozen browsers with engines that may be
affected because they share bugs and/or proprietary selectors, and a
dozen or so more that simply may not be "shielded" well enough.

The need to provide extra shielding for non-targeted browsers, is the
main reason my selector-chains are so complex and often contain
nonsensical and "unnecessary" parts.


Hackers who check only in a few browsers, tend to produce what looks
like "cleaner" hacks, but such "clean" hacks tend to fail more often and
end up hurting the wrong browsers. Failing hacks on regular web sites do
at least as much damage for developers and end-users as all browser bugs
put together, so one really shouldn't hack if one can't test the outcome
in nearly all 25-30 browsers that are in use today, _and_ also make sure
future (not yet released) versions are somewhat shielded.

The latter means thorough testing in all new beta and RC versions, so
one can keep track of progress and regress and be prepared for the final
releases. Of course; no one in his right mind will hack a beta or RC
version for real, so the purpose for beta/RC testing here is to make
sure hacks meant for older versions won't disturb new versions.

Those who want to can then check bug lists and report problems/bugs
found during beta/RC testing. Such reports are usually "most welcome"
for all browsers.

--

To see, and eventually test, which hacks (selector chains) that hit the
various versions, look at my page and stylesheet linked to above.

Haven't checked and updated my browser targeting stylesheet in any
detail since March this year, but it still seems to select the right
engine versions across the board - including [Mozilla/5.0 (Windows; U;
Windows NT 6.0; en-US; rv:1.9.1b4)], so I'm in no hurry. Got other
things on my mind these days, and complete and proper testing is time
consuming.

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] positioning images on a background graphic

[Gunlaug Sørtun]

Anthony L wrote:
> A question though: I thought the 1px border was just for debugging
> ... But if I comment out the #container border, the button images
> shift right to the top of the div ... any idea why?

Collapsing margins...




The easiest solution is to add...

#container {
padding: 1px 0;
}

...as replacement for the border. Other solutions/options are listed in
the W3C article.

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] IE 8

[Gunlaug Sørtun]

Kathy Wheeler wrote:
> I've seen 'real' IE6's on two different machines give different 
> results to each other :-(

Change one or more settings in IE6, and get another result...

Same goes for all browsers, so if one wants to know the outcome at the
user-end one better test with a whole range of options and setting
combinations in each browser. Testing only at default or with ones own
or someone else's preferred settings in a browser, don't really tell much.

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] IE 6 layout issues

[Gunlaug Sørtun]

David Bailey wrote:

> Something I was unaware of was that you can float a div as well as 
> position it relatively! I notice that relative positioning doesn't 
> have any position stated - is that because it is floated? Can you 
> explain what is actually happening (or point me to somewhere that I 
> can come to grips with this concept?

Relative positioning adds a few factors to the mix.
1: the element becomes a reference/base for absolute positioned children.
2: the element can be visually offset, something I haven't made use of
so no positions are needed.
3: the element can be stacked out of order (towards foreground or
background) relative to other elements. That's not needed either in this
case, so no z-index.
4: most of IE6's stacking bugs are counteracted, stabilizing the element
visually in old IE. This is not a universal cure for IE6's bugs, so each
case must be well tested to make sure other IE bugs are not triggered.

> I can see also, that the relative positioning allows the image to 
> then be absolutely positioned at the bottom of the #rightColumn 
> (something I was having trouble with when I tried to absolute 
> position the image in the first place).

That's what I used it for, see 1: above.

>> Also included min-width fix for IE6, in case you want that.
> Thanks for that--most useful. Is there anywhere I can find out an 
> explanation of what you have done here?

See: 

> The real problem I have with the menu bar in IE and the fact that I 
> have to stipulate a width for each menu item in pixels rather than 
> auto is that in order for the text to fit with reasonable spacing 
> between each menu item, I have to give it 100px width. Unfortunately,
>  this creates the problem of the menu bar dropping a line when the 
> window is narrowed or viewed at 800x600.

> Is anyone able to supply any kind of solution to this?

In the 'menu_ie.css' stylesheet add/change to...

ul#cssmw li { margin: 0 4px 0 0 ;}
ul#cssmw li span a {width: 10px;}
#navbar {margin-left: 18%;}

...and things will improve a bit at normal font size in IE6. Font
resizing will cause drop at narrow width in all browsers, and there's no
use trying to avoid/prevent that.

The above works in IE6 because that browser has no respect for declared
dimensions and will expand the li until the content fits inside. Usually
that buggy behavior causes problems, bet here we're turning that bug to
our advantage.

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] column without tables or fixed width

[Gunlaug Sørtun]

Jack Bates wrote:

> Does CSS support presenting the text in a straight up and down
> column?

Yes, see...


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] Getting absolutely positioned divs with bottom: auto to end together

[Gunlaug Sørtun]

Michael Leibson wrote:

>>> www.thinkingmusic.ca/analyses

> You guys aren't 'mere web developers' -- you're mathematicians!

:-)

When dealing with browsers that's definitely an advantage.
Apart from that; when one has created and modified a few thousand
layouts, the only problem is which solution(s) to choose amongst the
many one knows will work for the case at hand.

To use the same page for more examples - different ways to achieve the
same thing, here are two identically-looking pages...




These two have the left sidebar absolute positioned from inside an
absolute positioned main column, which mean I've gone back to your
absolute positioning method but rearranged the markup ever so slightly
but modified it slightly to make it work as you wanted.

"test_09_0511-a" has the sidebar above the main content in the markup -
like your original page, while "test_09_0511-b" has the sidebar below
the main content. As you can see the source-order can be modified to
either main content first or main content last, based on the exact same
stylesheet with the exact same absolute positioning...




Now, note that this method only works well when the main column is at
least tall enough to stretch the sidebar to a reasonable height. To
short a main column will make the sidebar look crammed, so you may have
to add a suitable min-height to #main if you don't have enough content.
I've used #main {min-height: 1200px;} which has no effect on the
examples since the amount of content pushes it taller, but the optimal
value depends on how much you want to put into the left sidebar.

I added in a "jagged bottom-edge" just to show what we mean by that.
By applying #left {bottom: 10px;} I'd mad sure the sidebar will always
be 10px shorter than the main column, regardless of how tall the main
column is or ends up being when you resize text. I think it looks better
this way.


To give you a bit more to build on; read this ALA article...


Also; for the examples above I used my own IE-expression to make IE6
play ball...


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] Getting absolutely positioned divs with bottom: auto to end together

[Gunlaug Sørtun]

Michael Leibson wrote:

> www.thinkingmusic.ca/analyses

I have used a copy of this page to exemplify one approach to solving
your problems...




> Are these differences the result of my own errors, or normal browser 
> behaviour?

Both :-)

Browsers behave this way given the styles you have provided.

You can not calculate the right length (height) of an element in
relation to another, unless one is a child of the other.

> If the result of browser behaviour, I’d rather just find a way to 
> ensure that all divs conclude at the same point (and leave the minor 
> differences alone), rather than write re-calibrated measurements for 
> each browser.  Is there a way to do this?

CSS standards, and some workarounds for very old browsers, let you make
the sidebar (#left) end up exactly in line with the main column. The
easiest way to achieve this is to leave #main un-positioned (static), so
it can affect the height of main div (#top) directly. Then the sidebar
(left) can be absolute positioned relative to bottom of main div (#top)
for perfect alignment.
Resize (text) all you want in any somewhat standard compliant browser,
and it'll keep the bottom alignment.

IE6 can't position opposite edges of elements relative to parents, so
I've added a workaround (dynamic expression) for it.

I've also modified how those ul in the sidebar are positioned.
Note that there's no way you can space those ul evenly down the sidebar
in a way that will look alright for any page-length and amount of
content and degree of font-resizing in the main column. You'll have to
compromise.


Design wise I agree with Philippe: a jagged line-up at the bottom will
look better then a straight line. You can achieve a straight line or a
jagged alignment as you wish with the method I've exemplified, and the
chosen alignment will remain stable.

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] percentage bug IE6

[Gunlaug Sørtun]

Luc wrote:

> http://www.dzinelabs.com/sandbox/New_site_layout/percentagebug.html

You're attacking the wrong IE6 bugs - this has nothing whatsoever to do
with the "percentage bug". Thus, all fixes are misplaced.

It is the "automatic box-expansion caused by too wide content" you're
dealing with, and it's affecting #header, #leftcol, #maincontainer and
#rightcol in your layout.


1: #header contains an image that is 200px too wider than min-width even
on normal font-size. Consequently IE6 expands header to contain that
image regardless of actual page-width.

The trick is to pull in both side-margins on the image so it appears to
be narrower but still has /some/ width left. This will keep the image
centered, and allow it to overflow #header also in IE6 without causing
#header to expand.

IE6, and all other browsers for that matter, now thinks the image is
only 400px wide, and center it on windows that are wider than that.


2: Especially #leftcol has too wide content, and when #leftcol is
affected by box-expansion all the other columns get pushed to the right.

By hiding the overflow on all 3 columns in IE6 only, no expansion takes
place even if the content becomes too wide. Then, by declaring
'position: relative' on all content-elements in all 3 columns, the
overflowing part of the content stays visible but takes up no space.

The result is that IE6 treats overflowing content same as IE7, which is
wrong but appears right in most cases.


3: The little shift of columns when you hovered over nav in IE6, is best
fixed by isolating nav from the columns in the markup, in IE6 only. IE6
reacts best - most consistent - on a  styled to take up no space,
placed in a conditional comment.


All these fixes are included, and commented, in this copy of your page...

...and all fixes for imaginary IE6 bugs are removed.

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] weird white block appears in bg

[Gunlaug Sørtun]

Todd Bingham wrote:
> I put the content in a container div i the center. ... But as you can
> see from the sample url, a strange white box appears under the
> container div at the bottom leftargghh!!

> http://www.design-conquer.net/GoodNewsEtc/stories/jackson.html#

Delete the fixed height on body and on #container. You can replace them 
with 'min-height' if you like.

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] hovering action

[Gunlaug Sørtun]

Oszkar Ambrus wrote:
> The problem is, that when my cursor is above the second navigation 
> level, the main link (e.g. "Our Fellowship") goes back to normal 
> state on my website.

> [2] http://covenantfellowshipgalway.uuuq.com

Add :hover to the li containing the anchor and sub-levels, like so...

#masthead li.fellowship:hover a,
#masthead li.fellowship a:hover,
#masthead li.fellowship a.selected,
#masthead li.fellowship a.active{ background-position: -75px -40px; }

Won't work in IE6 and older without an "anything:hover" workaround like
the one in the site you've borrowed from - which you'll need anyway, but
all reasonably new browsers will play along right away.

> Nevermind, I fixed it using http://www.cssmenus.co.uk/dropline.html

:-)

I guess that's ok - if you prefer the markup-garbage necessary to make
that "CSS only" solution work, over a script that contains all the
missing bits and pieces for your first attempt. Good to have choices.

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] Stretching in IE7, even worse in IE6.

[Gunlaug Sørtun]

Paul ODonovan wrote:
> Hi, my name is Paul :) this is my first post -

Welcome.

> www.blueprintdesign.ie

> In IE7 there is unwanted space occuring in the place where my images 
> originally were before I positioned them.

The negative effect of 'hasLayout'[1] in old IE: the paragraph expands
to contain the floating image, and everything that follows get pushed
down - creating big gaps.

To make IE6/7 behave: delete the 'width : 280px;' on 'ul#clients li p'.
See below.

> The issues with IE6 seem to affect every part of my design - it's 
> hard to know where to start, but for now I would be grateful even 
> just getting IE7 in order.

Once you've fixed things for IE7, add...

ul#clients li p img {
position: relative;
}

...and change #content-main to the following...

#content-main {
position: relative;
padding: 10px 0 0 0;
width: 61%;
max-height: 2700px;
}

That will get you started on fixing IE6.
You can tune margins and paddings to taste to achieve a somewhat
cross-browser stable appearance.

> Any comments, criticism or suggestions @ all are welcome!

1: When using conditionally commented stylesheets to fix IE, put them after
the default stylesheet(s) in the page head. That'll make it easier to
override the default stylesheet(s) with IE-specific styles without
having to bother with modifying selector specificity to make those IE
styles kick in.

2: Note that IE8 rarely needs fixes, so reserve those IE fixes for...

Re: [css-d] IE 6 layout issues

[Gunlaug Sørtun]

David Bailey wrote:

> http://www.widemannviolins.com/index.php

Suggestion:






> 1. Text content:

a: Do not declare backside margins on the #rightColumn_hp float, as it
then becomes wider than 100% when IE's faulty percentage calculation
kicks in.

b: absolute position the .hp_img.

> 2. Stripes:

Stiffen up #footer with a hasLayout trigger.

> 3. The Main Nav bar text:

One can hardly make IE6 render like FF or Safari, but it can be prettied
up a bit by adding em-width and other trimming. IE6/7 also needs help
with correct stacking of absolute positioned elements - the dropdowns.
I've included the most basic fixes in the suggestion above, compare with
what you've got and implement as you like.

Also included min-width fix for IE6, in case you want that.

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] Fluid Page + Centered 80% Div + Thumbnails

[Gunlaug Sørtun]

Court Kizer wrote:
> http://courtkizer.com/screenshots/Untitled.png

> At this point I'm not even sure it's possible.

Suggest you start here...


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

[Gunlaug Sørtun]

Vincent Pollard wrote:

> html #IDNameofIFrame html { overflow-y: auto !important; }

> It is legal in css2.1 to write html html like this?

Legal, yes, but such a selector chain doesn't point to any element since
there's no 'html' element inside 'html'. Selector chains can only
express parent --> child relations, not the other way round.

This would make sense selector-wise, but won't affect an iframe in a page:

html {
 overflow-y: auto !important;
}

...so, if #IDNameofIFrame is the iframe, make it...

html #IDNameofIFrame {
 overflow-y: auto !important;
}

> It's hard to find help online as 'html' brings up too many references
> to the language, instead of the element.

You can always check validity/legality here...

...but "valid" doesn't necessarily mean that it will work. Valid/legal
selector chains are easy to build up, but unless they address the exact
structure of your document at markup level they'll be nonsensical and
have no effect whatsoever.

Can't offer more help than that without seeing the actual document with
the iframe - and the problem, with the iframe's content loaded. Iframes
are somewhat uncontrollable - no real cross-browser support for anything
but the basic styling, and you can not address the document loaded into
the iframe through the iframe.

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] Centered text positioned incorrectly in IE7

[Gunlaug Sørtun]

Chris Hanks wrote:

> Alright, I took care of the markup problems, so everything validates.
>  It's been put up in its updated form:
> 
> http://www.selfsoothingsoftware.com

Good. Makes it much easier to work with.

> I was trying to keep the main text column at a consistent width, and 
> deal with an expanding/shrinking window size by moving the 
> supplemental boxes in and out of the main column. Is there a way to 
> do that?

Yes. See below.

> I'm also not sure how you meant I should move the right and left 
> boxes into the padding on either side.

I meant: with negative margins on those floats.

> I tried setting their positions to "relative" and then displacing 
> them with "left:" and "right:", but that just leaves big holes where
>  they used to be.

Relative positioning doesn't move elements, only offset them visually.
This means they still take up space in their original position, which
creates those gaps you observed.

To give you some ideas about how you can mix your various wishes
together in a mostly cross-browser reliable way, check the following
slightly reworked copy of your page...


...and its stylesheet...


It can be made to work much better than that, but the 'em'-sizing you're
using creates problems. To make it work properly you'll have to restyle
the layout so the 'em'-sizing is set on body or a page-wrapper, and
containers further in get sized in percentages of that outer element.

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] Centered text positioned incorrectly in IE7

[Gunlaug Sørtun]

Chris Hanks wrote:
> Hmm, alright. Can you or anyone else on the list suggest a better way
> of making this work? I'm not sure where to begin...

For cross-browser appearance in all somewhat standard-aware browsers -
including IE6/7 in Strict mode, the following approach will work.

- Add left and right padding on #elastic-container, and modify its
min/max-width to include these side-paddings.

- Pull those .left and .right boxes into #elastic-container's
side-paddings, so they appear where they are now.

- Remove side-margins and max-width from .tutorial p, so those
paragraphs are held in place by the side-paddings on #elastic-container
and the inner side-margins on those .left and .right boxes.




In addition: you should mark up in accordance with the chosen doctype,
or else you'll have a hard time making sense of what the markup
validator tells you...

Some of those errors are more serious, while others are caused by
doctype vs. markup confusion.
In short: your document is "invalid tag soup" ATM, and should be fixed
at markup level before you start correcting it at CSS/appearance level.

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] Centered text positioned incorrectly in IE7

[Gunlaug Sørtun]

Chris Hanks wrote:

> http://www.selfsoothingsoftware.com

> The second, and more pressing problem, is that my main content (the 
> text column and floated boxes) appears completely out of whack in IE.
>  The boxes are approximately in the right place, but IE7 is trying to
>  center the paragraphs of the text column midway between the floated 
> boxes and the opposite edge of the screen, and I'm not sure how to 
> make it stop.

Without looking at it in depth: min-width/max-width acts as
'hasLayout'[1] triggers in IE7, which causes the effect you're describing.
In my (very personal) terminology you get "a hard margin on a block
formatted element", which means the margins on paragraphs won't flow
behind the floats but instead line up against them, and the paragraphs
become isolated square blocks.

No other way to fix that IE7 'hasLayout' bug but to delete the
min-width/max-width 'hasLayout' triggers, and find another way to add
the space at both sides. If you want/need to support IE6 you'll have to
create such an alternative solution anyway.

regards
Georg

[1]http://www.satzansatz.de/cssd/onhavinglayout.html
-- 
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] Closest thing to Conditional Comments Safari / Firefox

[Gunlaug Sørtun]

Court Kizer wrote:

> I know that putting -webkit in front of css will make it safari only.
>  Could I do the same thing -moz-margin-top, or is does mozilla only 
> allow this for CSS 3?

Such prefixes are reserved for vendor specific extensions to CSS, and
the extension names and effects are not necessarily identical to those
found in standardized CSS...

Thus, only occasionally useful for hacking browsers.

> I'm looking for the most pain-free way without a massive browser 
> check to have several selective items based on the browser.

For non-essential additions/modifications based on browser etc., a
simple script is probably the easiest solution...


There are also heavier solutions, for example...

...that I haven't bothered to test.

Solely for testing-purposes I apply "watermarks" in the page-backgrounds
in the web design section on my own site, based on vendor specific rules
and prefixes and degree of CSS selector support, bugs and other
peculiarities in various browsers...

Note that I'm targeting specific browser engines - not specific
browsers, and the outcome in regular visitors' browsers isn't really
important.

One can get away with such hacking if it doesn't really matter if it
fails occasionally. None of the above methods can be recommended for
adding/modifying essential content on a site.

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] position issue in ie6/7

[Gunlaug Sørtun]

Göldi wrote:

> http://allesneumachtdermai.wallisellerlauf.ch/

> Is the order of the tags relevant when positioning some of them 
> "absolute"?

In IE6/7, yes. Old IE is buggy :-)

You can fix IE6/7 by adding a  between top_menu and breadcrumb...





...with the following br styling...

br {line-height: 0;}

That'll give old IE something to line the breadcrumb margin up against,
without disturbing better browsers.

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] IE problems - karst

[Gunlaug Sørtun]

Chris Blake wrote:

> 1. The mainphoto clears the side content in IE.
> 2. The padding (or margin) I have put on the menu is making the
> container stretch in IE.

> http://www.pendulum8.com/karst.test/

To solve those IE6 problems, add...

* html .twoColFixRtHdr #container {overflow-x: hidden;}
* html .twoColFixRtHdr #mainContent {margin: 0; overflow-x: hidden;}

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] css or javascript hacks for firefox

[Gunlaug Sørtun]

Ido dekkers wrote:

> the is the problem
> 
> what i don't understand is why not use the fix?

I see no problem with the fix in your case, because of the way it is
built up and used.

The simplified selector for Gecko 1.9.1 + suggested by Philippe, will
actually make it even safer against future problems by utilizing
progressive enhancement with (only) a selector that is unlikely to be
removed from or changed in CSS standards and/or browser support.


Generally: it is the unstable nature of new browser versions -
especially beta versions of course, that makes us hesitate to add hacks
that targets them. Only stable browser versions should be hacked at all,
and then only when there's no other, sensible, option.


Your markup - source order - is correct as is, and should rather not be
modified in order to work around a CSS weakness (bug) in a browser.
When compensating for browser bugs it is almost always better to rework
or add something to the stylesheet, than to modify the markup.

Years back we had no choice but to go through and modify both markup and
stylesheets when we encountered especially problematic bugs, but these
days sensible markup should be left as is and all hacks (if any are
needed) should be kept in the stylesheets. Only IE6 still creates a few
exceptions to this "rule".

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] css or javascript hacks for firefox

[Gunlaug Sørtun]

Alan Gresley wrote:

> If this is this bug

> 

Although dealing with vertical alignment of floats, our test case isn't
revealing just one bug.

Reordering the markup is the old solution, and it'll still work -
if that's an option.

Another option is to absolute position relevant elements, thus avoid old
float-alignment bugs altogether.


To return to what appears to be the original poster's case:

...a fix for older Geckos will make it appear like this...
Page: 
CSS: 

Yes, it is backwards (hacking both old and new Gecko versions). I've
also ignored very old Geckos completely.
However, when dealing with a case that falls apart when subjected to the
slightest amount of font resizing in any browser anyway, such a solution
doesn't really add serious problems.

The best solution is always to leave new browser versions alone - not
hack them, but if that's not an option...

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] css or javascript hacks for firefox

[Gunlaug Sørtun]

>> BTW: which known bug? Just in case there are better options.

> namely bug 50630: float should be as high as previous line box 
> https://bugzilla.mozilla.org/show_bug.cgi?id=50630

That bug is indeed old and well known, and has caused problems all
along. Don't know of any option but to hack back and forth between old
and new Geckos for that bug.

Problem is: one has to hack older Gecko version with a fix (lift float)
and new versions with the correct value, and it is always unsafe to hack
new versions.


This reduced hack should otherwise work, at least back to Fx 1.5 (not
thoroughly tested)...

@-moz-document url-prefix() {
:root>body ELEMENT-SELECTOR {/* fix old Gecko */}
:root>body:not(:nth-child(0)):only-of-type>*|*:not(|*)
ELEMENT-SELECTOR {/* correct value for new Gecko */}
}

Good thing is: the hack won't affect non-Gecko browsers.
Bad thing is: it isn't anywhere near "safe" since one has to hack all
3.1+ versions back to standard float-alignment now that the bug is fixed.
At some point in the near or more distant future one may have to delete
the entire hack, to avoid getting caught up in a hacking-race caused by
future development of Gecko and/or CSS standards.

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] css or javascript hacks for firefox

[Gunlaug Sørtun]

Ido dekkers wrote:

> is there a css hack for ver 3 and below or something using 
> javascript? i need to to fix a known bug only in FF without effecting
>  other standard complaint browsers?

If you really want/need to hack Gecko versions, yes...


Not recommended.

BTW: which known bug? Just in case there are better options.

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] Creating your own stylesheet for a website

[Gunlaug Sørtun]

Atkinson, Sarah wrote:
> I go to a website fairly regularly and their styles are horrible. 
> It's just too painful for me to look at anymore. Is there away for me
>  to create a Stylesheet for it and have my browser automatically 
> override there styles?

Yes, but how "automatically" it is activated depends on which browser
you use.

See:


...for "how to" guidance.

FWIW: I use Opera, which lets me set up 'site preferences' to
automatically control any site with whatever combination of author/user
stylesheets and whatnot I like.
Sure comes handy - even if there happens to be a designer behind a
site's own 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/

Re: [css-d] menu issue

[Gunlaug Sørtun]

Ian Young wrote:

> http://db-studio.venus.titaninternet.co.uk/index.php
> 
> Although there is no change to the html, I have had to add an extra 
> style code in the contact and portfolio pages as the menu sits a few 
> pixels higher than does than it does on the other pages.

Some pages have a Transitional doctype and others have a Strict doctype.
That explains the different handling of elements inside your h1, making
the h1 vary in height between pages.

Mode-stabilize the h1 construction first, by adding...

h1 * {display: block;}
h1 {padding-bottom: 6px;}

After that you should need no page specific styling of the nav-margin,
and can adjust the padding-bottom on h1 to taste to push the nav down.

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] Old IE6 Problem again

[Gunlaug Sørtun]

Nic Pulford wrote:

> Here is the page http://www.leadersmith.org.uk/tnbda/about.htm the 
> thing that does wrong is the Case Studies list in the bottom of the 
> left column.

IE6' broken 'overflow' handling.

Add...

#seperator {overflow: visible;}

...to make sure IE6 keeps that container's overflowing absolute
positioned content visible even when the container itself is/goes below
lower window edge.

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] Guidance on positioning please.

[Gunlaug Sørtun]

Karl Bedingfield wrote:

> What I want is to do is position a paragraph (company phone number
> and email) above the navigation to the top right corner.

Absolute position the paragraph, somewhat like the following...

#header-alt {position: relative;}
#contact {position: absolute; top: 0; right: 3px; text-align: right;}


 
 

phone: n
email: aa...@bb



...and adjust top/right position, font variables and line-break to taste.

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] Display problem with IE7

[Gunlaug Sørtun]

Ansari Samir wrote:

> And David, we are not using Image there, it is an anchor tag and we 
> have given background image to that anchor tag.

Nonsense. There's an  element inside that anchor, and its src
attribute is addressing this image...

That's not a background image.

For the record: David was right about the problem, but his solution
didn't fit the case. The case itself is too broken.

> Someone, please help me sort this problem.

Turn the anchor/image combination into this...

http://jobspert.com";>

...and you'll achieve a more consistent alignment across browser-land.

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] popup image, a element, href, Safari and IE7

[Gunlaug Sørtun]

Brian Funk wrote:

>>> 

> The hasLayout trigger doesn't seem to work.

Ok, I overlooked that I had a double-fix in there, and contributed
IE7's positive response to the wrong fix.

Here's another "dirty trick" to make IE7 behave...



In short: make the ':hover' selector look like this...

a:hover img, x:hover img {...}

...with a nonsensical reference following the real one. Any selector can
replace the "x", as long as it isn't an "a". Go figure :-)


I also added a fix for IE6 in there...

a:hover {background-position: 0;}

...but that one only makes the complete link work since IE6 doesn't
support ':hover' on non-links.

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] popup image, a element, href, Safari and IE7

[Gunlaug Sørtun]

Brian Funk wrote:

> 
> 
> It works in Firefox 3.0.8, IE8 and Opera9 but IE7 chokes when the
> href attribute is not present and Safari for Windows works not at
> all.

Missing closing bracket on 'a:hover img' throws Safari off. This error
is reported by the CSS validator as "Parse Error [empty string]".

For IE7: add 'a {height: 1%;}', or another hasLayout trigger, to make
the anchor without href work.

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] Sticky footer - double decker possible?

[Gunlaug Sørtun]

Anne E. Shroeder wrote:

> http://www.language-works.com/swim/comp.jpg 
> http://www.language-works.com/swim/stickyfooter.htm
> 
> Is it possible to code this?

Think so...




Method used: 

The details (fine-tuning and IE6 hacking) are left to you.

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] ie8 bug? The container div is inexplicably jumping around. Please help!

[Gunlaug Sørtun]

Noah Learner wrote:

> Is this an ie8 bug?

No, it is intentional. The vertical scrollbar is removed when pages are
shorter than the browser-window, making the available window wider.
Auto-centering (in your stylesheet) then makes pages jump half the
scrollbar-width left or right depending on how tall they are.

Same happens in most, if not all, non-IE browsers, while IE7 and older
keep the scrollbar in place also when there's no need for it.

Nothing to fix IMO, but you can of course make the page artificially
100% + 1px tall (or something), or control the overflow - on the html
element.

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] IE Fix For Floated Netflix-Style Links?

[Gunlaug Sørtun]

The Ferrett wrote:

> I did this by wrapping the elements in a  (with an assigned
> width) and then by assigning a left margin calculated to push the div
> out into the center of the column.  This works in every browser but,
> you guessed it, IE. Problem is, in IE 7 that margin appears to be not
> quite doubled, but definitely added to:
> 
> http://www.starcitygames.com/SCG_6/test_article_page_with_vote.html

Make it...

#rating_control {
border: 1px dotted blue;
overflow: hidden;
width: 105px;
margin: 0 auto;
}

...and it will center in all browsers - including all IE versions.

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] Vertically centering text in a paragraph

[Gunlaug Sørtun]

>> does IE support display:table or display:table cell though? I could
>> have sworn it didn't.

- IE7 and older does not support CSS table.
- IE8 does support CSS table as well as any other browser - when in full
"standards mode".

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] What can I do to improve this CSS?

[Gunlaug Sørtun]

trevor bayliss wrote:

> http://tinyurl.com/clg668
> 
> I would be very greatful if someone could have a look and advise me 
> what to do, Thank you, Regards, Trev

Apply some shorthand and combined selectors, maybe, to reduce the amount
of redundant styling. For instance...

.nav {
padding-right : 0;
padding-left : 0;
padding-bottom : 0;
margin : 0;
padding-top : 0;
list-style-type : none;
}
.nav * {
padding-right : 0;
padding-left : 0;
padding-bottom : 0;
margin : 0;
padding-top : 0;
list-style-type : none;
}

...can be shortened to...

.nav, .nav * {
padding: 0;
margin : 0;
list-style-type : none;
}

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] Firefox bug on on new Macs?

[Gunlaug Sørtun]

Michael Leibson wrote:

> [...] Related questions:   why, if using an  without an ordered 
> or unordered list is not allowed, does it work on my site?   What are
>  the negative consequences of using it that way?

1: you're relying on browsers' error correction, which may or may not
give the same results across browser-land. There's no standard for error
correction, so even if something works in most browsers you can't
complain if it breaks anywhere.

2: non-standard constructions are more problematic to style and debug,
since the standardized relationships don't exist.

3: you're learning a bad habit, and such habits are often hard to
unlearn once they get stuck.

If/when such "bad habits and designer bugs" becomes frequent for your
work, and you need help to fix something, even if it is or seems to be
unrelated you may be met with the following response...

...and not much else.

We expect people who ask for help to at least have done their homework -
the best they can, and won't waste time on going through all the
unnecessary and "self-inflicted" weaknesses that _may_ cause problems
but _maybe_ do not. That's your department, and you've got standards and
validators to help you.

> But while I understand how my background's width causes the 
> horizontal scrollbar, how does the "left: 50%;" affect either the 
> scrollbar or my friend's 'zooming' of all elements?

Have no idea about your friend's zooming effect since I can't see or
analyze his browser/OS. Also: I still don't know what or how wide a
"zillion-pixel-wide" screen is, so I can't emulate it.

> Aside from using a fluid design, is there any way I could have it 
> both ways?

Sure. You can use a fixed sized background on a fluid container.
Fixed-width design doesn't mean all containers have to be fixed-width,
only that it appears that way.

Your design will fit in a 1024px wide browser window at default settings
with a non-fixed container for the background - without causing a
horizontal scrollbar, and still hold a wider background for wider windows.

>> 
> . . . For some reason, I keep getting a "not found" error message 
> when trying to go to that URL.

The URL is working, so can't help you there.

Anyway, just add...
p, li {border: solid 1px red!important;}
...to your stylesheet, to see how wide those elements are - or use one
of the available designer tools to the same effect.

>> FWIW: it looks like you're attempting to recreate print design on 
>> the web, and that rarely ever works well.
> I know.  The problem, though, was that I needed to get the site up 
> immediately -- it's the second site I've ever done, and I'm very slow
>  at this kind of thing.

Nothing special about that - a lot to learn. Just don't put design
before structure, as "nice designs" on weak structures are less than a
dime a dozen on the web already - and they're causing more problems than
all browser bugs put together.

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] Firefox bug on on new Macs?

[Gunlaug Sørtun]

Michael Leibson wrote:

> I used Firefox to view my website on a friend's zillion-pixel-wide 
> new Mac, yesterday, and I was astonished to find that all elements on
>  all pages had a significantly increased width, so that the design 
> was effectively spread, horizontally, to fit the (maximized) window.

Don't know how wide the screen on a zillion-pixel-wide new Mac is, but
my trusty old win machine provides me with a 3800 px wide screen for
browsers if/when I need it.
I need nearly half of that screen-area for your page, in any browser,
just to get rid of the horizontal scrollbar. That's before adding
page-zoom to the equation.

> This would have pleased me, were my design fluid -- but it isn't: 
> it's fixed!

1: your page is full of markup errors...

...and some of those are serious.

2: background is positioned 50% from the left side - regardless of
window size.

3: what Fx version did you test in and what settings were at play?

> www.thinkingmusic.ca .

Individual elements hold their declared width, but the page as such
needs 1650px wide windows to get rid of the horizontal scrollbar.

The declared dimensions on paragraphs and parent-less list-items are
creating problems...



...and extra horizontal width all browsers have to cope with.
Why not let those elements auto-adjust to their containers?

FWIW: it looks like you're attempting to recreate print design on the
web, and that rarely ever works well.

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] AP's and IE

[Gunlaug Sørtun]

Alan King wrote:
> Is there a fix for making IE impose my absolute positioned divs?
> 
> http://www.helixdesign.ca

Yes.

IE6' "disappearing A:P element next to a float" bug can be problematic,
and not easy to fix in the stylesheet other than by abandoning either
the A:P or the float styling.
Separate absolute elements from floats in the markup, and IE6 will
render as intended.

How you separate them doesn't really matter, and I've just added a
number of  in there...

...as a demo for how it works.

-

Such a degree of absolute positioning of text-carrying elements makes
your design pretty fragile when exposed to font resizing in browsers
though...

...so it would be better to ditch most absolute positioning and let the
entire layout adjust to the environment and various end-user options.

A better organized source-code with header and footer and two floating
columns with fixed width and auto-height, would be a good basis, and
there's no need to pull floats around with negative margins for a design
like yours - floating them left or right will do.

Proper use of background-color in addition to background-image on body.
will also help keep all text visible. Remember also that headlines as
background-images don't always make it through on their own.

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] Intermittent IE 7 problem

[Gunlaug Sørtun]

Rebecca Mazur wrote:
> Have you had experience with browsers breaking on those particular 
> validation errors?

No. Old IE will "eat, ignore or correct" such minor errors, same as
other browsers.

I have seen IE do many strange things when served compacted source-code
though, and your markup is pretty compact.
Can't say for sure, but my (original) Tidy is set to "unpack" and line
up markup in ways I know old IE/win is happy with, and that may have
made all the difference.

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] Intermittent IE 7 problem

[Gunlaug Sørtun]

Rebecca Mazur wrote:
> If someone could just recognize and name the bug for me, that would 
> be a help, as then I could go searching for solutions.

> http://www.kenyon.edu/x12305.xml

The bug is clear enough, but finding a fix isn't.

I found it easier to reproduce the problem in IE6 - multiple times, and
that IE-version also shows clearly that one can fix the problem by
cleaning up the source-code. I used HTML Tidy on a local copy.

Once it becomes stable in IE6 it is also perfectly stable in IE7.
However, trying to analyze what my Tidy actually did that fixed it isn't
easy since I can't use the validator on your original.

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] Problem with a header image in Opera 9.64

[Gunlaug Sørtun]

Krystian - Sunlust wrote:

> http://maleconcept.com/test/
> 
> Has the header image centered right, but on opera it slides a bit to 
> the left.

Something strange about that '.gif', but only Opera (all versions - at
least back to Op7.20) seems to react on it.

If I send the image through PhotoShop and saves it for web again - as
'.gif' or 8bit '.png', it lines up as intended but with white areas at
both sides. Those white areas are there in the original 2000px wide image.

I would reduce the image-canvas in width so the white areas at both
sides disappear - that's 1872px wide canvas with the image offset ever
so slightly (1px) to the right, and save it for web as either '.gif' or
'.png'.
That will make the header-image line up exactly as intended in
all browsers, and make it appear right on all window widths - tested on
3800px wide windows in Opera, Firefox and IE.

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] Stuck in Quirks Mode

[Gunlaug Sørtun]

Josiah Sprague wrote:
> The system which we are forced to use generates pages that declare 
> the doctype in quirksmode.

> The problem is that quirksmode in IE breaks my CSS.

> Any ideas on how to work around in this situation?

> http://www.uakron.edu/groups/asg/asgtemplate_copy.php

When stuck in quirks mode: style for quirks mode.

- for IE that means styling for IE5.5, with that version's limitations
and bugs when it comes to CSS support.

- non-IE browsers have full CSS support regardless of mode, so it's just
a matter of tweaking them for the mode and avoiding disturbances from IE
styles.

You'll make it a lot easier for yourself if you avoid absolute
positioning as much as possible - especially for large containers.
The absolute positioned #container_box  with 'overflow: auto' you've got
now doesn't work well in any browser. The bottom nav scrolls on top of
main content on narrow windows.

IE in quirks mode becomes very unstable when it has to calculate in the
extra scrollbar since #container_box is taken out of the flow, as can be
seen in this slightly restyled copy of your page...


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] shifting divs in ie6 and ie7

[Gunlaug Sørtun]

Tony Zanella wrote:

> http://xtf.lib.virginia.edu/xtf/view?docId=2005_Q4_3/uvaBook/tei/z00175.xml
>  In ie6, the  is far lower down on the page 
> than in Firefox, and in ie7, the same div "jumps" over to the right.

Problematic to diagnose and correct a layout that is based on tables,
multiple classes and inline styles to such a degree :-)

It is _not_ an "escaping float" case - rarely happens in older IE/win
anyway.

Elements inside #subContent1 take up space to the right in old IE/win,
which causes overflow/expansion. As a result #docText gets pushed over
in IE7 - IE7 handles overflow somewhat correct in this case, while in
IE6 #docText runs out of space and gets pushed down below #subContent1 -
IE6 handles visible overflow badly (or rather not at all).

One way to fix old IE's problem is to pull in the right margin on
#subContent1 and thereby make it appear narrower.
The addition of...

#subContent1 {margin-right: -500px!important;}

...will do, and won't create problems for better browsers.

This is not a perfect solution though, only a quick-fix (I got tired of
looking through the somewhat messy source-code and stylesheets).
You should dig a bit deeper and figure out which elements/styles that
cause the overflow/expansion in old IE, and try to correct it there.

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] IE6 peculiarity - Also IE8

[Gunlaug Sørtun]

Alan Gresley wrote:

> IE8 beta 2 (8.0.6001) is showing it's missing content bug quite 
> consistently on this page.
> 
> 

Problems with missing content seem to have been solved in IE8 final - at
least I haven't been able to provoke those bugs through pretty thorough
testing of a number of documents that fail in IE8 beta and RC versions.

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] sidebar box does not line up correctly in ie7

[Gunlaug Sørtun]

Scott Brasted wrote:
> The text blurb does not line up o the left in ie7.

> http://www.adriennesgardenworks.com/test.php

Float gets hooked up on element above - the menu - in IE.

Add...

div.sb_left_box {clear: left;}

...to make it line up in IE7, and an additional...

div.sb_left_box {display: inline; position: relative;}

...to fix the 'margin-doubling on floats' bug and assure over the edge
visibility in IE6, if you want to cater for that version.

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] accessible background images

[Gunlaug Sørtun]

Brian Hazelton wrote:
> [...] when i disable background images, the body text disappears 
> because i use a white font color because the background image is 
> almost black...how would i keep it white but make sure people with 
> images disabled can see the text?

Normal procedure is to use a dark background-color in addition to a dark
background-image as background for light text.

Background-color should be declared anyway - lack of one will trigger a
warning in the CSS validator, so it is just a question of choosing the
right colors or shades that assure necessary contrast both with and
without background-images.

If accessibility really matters (which it should), you should also make
sure the choice of colors don't create unnecessary problems for people
with various types of color blindness.
White text on a near-black background should work fine though, although
I personally find such a combination pretty hard to read in most cases.

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] Weird nav menu problem in IE6

[Gunlaug Sørtun]

Luc wrote:

> http://www.dzinelabs.com/sandbox/New_site_layout/liquidnav1.html

> When hovering over the nav, sometimes the logo image disappears, the 
> text on the page shifts, the nav tabs shift,...

- "text on the page shift" is caused only on window-width wide enough to
trigger max-width in the minmax.js - above around 1200 wide. Narrower
window - below max-width, or disabled script, makes that problem go away.
Have never used that script, or that nav, and can after testing only
conclude that the problem isn't correctable, AFAICS, in CSS.

- can't make the logo disappear, so don't know about that.

- "nav tabs shift" is caused by bolder first letter on :hover not making
all tabs a particular amount wider. Thus the correction -
margin-left:-.1em; - isn't correct for all tabs.

Suggest you restyle slightly to stabilize the nav tab shift, like in
this revised copy of your document...

...and look for an alternative to the minmax.js.

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] center float:left

[Gunlaug Sørtun]

AG wrote:
> Bill, thanks for your reply. In your suggestion, it appears to me 
> that if you don't float the li, all links will stack up in the center
>  of the container.

Not so. Inline-block lines up inline - in line, and the whole menu can
then be centered within body or whatever element you want it centered
in. No need to adjust/modify source-code - it's all CSS.

I have used a solution similar to what BB suggests, for years, and apart
from that Gecko only recently implemented proper 'inline-block' support
- older versions needed a 'display: -moz-inline-box;' workaround, and
that old IE/win needed a 'hasLayout' trigger to simulate 'inline-block',
the centered line-up is working perfectly across browser-land.
See link below.

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] Putting IE6 out to pasture

[Gunlaug Sørtun]

Martyn Merrett wrote:
> Eric sent a message out earlier not to discuss/debate this further on
>  this list. Apologies for any inconvenience and lets keep our IE6 
> thoughts to ourselves, eh?

We're not discussing/debating the article that initiated this thread.
At least I am discussing how to handle, fix, workaround problems caused
by/in IE6, no matter what one thinks about it.

So far that has been in accordance with the policy on css-d, and unless
the policy has been changed lately I see nothing wrong in presenting
both problems and solutions targeted at a specific browser. That's what
nearly all threads on css-d are about anyway.

I have no real problems with IE6, so I will of course limit my responses
to solutions, and tips about how to check what works and what doesn't.
If that's wrong on css-d, then EAM should clarify things a bit more.
Otherwise we just end this thread because there's really nothing more to
say here anyway, and continue with "business as usual".

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] Putting IE6 out to pasture

[Gunlaug Sørtun]

Virgilio Quilario wrote:

> working on css to deal with ie6 is really time consuming. not to
> mention the troubles of getting ie6 browser for testing.

Both TredoSoft "multiple versions of IE"...

...and IETester...

...work well enough for comfort in a windows PC environment.

Various VM-Ware should make the above work well enough in Linux and
Mac-OS environments, for testing purposes.

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] Putting IE6 out to pasture

[Gunlaug Sørtun]

Martyn Merrett wrote:

> Thought you'd be interested in this. Could this *finally* be the end 
> of IE6 and our CSS woes?

Yes, in time IE6 will disappear - the sooner the better, but the
suggested 'options for "not supporting" ie6' are time-consuming and
don't provide quick relief for designers/developers.

This is quick and painless...

...and can leave IE6 with no styles or with minimal styling in no time,
almost regardless of how one organizes ones site and CSS.

I prefer the "minimal styles" route - as shown for my article, but will
probably follow the "no change" route site-wide and for client work
until IE7 disappears too.
IE7 for the most part falls into the same "bug-category" as IE6, and is
in need of the same fixes as its predecessor(s), or variants thereof,
anyway - at least the way I work :-)

More on the issue...



Stay updated: 

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] Floating/Layering a .SWF video over an image.

[Gunlaug Sørtun]

RHYAN TAYLOR wrote:
> I have a beta-site, *www.freestyle-la.net*, and I need help getting 
> the .swf file to position properly within the "main content" area 
> with Internet Explorer.

You will have more luck if you replace the non-standard  with
, and modify the CSS accordingly.

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] Splitting the Center Column Into Two Columns?

[Gunlaug Sørtun]

The Ferrett wrote:

> http://www.starcitygames.com/SCG_6/test.html

> The problem: my boss wants the capability to occasionally "split" a 
> given row in half, so we have two news items sitting next to each 
> other on a single row, just as you'd split a table cell in two.

Somewhat like this, I guess...



CSS: 

Basically: #main is floated, which isolates its content and prevents all
'clear' from acting on surrounding elements.
All involved dimensions and margins are then modified for correct
line-up in such an "all float" layout.

I didn't bother with quirks mode box model deviations in IE6 and older.

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] Positioning images and wrapping text...

[Gunlaug Sørtun]

Michael Beaudoin wrote:

> http://www.mhinonline.org/dev.

You mean like...

...or did you have something else in mind?

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] Positioning images and wrapping text...

[Gunlaug Sørtun]

Michael Beaudoin wrote:

> Is there a way to precisely position an image and have the wrap 
> follow?

"Precisely" can be a problem since hardly anything can be relied upon as
"precise" in something as fluid as a web design.
But, yes, you can get the effects _I think_ you're after, if you let go
of the html table and rework your graphics (quite) a bit.

I've built up a very basic demo - without background graphics - here...

...which you can study a bit.

My demo may despite its simplistic look be complex enough for someone
relatively new to CSS based layouts, so take your time.

Things can be rearranged, restyled and get the graphics to meet all
requirements I can read out of your existing case and description. If I
got it wrong, you'll have to explain what you want a little better.


Notice that the offset image moves with font resizing, so it ends up
being positioned precisely where it is supposed to be even after resizing.
Remember that the fluidity in web design: text-size and other end-user
changeable variables, must be taken into account - like I have done, if
one wants a design to survive.

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] Is this possible with CSS?

[Gunlaug Sørtun]

Gunlaug Sørtun wrote:

> I mark up for XHTML served as 'application/xhtml+xml', and then serve it
> as 'text/html' since IE doesn't support it otherwise.

"Close tabs" mistake :-)

For XML capable browsers:
<http://www.gunlaug.no/contents/wd_1_06_03.xhtml>

HTML for IE:
<http://www.gunlaug.no/contents/wd_1_06_03.html>

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] Is this possible with CSS?

[Gunlaug Sørtun]

Geoffrey Hoffman wrote:

> Unrelated question... what is the purpose of:
> 
> /*

Re: [css-d] ie/7 image issue

[Gunlaug Sørtun]

David Laakso wrote:
> Gunlaug Sørtun wrote:

>> Oh, and IE6 stretches all images to perfect squares at first load 
>> on slow connections, and the min/max script makes it freeze and die
>>  under certain conditions. The latter is usually not a problem, but
>>  the former may still be.
>> 
> 
> Not noticeable on dsl here. No clue how to fix that on a slow 
> connect. My son, the client, is vehemently opposed to reducing the 
> number of images and further compression. Would a well tuned IE 
> expression help any?

No, one has to "shake" IE6 (cause full re-rendering) automatically after
completed load, to solve the size problem, and I haven't seen/found a
way to do that yet. Can't really ask end-user to "shake" IE6 if it
doesn't render things properly, I guess :-) but that's really all it
takes to fix it.

Don't know which "simulate slow connection" solutions that will work for
old IE and/or an entire network. I don't need one yet, but it isn't just
IE6 that is acting up / timing out on slow connections so it would be
useful for all to be able to test "slowly" for new designs.

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] Is this possible with CSS?

[Gunlaug Sørtun]

Philippe Wittenbergh wrote:

> [...] Using generated content has a lot to go, if you want a simple 
> type of bullet. More decorative list markers are unfortunately still 
> a graphics thing (unless SVG can be used ! Hmm, inline SVG, yumyum).

Should also be possible to resize images inserted through generated
content.
Haven't really bothered to test apart from that I had to add sizes to a
"generated content" image while testing Safari 4PB since Safari - new
and old - has an irritating bug in that they size such replacing images
to the space of the replaced one by default.

We may also get background resizing in CSS3, which will provide even
more options. Have only tested that in Opera with an -o- test property,
and it's working fine.

> Thing is, most people have problems with all that code forking :-).

I can't see why :-)After all: with a bit of care it's just a
"progressive enhancement" matter, where we just add the various bits of
code in the right order, and leave to browsers to pick and make the most
out of what each of them can handle. Got to have intimate knowledge
about the inner workings and standards support of all major browsers
though - including slightly older versions, which may be a problem...

Standards support is improving across browser-land, and for that to
continue and work to our advantage, we simply _have to_ fork and add
enhancements, fall-backs and various workarounds now and then.

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] Float problem in Firefox

[Gunlaug Sørtun]

Gaurav Sharma wrote:

> http://gauravsharma.uuuq.com

First: your example keeps all IE/win versions in a rendering mode
equivalent to that of IE5.5 - Quirks Mode, and doesn't allow for any
improvements made in IE6, IE7 and IE8. Not very wise to block all
progress made to IE, so I hope you don't do that in real designs.

Non-IE browsers don't care which mode your pages trigger - or not - as
long as they're styled correctly and completely.


So, your example will work just fine in Firefox and all other browsers,
regardless of mode, if you add some real "clearfix" styling...

.clearfix:after {
content: "."; display: block; height: 0; clear: both; overflow: hidden;
visibility: hidden;
}

...as can be seen in this, more completely styled but still in quirks
mode, copy of your example...


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] Is this possible with CSS?

[Gunlaug Sørtun]

Philippe Wittenbergh wrote:

>> 

> Works as well in Fx 3. You could improve it: set the generated 
> content to display:inline-block and give it a small margin-right.

This will improve bullet positioning in much older Geckos too, when the
right -mos- replacement for 'inline-block' is added.

> The alternative, more cross-browser friendly way (aka, support for 
> old IE): set the  to display:block, give it some padding-left and 
> fill it with a background-image that changes on hover.

Ideally I'd use such a "sprite" solution only as an addition/alternative
for older IE, since images can't be resized along with text. The perfect
IE-fix is one that simply doesn't work outside old IE, and therefore
becomes obsolete along with those older versions :-)

FWIW: I've also noticed that when text size is changed in browser, IE8
only resizes the generated content (the bullet in this case) and
corrects its line box and thereby its visual position, after a reload.
We can note this down as a bug in IE8.

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] Is this possible with CSS?

[Gunlaug Sørtun]

Geoffrey Hoffman wrote:

> Specifically, I want the  bullet to turn a color when I hover on 
> the  inside it.

With CSS only, yes, but browser support is a bit weak.

As an example: we can play with generated content...

...and get the effect you want - in supporting browsers.

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] Page Check

[Gunlaug Sørtun]

JWN wrote:

> I'd appreciate it if some of you with IE 8 would have a look at 
> www.nannery.net and let me know if there are any problems.

Looks a bit strange on narrow windows, but the same in all browsers -
including IE8.

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] ie/7 image issue

[Gunlaug Sørtun]

David Laakso wrote:
> Mac os x 10.4.11 parallels xp ie/7 (only).

Confirmed in IE7(XP) *and* IE8(Vista).

Think it's a flaw in how Trident apply 'max-width' - as 'width' before
checking if 'max-width' should take effect or not.

> 
> 
> What to do?

I can't test your construction locally, but since it only happens when
#d is so wide that #d img {max-width : 96%;} is wider than the images
intrinsic width, I suggest you declare a max-width on #d too.

Something close to...
#d {max-width: 554px;}
...(image-border included) should do.

Declaring...
#d img {width: 530px; max-width: 96%;}
...may also work, since 'max-width' overrides 'width'. I can't test this
either.

BTW: those fixed margin-top on images are only correct when images are
not shrunk on narrower windows. When they are, those margins cause
strange alignment-changes when switching images. Same problem in all
browsers.

Not exactly CSS, but if you want a stable alignment: overlay all images
on a common canvas, a white one sized as large as the largest image
would otherwise be, so all images get the same width and height. You'll
have to incorporate the image-border in the image itself then, and make
the canvas wide enough to incorporate it.


Oh, and IE6 stretches all images to perfect squares at first load on
slow connections, and the min/max script makes it freeze and die under
certain conditions. The latter is usually not a problem, but the former
may still be.

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] IE list problem

[Gunlaug Sørtun]

Climis, Tim wrote:
> I just noticed this today, and I can't figure out what's going on. It
> looks right in FF and IE8.  But in IE7, all the menu text is indented
> from the graphic.
> 
> http://www.indiana.edu/~intlserv/

Can't analyze it in depth because scripts don't survive download, but
for IE7, add...

*:first-child+html>body div#menu ul.tree {
   float: left;
}

...to isolate outer ul containers from their parent - div#menu. That
will fix indentation/line-up in that IE version.

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] Horizontal Navigation Bar Problem

[Gunlaug Sørtun]

Scott Gruber wrote:

> 

> On the top navigation bar the tabs fit nice an flush on pc browsers 
> (IE 7, IE8, Firefox, Chrome) but on Mac there there is spacing on the
>  right of the About Us tab that doesn't stretch to fill the bar on
> the right side in Safari and Firefox.

Doesn't fit in any of my browsers on any Operating System, simply
because "fit" relies of font size. Has never worked and will never work,
regardless of how much detection and various stylesheets you apply.

If you want something to fit exactly anywhere: use fix-sized images.

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] Top half of image map button not active in IE

[Gunlaug Sørtun]

Ian Piper wrote:

> http://www.tellura.co.uk/ruberyowen/contact-us.php

> On this page, if you look at the Rozone button (top right) it shows 
> an orange dotted border on hover, as it should. However in IE 6 under
>  Windows 2000 and IE7 under Vista the top half of this button is not
>  clickable.

IE's old stacking bug. Add...

#companies-location-map ul {position: relative;}

...to lift the entire ul with its absolute positioned children as one
layer, above the surrounding element layers.

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] forcing IE6 to respect div width

[Gunlaug Sørtun]

Giuseppe Craparotta wrote:

> http://www.giuseppecraparottacv.co.uk/doubts/about.html

> Is it any way to force IE6 to consider the image as going out of the
> div's width instead of widening the div accordingly to it.

Yes. Declare overflow: hidden on container and position: relative on
overflowing content. Serve to IE6 only.

> If not I'll probably place the image out of the div, but this would
> be semantically incorrect, being the quote part of the copy.

Not sure how "semantics" would help here...

...but that, and a few other missing pieces...

...is another matter entirely.

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] max-width in Safari/IE

[Gunlaug Sørtun]

Jack Blankenships wrote:
> It seems to be that the table within the div or body element is 
> pushing the content out beyond the specified widths in Internet 
> Explorer. [...]

If you have problems: link to the case, page, you have problems with.
Bits of CSS don't make much sense without it.

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] max-width in Safari/IE

[Gunlaug Sørtun]

Jack Blankenships wrote:
> Apparently there was a table there as well, and max-width does not 
> apply to a table very nicely in Safari or Internet Explorer.  Can 
> anyone offer some more explanation on this?

Have only tested for CSS table a year or so back, and it's a known
behavior in Safari 3. I haven't tested how neither IE7 nor IE8 handles
max-width on HTML table, or how IE8 handles it on CSS table.

Some browsers seem to ignore min/max-width on table - which seems ok,
while others apply it - which also can be justified I think. So, I don't
think Safari and IE8 are wrong, or right, since min/max-width on table
seems to be in undefined or under-defined CSS territory.

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] 3 columns of text, but MINIMAL wrapping, possible?

[Gunlaug Sørtun]

Scott Mueller wrote:

> The difficult part is that I want these columns to NOT wrap as much 
> as possible, spread across the width of the browser window and have 
> equal amounts of whitespace between.

> I know there's a display: table declaration, but I understand no IE 
> browsers pay attention to it...  maybe there's an IE hack for this?

IE8 has proper support for CSS table, and older IE versions can be
"tricked"...


However, problems arise when one wants source-ordering, table behavior
and "old IE trickery" all at once in a self-adjusting layout. Neither
HTML table nor CSS table permits real source-ordering, so you'll
probably end up with a complex solution to a small problem. I don't
think it's worth it for anything but "proof of concept" cases.

In real life I would forget source-ordering, and use a regular HTML
table for a case like yours, to achieve optimal fluidity without
premature wrapping, while avoiding problems with older IE versions' lack
of CSS table support.

You also have to take into account that text can/will be resized, which
in itself will complicate things enough if your case is supposed to work
across browser-land and various end-user options.

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] just center

[Gunlaug Sørtun]

MEM wrote:
> Thanks for the IE8 info. I didn't know about that.

IE8 still supports IE-expressions in its two "backwards compatibility
modes" - emulating IE7 standard mode and IE5.5/6 quirks mode. No need to
hide them from IE8 in "super-standard mode" though, since it simply
ignores them then.
Most of what we can do with IE-expressions can be done in regular CSS
already - in supporting browsers, and new CSS functions like calc() will
improve things even more in the coming years.

> Please don't take me wrong: I was not putting the article in 
> question, neither trying to make you reiterate things that you have 
> written before.

Question all I write as much as you like, as I can't imagine any of it
being even remotely close to "perfect".
In a few years probably most of what I've written about such
problem-solving in old browsers will be obsolete and should be deleted
anyway, as browsers slowly catch up with common standards.

> I was just asking for a clarification and trying to understand how 
> things really happen on that .js code.

Ok, I'll try. See below.

> But it was a too long pseudo-English e-mail from someone who doesn't 
> even properly know the language, and I assume my fault for some 
> miscomprehension that may have arrived.

Language isn't a problem here, despite the fact that English isn't my
native language. I'm Norwegian... :-)

I did however have a problem with you not being able to see that I've
avoided negative margin-top by simply setting the top-margin to zero if
it ever could become negative.

Blame my short response on the fact that I, as goes for many who have
been around on various lists and forums for a few years, has grown a bit
tired of "continuous spoon feeding" when I think the case has been made
clear enough already.
Such impatience and "shortness" may hit the wrong people at times - sorry.

> Despite the fact that that code will be deprecated sometime, I still 
> want to learn how to "read it", but, as you stated, maybe I should 
> look elsewhere.

Most would read my IE-expression from a Javascript background, so a
person fluent in Javascript should be able to help you extract more details.

I have no real experience with Javascript, so I created the expression
based on simple logic that works in all programming languages. It was
just a question of getting the syntax right for the language at hand.
Microsoft's "dynamic expressions" are compact, but not very
straightforward to create or read IMO. Glad I won't have to write many,
if any, more of those.

---

The original problem was that a negative margin-top would obviously hide
the top of the container above viewport area, and that would be no
improvement over basic absolute positioning that many use for such
horizontal and vertical centering.
If that was good enough, then no IE-expression would be needed.

Avoiding a negative margin-top is the only slightly clever part in my
expression - and why I coded it.

In practice I'm dividing dimensions of body (equal to viewport) and the
centered element by 2, and subtract half of one from half of the
other to get the offset needed to get the vertical mid-point of the
element positioned in the vertical mid-point of viewport, *if* (and
only if) the viewport is tall enough to house the entire container.
If the viewport is too small for the element, I zero out margin-top so
the element stays inside viewport.



Hope that helps a bit.

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] just center

[Gunlaug Sørtun]

MEM wrote:

> I'm confused, what's going on on this code?

Simple logic, coded in jscript and expanded/explained here...

...and there's a link to Microsoft's information on the subject in my
page...


Beyond that I don't want to reiterate stuff from my two year old article
on how to use IE-expressions to overcome weaknesses in old IE's CSS
support. After all: Support for IE-expressions is discontinued in IE8 -
no need for it, and older IE versions that supports it are slowly
dropping in numbers.

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] David Laakso's site in Firefox 2.x/Firefox 3.x

[Gunlaug Sørtun]

david wrote:

> I did with a Ctrl-click on the Reload button.

Should do the trick -- and does at my end.
I don't know what prevented expected functionality at your end.

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] just center

[Gunlaug Sørtun]

MEM wrote:

> Ok. I have comment this two lines: Now it seems to work in FF.
> 
> /*height: 20em; */ /*width: 30em; */
> 
> If this is OK, I will try to understand the IE part now.

Height isn't needed but you'll need the width on #centered. Otherwise
you just get a container as wide as the viewport with centered text in
it. If that's what you want then it's ok, but I can't see the point.

For the IE part (for IE7 and older), you just have to read the article.
All about how it works is expanded and explained there.

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] just center

[Gunlaug Sørtun]

MEM wrote:

> The hard part on this is that, when I look the source code on this 
> last link, I get a lot of code that I don't get.

Ignore it, and use your own visual styling.

> Is this the reason why this link http://nuvemk.com/index4.html 
> doesn't show thinks centered on firefox?

Yes, since you can't see what's centered when you have no visual cues.

Here's how your page centers the "centered" container...

...and I'd call that "well centered in all directions".

The red border is there only as a visual cue. Works just as well without
that border, but white-on-white reveals no edges.

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] New Member: wild card question

[Gunlaug Sørtun]

Dave Miers wrote:

> I often use a * {margin: 0; padding: 0; border: 0; } as a starting 
> point and for the most part saves me lots of extra css code, 
> headaches, and time for layout with great cross browser/platform 
> support. However  sometimes when entering content in what is 
> basically a template it would be nice to restore the defaults for 
> just one div, is there anyway to stop this from affecting a 
> particular div?

You can use the CSS3 negation pseudo-class to that effect...

...but it won't work in any version of IE - yet.

Wouldn't be wise to use it anyway, since the defaults you want to keep
varies a bit (too much IMO) across browser-land. Better declare what you
want, where you want it.

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] Site Check: Can this DIV be vertically centered in the viewport?

[Gunlaug Sørtun]

Stephen Tang wrote:
> Will this work on a DIV with a declared height?  I'll see what 
> happens to my site when I remove my declared height on the DIV.

Check the demos (links on top of side column in my article), and, yes,
it'll work literally "no matter what" - when done right.

The advantage is that nothing will end up in unreachable places off
screen on small windows, since scrolling becomes active for the whole
page when necessary.

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] David Laakso's site in Firefox 2.x/Firefox 3.x

[Gunlaug Sørtun]

david wrote:
> Looked at it in FF 3.0.4 on Linux with JS on. The first time I went 
> (with JS turned off) the About section was expanded. After I turned 
> JS on, the About section was collapsed, and clicking on About did 
> NOTHING beyond put a dotted horizontal line above and below it.

After changing preferences one also has to reload the page in that Gecko
for all preferences to work on it. Quite normal in many browsers.

 works as expected - ok
- in all Geckos and a range of other browsers on Ubuntu.

regards
Molly 't.c.'
-- 
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] Site Check: Can this DIV be vertically centered in the viewport?

[Gunlaug Sørtun]

David Laakso wrote:

>> I built this site, http://www.isadoratang.com/index.php, but I've 
>> been trying to determine if I can center the  
>> vertically in the viewport.

> Yes, I think it is possible with CSS (I seem to recall a method Georg
>  Sortun created but can't find it at the moment)  or possibly with 
> scripting. Although I am not so sure what vertical centering will buy
>  you with a fixed height wrapper enclosing movable type. Try your 
> page at minimum font-size 24px in FF for example...

Demo with no declared height: 

Article on how: 
...with more demos linked in.
(I'll have to update that article, as IE8 does of course line up
perfectly with the other CSS2.1 capable browsers.)

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] Text breaking out in IE7

[Gunlaug Sørtun]

Del Wegener wrote:

> http://www.edi-cp.com/newweb/sandbox.php
> 
> In FF the text wraps nicely. In IE7 it does not.  Padding on the left
> is ignored and wrapping is sometimes one word to late.

> What is needed to make IE7 play nicely?

IE7 does play nicely, but you have hacked in a failure :-)

Delete this hack...

*div#content
{  /* IE6 */
width: 100%;
}

...completely.

IE6 is in standards mode, so it shouldn't have such a correction in the
first place.
The way your hack is built it is also picked up by IE7, which causes the
problem.

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] David Laakso's site in Firefox 2.x/Firefox 3.x

[Gunlaug Sørtun]

David Laakso wrote:
> Stephen Tang wrote:

>>> 

> Did you click the last list item "about?" If you did click it and 
> nothing happened, do you have javascript enabled?

FWIW, your menu works just fine with links, expansion / collapsing and
all, in all Gecko's I can lay my paws on ... all the way back to Mozilla
1.7.12 - Gecko/20050915.

regards
Molly 't.c.' ;-)
-- 
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] text wrapping problem

[Gunlaug Sørtun]

Bilgehan Maras, wrote:

> http://www.film.com.tr/listtest.html

> On firefox and safari everything is fine but as usual there is a 
> problem with IE 6 and IE7. IE wraps the text strangely.

Try adding...
li a {white-space : nowrap;}

Of course: your example doesn't look anything like your screenshots show
in any browsers at my end, since alignment is affected by font resizing
in browsers.

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] 2 css interfering using conditional comments

[Gunlaug Sørtun]

rose red wrote:

> I tried them every possible ( or did I forgot one ? ) way around the 
> last 10 days: [...] doesn't work ;-(

It does when done right. However, looking at your stylesheets it becomes
clear that you are trying to serve IE6 "complete styles" instead of just
"corrections", so you are making it extremely complicated for yourself
and the chances of getting it wrong somewhere in those stylesheets is
extremely high.

More about that further down, after the "specificity" part.

>> 2: you may have to give styles in the IE6 stylesheet even higher 
>> specificity, to make sure override takes effect.
> 
> what do you precisely mean ? Do you have an example?

First: understand "selector specificity".

In CSS standards "dry but accurate" language...

...and in a more popularized form...



To exemplify by using an arbitrary style declaration from your page. The
order of your stylesheet links is here as in your original, with IE6
styles linked in first.

In 'lte-ie6.css' you have...

#footer {   
position: relative;
/* more styles */
}

...while in 'sc-ie7.css' you have...

#footer {
position : fixed;
/* more styles */
}

Same selector (= same specificity) in both stylesheets, means the last
style declaration wins. IE6 doesn't understand 'position : fixed;' so it
will fail.

If I now change specificity for #footer in the 'lte-ie6.css' stylesheet,
so it becomes...

html body #footer { 
position: relative;
/* more styles */
}

In 'sc-ie7.css' you still have...

#footer {
position : fixed;
/* more styles */
}

The "html body #footer" selector in the first stylesheet points at the
same element as the one in the second stylesheet, but now with higher
selector specificity thanks to the "html body" addition from the
element-chain your markup has. So now the first style declaration wins
over the second, and IE6 will therefore see 'position: relative;' for
#footer.

---

IE6 needs "corrections", *not* a complete stylesheet in addition to the
regular one, so you should therefore start with stylesheet links in the
right order, and a completely empty stylesheet for IE6.

IE6 will pick up all styles from the regular 'sc-ie7.css' stylesheet,
and only when IE6 gets it wrong do you add a style declaration in the
IE6 stylesheet - to "correct IE6" on that point.

First let me clean up your #footer styles so they make more sense...

In the 'sc-ie7.css' you'll then have...

#footer {
position : fixed;
bottom : 0;
left : 0;
width : 100%;
height : 100px;
background-image : url(images/footer_grass.png);
background-repeat : repeat-x;
z-index : 9;
}

IE6 doesn't understand 'position: fixed', so in the 'lte-ie6.css'
stylesheet I write...

#footer {   
position: relative;
}

...and nothing more for #footer.

As long as the 'lte-ie6.css' stylesheet is linked in after the regular
'sc-ie7.css' stylesheet, IE6 will see all the other #footer styles, but
'position: fixed' will be overridden so IE6 only sees 'position: relative'.

This correction won't make IE6 handle the #footer the same way as the
other browsers do - IE6 doesn't understand 'position fixed' ... period.
The correction will only allow the #footer to be rendered where it is in
the markup in IE6, instead of IE6 trying to do "fancy things" with it.


The same with all other style declarations. First make it work flawless
in all browsers but IE6, and then correct what IE6 doesn't handle
correctly by serving IE6 _only_ the corrections it needs in order to
behave.
Remember: what IE6 can't do, it can't do no matter what. Thus, all you
can do it to make the most out of what IE6 _can_ do, and avoid its worst
weaknesses in the process.

Serving IE6 only "corrections" will cut the size of your 'lte-ie6.css'
stylesheet down to almost nothing, and give IE6 a chance to do what it
can with what it understands, without disturbing better browsers.

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] 2 css interfering using conditional comments

[Gunlaug Sørtun]

rose red wrote:

> http://www.melusinedesign.nl/test/test.html   has 2 css , one for IE6
>  and one for IE7( and of course for  FF, opera and some more...)  it 
> looks fine in IE7, but not in IE6, it seems the 2 css are interfering
> ?!

In a sense, yes. IE6 sees all styles, so interference is guaranteed.

1: reverse the order of the stylesheets. Correct IE6 AFTER the main
stylesheet.


This will give IE6 styles that have the same specificity as styles in
the main stylesheet, a chance to override styles served to the other
browsers.

2: you may have to give styles in the IE6 stylesheet even higher
specificity, to make sure override takes effect.

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] Equal heights solutions

[Gunlaug Sørtun]

bruce.som...@web.de wrote:

> " to suit the constraints of CSS implementations"
> 
> What is to be the successor to CSS that will actually solve the open 
> problems and enable web designers?

None, since this is about implementation.

CSS may need another level, or five, and will probably get them over
time. However, that in itself won't help much when it comes to
implementation in browsers. We need new generations of browsers and
eradication of the old ones. It is after all the old browsers - mainly
IE - that stand in the way.

So, ask the browser vendors and the end users to enable us, as they're
the only ones that can do it.

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] WAS : Size calculations

[Gunlaug Sørtun]

Ib Jensen wrote:

> And changing em to % is a good idea ??

A safer idea.

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] Clear: Both DIV misbehaving in IE7

[Gunlaug Sørtun]

Chris Knowles wrote:

> This problem is only occurring in IE7, the page displays as I would
> expect in both FF3, Safari and Chrome.

Will need live example in order to debug. IE7 has too many clear related
bugs.

You can look for something similar to your problem, and possible
solutions to it, here...


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/