[css-d] How does z-index work?
It seems I don't understand how z-index works. I have the following
at http://ryanlb.com/zindex.html
dt { clear: left; float: left; }
dd { clear: right: float: left; font-size: 48px; }
#above { color: #00c; margin: 0; z-index: 1; }
#below { color: #c00; margin-top: -36px; z-index: 1; }
dl
dtlabel/dt
dd id=aboveAbove/dd
dtlabel/dt
dd id=belowBelow/dd
/dl
I want the blue 'Above' to be above the red 'Below', but it's not, and
I don't understand why. Can someone shed some light?
__
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] How does z-index work?
Ryan Bowman wrote: I want the blue 'Above' to be above the red 'Below', but it's not, and I don't understand why. Can someone shed some light? I added position: absolute to both the #above and #below selectors and it ordered them as expected. I've always been under the impression z-index only works on absolutely positioned elements (or layers as it was commonly known in the days of IE4/NS4). I could be wrong. __ 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-discuss research project
I am a Ph.D. student at the University of Michigan's School of Information, studying online communities as part of my dissertation work. I am specifically looking into the role that knowledge repositories play in supporting these communities. I have been very impressed with this community's use of the wiki and believe that other online communities can learn a great deal from your experiences. To this end, I will be studying the css-discuss community, which amounts to reading prior messages and wiki material, calculating various statistics on participation patterns, and interviewing willing community members. I will follow strict ethical guidelines (see http://www-personal.si.umich.edu/~shakmatt/research/ ) to ensure that all list members' privacy is protected (not only those that I will contact personally). I have spoken with the list administrators about this research work and they have cleared it. I do not want to disrupt the community in any way, so please reply to me personally at [EMAIL PROTECTED] with any comments, concerns, or questions regarding this research (as opposed to replying to the entire list). I intend on sharing my results with interested community members. I would love to hear from any of you (including lurkers) willing to share your experiences, both positive and negative, about your participation and impressions of this email list or the community wiki. I will also be contacting some of you personally to see if we can arrange an interview (which anyone can decline if they desire). Thank you for your support in this endeavor. I look forward to hearing from you and getting your insights into what makes css-discuss tick. Regards, Derek Hansen Doctoral Candidate School of Information University of Michigan __ 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] How does z-index work?
ian wrote: Ryan Bowman wrote: I want the blue 'Above' to be above the red 'Below', but it's not, and I don't understand why. Can someone shed some light? I added position: absolute to both the #above and #below selectors and it ordered them as expected. I've always been under the impression z-index only works on absolutely positioned elements That's not correct. A positioned element with a z-index other than auto establishes a stacking context; therefore, position:relative; z-index:1; on #above should do. No position or z-index needed on #below. 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] Urgent Site Check - http://www.wordseurope.domainsolutions.ca/final/index.html
K Husbands wrote: Can anyone take a look at the following site and accompanying CSS and tell me why the Media page continues to shift from left to right while browsing the site. http://www.wordseurope.domainsolutions.ca/final/index.html CSS here: http://www.wordseurope.domainsolutions.ca/final/globalstyles.css HTML Here: http://www.wordseurope.domainsolutions.ca/final/html.zip I don't see it shifting in debian ff/opera. However, it may be that the page is not deep enough to draw a scrollbar on your monitor; and, consequently, you're getting a 16px shift to account for the scrollbar? If that's the case, this /may/ help: http://www.hicksdesign.co.uk/journal/forcing-scrollbars-now-even-better 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] site check -garden design site
Hi Is someone able to check this site for me? Apparently the body text is unclear/fuzzy on a MAC safari 1.3. I agree that the text could maybe be enlarged, but I don't want to do anything until I've had confirmation from others that it is 'fuzzy'. For me it's crystal clear. If it is fuzzy, can someone recommend what can be done about it (other than change white text on black background - this is what client wants)? There's only one way to set the text and how it displays is up to the user's browser. Not so? If it's 'fuzzy', could someone maybe send me a screenshot? http://www.litchfieldgardens.co.uk/index.php Much appreciated. Lee __ 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] site check -garden design site
Virtuallee wrote: Hi Is someone able to check this site for me? Apparently the body text is unclear/fuzzy on a MAC safari 1.3. I agree that the text could maybe be enlarged, but I don't want to do anything until I've had confirmation from others that it is 'fuzzy'. For me it's crystal clear. If it is fuzzy, can someone recommend what can be done about it (other than change white text on black background - this is what client wants)? There's only one way to set the text and how it displays is up to the user's browser. Not so? If it's 'fuzzy', could someone maybe send me a screenshot? http://www.litchfieldgardens.co.uk/index.php Much appreciated. Lee Hi Lee: Site looks fine, FF1.5 WinXP, CRT. Only thing is that when one hovers over the H2, for example on this page [1], it jumps. Also, when I reduce the text-size in FF, there is a wierd screen-scroll happening. If the text-size increases, the only small nit, is that the [top] link moves off-screen. Cheers, Rahul. [1] http://www.litchfieldgardens.co.uk/gardens.php -- . . . . . . . . . . . . . . . . . . . . . . . . Rahul Gonsalves Make PNG, not War. . . . . . . . . . . . . . . . . . . . . . . . . __ 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] Adjacent Selector for IE6?
I have a definition list where each dt has an id. I'd like to style
each dd depending on the preceeding dt.
Is there a CSS only way to simulate the adjacent selector for IE6? I
haven't been able to find anything on google.
I think your only cross-browser option is to do the following:
dl
dt id=oneOne/dt
ddNot the magic Number/dd
dt id=twoTwo/dt
ddThe second loneliest number/dd
dt id=threeThree/dt
ddIt's the magic number/dd
/dl
dt#one dd {
color: blue;
}
dt#two dd {
color: red;
}
dt#three dd {
color: green;
}
This is pretty much doing the same thing, unless this is what you were
trying to avoid all together. I'm not 101% sure, but I think this is your
only option...until about 2010 or later.
--
Jono Young
Designer | Developer | Illustrator
Charleston Web Solutions
Bringing Higher Standards to the Lowcountry
http://www.charlestonwebsolutions.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] Adjacent Selector for IE6?
Jono wrote:
I have a definition list where each dt has an id. I'd like
to style each dd depending on the preceeding dt.
Is there a CSS only way to simulate the adjacent selector for
IE6? I haven't been able to find anything on google.
I think your only cross-browser option is to do the following:
dl
dt id=oneOne/dt
ddNot the magic Number/dd
[snip]
/dl
dt#one dd {
color: blue;
}
[snip]
This is pretty much doing the same thing, unless this is what
you were trying to avoid all together. I'm not 101% sure, but
I think this is your only option...until about 2010 or later.
If only dd were a child of dt.
--
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] site check -garden design site
Virtuallee wrote: If it's 'fuzzy', could someone maybe send me a screenshot? http://www.litchfieldgardens.co.uk/index.php Lee These are matters of personal opinion. I immediately exit any *death site.* (black) But, anyway: 1/ It is not fuzzy. 2/ But then it not particularly easy to read either. 3/ Changing body font-size from 90% to 100% makes it easier to read (without zoom at 1280). 4/ Disabling color (black text on white) and changing body font-size from 90% to 100% makes it *much* easier to read (without zoom at 1280). 5/ The top link bobbing along as I scroll down drove me nuts. This will correct the page shift: http://www.hicksdesign.co.uk/journal/forcing-scrollbars-now-even-better ~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] Can this menu be reproduced with pure CSS?
Jono wrote: http://www.itshere.org.uk Does anyone know of a way I could do this, without a whole heap of work (and ideally without Javascript). You can create that effect fairly easily with CSS by using left borders to create the blocks and then margins and a small background image to create the divisions. I put together a quick page with styles inline, here: http://www.charlestonwebsolutions.com/test_case/block_nav_01.html Copy and Paste to your hearts content, but beware that I did not test this in anything but Firefox on my Mac. Should be OK for other browsers, even IE, but check all the browsers you are concerned about to be sure. I can confirm that this works on IE6. :-) Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Height collapses in Firefox 1.5
css man wrote:
I have a #container div:
#container {
border: .4em solid #cc6;
background-color: #fff;
height: 42.1em; --must be set specific value, otherwise
collapes--
font-size: .95em;
margin: 0 auto;
padding: 0;
position: relative;
text-align: left;
width: 775px;
voice-family: \}\;
voice-family: inherit;
width: 775px;
}
Unless I set the height to a specific value, height collapses; works fine in
IE6.
Can someome explain what I'm doing wrong here?
Not without seeing your page, or at least the code of what is in the
container. I'm guessing the container div either contains absolutely
positioned divs or floats. If it's floats, you'll need to apply a float
containment method to the container div:
http://css-discuss.incutio.com/?page=ClearingSpace
If this isn't the problem, we'll really need to see the page.
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Footer That Extends Fully to the Right
On 10/02/06, anathema [EMAIL PROTECTED] wrote: I suppose I could use a 3 col layout with fixed width center column and fluid side columns and then just not put any content in the side columns and throw a back ground image in the right column. I have never even used that kind of layout, and am not sure I have seen one that wasn't full of hacks and other nonsense. Let's see... What if you give the content columns (right now the left sidebar and the spot for the photo) a margin-right of something suitable in an auto-width container div, then apply as much padding to the left as margin to the right of the content so you have it centred. The footer should extend to the right. This should work, but I can't check it. Play around with that concept. HTH -Rob. __ 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] site check -garden design site
Lee,
On Feb 10, 2006, at 6:35 AM, Virtuallee wrote:
Is someone able to check this site for me? Apparently the body text is
unclear/fuzzy on a MAC safari 1.3. I agree that the text could
maybe be
enlarged, but I don't want to do anything until I've had confirmation
from others that it is 'fuzzy'. For me it's crystal clear.
If it is fuzzy, can someone recommend what can be done about it (other
than change white text on black background - this is what client
wants)?
http://www.litchfieldgardens.co.uk/index.php
The text actually looks better in safari than firefox on my mac. I
can send you a screen shot off-list if you still want one.
In an unrelated note, there are a couple of errors in the css that
the validator would have caught for you.
-
.clear {
clear: both;
margin: 0;
padding: 0;
height:0;
line-height:0;}
} /* extra closing brace */
#top-side-b {
margin: 0 0 1px 0;
float: left;
width: 450px;
height: 1% /* --- missing semi-colon Holly hack for Peekaboo Bug */
clear: both;
}
Roger,
--
Roger Roelofs
[EMAIL PROTECTED]
__
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] site check -garden design site
Virtuallee wrote: Is someone able to check this site for me? Apparently the body text is unclear/fuzzy on a MAC safari 1.3. I agree that the text could maybe be enlarged, but I don't want to do anything until I've had confirmation from others that it is 'fuzzy'. For me it's crystal clear. If it is fuzzy, can someone recommend what can be done about it (other than change white text on black background - this is what client wants)? There's only one way to set the text and how it displays is up to the user's browser. Not so? If it's 'fuzzy', could someone maybe send me a screenshot? http://www.litchfieldgardens.co.uk/index.php Hi Lee, I can't check your page on Safari (no Mac yet, but I hope to remedy that this weekend!), but I can tell you that Safari anti-aliases type. Most of the time, this makes the text easier to read, but perhaps not when it is white on black? White on black is definitely harder to read for certain people (I find it rather tough myself). Perhaps a compromise would be to add a different color block behind the main text area only. It would be a shame to lose the black in the rest of the page -- it's a very nice design, IMO. What about a pink, green, or purple in the main area? I think you could make it work with some playing. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] site check pc 'ttm'
Michelle W wrote: http://www.thetravelingmarathoner.com/test This isn't a bug, but when you increase your text size, the left nav overlaps the main text. This is because the nav doesn't have a width assigned, so it shrinkwraps its content. As the content grows in size, so does the nav div. But the content div can't accommodate this, because it has a fixed pixel-width left margin. To fix this, assign the nav a width. If you want it to keep its size relative to the text size as you have now, assign it a width in ems. Then, just give the content div a left-margin about 1em larger than the nav width. Also on the top12 page; http://www.thetravelingmarathoner.com/test/top12.css http://www.thetravelingmarathoner.com/test/top12.html http://www.thetravelingmarathoner.com/test/top12.css I am trying to get the #tablist width to be the same as #nav. can't figure it out. Again, you need to set some widths on #leftcolumn, #nav, and #tablist. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] site check -garden design site
If it's 'fuzzy', could someone maybe send me a screenshot?
http://www.litchfieldgardens.co.uk/index.php
Lee
These are matters of personal opinion.
I immediately exit any *death site.* (black)
But, anyway:
1/ It is not fuzzy.
2/ But then it not particularly easy to read either.
3/ Changing body font-size from 90% to 100% makes it easier to read
(without zoom at 1280).
4/ Disabling color (black text on white) and changing body font-size
from 90% to 100% makes it *much* easier to read (without zoom at 1280).
5/ The top link bobbing along as I scroll down drove me nuts.
This will correct the page shift:
http://www.hicksdesign.co.uk/journal/forcing-scrollbars-now-even-better
~davidLaakso
Thanks for replying and checking the site for me, David. Appreciate it :)
I take your point on the 'black of death' and the [top] link. Can't do
anything about the black but I have removed the [top] link.
I've also added this to force the scrollbars |html { height: 100%;
margin-bottom: 1px; } and increased the body text size.
Hopefully much better!
Cheers
Lee
|
__
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] Site Check: www.girlscantwhat.com
Felix wrote: [EMAIL PROTECTED] wrote Thu, 09 Feb 2006 13:26:00 -0600: Also - what are the advantages/disadvantages of using em width verses % width on the columns? I don't see anything to directly address this on the wiki home page. snip Felix- That was an excellent description of ems vs %!!! While I was aware of the differences, I hadn't thought of how it affects horizontal line length of text. I hope you've added that to the WIKI, as I think people often struggle with the differences between the two. Regards, Ron __ 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] site check -garden design site
The menu on the left does look a little fuzzy, well kind of, here is a
screenshot:
http://2e2c.free.fr/sitechecksshots/litchfieldgardens.png
it's on Konqueror which should look like safari.
On 2/10/06, Virtuallee [EMAIL PROTECTED] wrote:
If it's 'fuzzy', could someone maybe send me a screenshot?
http://www.litchfieldgardens.co.uk/index.php
Lee
These are matters of personal opinion.
I immediately exit any *death site.* (black)
But, anyway:
1/ It is not fuzzy.
2/ But then it not particularly easy to read either.
3/ Changing body font-size from 90% to 100% makes it easier to read
(without zoom at 1280).
4/ Disabling color (black text on white) and changing body font-size
from 90% to 100% makes it *much* easier to read (without zoom at 1280).
5/ The top link bobbing along as I scroll down drove me nuts.
This will correct the page shift:
http://www.hicksdesign.co.uk/journal/forcing-scrollbars-now-even-better
~davidLaakso
Thanks for replying and checking the site for me, David. Appreciate it :)
I take your point on the 'black of death' and the [top] link. Can't do
anything about the black but I have removed the [top] link.
I've also added this to force the scrollbars |html { height: 100%;
margin-bottom: 1px; } and increased the body text size.
Hopefully much better!
Cheers
Lee
|
__
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] site check -garden design site
On 2/10/06, Virtuallee [EMAIL PROTECTED] wrote: If it is fuzzy, can someone recommend what can be done about it (other than change white text on black background - this is what client wants)? There's only one way to set the text and how it displays is up to the user's browser. Not so? Are you absolutely sure that you can't change the background to, maybe, #222 and the text to #ddd? It would be a subtle difference but it might help. You can take a screenshot and show it to the client and see if they are okay with it. -- -- Christian Montoya christianmontoya.com ... rdpdesign.com ... cssliquid.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] Help with css layout from newbie
Hello, Am playing with changing my site from tables to CSS. I have it pretty good but in IE 6 there is a space above the navigation bar that is not there in Netscape 7.0; Mozilla 1.7.3; Opera 7.54 and Firefox 1.0. These are the only other browsers I have loaded on my machine. So I have NO idea how it looks on a MAC - anybody help here? And I haven't even started to tackle the drop downs yet. One step at a time. If I can just close up the space above the top nar bar in IE, I'd be happy. Thanks for whatever help you can offer. http://www.lifp.org/index_css_3static.html Peggy __ 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 position of list bullet/image in IE, please help
Hi, I'm trying to restyle a page and I'm running into something very strange: the bullet of an LI is moved down in IE as if it is vertically centered for the enclosed UL. Here you can see it (last option in the left column). http://web.inter.nl.net/users/hepabolu/cocoondocsskin/samples/sample.html It works as intended in Firefox (both Win and Mac) and Safari, i.e. the bullet lines up with the first line of the LI. I've tried all kinds of settings, tried googling around but I cannot find the solution. Anyone? Thanks. Bye, Helma __ 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] Help with css layout from newbie
Since it is only a minor cosmetic issue, I would use the !important calling.
#navigation {
background: #336699;
float: left;
margin: 0 0 0 0 !important; /* original code, this will show in
mozilla */
margin: -5px 0 0 0; /* this will be what shows in IE */
}
Per the W3C specifications: http://www.w3.org/TR/REC-CSS2/cascade.html
Neill Harmer
www.neillharmer.com
Innovation distinguishes between being a leader and a follower.
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Peggy Kebel
Sent: Friday, February 10, 2006 9:42 AM
To: css-d@lists.css-discuss.org
Subject: [css-d] Help with css layout from newbie
Hello,
Am playing with changing my site from tables to CSS. I have it pretty good
but in IE 6 there is a space above the navigation bar that is not there in
Netscape 7.0; Mozilla 1.7.3; Opera 7.54 and Firefox 1.0. These are the only
other browsers I have loaded on my machine. So I have NO idea how it looks
on a MAC - anybody help here? And I haven't even started to tackle the drop
downs yet. One step at a time. If I can just close up the space above the
top nar bar in IE, I'd be happy.
Thanks for whatever help you can offer.
http://www.lifp.org/index_css_3static.html
Peggy
__
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] Strange position of list bullet/image in IE, please help
I'm trying to restyle a page and I'm running into something very strange: the bullet of an LI is moved down in IE as if it is vertically centered for the enclosed UL. Here you can see it (last option in the left column). http://web.inter.nl.net/users/hepabolu/cocoondocsskin/samples/sample.htm l Helma, Try putting styling the bullet as a background on the LI, better cross-browser consistency. http://css.maxdesign.com.au/listamatic/vertical05.htm -Nigel __ 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] site check -garden design site
Are you absolutely sure that you can't change the background to, maybe, #222 and the text to #ddd? It would be a subtle difference but it might help. You can take a screenshot and show it to the client and see if they are okay with it. -- Hi Christian I have changed it very slightly to #0c0c0c. Very subtle difference, but it just takes the starkness off the black. Cheers Lee __ 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 in ie 6.x windows with image
Hi all,
I am trying to place a single image in a footer such that it will overlap
the top and bottom of the footer...
url: http://baseballtriviaquiz.com/virgil/history.html
css: is contained within the page (I will remove it later)
I think you might be better off moving the tree image to the footer div as
a background image. You could have the tree, the light green and the
darker green bottom border combined into one very wide (depending on your
layout's width settings) image that would then be applied to the footer
div, positioned to the bottom left of the footer div.
#footer {
margin: 0 17px 1.0em 0;
padding: 0;
background: #c6d28a url(long-footer-bg.gif) no-repeat bottom left;
height: 25px;
}
Attempted diagram of iamge below.
xx
xx xx
xx xx
x
x
xx
xx x
xx this is the no-repeat very long bg image w/ treex
xx x
XX
x
- - OR - -
You could also try positioning the tree absolutely (instead of relative)
so that it is taken out of the document's normal flow, thus, not affecting
the footer's layout. I think the background image option is easier, and
more stable cross-borwser. I'm sure others will have excellent ideas too.
Good luck
--
Jono Young
Designer | Developer | Illustrator
Charleston Web Solutions
Bringing Higher Standards to the Lowcountry
http://www.charlestonwebsolutions.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] tableless forms
I know that it works. I just would like to know why this works. I am also very much open to alternative ways to create tableless forms. until a few weeks ago I had never found a form generator that was worthy of being accessible and standards compliant. Then I found this - http://www.formassembly.com/ You can study their method and learn from it. __ 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] tableless forms
Michiel van der Blonk wrote:
For long I have been looking for the easiest way to create forms
without tables. I found several methods:
- floating
- position:absolute
- display:inline-block display:-moz-inline-box
All come with their own caveats and problems. The floating is usually
considered the best. However, it's not easy to align the input's under
each other.
The problem is usually that even if I give the label a width, it is not
used by the browser, since it is inline, so it has to be made floating.
Then when resizing the font the floating elements start shifting, and
everything messes up.
Recently I found out that if I give the label a little bit of padding,
or an invisible border (color same as background) that the inputs are
suddenly aligned correctly in both IE and FF.
I'll try to discuss your test page
http://test5.caribmedia.com/CSS/michiel/floating-forms.html
(The following ascii art should align with fixed font size.)
look at the difference between:
form {width:20em}
label {float:left;width:10em;margin-bottom:1em;}
input {float:left;}
Because of the margin-bottom of 1em, the label is taller than the input.
Apply a background color to see.
|label| [input]
| |
Floats do hook, they float /up/ as high as possible (e.g. not higher
than any preceding float [1]) . The subsequent label/input shows this:
|label| [input]
| | |label|
| |
[input]
There is enough room for both the labels side by side:
2 x 10em = 20em = width of the form
There is no room left for the second input; therefore, this float /drops/ .
and
form {width:20em}
label {float:left;width:10em;margin-bottom:1em;padding:1px}
input {float:left;}
for this html
form action=
labelName/labelinput
labelAddress/labelinput
labelEmail/labelinput
/form
The box model adds the padding to the width: the overall width of label is
1px + 10em + 1px
But the form still has a width of 20em only. There is not enough room
for floating up of the subsequent label, the label itself drops.
|label| [input]
| |
|label| [input]
| |
A similar effect can be achieved with the property clear on label [2].
Ingo
[1] some older browser will float up as high as possible regardless of
preceding floats.
[2] IE/Win has problems with float+clear on the same element.
--
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/
[css-d] Sequential CSS ID Ordering
Someone is trying to tell me that CSS can control the loading sequence of CSS IDs. I think he's wrong. My guess is that CSS must be used in conjunction with some other technology to achieve this. Please advise. dan storm ~ web developer ~ [EMAIL PROTECTED] ~ w: 206.266.0292 ~ c: 425.503.9580 __ 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] Footer That Extends Fully to the Right
Let's see... What if you give the content columns (right now the left sidebar and the spot for the photo) a margin-right of something suitable in an auto-width container div, then apply as much padding to the left as margin to the right of the content so you have it centred. The footer should extend to the right. I am not following you. In its current state everything is in a centered wrapper, including the footer. It sounds like your suggesting I wrap the leftcol and content in a div and then wrap that in another div? Yeah I am no following. I need it spelled out for me. Thanks for the input though. Anathema __ 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] tableless forms
I wrote: Because of the margin-bottom of 1em, the label is taller than the input. Apply a background color to see. Sorry, a background color does not make it easier to see. Use the Firefox web developer extension or the FxDomInspector to outline these elements. Second, I forgot: On your test page, you are saying: I think this effect works because it prevents margin-collapse This is not correct. See the specs : Two or more adjoining vertical margins of block boxes /in the normal flow/ collapse. ... Vertical margins between a floated box and any other box do not collapse ... http://www.w3.org/TR/CSS21/box.html#x22 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] Sequential CSS ID Ordering
* Storm, Dan wrote: Someone is trying to tell me that CSS can control the loading sequence of CSS IDs. I think he's wrong. My guess is that CSS must be used in conjunction with some other technology to achieve this. Please advise. What is the loading sequence of CSS IDs? -- Björn Höhrmann · mailto:[EMAIL PROTECTED] · http://bjoern.hoehrmann.de Weinh. Str. 22 · Telefon: +49(0)621/4309674 · http://www.bjoernsworld.de 68309 Mannheim · PGP Pub. KeyID: 0xA4357E78 · http://www.websitedev.de/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d 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] z-index? content menu hiding behind header
Oops, the % was in the direction, but I was too much in a hurry. - A (bottom-2em) is indeed impossible AFAIK, but what you can do is to hang the bg-img in the footer, and then push him upwards: it can't be in the footer. the only place i have to put it is in the body because of other css files that inherit parts of what i pasted together. if i put this background in the footer then all my other css themes would get it. for my purposes it has to be on the body. Remaining remarks: - Enlarging fontsize more as 3 steps in FF (quite a lot, though - and probably enough) breaks the general layout; in IE the max fontsize is o.k. i like to code for variations, but i also have deadlines. if it takes 3 bumps to break it, i'm ok with that. i'm glad it works that far, which is my minimum goal. :) - Parts of the footer can go under the bottom of the screenheight - but that is not due to the globe thingy. I think it is more general: the relationship between the height of the footer and the min-height of the master-form (and the way how filling the footer). the padding or margins on some of the main content area things are pushing it down when it looks like the footer should all be showing on one page. after i get everything looking decent, making sure the footer shows entirely on the main pages is on my list of things to check for. as to being able to move my content area and menu up on the pages that have that sub menu (which is my biggest concern and most baffling question), it seems that this is impossible with css. __ 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] tableless forms
Paul Kahl wrote: You don't really need to float the labels or inputs. With no CSS at all, this form lays itself out: html body form label id=ed for=input1Test:/label input type=text id=input1 /br / label id=ed for=input2Test:/label input type=text id=input2 /br / input type=submit / /form /body /html That's very funny, but not quite why I posted this. Did you notice that your form happens to have two labels with exactly the same text? That's hardly practical in real life forms. In real life forms you'd have textareas, select boxes, checkboxes, radio buttons, labels of various sizes, and text fields of various sizes. Try this one http://www.cafetheplaza.com/en/jobs/index.html Also try your form without the br / tags. Of course the same (being unpractical) could be said about my forms, they lack a br/ tag, which is needed to display the form in usable way when stylesheets are disabled. I'll update my article to reflect this. Michiel __ 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] Sequential CSS ID Ordering
* Storm, Dan wrote: Specifying what loads first in the browser. For example, you have #header, #leftNav and #main, and you want to ensure that the header and left nav load before the rest of the page. Make sense? You can control 2d and 3d positioning in the visual rendering, you cannot control what goes over the wire first, or what's rendered first if the user agent renders the document progressively, other than changing the order of elements in the document. -- Björn Höhrmann · mailto:[EMAIL PROTECTED] · http://bjoern.hoehrmann.de Weinh. Str. 22 · Telefon: +49(0)621/4309674 · http://www.bjoernsworld.de 68309 Mannheim · PGP Pub. KeyID: 0xA4357E78 · http://www.websitedev.de/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d 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] any column tallest, with border and bg image
-- little history -- i was trying to clarify what the equal height columns [1] method from pie to someone today and thought i would try it out for myself in an area that i was setting a fixed min-height for columns. i got the margin/padding working beautifully except for one big thing. -- problem -- the bottom border and the background image that i place in the bottom right of each column doesn't show now, of course, since the bottom of the div is cut off and hidden. is there any way to get an inside div to be the same height as the container? i could then put a border on this inside div and set the background image here. is there another solution if this is impossible? what my page looks like without the equal columns css: http://sltclan.com/images/cj/column-page.png trimmed down page of the columns (i turned the containing div .wrapper-three green): http://sltclan.com/images/cj/columns.html [1] http://www.positioniseverything.net/articles/onetruelayout/equalheight [this next part is extra, in the hope someone recognizes what i'm saying and can steer me to some help] --- previously i have used three containing divs with 33.3% width and then on the three inside layout divs i would put a margin: 0 5%; to separate the columns with, as different browsers seem to treat margins on the outer div differently [2]. this worked perfectly in ff/opera/ie but didn't allow for equal height. [2] firefox will put all the columns to the left, whereas ie will take the three columns and center them. also putting margins on the outer div means you suddenly get less than 99.9% width to work with in ie. for example 3 columns with width of 32% and margin on each side of .5% (which should be a total of 33% per column) makes ie drop the third column. __ 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] Floats dropping on text resize
I've been reworking my site after the many wonderful suggestions from this group. I have switched from a fixed with layout to using mostly ems which really does improve the readability a lot. Everything validates and I have looked at it from several Windows browsers, using the different text sizes, but I still have a couple of glitches. In IE, going to the larger text size works great, but going to the largest size causes the right column to drop. In FF, increasing the text size works as expected and keeps the layout intact, but going down two sizes from the default causes all of my columns to stack. Can someone help me out here? I'm scratching my head on this one. Perhaps decreasing the font size isn't anything to worry about? Also, is there a way to avoid having the horizontal scroll bar? I have seen a few 2 column layouts that work well with multiple text increases (5+ clicks in FF) and don't get a horizontal scroll bar, but is there a way to avoid it with a 3 column layout? Thanks. :-) Site: http://www.girlscantwhat.com CSS: http://www.girlscantwhat.com/css/gcwcss.css -- Gretchen __ 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 position of list bullet/image in IE, please help
hepabolu wrote: I'm trying to restyle a page and I'm running into something very strange: the bullet of an LI is moved down in IE as if it is vertically centered for the enclosed UL. Here you can see it (last option in the left column). http://web.inter.nl.net/users/hepabolu/cocoondocsskin/samples/sample.html Helma, the width:100% on that li causes these troubles in IE/Win. If it's not needed, you should hide it from 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] Footer That Extends Fully to the Right
On 10/02/06, anathema [EMAIL PROTECTED] wrote: I am not following you. In its current state everything is in a centered wrapper, including the footer. It sounds like your suggesting I wrap the leftcol and content in a div and then wrap that in another div? Yeah I am no following. I need it spelled out for me. Thanks for the input though. Then I guess I need an example to explain, but I don't have any time for that. Anyone knows what I mean? Oh wait, of course you could do that thing I call a wrapper with the body, and then the centred wrapper you speak of could take the role of the wrap you think I'm suggesting. Loopy? I hope you get it though! -Rob. __ 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] tableless forms
On 2/10/06, Michiel van der Blonk [EMAIL PROTECTED] wrote:
The problem is usually that even if I give the label a width, it is not
used by the browser, since it is inline, so it has to be made floating.
Then when resizing the font the floating elements start shifting, and
everything messes up.
So it's safe to assume you didn't try:
label { display:block; }
? Because this would have solved your problem very quickly.
--
--
Christian Montoya
christianmontoya.com ... rdpdesign.com ... cssliquid.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] Problem with IE
I have a problem on my personal web site (see url in my signature). There is an image and some text inside a div. div id=header img src=/images/logo.gif/imgh1Chandler's Zen/h1 /div The div itself has a background image which is repeated in the y-direction, the image is floated left. On firefox (and Konqueror) the height of this image is what I want, the depth of the heading text and its padding. A subsequent div (the menu) is designed to sit up to the right of the bottom element of the image. On IE, the background image is stretched down the the height of the floated left image, forcing the menu down below the image. I have searched around the net in search of any indication of what on IE is causing this problem and for a hack to get round it. But I can't find one. Can someone here help me please with what to do. Thanks. -- Alan Chandler http://www.chandlerfamily.org.uk Open Source. It's the difference between trust and antitrust. __ 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 Go button
I am sorry if I have missed this question. I use the following code in a web page. form action=../search.cgi method=get label for=ferretthisSite Search/label input id=ferretthis name=ferretthis maxlength=45 size=30 type=text / input value= Go name=submit type=submit //form Can CSS be used to customize the go/submit button? Angus MacKinnon MacKinnon Crest Saying Latin - Audentes Fortuna Juvat English - Fortune Assists The Daring Web page http://www.infoforce-services.com Choroideremia Research Foundation Inc. 2nd Vice president http://www.choroideremia.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] CSS Top Tips.
Hey Guys. I had a little interesting idea of something I wanted to do. I'm going to compile a list of the top 10 tips for using CSS. I'd like to collect as many opinions as possible, and you're all welcome to input to this. I shall shoot a link to the final results once I've compiled it all in around a weeks time. Any format is fine, plain text or a reply to this email would be best! List from 1 to 10 in order of best tip - first to last. Thanks! Scott. __ 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 Go button
You can use the input type image to use an image as a submit/go button, then style it from there :) Scott. Angus at InfoForce Services wrote: I am sorry if I have missed this question. I use the following code in a web page. form action=../search.cgi method=get label for=ferretthisSite Search/label input id=ferretthis name=ferretthis maxlength=45 size=30 type=text / input value= Go name=submit type=submit //form Can CSS be used to customize the go/submit button? __ 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] Explorer bug ? Elements hidden when background colour and floats used.
html
head
style type=text/css
p {border: 1px solid black;}
div {background:red;}
#floatMe {float:left;}
#clearMe {clear:left;}
/style
/head
body
pIn the DIV below are 3 paragraphs. The first is unstyled, the
second floats left, the thrid clears left. In Explorer 6 PC the first
P does not display, but can be highlighted, or it will sometimes
reappear if a window is moved over it and then away again. All the
syles are in the head. Remove the float or clear and the top P
displays fine. I have stripped out all the extraneous code, but it WAS
validating as strict HTML. Any ideas why this might be happening?/p
div
pI am hiding???/p
p id=floatMeI float left/p
p id=clearMeI clear left/p
/div
/body
/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] tableless forms
Examples at http://simplyaccessible.org/ may help. -- Jan Brasna :: www.alphanumeric.cz | www.janbrasna.com | www.wdnews.net __ 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] Adjacent Selector for IE6?
If only dd were a child of dt. Uhh...yeah...good point;) Wishful thinking I guess. -- Jono __ 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] Floats dropping on text resize
Christian Montoya wrote:
On 2/10/06, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote:
Also, is there a way to avoid having the horizontal scroll bar? I have
seen a few 2 column layouts that work well with multiple text increases
(5+ clicks in FF) and don't get a horizontal scroll bar, but is there a
way to avoid it with a 3 column layout? Thanks. :-)
#(whateveryourcontaineriscalled) {
max-width:100%;
}
Now, if you want this to work in IE you will need some sort of
Javascript solution, which I can refer you to if you are interested.
--
--
Christian Montoya
christianmontoya.com ... rdpdesign.com ... cssliquid.com
Actually, I just figured out the problem...the logo image in my header
was too wide. I ran a test by removing it and the layout stayed intact
in all browsers. I'll resize it and problem solved. Thanks!
--
Gretchen
__
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] menu help
Can someone explain to me why IE removes the background from Menu11 when the browser is resized so the viewport is smaller than the top menu bar? http://www.pgi_products.com/test/cssmenu2.asp?CM=3 (remove the underscore) I know the graphic and color schemes are terrible, and a coworker was complaining about font size and family, etc. This proof of concept is close enough to working to be promising: css only 2 line menu (except for IE .htc) - but if I can't figure out why IE is rendering incorrectly, I will have to find a new solution. (The latest version on our developement server is reliably crashing IE) __ 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 Top Tips.
Scott Wilcox wrote: I had a little interesting idea of something I wanted to do. I'm going to compile a list of the top 10 tips for using CSS. I'd like to collect as many opinions as possible, and you're all welcome to input to this. I shall shoot a link to the final results once I've compiled it all in around a weeks time. It would probably be a good idea to study our wiki, and if afterward you still think it a good idea, make it a new page there. -- Love your neighbor as yourself.Mark 12:31 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://mrmazda.no-ip.com/auth/ __ 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] Floats dropping on text resize
[EMAIL PROTECTED] wrote Fri, 10 Feb 2006 14:42:39 -0600: Also, is there a way to avoid having the horizontal scroll bar? I have seen a few 2 column layouts that work well with multiple text increases (5+ clicks in FF) and don't get a horizontal scroll bar, but is there a way to avoid it with a 3 column layout? Thanks. :-) Site: http://www.girlscantwhat.com CSS: http://www.girlscantwhat.com/css/gcwcss.css Be wary of believing a horizontal scrollbar on zoom to be a problem. Larger absolute sizes tend to go hand in hand with wider viewports and higher resolutions. As I see your page ATM, it looks like it could stand about a 3em-4em overall width reduction to reduce likelihood of horizontal scroll. -- Love your neighbor as yourself.Mark 12:31 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://mrmazda.no-ip.com/auth/ __ 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] Floats dropping on text resize
[EMAIL PROTECTED] wrote:
... In FF, increasing the text size works as expected and keeps the
layout intact, but going down two sizes from the default causes all
of my columns to stack. Can someone help me out here? I'm
scratching my head on this one. Perhaps decreasing the font size
isn't anything to worry about?
Probably not, but making the layout hold its own when subjected to
'minimum font size'[1] might be a good idea.
The effect is very much the same as with decreased font size on your
layout - it tends to stack in Firefox and Opera.
Solution - add...
#mainwrap {clear: both;}
...to prevent stacking, and add...
#header, #footer {display: table;}
...to make header and footer adjust to changes in font size when needed,
thus preventing overshooting/overlapping onto the center column and
below the #bordwrap bottom.
Site: http://www.girlscantwhat.com CSS:
http://www.girlscantwhat.com/css/gcwcss.css
Felix wrote:
Be wary of believing a horizontal scrollbar on zoom to be a problem.
Larger absolute sizes tend to go hand in hand with wider viewports
and higher resolutions.
I disagree with Felix on this point, but that's not a big issue since I
(and others) can use 'fit to window width' anyway - which acts as
'max-width = window-width' at the user end (with the right browsers).
That may make your page-columns stack - linearize, but it is still
working quite well.
regards
Georg
[1]http://www.gunlaug.no/contents/wd_1_03_04.html
--
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] Floats dropping on text resize
Gunlaug Sørtun wrote Sat, 11 Feb 2006 01:56:21 +0100: Felix wrote: Be wary of believing a horizontal scrollbar on zoom to be a problem. Larger absolute sizes tend to go hand in hand with wider viewports and higher resolutions. I disagree with Felix on this point How? Why? -- Love your neighbor as yourself.Mark 12:31 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://mrmazda.no-ip.com/auth/ __ 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] Centred images, assistance please
I'm hoping someone on the list can provide a little help, please. I'm playing around with three centred columns each with two vertical images. Can't seem to get it right. How to do? I've put an example up on my dump site, www.qwqwk.com. Thanks, Mike A. __ 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] Floats dropping on text resize
Felix Miata wrote: Be wary of believing a horizontal scrollbar on zoom to be a problem. Larger absolute sizes tend to go hand in hand with wider viewports and higher resolutions. I disagree with Felix on this point How? Why? Well, I have never found a reason to change the width of my viewports or use higher resolution. I do tend to 'blow up' / 'zoom up' text and/or entire web-pages in order to see what's written in them though. So it seems like my 'larger absolute sizes' do not go hand in hand with what you suggest - at my end. Thus, I disagree. We had a long discussion that /touched/ on this subject a little while ago here at css-d. I don't feel like repeating it all over again, but one of the solutions most in line with my personal preferences can be found here: http://www.456bereastreet.com/archive/200504/fixed_or_fluid_width_elastic/ ...which can also be implemented with reversed units. Think Christian Montoya was pointing in the same direction earlier in this thread. 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] inline menu: active link properties
Hi there! I have one doubt about inline menus: when a person press one link at this menu, I want it (the link) to have the same border bottom color of the bg. Ofcourse, Ive looked at ALA but couldnt get their tutorial... they use one ID for it, which I thought a little strange, since it will make the link border bottom be always at the BG color, right? that's all! 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] Floats dropping on text resize
Gunlaug Sørtun wrote Sat, 11 Feb 2006 02:42:29 +0100: Felix Miata wrote: Be wary of believing a horizontal scrollbar on zoom to be a problem. Larger absolute sizes tend to go hand in hand with wider viewports and higher resolutions. I disagree with Felix on this point How? Why? Well, I have never found a reason to change the width of my viewports or use higher resolution. What you say above seems to disagree with http://www.gunlaug.no/contents/wd_1_01_02.html in its last section. I do tend to 'blow up' / 'zoom up' text and/or entire web-pages in order to see what's written in them though. Blowing up or zooming makes larger absolute sizes. So it seems like my 'larger absolute sizes' do not go hand in hand with what you suggest - at my end. Thus, I disagree. My statement didn't refer to web carpenters. It referred to users, and it's about understanding context and perspective when testing a layout against various font sizes. Users rarely choose fonts so big that only six or seven words per line fit a fullscreen viewport. Zooming 4-5 times is usually necessary only when the encountered text size is 4-5 times below the user's default, usually when the web carpenter has emulated microfont sites like gateway.com, microsoft.com, apple.com and espn.go.com. As long as you're setting sizes that correspond to and are compatible with the 10pt-14pt range that studies we here have seen referred from time to time to have shown most web users prefer, you shouldn't expect many people to be doing a whole lot of multi-step zooming. -- Love your neighbor as yourself.Mark 12:31 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://mrmazda.no-ip.com/auth/ __ 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 IE
Il giorno 10/feb/06, alle ore 23:19:22, Alan Chandler ha scritto: I have a problem on my personal web site (see url in my signature). There is an image and some text inside a div. div id=header img src=/images/logo.gif/imgh1Chandler's Zen/h1 /div http://validator.w3.org/check?uri=http%3A%2F% 2Fwww.chandlerfamily.org.uk%2Fcharset=%28detect+automatically% 29doctype=Inlineverbose=1 Thanks. -- Alan Chandler http://www.chandlerfamily.org.uk Open Source. It's the difference between trust and antitrust. ilduca69 XHTML + CSS http://ilduca69.altervista.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] html as a selctor?
Hi,
I'm new to the list and not too new to css but by no means a pro at it. I've
noticed in some of the posts i've seen people list html,body {blah:foo;} as
a line of code. What benifit comes from html and body selectors? I'm sorry
if this is a stupid question but I cant seem to find an answer elsewhere.
Thanks
Phillip Perry
__
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] html as a selctor?
Phillip Perry wrote:
I'm new to the list and not too new to css but by no means a pro at it. I've
noticed in some of the posts i've seen people list html,body {blah:foo;} as
a line of code. What benifit comes from html and body selectors? I'm sorry
if this is a stupid question but I cant seem to find an answer elsewhere.
Well, since body wraps the entire site, it can be a very powerful
element to style. A common use is:
body {font-size:100%;}
to set the base font size.
There are hacks which you might be seeing as well:
htmlbody .container {color:blue;}
which will be ignored by IE win - maybe mac ie as well.
Mike
__
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] html as a selctor?
On 2/10/06, Phillip Perry [EMAIL PROTECTED] wrote:
Hi,
I'm new to the list and not too new to css but by no means a pro at it. I've
noticed in some of the posts i've seen people list html,body {blah:foo;} as
a line of code. What benifit comes from html and body selectors? I'm sorry
if this is a stupid question but I cant seem to find an answer elsewhere.
HTML and BODY are just two big containers that wrap everything else.
Think of them as two divs surrounding all your content and you'll see
that they are perfect for applying your default styling.
This is a simple explanation, however, there are more complicated
things I'm sure, if you want to know more just say so.
--
--
Christian Montoya
christianmontoya.com ... rdpdesign.com ... cssliquid.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] Floats dropping on text resize
Felix Miata wrote: Gunlaug Sørtun wrote Sat, 11 Feb 2006 02:42:29 +0100: Well, I have never found a reason to change the width of my viewports or use higher resolution. What you say above seems to disagree with http://www.gunlaug.no/contents/wd_1_01_02.html in its last section. This 'web carpenter' tend to test into the extremes, in order to see what might happen - if... As a web user I am a lot more modest and stick to the more ordinary 640 - 1280 wide screen. I don't see a contradiction in following my own preferences while testing for others. It just broadens my horizon a bit, and makes web development less boring. OTOH, I don't mind contradictions... ... My statement didn't refer to web carpenters. It referred to users, and it's about understanding context and perspective when testing a layout against various font sizes. Users rarely choose fonts so big that only six or seven words per line fit a fullscreen viewport. Zooming 4-5 times is usually necessary only when the encountered text size is 4-5 times below the user's default, usually when the web carpenter has emulated microfont sites like gateway.com, microsoft.com, apple.com and espn.go.com. As long as you're setting sizes that correspond to and are compatible with the 10pt-14pt range that studies we here have seen referred from time to time to have shown most web users prefer, you shouldn't expect many people to be doing a whole lot of multi-step zooming. So far, so good. You'll hit within most ordinary visitors' preferences with that. Since you didn't target 'web carpenters' with that statement, I guess I shouldn't be commenting at all :-) You should have stated that too so I could have stayed clear ;-) I personally don't care about users' preferences. I just try to accommodate as wide a range of them as I can - as well as I can, regardless of how strange those preferences might seem to me. I've found that such an approach doesn't add to the workload or create any real new problems for most visitors. It just gives me a chance to test the limits of the tools at hand - standards and user-agents. The acquired knowledge /just might/ come handy one day... 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] CSS Go button
Angus at InfoForce Services wrote:
I am sorry if I have missed this question. I use the following code in a web
page.
form action=../search.cgi method=get
label for=ferretthisSite Search/label
input id=ferretthis name=ferretthis maxlength=45 size=30
type=text /
input value= Go name=submit type=submit //form
Can CSS be used to customize the go/submit button?
You could also assign a class to the button (to differentiate it from
the other input elements:
input value= Go name=submit type=submit class=button /
Then you could attack it from the CSS:
input.button {
border: solid 1px #c00;
background: #fff;
color: #000;
}
This would in theory give you a white button with a red border and black
text (although I think Safari might ignore it).
Don Hinshaw
__
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] Page jumps when links clicked - why?
Why, especially in IE6, do the pages (the content of the page, not the beans) jump when I click on the links? In Safari and FF for the Mac, the Investor page moves over. What am I doing wrong, or what have I missed? http://mdh-test.com/sips http://mdh-test.com/sips.css Thank you in advance. The about us, sips shop, and contact sips links are not populated, so don't click them. -- Theresa Mesa Mesa Design House http://mesadesignhouse.com [EMAIL PROTECTED] http://market-your-small-business.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] Small request for help.
This is another one of those looks great in Firefox, but crap in IE problems. The middle section gets pushed way down below the menues on IE. I'm aware of the sizing differences on the sidebars, but haven't fixed them yet with IE conditional comments yet. Why does the middlet get pushed so low on IE, though? http://dendrome.ucdavis.edu/.species/index.php http://dendrome.ucdavis.edu/includes/stylesheet.css Thanks! -- Eric Ladner __ 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 IE
On Saturday 11 February 2006 02:42, ilduca69 wrote: Il giorno 10/feb/06, alle ore 23:19:22, Alan Chandler ha scritto: I have a problem on my personal web site (see url in my signature). There is an image and some text inside a div. div id=header img src=/images/logo.gif/imgh1Chandler's Zen/h1 /div http://validator.w3.org/check?uri=http%3A%2F% 2Fwww.chandlerfamily.org.uk%2Fcharset=%28detect+automatically% 29doctype=Inlineverbose=1 I agree that the validator seems to fail quite a lot. Most of the problem comes from closing the tags with a / inside the head Unfortunately I am not sure what I can do about this, because I am using the Tapestry Framework to generate the page, and this part is generated by a standard component. But, I guess my main question is - has this anything to do with the problem I am experiencing? -- Alan Chandler http://www.chandlerfamily.org.uk Open Source. It's the difference between trust and antitrust. __ 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/
