Re: [css-d] Font Sizing: Why Is Firefox Different?

[Felix Miata]

On 06/06/16 14:06 (GMT-0400) Anthony Baker apparently typed:

> Have been looking to different font sizing methods and decided to go
> with a method suggested by Dan Cederholm (as I recall) )

Poor choice. Dan Cederholm isn't most people using your designs; he
isn't a normal user:
http://www.useit.com/alertbox/design_priorities.html . If Dan Cederholm
likes small text, he should set his browser so his browser displays text
smaller. That's why browsers have a user adjustable preference setting.

> where the font
> size is defined in the BODY tag

Bad place. There's no good reason to set a size other than 100% (or
medium or 1em) in the body rule. 100% is how you respect your visitors,
using the size they prefer as your base size, from which you do your
contextual sizing with other selectors. When you set some other size in
body you're telling your visitors they did something wrong, disagreeing
with their preference, which is rude.

Everyone's browser defaults are wrong, right? Wrong:
http://mrmazda.no-ip.com/auth/bigdefaults.html

> and then percentages are used to
> increase or decrease the size. EMs are used for line height.

Em for line height is another bad idea. It really serves no good
purpose, and should either be removed from the CSS3 spec, or its
definition altered.
http://mrmazda.no-ip.com/auth/line-height-inherit.html shows why.

> Example of the base setting:
> body {font-size: small;}

> This has worked fine across Safari and IE browsers and should work on
> Firefox, but I've noticed that there's a distinct difference in the way
> Firefox is rendering text -- both on the Mac and on IE.

Maybe you see the result of a settings difference. Are you using a
laptop? What's your DPI set to? The base size in most browsers is DPI
dependant, with the user preference size set in pt. Firefox isn't, with
preference set in px.

> Does anyone know why this happens when IE and Safari work so well? It
> may be a small issue, but damned if it isn't annoying. Overall, font
> sizes seem smaller and line spacing tighter.

In which? How about screenshots showing us exactly what you see that
bothers you? NAICT, Safari & FF are a match.

> Even on a site like the NY Times, this sort of thing seems to be
> happening here and there -- particularly in the text of the body of an
> article.

Various browsers have differing rounding methods. Various font
subsystems calculate leading slightly differently. Couple those
differing methods with the differences in the way various font families
scale, and you're insured against everything always looking the same in
every browser.

Take a look at http://mrmazda.no-ip.com/auth/Font/font-rounding.html in
all your browsers and it is clear they don't all round the same.
Generally, IE truncates (but not always), while Gecko uses mathematical
rounding (often poorly - see
https://bugzilla.mozilla.org/show_bug.cgi?id=177805). See also:
http://lists.css-discuss.org/mailman/private/css-d/2006-May/064598.html

> Does anyone have a favorite method?

body {font-size: 100%} (or just nothing, saving a dozen bytes per load).

> Would love to get something that's accessible and as consistent as
> possible.

"Accessible" means you don't create artificial visitor difficulty by
applying arbitrary adjustments to text size in body. "small" in body
applies a size reduction from user preferred size to every letter you
don't change elsewhere, resulting in increased reading difficulty, and
thus decreased accessibility. Plus, it shows disrespect of your visitors.
-- 
"All have sinned & fall short of the glory of God." Romans 3:23 NIV

 Team OS/2 ** Reg. Linux User #211409

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

Re: [css-d] Font Sizing: Why Is Firefox Different?

[Felix Miata]

On 06/06/16 14:49 (GMT-0400) Jade Rauenzahn apparently typed:

> I've always had very good luck with cross-browser compatability if I set my
> font sizes in ems. 1em is = 12px font, while .8em is equivalent to 10px.

In most browsers, 'html, body {font-size: 1em}' produces 12pt text, not
12px text. With the most common browser/system DPI (96), 12pt is 16px.

.8 X 12pt is 9.6pt (12.8px), not 10pt, which different browsers
variously may round either to 12px (truncation) or 13px (mathematical
rounding).
-- 
"All have sinned & fall short of the glory of God." Romans 3:23 NIV

 Team OS/2 ** Reg. Linux User #211409

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

Re: [css-d] Misc. oddites in Mozilla, IE6 & 7

[Ed Seehouse]

On 6/16/06, Audra Coldiron <[EMAIL PROTECTED]> wrote:
> Hello!

> Mozilla - main menu border bottom not "double" like specified, but only
> single

It looks double to me in SeaMonkey (latest version of mozilla),
Firefox, and Netscape 8.1.

> IE 6 - the footer bottom padding-top seems to double
> IE 7 - scrollbar on entire page triggered unnecessarily

IE7 is just in beta right now with probably lots of changes to come.
I think it's a waste of time to worry about how it looks in the beta.

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

[css-d] Misc. oddites in Mozilla, IE6 & 7

[Audra Coldiron]

Hello!

I've been lurking on this list for a couple months and have learned a 
thing or two just when I thought I knew it all (lol...) .  This is my 
very first post and I am hoping someone out there knows a quick fix to a 
few oddities I've fun into with my latest design:

http://audra.a0.aicdesign.net/news/?skin=111

The oddities are:
Mozilla - main menu border bottom not "double" like specified, but only 
single
IE 6 - the footer bottom padding-top seems to double
IE 7 - scrollbar on entire page triggered unnecessarily

Please note that I'm working with a CMS on which I can't alter the HTML, 
only the CSS.  If anyone can kindly show me the error of my ways I'd be 
grateful :-)

Thanks,

AC

-- 
Audra Coldiron

Rock-n-Roll Design & Hosting
http://rock-n-roll-design.com

Affordable, attractive websites for musicians that are a breeze to update.  
Designers - wanna use the tools on your own sites?  Learn how: 
http://bandwebdesign.com

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

[css-d] minor IE hover problem

[Andy Mosmiller]

I coded this page a while ago and thought I had the small pictures with
the borders hovering properly in IE, but checking today I find I am
mistaken.

http://www.kipke.com/events.html
http://www.kipke.com/kipke.css
http://www.kipke.com/kipkeIE.css

As you may notice, the border color does change on an actual mouse
click, but not on a regular mouseover.  I also tested things out by
removing the "a:focus img" and "a:active img" options, leaving only
"a:hover img" with exactly the same results as having all three in
place.

I figure my usage is not the same as the well documented IE issue
regarding applying the hover pseudo-class to non-anchor elements.
Shouldn't this work?


Thanks,

Andy

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

Re: [css-d] Strange IE Problem (bumping layout down on refresh) - dallasx

[Felix Miata]

On 06/06/16 18:30 (GMT-0400) Cooper Mor apparently typed:

> I can't verify this (because I'm on a Mac) but the client says when
> they go to the site (http://dallasxtreme.com) it works fine the first
> time, but when they refresh it shows this-

> http://img.photobucket.com/albums/v654/coopermor/scrnsht.jpg

> Any idea what could be causing this?

No, but no matter how many times I refresh it always looks like that in
IE. If I didn't see it differently on FF, I'd think it was supposed to
be that way. IOW, I don't see the difference as a problem.

It's a lot worse at high resolution, normal for fixed width layouts
(please note the disclaimer at the bottom of the setup page):

http://mrmazda.no-ip.com/SS/coopmo1.jpg hires screenshot on Mozilla/5.0
(X11; U; Linux i686; en-US; rv:1.7.12) Gecko/20050921 Epiphany/1.8.0
(Same look as FF 1.5.0.4)
http://mrmazda.no-ip.com/tmp/sc-coopmo.html SS setup
-- 
"All have sinned & fall short of the glory of God." Romans 3:23 NIV

 Team OS/2 ** Reg. Linux User #211409

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

Re: [css-d] Absolute positioning of a legend in a form (works in IE but not in FF)

[Ingo Chao]

Bernat Lleonart wrote:
> Hello,
> 
> I want to position a legend in a form. I've made te fieldset position:
> relative, and the legend position: absolute.
> 
> It works in IE, but not in FF.


see the Firefox installation folder,

/res/forms.css


legend {
   position: static ! important;
   float: none ! important;
   }


By design, you cannot position or float it from within an author style 
sheet.


Ingo

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

Re: [css-d] Strange IE Problem (bumping layout down on refresh)

[David Laakso]

Cooper Mor wrote:
> I can't verify this (because I'm on a Mac) but the client says when
> they go to the site (http://dallasxtreme.com) it works fine the first
> time, but when they refresh it shows this-
>
> http://img.photobucket.com/albums/v654/coopermor/scrnsht.jpg
>
> Any idea what could be causing this?
>
> Again the URL is http://dallasxtreme.com
>
> Cheers!
>
> Cooper
>
>   
XP
I did not have the problem you describe here, Cooper.
Might be their file setting?
Tools>InternetOptions>TemporaryInternetFiles>Settings>There are 4 or 5 
choices.. mine is set at: automatically.
Aside. Both columns need some padding at the bottom in IE (ff & op are 
ok I think). You have the fonts set in em's. This triggers a font-bug in 
IE that makes them go goofy on zoom.
This should fix it:
html { font-size: 100%;)
body {font-size: 1em;
Regards,
~dL

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

[css-d] Absolute positioning of a legend in a form (works in IE but not in FF)

[Bernat Lleonart]

Hi,

On 6/17/06, Christian Montoya <[EMAIL PROTECTED]> wrote:

>
> Did you try:
> > legend {
> > position: absolute;
> > top: -1em;
>
> display:block;
>
> > }
>
> ?
>
I've just tried it but it doesn't work.

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

Re: [css-d] Strange IE Problem (bumping layout down on refresh)

[Ingo Chao]

Christian Montoya wrote:
>> Again the URL is http://dallasxtreme.com
> 
> I get that on first load in IE 6. Maybe there is a margin that is
> collapsing in most browsers but not in IE? The gap is about 18 to
> 20px.
> 

I think you have to set margin:0 on form in IE.

Ingo

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

Re: [css-d] Strange IE Problem (bumping layout down on refresh)

[Christian Montoya]

On 6/17/06, Cooper Mor <[EMAIL PROTECTED]> wrote:
> I can't verify this (because I'm on a Mac) but the client says when
> they go to the site (http://dallasxtreme.com) it works fine the first
> time, but when they refresh it shows this-
>
> http://img.photobucket.com/albums/v654/coopermor/scrnsht.jpg
>
> Any idea what could be causing this?
>
> Again the URL is http://dallasxtreme.com

I get that on first load in IE 6. Maybe there is a margin that is
collapsing in most browsers but not in IE? The gap is about 18 to
20px.

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

[css-d] Strange IE Problem (bumping layout down on refresh)

[Cooper Mor]

I can't verify this (because I'm on a Mac) but the client says when
they go to the site (http://dallasxtreme.com) it works fine the first
time, but when they refresh it shows this-

http://img.photobucket.com/albums/v654/coopermor/scrnsht.jpg

Any idea what could be causing this?

Again the URL is http://dallasxtreme.com

Cheers!

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

Re: [css-d] Absolute positioning of a legend in a form (works in IE but not in FF)

[Christian Montoya]

On 6/16/06, Bernat Lleonart <[EMAIL PROTECTED]> wrote:
> Hello,
>
> I want to position a legend in a form. I've made te fieldset position:
> relative, and the legend position: absolute.
>
> It works in IE, but not in FF.
>
> Any idea where is the problem?

Did you try:
> legend {
> position: absolute;
> top: -1em;

display:block;

> }

?

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

Re: [css-d] Image breakout at bottom Div

[francky]

Trevor Boult wrote:

>Hi All,
>
>Brian Cummiskey pointed out to me the other day on this page:
>
>http://www.tboult.co.uk/dev/ag/crops/wheat.cfm
>
>That the image was breaking out of its div at the bottom. Brian suggested a 
>"clear both" block element which I have just implemented and its OK in 
>FireFox but not IE (Arrrgh)
>
>You will see in IE the div now spans accross the whole page.
>
>Any ideas as to how I can get the page to display correctly would be great.
>  
>
Hi Trevor,
Perhaps try the html-validator and delete the 2nd  and correct 
some double ID's and other things? ;-)

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

Re: [css-d] New IE7 hack/filter

[Gunlaug Sørtun]

Alex Robinson wrote:

> http://www.fu2k.org/alex/css/hacks/fuzzyspecificity

A bit too much back and forth for my taste :-)
Would be nice to know if it works though.

> Disclaimer: just because you can hack IE7, doesn't mean you should: 
> a) the IE7 team will probably fix this (though who can say when); b) 
> the IE7 team is adamant that you should use conditional comments 
> instead of hacks.

A 'conditional comment' is also "a hack", and a "not very nice" way to
avoid validation of those IE-corrections entirely.

> Disclaimer 2: if you really really do want to hack for IE7, you 
> should also have a look at Brothercake's XXX method
> 
> http://www.brothercake.com/site/resources/reference/xxx/

Those who prefer CSS-hacks instead of 'conditional comment'-hacks,
should also look at...

...but they are probably not any safer. Seem to work for now though.

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

Re: [css-d] Extending lines off the edge of the browser

[Jason Preston]

This may be the best way to go about it - just substituting this
code in gave me:

http://www.flickergaming.net/testblog/

I need to center the rest of the page and bring the "admin" tab
back into view. Where specifically do I need to plug in some
padding to get that done?

Thanks, 
 - Jason

> 
> Does this work?
> 
> #page {
>   background: white;
>   text-align: left;
>   margin: 0 auto;
>   position: relative;
>   /* The entire template's width is set in this class. */
>   border: 0px solid #ddd;
>   border-top: none;
>   }
> 
> I just removed the padding and the width from the #page 
> element...you'll need to go back in and add the appropriate 
> padding in a couple of places, or just change the width of 
> the elements, but I think it looked ok to me!
> 

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

Re: [css-d] Problem with heading

[francky]

Joanne wrote:

>I'm putting together a site and am having trouble with the heading looking
>right.
>In Firefox, it's correct.
>
>In IE, there is a small gap (so it looks like a small white line) to the
>right of the #header
>  
>
Hi Joanne,
This is due to the background-color #FF of the #main-div. Can be 
ommited, then in IE it doesn't peep through with 1px or so.

>In Opera, the #header is sitting too far down and to the right (ie: there's
>a margin or padding for top & left)
>  
>
This can be solved by adding: body { margin: 0; padding: 0; }
Testpage with IE/Opera things changed is here 
.

>www.sparrowdog.com/cc/ 
>(Obviously, the navigation wont' stay that colour!)
>
>Any help would be greatly appreciated. I'm trying ever so hard to lay out
>sites without tables :-)
>
To be encouraged: succes! :-)
francky

btw: the conditional comments for IE shouldn't be in the html, but in 
the head, just before the .
[because it are comments, the html-validator doesn't give a remark about 
this.]

btw-2: the logo-img can be cut of, and the bg-img can have just 1 or 2 
px width (with background-repeat: repeat-x) to get some more download speed.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Hyphens in class names

[Els]

Denise wrote:
> First post to the list ...
>
> I've been pulling my hair out trying to get a simple div of
> menu links to center on a page using class="Adm-Menu".  On a
> lark, I removed the hyphen from the name and "poof" all was
> well.
>
> I found it odd that a hyphenated class name applied to 
> worked fine, but not for a hyphenated name on a div.  While I
> think it's easier to just avoid hyphens, the team I'm
> developing with is using them extensively in CSS naming
> conventions.

Yup, me too. Work with hyphenated classnames on a daily basis.

> Does anyone have a resource for which elements are adversely
> affected by hyphens in the name.  Does this apply to id's also?

Do you have an example of that problem? I never encountered it. I 
think it's possible that you had the Adm-Menu styles overridden 
by accident, or maybe there was another mistake somewhere?

-- 
Els
http://locusmeus.com/
http://locusoptimus.com/ 


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

Re: [css-d] CSS Base url for image property values?

[Els]

Stephen Cunliffe wrote:

> Suppose a site has the following structure:
>
> www
>  \things
>  \stuff
>  \other
>  \neat
>  \cool
>
> In the ideal scenario, I'd like to reference one css file
> "site.css" that sits in the root directory.
>
> This works fine, and it will work if I link it in any page,
> nested anywhere in the site but
>
> if one of the styles, has something like:
>
> div.foo{
>  background-image: url(pic.png);
> }
>
> Then it only works, when "loaded" from the "root" directory...

Because that's where the css file is.

> So, the question is, outside of defining several duplicate css
> files (with different paths), or copying the images (there
> would likely be a few), to each and every directory, is there
> a way around this?

Not sure if I understand the question correctly.
Images that are defined in the css file, have to be relative to 
that css file.
If your CSS file is in /foo/bar, and your images are in 
/foo/images, you reference them from your stylesheet as 
url(../images/pic.png); or url(/foo/images/pic.png);, regardless 
of where the html files are that the stylesheet is applied to.

No need to copy images into various directories, they can all 
stay together in one place, just like the CSS file.


-- 
Els
http://locusmeus.com/
http://locusoptimus.com/ 


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

[css-d] Absolute positioning of a legend in a form (works in IE but not in FF)

[Bernat Lleonart]

Hello,

I want to position a legend in a form. I've made te fieldset position:
relative, and the legend position: absolute.

It works in IE, but not in FF.

Any idea where is the problem?

Thanks

Here's the code:

**
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
http://www.w3.org/1999/xhtml"; xml:lang="ca">



form {
background: #fff;
border: 1px solid #ff8200;
border-top: 1em solid #ff8200;
margin: 0;
padding: 0;
width: 11em;
margin: auto;
}
fieldset {
margin: 0;
padding: 0;
border: 0;
position: relative;
}
legend {
position: absolute;
top: -1em;
}







Legend

Nom:










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

Re: [css-d] Extending lines off the edge of the browser

[Jason Preston]

 
>>> The easiest way to do it would be to have the header in a
separate container. Currently everything is in #page and #page
has a fixed width and it has auto margins. No way to fight with
that. If you moved the #header out of the #page div and put it on
top, by itself, it could have 100% width. Then you could put
another container right inside #header and give that the same
width as #page and the same auto margins and then you would have
a fixed width header inside a 100% width block, and you could
style that 100% width block however you want sounds
complicated huh?

I followed this concpetually - it makes sense (and thanks!). Is
that a handy-dandy tutorial somewhere that would teach me how to
lift this out of the #page? (see again: new to CSS, self-taught)
- do I need to delve into the php to do this, or is it a matter
of re-arranging elements in style.css (i.e. list the #header
above the #page)?

I'd prefer to do it this way because I'm leery of trying to line
up images, etc. in multiple browsers. Also, isn't it lighter on
bandwidth?

>>> Or you could do what wordpress.org does, which is a total
fake trick... make the text bigger and you will notice that the
text falls out of the lines... because the lines are not borders,
but rather a background image that is repeated on the body.
Here's the image:

Cheaters! ;)

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

Re: [css-d] Extending lines off the edge of the browser

[Christian Montoya]

On 6/16/06, Jason Preston <[EMAIL PROTECTED]> wrote:
> I don't know how many of you are familiar with Wordpress, and
> more specifically the theme K2, but since I know next to nothing
> about CSS I built my site starting with those two installed and
> just customizing the stylesheet.
>
> I've been trying to get the two lines in my menu bar (they're 1px
> borders) to extend "off screen" on both sides (kind of like they
> do at the www.wordpress.org homepage). For some reason changing
> the margin only works in one direction, and changing the width of
> the segment seems to make the page itslef too wide (I get a
> scroll bar at the bottom).
>
> My site is at www.flickergaming.net.

The easiest way to do it would be to have the header in a separate
container. Currently everything is in #page and #page has a fixed
width and it has auto margins. No way to fight with that. If you moved
the #header out of the #page div and put it on top, by itself, it
could have 100% width. Then you could put another container right
inside #header and give that the same width as #page and the same auto
margins and then you would have a fixed width header inside a 100%
width block, and you could style that 100% width block however you
want sounds complicated huh?

Or you could do what wordpress.org does, which is a total fake
trick... make the text bigger and you will notice that the text falls
out of the lines... because the lines are not borders, but rather a
background image that is repeated on the body. Here's the image:

http://wordpress.org/style/cool-fade.gif

here's the css:

body { background: url(cool-fade.gif) #fff repeat-x; ... }

It's not so good, because the text does fall out, but as you can see,
they get away with a much simpler technique.

Hope it helps.

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

Re: [css-d] Extending lines off the edge of the browser

[John Sico]

Jason -

Does this work?

#page {
background: white;
text-align: left;
margin: 0 auto;
position: relative;
/* The entire template's width is set in this class. */
border: 0px solid #ddd;
border-top: none;
}

I just removed the padding and the width from the #page  
element...you'll need to go back in and add the appropriate padding  
in a couple of places, or just change the width of the elements, but  
I think it looked ok to me!



--
John Sico


On Jun 16, 2006, at 3:24 PM, Jason Preston wrote:

> I don't know how many of you are familiar with Wordpress, and
> more specifically the theme K2, but since I know next to nothing
> about CSS I built my site starting with those two installed and
> just customizing the stylesheet.
>
> I've been trying to get the two lines in my menu bar (they're 1px
> borders) to extend "off screen" on both sides (kind of like they
> do at the www.wordpress.org homepage). For some reason changing
> the margin only works in one direction, and changing the width of
> the segment seems to make the page itslef too wide (I get a
> scroll bar at the bottom).
>
> My site is at www.flickergaming.net. If anyone wants to shoot me
> a private e-mail I'd be more than happy to send over the
> stylesheet in case that makes it easier. Any help would be very
> welcome,
>
> Thanks,
>   Jason Preston
>
>
>
>
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

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

Re: [css-d] Font Sizing: Why Is Firefox Different?

[David Laakso]

Anthony Baker wrote:
> Am wondering if someone has any info on this for me.
>   
I think you have entered the twilight zone of personal opinion :-P . Not 
to mention font wars that some of us love, but are a no/no on this list. 
There are numerous pages on font-sizing in the list wiki. If you want a 
personal opinion, write *off-list.*
> Thanks,
>
> Anthony
Best,
~dL
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Hyphens in class names

[Denise]

Thanks.  It may have more to do with the template engine for this CMS.  I 
hadn't had issues with hyphens before, but thought I ought to check here.

Denise

-Original Message-
From: cj [mailto:[EMAIL PROTECTED]
Sent: Friday, June 16, 2006 3:18 PM
To: Denise
Cc: css-d
Subject: Re: [css-d] Hyphens in class names


i use hyphens all the time in my css, for headers and divs as well as
everything else.  just to make sure i'm not blowing steam, i made a
tiny little test page with a class of "test-hyphen" on an  and a
 and both worked fine in ff/ie/op.

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
http://www.w3.org/1999/xhtml"; >




.test-hyphen {
color: blue;
}




i should be blue

i should be blue too




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

[css-d] Extending lines off the edge of the browser

[Jason Preston]

I don't know how many of you are familiar with Wordpress, and
more specifically the theme K2, but since I know next to nothing
about CSS I built my site starting with those two installed and
just customizing the stylesheet.

I've been trying to get the two lines in my menu bar (they're 1px
borders) to extend "off screen" on both sides (kind of like they
do at the www.wordpress.org homepage). For some reason changing
the margin only works in one direction, and changing the width of
the segment seems to make the page itslef too wide (I get a
scroll bar at the bottom).

My site is at www.flickergaming.net. If anyone wants to shoot me
a private e-mail I'd be more than happy to send over the
stylesheet in case that makes it easier. Any help would be very
welcome,

Thanks,
  Jason Preston





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

Re: [css-d] CSS Layout (Ben Liu)

[Chaim]

Hi Ben,
Try using borders instead of background color - They print, and if 
there's no content in your li's, it should work.
-Chaim
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Hyphens in class names

[cj]

i use hyphens all the time in my css, for headers and divs as well as
everything else.  just to make sure i'm not blowing steam, i made a
tiny little test page with a class of "test-hyphen" on an  and a
 and both worked fine in ff/ie/op.

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
http://www.w3.org/1999/xhtml"; >




.test-hyphen {
color: blue;
}




i should be blue

i should be blue too



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

Re: [css-d] CSS Base url for image property values?

[Nick Daverin]

Stephen Cunliffe wrote:
> 
> if one of the styles, has something like:
>
> div.foo{
>   background-image: url(pic.png);
> }
>
> Then it only works, when "loaded" from the "root" directory...
>
> So, the question is, outside of defining several duplicate css files 
> (with different paths), or copying the images (there would likely be a 
> few), to each and every directory, is there a way around this?
>   


You could use an absolute position:

div.foo{
  background-image: url(/images/pic.png);
}

-Nick

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

Re: [css-d] Font Sizing: Why Is Firefox Different?

[Gunlaug Sørtun]

Jade Rauenzahn wrote:
> Have you ever tried using ems for font-sizing?

:-)

> I've always had very good luck with cross-browser compatability if I 
> set my font sizes in ems. 1em is = 12px font, while .8em is 
> equivalent to 10px.

1em ≠ 12px. 1em = "unchanged - same as its base". What's the base?

> The code is simply: font-size: .8em;

Warning:


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

Re: [css-d] Font Sizing: Why Is Firefox Different?

[Jade Rauenzahn]

Have you ever tried using ems for font-sizing?

I've always had very good luck with cross-browser compatability if I set my
font sizes in ems. 1em is = 12px font, while .8em is equivalent to 10px.

The code is simply:
font-size: .8em;
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Font Sizing: Why Is Firefox Different?

[Christian Montoya]

On 6/16/06, Anthony Baker <[EMAIL PROTECTED]> wrote:
>
> Hey Folks,
>
> Am wondering if someone has any info on this for me.
>
> Have been looking to different font sizing methods
...
> Does anyone have a favorite method?

I'll give you my favorite, which seems to work allright.

html { font-size:100.01%; /* fixes some browser bugs */ }

body { font-size:1em; /* always */ }

optional: #container { font-size:.9em; /* if I must */ }

everything thereafter is in em. I avoid hundredths (.95 for example)
because browsers round ems to a pixel size and hundredths can round
differently in different browsers. Tenths are a little more
predictable.

And I guess you could use percents just as well as ems, but I like ems.

and yes, I think I have seen that starting with font-size:small can
have problems in certain browsers, so there you go.

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

Re: [css-d] Font Sizing: Why Is Firefox Different?

[Gunlaug Sørtun]

Anthony Baker wrote:

> Have been looking to different font sizing methods and decided to go 
> with a method suggested by Dan Cederholm (as I recall) )where the 
> font size is defined in the BODY tag and then percentages are used to
>  increase or decrease the size. EMs are used for line height.

Fine, but avoid that 'font-size: 62.5%' or 'small' on body - unless you
like to have your fonts blown up to a really big size when subjected to
'minimum font size' in Firefox and Opera.

For more on the subject: 

> Example of the base setting:
> 
> body { font-family: "Arial", sans-serif; font-size: small; }
> 
> 
> This has worked fine across Safari and IE browsers and should work on
>  Firefox, but I've noticed that there's a distinct difference in the
>  way Firefox is rendering text -- both on the Mac and on IE.

1: check 'minimum font size', since Firefox and Safari apply it
differently, as mentioned in my article.
Not much you can do about it if you use small font-size on body, since
that means body has 11pt (14px) font-size at _my_ end.

> Does anyone know why this happens when IE and Safari work so well? It
>  may be a small issue, but damned if it isn't annoying. Overall, font
>  sizes seem smaller and line spacing tighter.

2: There are slightly different "tip-over" points for font-sizes in
different browsers. You'll have to figure out the average values that'll
work across browser-land if you want consistency - or else you'll get
+/- 1px variations.

> Even on a site like the NY Times, this sort of thing seems to be 
> happening here and there -- particularly in the text of the body of 
> an article.
> 
> Does anyone have a favorite method?

Yes :-)
- I size fonts based on "normal" (12pt (16px)) - or not at all.
- I select average font-size values, and test across browser-land.
- I blow everything up in all browsers, and make sure it doesn't break
too badly at twice the "normal" font-size.
- I leave the rest to the visitor.

> Would love to get something that's accessible and as consistent as 
> possible.

Accessible is what the visitor can access/read at their end. That has
nothing to do with font-size consistency.

Try out IE/win's "accessibility mode --> ignore font sizes" for size.
That option is all about accessibility and cross-site consistency.

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

[css-d] Hyphens in class names

[Denise]

First post to the list ...

I've been pulling my hair out trying to get a simple div of menu links to
center on a page using class="Adm-Menu".  On a lark, I removed the hyphen
from the name and "poof" all was well.

I found it odd that a hyphenated class name applied to  worked fine, but
not for a hyphenated name on a div.  While I think it's easier to just avoid
hyphens, the team I'm developing with is using them extensively in CSS
naming conventions.

Does anyone have a resource for which elements are adversely affected by
hyphens in the name.  Does this apply to id's also?

Thanks in advance,
Denise

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

Re: [css-d] Font Sizing: Why Is Firefox Different?

[Ed Seehouse]

On 6/16/06, Anthony Baker <[EMAIL PROTECTED]> wrote:

> Have been looking to different font sizing methods and decided to go
> with a method suggested by Dan Cederholm (as I recall) )where the font
> size is defined in the BODY tag and then percentages are used to
> increase or decrease the size. EMs are used for line height.
> Example of the base setting:

> body {
> font-family: "Arial", sans-serif;
> font-size: small;
> }

I'm coming more and more to the view that we should, as much as
reasonable, honor the user's preferences.  I'd therefore change your
rule slightly to make the default font-size on the body either 1em,
100%, or "medium", all of which I believe are equivalent and display
text at the browser's default font size.  Or just leave it out, which
amounts to the same thing.

With Geko based browsers (Netscape, Firefox, and many others) the user
can resize his fonts with a keystroke, so really, what's the point of
fighting? I try to design my your sites so that they look OK in just
about any font size or screen resolution.  That means giving up the
idea that I actually have any control over the user's preferences.
Fact is I don't and neither does anybody else.  And doing things that
way makes things a lot easier but still leaves a surprising amount of
room for creativity in page design.

Of course what works for me may not work for anybody else.

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

Re: [css-d] CSS Layout

[Gunlaug Sørtun]

Follow-up...

>> http://www.viterbo.edu/proofs/CSSTest/index3.html

The following margin-left/padding-left will probably work better and
more consistently across browser-land...

div#content ol, div#content ul {font-size .8em;
margin-top: 1em;
line-height: 1.4;
margin-left: 0;
padding-left: 18px;
}

...since not all browsers have the same margin/padding defaults on lists.

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

[css-d] CSS Base url for image property values?

[Stephen Cunliffe]

Hi all,

Suppose a site has the following structure:

www
  \things
  \stuff
  \other
  \neat
  \cool

In the ideal scenario, I'd like to reference one css file "site.css" 
that sits in the root directory.

This works fine, and it will work if I link it in any page, nested 
anywhere in the site but

if one of the styles, has something like:

div.foo{
  background-image: url(pic.png);
}

Then it only works, when "loaded" from the "root" directory...

So, the question is, outside of defining several duplicate css files 
(with different paths), or copying the images (there would likely be a 
few), to each and every directory, is there a way around this?

All thoughts and ideas appreciated.

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

[css-d] Font Sizing: Why Is Firefox Different?

[Anthony Baker]

Hey Folks,

Am wondering if someone has any info on this for me.

Have been looking to different font sizing methods and decided to go
with a method suggested by Dan Cederholm (as I recall) )where the font
size is defined in the BODY tag and then percentages are used to
increase or decrease the size. EMs are used for line height.

Example of the base setting:

body {
font-family: "Arial", sans-serif;
font-size: small;
}


This has worked fine across Safari and IE browsers and should work on
Firefox, but I've noticed that there's a distinct difference in the way
Firefox is rendering text -- both on the Mac and on IE.

Does anyone know why this happens when IE and Safari work so well? It
may be a small issue, but damned if it isn't annoying. Overall, font
sizes seem smaller and line spacing tighter.

Even on a site like the NY Times, this sort of thing seems to be
happening here and there -- particularly in the text of the body of an
article.

Does anyone have a favorite method?

Would love to get something that's accessible and as consistent as
possible.


Thanks,

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

Re: [css-d] CSS Layout

[Gunlaug Sørtun]

Debra Kappmeyer wrote:
> So, I took Dave's "friendly" advice to "learn CSS layout!" and am 
> trying to do that and attempting my very first (so keep that in mind)
>  CSS layout.

It's looking alright :-)
Just the usual IE-bugs in need of fixing... and a couple of "human bugs"
that should be corrected ;-)

> http://www.viterbo.edu/proofs/CSSTest/index3.html

> First when I have the list near the bottom, I'm wondering why there's
>  a large gap between the 4. And the A. But I don't have that problem
>  in the unordered list above it.

Lack of specificity for some of the combinations in the rule that is
supposed to zero out 'margin-top' on nested lists.

Write it like this:

div#content ol ul, div#content ul ol, div#content ol ol, div#content ul
ul, div#content  ol a, div#content  ul a
{font-size: 1em;
margin-top: 0;}

...and it will work just fine.

The specificity problem is rooted in this...

div#content ol, ul {font-size .8em;
margin-top: 1em;
margin-left: 1em;
line-height: 1.4;}

...where 'div#content ol' has a much higher specificity than 'ul'.
'div#content' acts as "targeting" and adds specificity to the rule for
'ol', but *not* for 'ul'.

See:  for more on
the subject.

> The other problem is in Windows IE (which I've noticed from my short
>  time on this list is a pretty big problem). In IE my page does very
>  strange things. My header and content move down below my navigation.
>  And even before I did something to make that happen, my content was
>  butted right up against my navigation background (no space like in 
> the other browsers).

IE adds 3px width to...
  
...and...

...so it runs out of space.

div#header {width: 587px;}
...will fix that element.


For the image...
HTML:


CSS:
* html #header-background {margin-left: -3px;}
...will give IE6 the space it needs.

Note that this isn't the most "solid" fix for IE/win, as it relies on "a
bug fixing another bug".
Better alternatives involves 'floating' more of your layout, and will
require some additional markup.

---

Looks like 'div#content' isn't "spaced" correctly in IE6.

Adding...

* html div#content {margin-left: 200px;}

...below existing style, is _one way_ to correct it.

---

*General comments:*

Noticed that you're leaving out optional end-tags. That'll usually work
well in HTML4.01, but may create maintenance-problems later on.
Also,  isn't optional, and there's one missing for .

---

The nav-list in  looks like a typical nav-list, so it
should probably be marked up as an unordered list.

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

Re: [css-d] Panel layout problems

[David Laakso]

Stephen Moretti wrote:
>
> I've got each of the panels to display correctly in their own right,
> but on the page the layout is all over the place...]
>
> I'm at my wits end
Tell me about it :-P .
>  and have started going around in circles and read
> so many different web sites that my head is spinning.
> The page in question can be found at http://farcry.dott07.com/
>
> Stephen
Stephen,
I think like maybe you got a bit overly control happy. Things tend to go 
better if you just let all the garbage just flow in a natural and 
unrestrained order. Absolute positioning to layout a page, horizontal 
padding, and borders on width bearing containers, are always 
problematic. I find that working in quirks mode (see the XML declaration 
above the doctype) makes life with the various versions of win/ie a lot 
easier. This has been trimmed to avoid a scroll bar at 800; and is a 
basic layout suggestion that /may/ get things back on track-- please see:

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

Re: [css-d] CSS Layout

[Ben Liu]

Oh and you are missing a lot of  tags too, perhaps Ed's
recommendation should be addressed first, you seem to have some html
code to fix first before the CSS can be addressed.

On 6/16/06, Ben Liu <[EMAIL PROTECTED]> wrote:
> Oops, sorry. Now that I look at your html, that CSS rule won't work
> because you don't actually have the child UL inside LI tags. Your code
> looks like this:
>
> 
>
> 
> To oversee all university 
> academic policies
> To review changes in programs or 
> courses where those changes
> affect other schools
> To approve courses for the 
> general education program
> To approve general education 
> course revisions
> 
> more information
> more information
> 
>
> To assess the students' 
> development of core abilities
> 
>
> 
>
> For my recommendation to work it would have to be like this:
>
> 
> To oversee all university 
> academic policies
> To review changes in programs or 
> courses where those changes
> affect other schools
> To approve courses for the 
> general education program
> To approve general education 
> course revisions
> 
> more information
> more information
> 
>
> To assess the students' 
> development of core abilities
> 
>
>
> On 6/16/06, Ben Liu <[EMAIL PROTECTED]> wrote:
> > Hi Debra,
> >
> > I might be wrong about this but I think the reason that extra gap
> > exists between the 4 and the A is because margin is being added twice,
> > once in the ul and once for the li that contains it. I might be wrong
> > about this because browsers collapse margins between elements
> > sometimes. A rule like this might eliminate that extra gap:
> >
> > il ul {margin: 0;}
> >
> > or for your page
> >
> > div#content li ul {margin: 0;}
> >
> > HTH,
> >
> > - Ben
> >
> >
> > On 6/16/06, Debra Kappmeyer <[EMAIL PROTECTED]> wrote:
> > > So, I took Dave's "friendly" advice to "learn CSS layout!" and am trying 
> > > to
> > > do that and attempting my very first (so keep that in mind) CSS layout.
> > >
> > > I think I've got it very close to where I want it for now:
> > >
> > > http://www.viterbo.edu/proofs/CSSTest/index3.html
> > >
> > > http://www.viterbo.edu/proofs/CSSTest/css/basic3.css
> > >
> > > There's just a couple of problems
> > >
> > > First when I have the list near the bottom, I'm wondering why there's a
> > > large gap between the 4. And the A. But I don't have that problem in the
> > > unordered list above it.
> > >
> > > The other problem is in Windows IE (which I've noticed from my short time 
> > > on
> > > this list is a pretty big problem). In IE my page does very strange 
> > > things.
> > > My header and content move down below my navigation. And even before I did
> > > something to make that happen, my content was butted right up against my
> > > navigation background (no space like in the other browsers).
> > >
> > > Any help would be greatly appreciated.
> > >
> > > Thanks,
> > > Deb
> > >
> > >
> > > __
> > > css-discuss [EMAIL PROTECTED]
> > > http://www.css-discuss.org/mailman/listinfo/css-d
> > > IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
> > > List wiki/FAQ -- http://css-discuss.incutio.com/
> > > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> > >
> >
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS Layout

[Ben Liu]

Oops, sorry. Now that I look at your html, that CSS rule won't work
because you don't actually have the child UL inside LI tags. Your code
looks like this:




To oversee all university academic 
policies
To review changes in programs or 
courses where those changes
affect other schools
To approve courses for the general 
education program
To approve general education course 
revisions

more information
more information


To assess the students' development 
of core abilities




For my recommendation to work it would have to be like this:


To oversee all university academic 
policies
To review changes in programs or 
courses where those changes
affect other schools
To approve courses for the general 
education program
To approve general education course 
revisions

more information
more information


To assess the students' development 
of core abilities



On 6/16/06, Ben Liu <[EMAIL PROTECTED]> wrote:
> Hi Debra,
>
> I might be wrong about this but I think the reason that extra gap
> exists between the 4 and the A is because margin is being added twice,
> once in the ul and once for the li that contains it. I might be wrong
> about this because browsers collapse margins between elements
> sometimes. A rule like this might eliminate that extra gap:
>
> il ul {margin: 0;}
>
> or for your page
>
> div#content li ul {margin: 0;}
>
> HTH,
>
> - Ben
>
>
> On 6/16/06, Debra Kappmeyer <[EMAIL PROTECTED]> wrote:
> > So, I took Dave's "friendly" advice to "learn CSS layout!" and am trying to
> > do that and attempting my very first (so keep that in mind) CSS layout.
> >
> > I think I've got it very close to where I want it for now:
> >
> > http://www.viterbo.edu/proofs/CSSTest/index3.html
> >
> > http://www.viterbo.edu/proofs/CSSTest/css/basic3.css
> >
> > There's just a couple of problems
> >
> > First when I have the list near the bottom, I'm wondering why there's a
> > large gap between the 4. And the A. But I don't have that problem in the
> > unordered list above it.
> >
> > The other problem is in Windows IE (which I've noticed from my short time on
> > this list is a pretty big problem). In IE my page does very strange things.
> > My header and content move down below my navigation. And even before I did
> > something to make that happen, my content was butted right up against my
> > navigation background (no space like in the other browsers).
> >
> > Any help would be greatly appreciated.
> >
> > Thanks,
> > Deb
> >
> >
> > __
> > css-discuss [EMAIL PROTECTED]
> > http://www.css-discuss.org/mailman/listinfo/css-d
> > IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
> > List wiki/FAQ -- http://css-discuss.incutio.com/
> > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> >
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS Layout

[Ben Liu]

Hi Debra,

I might be wrong about this but I think the reason that extra gap
exists between the 4 and the A is because margin is being added twice,
once in the ul and once for the li that contains it. I might be wrong
about this because browsers collapse margins between elements
sometimes. A rule like this might eliminate that extra gap:

il ul {margin: 0;}

or for your page

div#content li ul {margin: 0;}

HTH,

- Ben


On 6/16/06, Debra Kappmeyer <[EMAIL PROTECTED]> wrote:
> So, I took Dave's "friendly" advice to "learn CSS layout!" and am trying to
> do that and attempting my very first (so keep that in mind) CSS layout.
>
> I think I've got it very close to where I want it for now:
>
> http://www.viterbo.edu/proofs/CSSTest/index3.html
>
> http://www.viterbo.edu/proofs/CSSTest/css/basic3.css
>
> There's just a couple of problems
>
> First when I have the list near the bottom, I'm wondering why there's a
> large gap between the 4. And the A. But I don't have that problem in the
> unordered list above it.
>
> The other problem is in Windows IE (which I've noticed from my short time on
> this list is a pretty big problem). In IE my page does very strange things.
> My header and content move down below my navigation. And even before I did
> something to make that happen, my content was butted right up against my
> navigation background (no space like in the other browsers).
>
> Any help would be greatly appreciated.
>
> Thanks,
> Deb
>
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS Layout

[Ed Seehouse]

On 6/16/06, Debra Kappmeyer <[EMAIL PROTECTED]> wrote:


> http://www.viterbo.edu/proofs/CSSTest/index3.html

> There's just a couple of problems

You have a fair whack of errors in your html code.  CSS is intended to
work with valid html and errors in your html can really mess things
up.
You also have one error in your CSS which may or may not screw things
up - invalid CSS rules are often ignored by a browser, but sometimes
they just screw up the whole page.

I suggest you get your html and CSS valid first. I can't guarantee
this will fix the problems, but it often does and it's much easier to
diagnose a problem when the code is valid.

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

Re: [css-d] Two column IE6 800x600

[Ian Young]

> 
> >> http://www.iyesolutions.co.uk/templates/vensite/test.html
> 
> > Yes, just noticed that. That's what I get for copying from client's 
> > site. Have changed the table size but the right column slips 
> > completely under left column at 800x600. FF, Netscape and Opera are 
> > all good at 800x600, 1024x768 and 1280x800
> 
> IE/win _doesn't_ respect dimensions, and _can't_ overflow containers
> properly.
> 
> If you want IE/win to "act" as Firefox & other good browsers - simulate
> good behavior, then you may add the following, and see if it fits the
> bill...
> 
> * html #columnRight {overflow: hidden /* makes IE respect width */;}
> p.photoack {position: relative /* overflow visible also in IE */;}
> 
> * html #columnLeft {margin-right: -100px /* some "bug-space" for IE */;}
> 
> Result: no float-drop at 800 * 600.
> 
> regards
>   Georg
That seems to have done the trick

Thanks

Ian
-- 
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.394 / Virus Database: 268.9.0/366 - Release Date: 15/06/2006

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

[css-d] CSS Layout

[Debra Kappmeyer]

So, I took Dave's "friendly" advice to "learn CSS layout!" and am trying to
do that and attempting my very first (so keep that in mind) CSS layout.

I think I've got it very close to where I want it for now:

http://www.viterbo.edu/proofs/CSSTest/index3.html

http://www.viterbo.edu/proofs/CSSTest/css/basic3.css

There's just a couple of problems

First when I have the list near the bottom, I'm wondering why there's a
large gap between the 4. And the A. But I don't have that problem in the
unordered list above it.

The other problem is in Windows IE (which I've noticed from my short time on
this list is a pretty big problem). In IE my page does very strange things.
My header and content move down below my navigation. And even before I did
something to make that happen, my content was butted right up against my
navigation background (no space like in the other browsers).

Any help would be greatly appreciated.

Thanks,
Deb


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

Re: [css-d] Starting over... still have height issues ;(

[css]

On Fri, Jun 16, 2006 at 12:01:01PM -0400, [EMAIL PROTECTED] wrote:
> You set container height to 650px.  If you get rid of this you won't 
> have extra space at bottom.

No, I won't have enough halfway down either! 

I ended up deciding to fix the container height because I couldn't
find another solution :(

-- 
Flash Wilson - Web Design & Mastery - 0870 401 4061 / 07939 579090
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Work: www.wdam.co.uk  Personal: www.gorge.org
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Starting over... still have height issues ;(

[[EMAIL PROTECTED]]

> Except it obviously thinks something is larger than it is... for
> it doesn't stop at the bottom of the items, so the white container
> goes on too far down the page...

You set container height to 650px.  If you get rid of this you won't 
have extra space at bottom.

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

Re: [css-d] no background-color with your color warnings

[David Dorward]

On 16/06/06, Richard Allsebrook <[EMAIL PROTECTED]> wrote:
> What I said was "The validator doesn't take the cascade into account" -
> and that is true.

No, it isn't.

An author rule (rule 1) sets a colour, but not a background colour.

Another author rule (rule 2) sets a background colour that (due to the
cascade) applies to the same element.

If this was all there was to it, then I might agree with you, but ...

There is the possibility that a user stylesheet will set a style that
(due to the cascade) also applies to the same element (rule 3).

Since the colours specified by rule 3 may take precidence over the
colours specified by rule 2, rule 2 cannot be depended upon.

Since the validator takes this (the cascade) into account, it issues a warning.

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

Re: [css-d] Two column IE6 800x600

[Gunlaug Sørtun]

Ian Young wrote:

>> http://www.iyesolutions.co.uk/templates/vensite/test.html

> Yes, just noticed that. That's what I get for copying from client's 
> site. Have changed the table size but the right column slips 
> completely under left column at 800x600. FF, Netscape and Opera are 
> all good at 800x600, 1024x768 and 1280x800

IE/win _doesn't_ respect dimensions, and _can't_ overflow containers
properly.

If you want IE/win to "act" as Firefox & other good browsers - simulate
good behavior, then you may add the following, and see if it fits the
bill...

* html #columnRight {overflow: hidden /* makes IE respect width */;}
p.photoack {position: relative /* overflow visible also in IE */;}

* html #columnLeft {margin-right: -100px /* some "bug-space" for IE */;}

Result: no float-drop at 800 * 600.

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

Re: [css-d] no background-color with your color warnings

[Richard Allsebrook]

 > Please read what I said - you have to account for the user style sheet
 > and browser default stylesheet too.

I did read it and I'm not disputing that.

What I said was "The validator doesn't take the cascade into account" - 
and that is true. We are both discussing the same issue from two 
different ends ;-)

-- 
Richard Allsebrook
Futurate Ltd. (http://www.futurate.com)

---
June 2006: Futurate launch a major new website and content
management server for Travel South Yorkshire:

www.travelsouthyorkshire.co.uk.


-- 
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.394 / Virus Database: 268.9.0/366 - Release Date: 15/06/2006

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

Re: [css-d] Starting over... still have height issues ;(

[Nick Daverin]

[EMAIL PROTECTED] wrote:
> Sorry for yet another question. I really want to nail this.
>
> I have given up trying to make my container work with absolutely
> positioned items and used relative positioning.
>
> Now my container has a nice white background and contains everything
> nicely.
>
> Except it obviously thinks something is larger than it is... for
> it doesn't stop at the bottom of the items, so the white container
> goes on too far down the page...
>
> And some of my items are in a different place on different pages.
> Despite being the same size and in fact the same items.
>
> Only 2 hours to the end of the day and I really wanted to get this
> fixed today. I am so confused and going mad! 
>
> Sorry for all the questions but can anyone see where I'm wrong?
>
> http://www.wdam.co.uk/clients/dynam/hh/
>
> Sorry, and thanks...
>
>   
Your problem is with position:relative... browsers still 'render' the 
items as if they have no position, then the css 'moves' them into place...


-Nick














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

Re: [css-d] Starting over... still have height issues ;(

[css]

On Fri, Jun 16, 2006 at 04:06:23PM +0100, [EMAIL PROTECTED] wrote:
> And some of my items are in a different place on different pages.
> Despite being the same size and in fact the same items.

I would add I am checking in Firefox. IE is showing them in 
utterly different places, not just one or two pixels out!

You see, I thought I'd cracked it by having most items absolutely
positioned, but the one which changes length was positioned 
relatively. That looked better... but the container which created
the white background didn't stretch to the end...

That's visible at http://www.wdam.co.uk/clients/dynam/hh/test.php
as an idea to work with... 

I used CSS because it's meant to be more elegant than tables, and
I was sick of nesting tables... but this is driving me up the wall.
What am I missing, something maybe hasn't "clicked"...

(In case I forget to say it, THANK YOU to everyone who has helped,
and hope everyone has a great weekend. I'm not usually this 
demanding or this confused!)

-- 
Flash Wilson - Web Design & Mastery - 0870 401 4061 / 07939 579090
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Work: www.wdam.co.uk  Personal: www.gorge.org
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Starting over... still have height issues ;(

[css]

Sorry for yet another question. I really want to nail this.

I have given up trying to make my container work with absolutely
positioned items and used relative positioning.

Now my container has a nice white background and contains everything
nicely.

Except it obviously thinks something is larger than it is... for
it doesn't stop at the bottom of the items, so the white container
goes on too far down the page...

And some of my items are in a different place on different pages.
Despite being the same size and in fact the same items.

Only 2 hours to the end of the day and I really wanted to get this
fixed today. I am so confused and going mad! 

Sorry for all the questions but can anyone see where I'm wrong?

http://www.wdam.co.uk/clients/dynam/hh/

Sorry, and thanks...

-- 
Flash Wilson - Web Design & Mastery - 0870 401 4061 / 07939 579090
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Work: www.wdam.co.uk  Personal: www.gorge.org
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Two column IE6 800x600

[Ian Young]

Ian
> Well, for one thing you have the table in the left column set to 560 and
> the image in the right column has a width of 300... That makes it a bit
> bigger than 800 right there.
> -Nick
>
Yes, just noticed that. That's what I get for copying from client's site.
Have changed the table size but the right column slips completely under left
column at 800x600. FF, Netscape and Opera are all good at 800x600, 1024x768
and 1280x800

Ian
--
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.394 / Virus Database: 268.9.0/366 - Release Date: 15/06/2006

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

Re: [css-d] Dynamic CSS bar graph

[Christian Montoya]

On 6/16/06, Ben Liu <[EMAIL PROTECTED]> wrote:
> Hi Christian,
>
> Thanks for the help. I think I can do away with the containment div
> around the bar graph img since I have another containment div already
> performing some other functions. Any ideas on what is more correct:
>
> 
>
> -OR-
>
> 
>
> or in other words, does the image height declaration belong in the html or 
> css?

You are much better off doing it in the HTML. Images should, if
possible, always have height and width settings, if they are meant to
be a pixel size. They render faster when they have the dimensions in
the HTML too.

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

[css-d] Panel layout problems

[Stephen Moretti]

I've got a home page that has two promo panels on the side of the site
and another panel for the content area.

I've got each of the panels to display correctly in their own right,
but on the page the layout is all over the place.

It should be 2 small panels on the left, one on top of the other, and
then a content area to the right.  The content area should be the same
height as the two panels.

I've managed to get this working without just plain divs with borders,
but now that I've included the graphics for the panels its all gone a
bit pear shaped.  The two panels do indeed display one above the
other, but the image for the bottom right of the top panel doesn't
appear in FF and appears over the right somewhere in IE.  The content
panel is displaying correctly, only its pushed down under the two
panels.

I'm at my wits end and have started going around in circles and read
so many different web sites that my head is spinning.

The page in question can be found at http://farcry.dott07.com/

Any and all help would be much appreciated.

Regards

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

Re: [css-d] Dynamic CSS bar graph

[Ben Liu]

Hi Christian,

Thanks for the help. I think I can do away with the containment div
around the bar graph img since I have another containment div already
performing some other functions. Any ideas on what is more correct:



-OR-



or in other words, does the image height declaration belong in the html or css?

If it does belong in the CSS, it would have to be in-line because I
don't think there is a way to write it dynamically into an outside
linked style sheet.

- BL

On 6/16/06, Christian Montoya <[EMAIL PROTECTED]> wrote:
> On 6/16/06, Ben Liu <[EMAIL PROTECTED]> wrote:
> > Hello All,
> >
> > I've developed a simple online bar graph for a client. The page
> > queries a database, tallies the total number of orders coming in from
> > each US state and then draws a series of bar graphs to represent the
> > number of orders. The report works fine expect when the user tries to
> > print it.
> ...
> > Anybody know a good light-weight way of solving this? I was
> > thinking of making the bars all divs with a fixed width and variable
> > height and then putting a large foreground img into them. But wouldn't
> > this cause the div to automatically expand to the full height and
> > width of the img?
>
> No, of course not... divs are not tables. By default, the img should
> overflow the div, and should be visible outside of the boundaries of
> the div. If you apply
>
> overflow:hidden;
>
> to the div, then only the parts of the img inside the div will show.
>
> > Perhaps I could variably set image height="x" within
> > the img tag?
>
> Why not just set the width and height of the image to be the same as
> the div in the CSS? Then again, since this is already a visual driven
> output, why not just use img's by themselves? You could do:
>
> img {
> display:block;
> width:Xpx;
> height:Xpx;
> ...
> }
>
> > Is their a CSS method to force background printing to
> > "on" for an item?
>
> No, and for good reason!
>
> HIH
>
> --
> --
> Christian Montoya
> christianmontoya.com ... portfolio.christianmontoya.com
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Two column IE6 800x600

[Nick Daverin]

Ian
Well, for one thing you have the table in the left column set to 560 and 
the image in the right column has a width of 300... That makes it a bit 
bigger than 800 right there.
-Nick

Ian Young wrote:
> http://www.iyesolutions.co.uk/templates/vensite/test.html
> http://www.iyesolutions.co.uk/templates/vensite/includes/styles.css
>
> Seems to work reasonably well across browsers with exception of IE6 at
> 800x600 where right column slips under left column
> I have used percentages to define columns. would it be better to use -ve
> margins?
>
> Ian
> **IMPORTANT*
> ***
>
> This e-mail contains information which is confidential and may also be
> privileged. It is for the exclusive use of the intended recipient(s). If you
> are not the intended recipient(s) please note that any form of,
> distribution, copying or use of this e-mail or the information in it is
> strictly prohibited and may be unlawful. If you have received this in error
> please inform us at the above address then delete the e-mail and destroy any
> copies of it. Thank you.
>
> --
> No virus found in this outgoing message.
> Checked by AVG Free Edition.
> Version: 7.1.394 / Virus Database: 268.9.0/366 - Release Date: 15/06/2006
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>
>   

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

Re: [css-d] Centering a CSS positioned design

[Els]

[EMAIL PROTECTED] wrote:

[extend background colour to bottom of page]
>> It would do that automagically if it weren't for the absolute
>> positioning.
>
> Yep. So is my choice just to reposition everything with
> relative positioning?

To give an element position:relative, means to give it a position 
*relative to its own original position*. Say you have an h1 and a 
paragraph below it. If you would give the h1 position:relative 
with a top value of 3em, it would be covering the paragraph below 
it.

> And then to go into layers rather than divs?

I don't know what you mean by that. Aren't divs layers in 
Dreamweaver speak? (I don't know Dreamweaver, but that's what I 
heard)

 Site is http://www.wdam.co.uk/clients/dynam/hh/
>>
>> CENTER tags??
>> (I'll ignore that bit too! ;-) )
>
> Probably best ;) I'll tidy up after I've got it looking right
> and there are no changes from the client :)

First get the code done correctly, and then make it look right.
The reverse will give you headaches.

> Thanks, it's much appreciated!

You're welcome :-)

-- 
Els
http://locusmeus.com/
http://locusoptimus.com/ 


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

Re: [css-d] Dynamic CSS bar graph

[Christian Montoya]

On 6/16/06, Ben Liu <[EMAIL PROTECTED]> wrote:
> Hello All,
>
> I've developed a simple online bar graph for a client. The page
> queries a database, tallies the total number of orders coming in from
> each US state and then draws a series of bar graphs to represent the
> number of orders. The report works fine expect when the user tries to
> print it.
...
> Anybody know a good light-weight way of solving this? I was
> thinking of making the bars all divs with a fixed width and variable
> height and then putting a large foreground img into them. But wouldn't
> this cause the div to automatically expand to the full height and
> width of the img?

No, of course not... divs are not tables. By default, the img should
overflow the div, and should be visible outside of the boundaries of
the div. If you apply

overflow:hidden;

to the div, then only the parts of the img inside the div will show.

> Perhaps I could variably set image height="x" within
> the img tag?

Why not just set the width and height of the image to be the same as
the div in the CSS? Then again, since this is already a visual driven
output, why not just use img's by themselves? You could do:

img {
display:block;
width:Xpx;
height:Xpx;
...
}

> Is their a CSS method to force background printing to
> "on" for an item?

No, and for good reason!

HIH

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

[css-d] Two column IE6 800x600

[Ian Young]

http://www.iyesolutions.co.uk/templates/vensite/test.html
http://www.iyesolutions.co.uk/templates/vensite/includes/styles.css

Seems to work reasonably well across browsers with exception of IE6 at
800x600 where right column slips under left column
I have used percentages to define columns. would it be better to use -ve
margins?

Ian
**IMPORTANT*
***

This e-mail contains information which is confidential and may also be
privileged. It is for the exclusive use of the intended recipient(s). If you
are not the intended recipient(s) please note that any form of,
distribution, copying or use of this e-mail or the information in it is
strictly prohibited and may be unlawful. If you have received this in error
please inform us at the above address then delete the e-mail and destroy any
copies of it. Thank you.

--
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.394 / Virus Database: 268.9.0/366 - Release Date: 15/06/2006
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Centering a CSS positioned design

[css]

On Fri, Jun 16, 2006 at 02:38:00PM +0200, Els wrote:
> How did you colour your page before it was centered?
> The problem with absolute positioning, is that you are taking the 
> elements out of the normal flow, thus leaving its parent 
> virtually empty. And an empty container doesn't gain any height.

Yep, that seems to be the problem... and I was not colouring
it before - I keep having to add bits as the client passes a 
new requirement.

> It would do that automagically if it weren't for the absolute 
> positioning.

Yep. So is my choice just to reposition everything with 
relative positioning? And then to go into layers rather than
divs?

> >> Site is http://www.wdam.co.uk/clients/dynam/hh/
> 
> CENTER tags??
> (I'll ignore that bit too! ;-) )

Probably best ;) I'll tidy up after I've got it looking right
and there are no changes from the client :)

Thanks, it's much appreciated!
-- 
Flash Wilson - Web Design & Mastery - 0870 401 4061 / 07939 579090
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Work: www.wdam.co.uk  Personal: www.gorge.org
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Dynamic CSS bar graph

[Ben Liu]

Hello All,

I've developed a simple online bar graph for a client. The page
queries a database, tallies the total number of orders coming in from
each US state and then draws a series of bar graphs to represent the
number of orders. The report works fine expect when the user tries to
print it. The bars are created by variably setting the height of an
unordered list's list item. The list items have a red background color
which allows the graph to be viewed on screen. Of course when the
report is printed, if the user does not select "print background
items" somewhere in their print dialogue boxes, they get no graph
printed. Anybody know a good light-weight way of solving this? I was
thinking of making the bars all divs with a fixed width and variable
height and then putting a large foreground img into them. But wouldn't
this cause the div to automatically expand to the full height and
width of the img? Perhaps I could variably set image height="x" within
the img tag? Is their a CSS method to force background printing to
"on" for an item?

Any help appreciated.

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

Re: [css-d] List style colour

[David Laakso]

Brendan Grossman wrote:
> Just a quick question...
>
> Is it possible to colour a list's bullets and not the text? 
>
> I can get around it by using  or something within each , but I was
> hoping I wouldn't need to...
>
> Cheers
> Brendan
Yes, I believe so. The ul will hold the second foreground color.
html,body{ background-color: #fff; color: #000;}
ul {background-color: #fff; color: fuchsia; }
Regards,
~davidLaakso
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Image breakout at bottom Div

[Trevor Boult]

Hi All,

Brian Cummiskey pointed out to me the other day on this page:

http://www.tboult.co.uk/dev/ag/crops/wheat.cfm

That the image was breaking out of its div at the bottom. Brian suggested a 
"clear both" block element which I have just implemented and its OK in 
FireFox but not IE (Arrrgh)

You will see in IE the div now spans accross the whole page.

Any ideas as to how I can get the page to display correctly would be great.

Cheers

Trevor
http://www.tboult.co.uk


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

Re: [css-d] no background-color with your color warnings

[David Dorward]

On 16/06/06, Richard Allsebrook <[EMAIL PROTECTED]> wrote:
>  > Actually, its the exact opposite.

> Um, no its not. The validator doesn't take the cascade into account.

Please read what I said - you have to account for the user style sheet
and browser default stylesheet too.

> div.test {
> background: #FFF;
> color: #000;
> }
>
> div.test a {
> color: #C00;
> }

And in the user stylesheet:

div {
  background-color: #C00 !important;
  color: white !important;
}

> will produce a warning on the div.test a {} rule even though the red
> hyperlink will only ever be displayed on a white background.

And the red hyperlink will be displayed on a red background.

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

Re: [css-d] Centering a CSS positioned design

[Els]

[EMAIL PROTECTED] wrote:
> On Fri, Jun 16, 2006 at 12:16:03PM +0100, [EMAIL PROTECTED] wrote:
>> Ok, I've tried that. I've also used the container to give a
>> background colour of white for the content area, where the
>> main body background will be grey. This hasn't been entirely
>> successful; I guess I have to set a fixed height, as not
>> setting one meant the white background wasn't seen, and
>> setting 100% as I have at present isn't really what I want?

Indeed. Setting 100% height causes the background to stop when 
you need to scroll up to see more text (which happens on smaller 
windows and with enlarged text.

> This is still an issue for me.

How did you colour your page before it was centered?
The problem with absolute positioning, is that you are taking the 
elements out of the normal flow, thus leaving its parent 
virtually empty. And an empty container doesn't gain any height.

> I could define 4 container
> classes, one for each page, and set it to the appropriate
> height for that page, but this isn't really a fix.

Especially since the text will then 'fall out' of the bottom on 
enlarging the font-size.

> I've done
> lots of googling but I must be going wrong somehow because I
> can't find a way to get the container to be at least the
> length of the longest bit within it, but no longer.

It would do that automagically if it weren't for the absolute 
positioning.

>> Site is http://www.wdam.co.uk/clients/dynam/hh/
>
> The other issues were caused by me being a complete lemon and
> forgetting to add a CENTER tag in an important place, so please
> ignore them! Sorry, I'm not entirely well and it's been a long
> week!

CENTER tags??
(I'll ignore that bit too! ;-) )

-- 
Els
http://locusmeus.com/
http://locusoptimus.com/ 


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

[css-d] New IE7 hack/filter

[Alex Robinson]

Given this HTML:

 ... 

and this CSS:

* div[class^="ie7-target-class"] { background: #ff; }
body .ie7-target-class { background: #ff; }


The resulting div  shows red in IE7 but shows blue in all other browsers.

This is due to the fuzzy specificity bug which is still present in 
IE7 and the ability to prevent other browsers that also suffer from 
the fuzzy specificity bug from seeing the rule by using CSS3 
selectors.

 http://www.fu2k.org/alex/css/hacks/fuzzyspecificity


I've only been able to test this in IE7b2, so if anyone is using the 
public beta or later, could they confirm that the results are the 
same.

Disclaimer: just because you can hack IE7, doesn't mean you should: 
a) the IE7 team will probably fix this (though who can say when); b) 
the IE7 team is adamant that you should use conditional comments 
instead of hacks.

Disclaimer 2: if you really really do want to hack for IE7, you 
should also have a look at Brothercake's XXX method

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

Re: [css-d] Centering a CSS positioned design

[Kim Finleyson]

> Ok, I've tried that. I've also used the container to give a background

> colour of white for the content area, where the main body background 
> will be grey. This hasn't been entirely successful; I guess I have to 
> set a fixed height, as not setting one meant the white background 
> wasn't seen, and setting 100% as I have at present isn't really what I

> want?

>This is still an issue for me. I could define 4 container classes, one
for each page, and set it to the appropriate height for that page, but
this isn't really a fix. I've done lots of googling but I must be going
wrong somehow because I can't find a way to get the container to be at
least the length of the longest bit within it, but no longer.

> Site is http://www.wdam.co.uk/clients/dynam/hh/

>The other issues were caused by me being a complete lemon and
forgetting to add a CENTER tag in an important place, so please ignore
them! Sorry, I'm not entirely well and it's been a long week!

Hello,

I just caught the end of this thread and wanted to pass on some CSS code
for centering a page. I've tried different techniques and this
particular snippet works everytime:

body
{
margin: 0;
padding: 0;
text-align: center;
}

div#container   
{
margin: 1em auto;
width: 80%;
border: 1px solid #000;
padding: 1em;
background-color: #ddd;
text-align: left;
}

Note that you will probably want to change the border and background.
Also, I would recommend removing the deprecated center tag. Re-defining
the body tag and using a wrapper div will be sufficient. You don't have
to set a fixed height because the container wraps around the content of
your page, and the height will adjust to the content, so you should only
need one container div for the site.
 
***Hope this helps!
--Kim
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Gap in Opera

[Chris Hughes]

Ian Young <[EMAIL PROTECTED]> writes
>Developing a simple two column site with header div.
>
>Renders ok in FF and IE6, but in Opera there are gaps/whitespace at top and
>bottom of container.
>

Whatever the reason, the gaps are there in Opera 8.x, but gone in Opera 
9b.
-- 
Chris Hughes
"Reality is that which, when you cease to believe, continues to exist."
http://www.epicure.demon.co.uk

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

[css-d] Gap in Opera

[Ian Young]

Developing a simple two column site with header div.

Renders ok in FF and IE6, but in Opera there are gaps/whitespace at top and
bottom of container.

Can't see why this should be.

http://www.iyesolutions.co.uk/templates/vensite/test.html

Obviously something simple but cannot see what it is.

Cheers

Ian
**IMPORTANT*
***

This e-mail contains information which is confidential and may also be
privileged. It is for the exclusive use of the intended recipient(s). If you
are not the intended recipient(s) please note that any form of,
distribution, copying or use of this e-mail or the information in it is
strictly prohibited and may be unlawful. If you have received this in error
please inform us at the above address then delete the e-mail and destroy any
copies of it. Thank you.

--
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.394 / Virus Database: 268.9.0/366 - Release Date: 15/06/2006
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Centering a CSS positioned design

[css]

On Fri, Jun 16, 2006 at 12:16:03PM +0100, [EMAIL PROTECTED] wrote:
> Ok, I've tried that. I've also used the container to give a 
> background colour of white for the content area, where the 
> main body background will be grey. This hasn't been entirely
> successful; I guess I have to set a fixed height, as not setting
> one meant the white background wasn't seen, and setting 100%
> as I have at present isn't really what I want?

This is still an issue for me. I could define 4 container classes,
one for each page, and set it to the appropriate height for that
page, but this isn't really a fix. I've done lots of googling but
I must be going wrong somehow because I can't find a way to get
the container to be at least the length of the longest bit within
it, but no longer.

> Site is http://www.wdam.co.uk/clients/dynam/hh/

The other issues were caused by me being a complete lemon and 
forgetting to add a CENTER tag in an important place, so please
ignore them! Sorry, I'm not entirely well and it's been a long
week!

-- 
Flash Wilson - Web Design & Mastery - 0870 401 4061 / 07939 579090
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Work: www.wdam.co.uk  Personal: www.gorge.org
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Centering a CSS positioned design

[css]

On Thu, Jun 15, 2006 at 12:21:04PM +0200, Els wrote:
> Just make a div with id="container" to hold all that's inside 
>  now, give it position:relative, and all that was 
> previously absolute positioned to the viewport, will now be 
> relative to the container. (no need to change any of the absolute 
> values you already set)
> Then you center the container by giving it a width and 
> margin:auto;.

Ok, I've tried that. I've also used the container to give a 
background colour of white for the content area, where the 
main body background will be grey. This hasn't been entirely
successful; I guess I have to set a fixed height, as not setting
one meant the white background wasn't seen, and setting 100%
as I have at present isn't really what I want?

Another issue, which I really can't get but perhaps this is just
because I've been staring at the screen too long... I have a 
purple triangle, which fits in the right place on my front page.
But when you go to the "homeseeker" page, which I have also 
amended to work with the new container, the purple triangle leaps
to the wrong place...

And I think the whole thing is leaping a few pixels when I go
from one page to another. Surely, the width should be fixed and
therefore the content area should remain in the same place between
pages? All areas where widths are set are in the stylesheet,
all pages have the same sections in them... so all should be the
same width?

Sorry to throw this at people on a Friday but I am boggling.
Been staring at the screen too long I think :(

Site is http://www.wdam.co.uk/clients/dynam/hh/


-- 
Flash Wilson - Web Design & Mastery - 0870 401 4061 / 07939 579090
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Work: www.wdam.co.uk  Personal: www.gorge.org
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] List style colour

[Richard Allsebrook]

 > Is it possible to colour a list's bullets and not the text?

One method is to use a small bullet image as the background for the li:

li {
background: url(my_bullet.gif) no-repeat top left;
padding-left: 20px;
}

The padding pushes the text away from the bullet image.

-- 
Richard Allsebrook
Futurate Ltd. (http://www.futurate.com)

---
June 2006: Futurate launch a major new website and content
management server for Travel South Yorkshire:

www.travelsouthyorkshire.co.uk.


-- 
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.394 / Virus Database: 268.9.0/366 - Release Date: 15/06/2006

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

Re: [css-d] no background-color with your color warnings

[Richard Allsebrook]

 > Actually, its the exact opposite.

Um, no its not. The validator doesn't take the cascade into account.

div.test {
background: #FFF;
color: #000;
}

div.test a {
color: #C00;
}

will produce a warning on the div.test a {} rule even though the red 
hyperlink will only ever be displayed on a white background.

-- 
Richard Allsebrook
Futurate Ltd. (http://www.futurate.com)

---
June 2006: Futurate launch a major new website and content
management server for Travel South Yorkshire:

www.travelsouthyorkshire.co.uk.


-- 
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.394 / Virus Database: 268.9.0/366 - Release Date: 15/06/2006

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

Re: [css-d] List style colour

[Bob Easton]

Brendan Grossman wrote:

> Is it possible to colour a list's bullets and not the text? 
> 
> I can get around it by using  or something within each , but I was
> hoping I wouldn't need to...
> 

Not today.  Maybe with CSS3 sometime in the future, but not now.  It's a 
  shame to have to use .  Some developers get around this by 
using images instead, included via CSS list-style-image: url(...)

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

[css-d] Minior browser inconsistencies

[Andreas Håkansson]

Hi,

I'm working on making a fairly simple css layout and have a couple of 
small issues that I need to resolve before it works in Explorer, 
Firefox, Netscape and Opera. I'm pretty confident that theres not much 
work needed to get it right and I'm hoping to get some pointers on how 
to fix it. Here is a list of things I've spotted in the various browers


Explorer  6.0.2900.2180
- No problems here.

Firefox 1.5.0.3
- The 2px high gap between the blue box and the black line has 
disappeared

Netscape 8.1
- Same as firefox since its the same engine

Opera 8.54 Build 7730
- Vertically centers the main layout =(
- The background for the footer div gets messed up.


Also, is there any good cross-brower alternatives to the 
FooterStickAlt (which I use) method which doesnt suffer from the 
problem where it could end up hiding contents due to overlapping with 
the contents in the above layer?

Here is the example layout http://www.selfinflicted.
org/css/layout_example.html

Thank you!

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

Re: [css-d] Relative positioning and widths

[Brendan Grossman]

> -Original Message-
> From: [EMAIL PROTECTED] 
> [mailto:[EMAIL PROTECTED] On Behalf Of Ed Seehouse
> Sent: Friday, 16 June 2006 3:08 AM
> To: Brendan Grossman
> Cc: css-d@lists.css-discuss.org
> Subject: Re: [css-d] Relative positioning and widths
> 
> On 6/14/06, Brendan Grossman <[EMAIL PROTECTED]> wrote:
> > Hi everyone
> >
> > Is it possible to have floating divs side-by-side without the width 
> > specified or with just one set explicitly?
> 
> Yes.
> 
> > For example I have two columns...
> > Left hand side I want to set explicity, ie. 15em Right hand side, I 
> > want it to fill up the remaining area of the page.
> > However when doing this, the right drops below the left div.
> 
> That's because you are floating both columns.  You only need 
> to float the left column.  For the right column just use the 
> natural flow of your browser's default behaviour.  Simply 
> give it a left margin slightly wider than the width of your 
> left column.  Presto!
> 
> A block element such as  or   that isn't floated or 
> positioned takes up the full width of the screen by default, 
> so all you need to do is make room on the left with your 
> margin rule.  Works equally well for a right column, just do 
> it the other way around.  Either way your floated element 
> should come first in your html code.
> 
> Generally, you save yourself a whole lot of trouble if you 
> use the default behaviour of your browser for layout as much 
> as possible, then use a smidgin of positioning on a couple of 
> elements to make the effect you want.  It's amazing what 
> effects you can attain with very simple means this way.

That does just about what I need. However divs within the right containing
div don't 'stretch' it down. Is there a way around this? 

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

[css-d] List style colour

[Brendan Grossman]

Just a quick question...

Is it possible to colour a list's bullets and not the text? 

I can get around it by using  or something within each , but I was
hoping I wouldn't need to...

Cheers
Brendan

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