Re: [css-d] alternating colors of list items in IE
Thanks to all who replied, and especially Jukka for the practical advice
on my main issue (MSIE6 and below not 'getting' my long selectors).
Jukka's suggestion (assign a separate class to alternate li's) makes
sense, but I thought that in this case I'd let those MSIE users suffer
some ugliness, because I use these lists to display frequently-changing
info, adding and subtracting li's. Alternate classes would require
changing the code for each item when I add a new one.
But then I realized this would be true only if I delete a li from the
middle (atypical), or if it's necessary for the first item to always be
a particular shade (it's not).
This new method isn't as versatile or clever, but that's what we get for
living with M$, right?
Jukka wrote:
...MSIE 5, 5.5., and 6 surely don't support selectors like li + li,
but they all let you set a background color for an li element.
/* use container wrapper colors for 1st, 3rd, 5th, etc li's */
#containAbt .features li, #containAbt .features li+li+li, #containAbt
.features li+li+li+li+li, #containAbt .features li+li+li+li+li+li+li,
#containAbt .features li+li+li+li+li+li+li+li+li {
background-color: #F7EFD5;
}
That's flexible in a sense, but won't work on IE 6 or earlier due to lack
of support to + in selectors, and it gets somewhat awkward.
I'd suggest the simpler approach of assigning a class, say class=e, to
the 2nd, 4th, 6th, etc. (i.e., even-numbered) list items and using a
selector like
.features li
to cover all list items (effective making the settings you want for odd
items) and then
.features li.e
to cover the even items. This is boring but gives much better browser
coverage and avoids the problem of (mis)counting in li+li+li+...
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] centering list items within a div
Greetings -
Many thanks to Gunlaug for providing some @media screen {* html} rules
to make my sit far more compatible with IE! Now that (most of) the most
severe problems are fixed...
I'm having trouble centering list items within a div. I'm using % for
width (fluid layout), and I don't mind if it's off by a pixel one way or
another, but as the window narrows, the right margin for the list items
shrinks far more than the left. This problem is in Firefox, I'm guessing
it affects other browsers.
I've had uglier problems, but this puzzles me, and any ideas would be
most welcome!
- David
The list is the box at the right at:
http://www.lighthouse.chtr.k12.ma.us/index.php
And the relevant CSS is here:
.features {
border: 2px solid #540b13;
background-color: #e4a849;
width: 80%;
text-align: center;
}
.features ul {
padding: 0;
margin: 0 auto;
width: 94%; /* set by text width if not defined */
}
.features li {
list-style-image: none;
list-style-type: none;
border: 1px solid #540b13;
color: #333;
padding: 1px 5px;
margin: 2px auto;
width: 96%; /* funky asymetry at smaller sizes */
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] centering list items within a div
Georg, you are awesome!
This is beautiful. Thank you.
Gunlaug Sørtun appears to have written the following on 3/13/07 12:26 PM:
David Agnew wrote:
I'm having trouble centering list items within a div. I'm using % for
width (fluid layout), and I don't mind if it's off by a pixel one
way or another, but as the window narrows, the right margin for the
list items shrinks far more than the left. This problem is in
Firefox, I'm guessing it affects other browsers.
You have a mix of pixel-paddings and percentage-width. Since paddings
and borders are added to width - that's how the box-model works, your
values will only add up on a single, ideal, width and can't take
width-changes.
http://www.lighthouse.chtr.k12.ma.us/index.php
Suggest you change to this...
.features ul {
padding: 0;
margin: 0 4%;
}
.features li {
list-style-type: none;
border: 1px solid #540b13;
color: #333;
padding: 1px 2%;
margin: 2px 0;
}
...for perfect symmetry regardless of window-width.
The trick is to only declare margins and paddings _here_ - in
percentages or whatever, and leave the width-calculations to the
browsers. Browsers are good at calculating the default (width: auto), so
they should at worst get it 1px wrong.
Don't worry - it is tested :-)
regards
Georg
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] alternating colors of list items in IE
I use a list within div.features to display featured links. To make it
easier to read, the background color of alternate list items is a
different shade (these colors vary depending upon the color of the page
wrapper - e.g. containAbt - but that's irrelevant to this post).
This method works in most browsers including MSIE 7 5, but MSIE 6 and
5.5 completely ignore the list item background-color(s). See
http://browsershots.org/screenshots/d9ed6fa974ff8ea1ce1b47ab530ddc5d/
Any suggestions on getting IE 5.5 6 to color the list items (even if I
abandon the alternating scheme for those browsers)?
The relevant CSS (rules without color info omitted for clarity):
#containAbt .features {
background-color: #e4a849;
}
.features {
border: 2px solid #540b13;
background-color: #e4a849;
width: 80%;
text-align: center;
}
.features li {
list-style-image: none;
list-style-type: none;
border: 1px solid #540b13;
color: #333;
padding: 1px 2%; /* all hail Gunlaug! */
margin: 2px 0;
}
/* use container wrapper colors for 1st, 3rd, 5th, etc li's */
#containAbt .features li, #containAbt .features li+li+li, #containAbt
.features li+li+li+li+li, #containAbt .features li+li+li+li+li+li+li,
#containAbt .features li+li+li+li+li+li+li+li+li {
background-color: #F7EFD5;
}
/* use darker shades for remaining li's */
#containAbt .features li+li, #containAbt .features li+li+li+li,
#containAbt .features li+li+li+li+li+li, #containAbt .features
li+li+li+li+li+li+li+li{
background-color: #ebdab3;
Thanks in advance!
David
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] alternating colors of list items in IE
Jason Herber appears to have written the following on 3/13/07 2:18 PM:
I'm sorry I don't have an answer to your question, but I wanted to
point out that
#containAbt .features li {
background-color: #F7EFD5;
}
is all you need for that first style. It'll set the color for all li
elements, then your second style re-colors the even ones for you.
Thanks fo the reply, Jason.
I agree that that's how it would seem. But in my testing with FF2 Mac,
when I use this CSS:
#containAbt .features li {
background-color: #F7EFD5;
}
/* darker shades for alternate li's */
#containAbt .features li+li, #containAbt .features li+li+li+li,
#containAbt .features li+li+li+li+li+li, #containAbt .features
li+li+li+li+li+li+li+li{
background-color: #ebdab3;
}
the first list item gets the lighter color, and ALL OF THE REST get the
darker shade
but if I use the following CSS, all is well. Makes no sense to me, but
it works.
#containAbt .features li, #containAbt .features li+li+li, #containAbt
.features li+li+li+li+li, #containAbt .features li+li+li+li+li+li+li,
#containAbt .features li+li+li+li+li+li+li+li+li {
background-color: #F7EFD5;
}
/* darker shades for alternate li's */
#containAbt .features li+li, #containAbt .features li+li+li+li,
#containAbt .features li+li+li+li+li+li, #containAbt .features
li+li+li+li+li+li+li+li{
background-color: #ebdab3;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] clueless with IE 6
Greetings good CSS coders - I'm developing on a Mac, with no ready access to a PC. Although I've gotten things to display 'ok' in IE in the past, I often break that with changes. http://www.lighthouse.chtr.k12.ma.us/index.php works in IE7, Firefox, Safari, but not earlier versions of IE (see http://browsershots.org/website/http://www.lighthouse.chtr.k12.ma.us/index.php#success ). No doubt there are several issues, but I wonder if one of you IE hack wizards would be kind enough to point out my 2 or 3 major errors, so that I don't just flounder about randomly. Thanks in advance! David __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] strange rendering in IE Win
The following pages use the same CSS and all the XHTML validates. Between the sidebar and the content area, http://www.vsi.cape.com/~dagnew/abt/beacon.php looks fine, but http://www.vsi.cape.com/~dagnew/abt/index.php does not. I thought perhaps the floated image in beacon.php somehow helped, but http://www.vsi.cape.com/~dagnew/com/families.php has an image AND the problem, while http://www.vsi.cape.com/~dagnew/foo.php has no image and looks okay. I don't see the problem in Firefox Win, IE Mac, Firefox Mac, or Safari. Suggestions? Thanks, David __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] can't get images to float in IE5 Mac
[...]
Actually, Adam is right, and wrong
IE Mac indeed needs a width declaration when using the float
property, in accordance with the CSS 2.0 rec. But , when an
**image** is floated, you don't need to declare the width, the
intrinsic width of the image will do perfectly fine. Your original
mark-up was correct in this case (except that, it would be better to
add a class to you image tag, and declare your rules in your
stylesheet instead of using inline styles).
That doesn't fix your problem, though. The 'non-floating' images are
the result of a real bug in IE Mac [1]. It is caused by the
{clear:right} rule for div#contentbody. Delete that rule, and your
page ought to display correctly.
Now, I suspect you page is not complete, based on the comments in
the source code. If you need to float something before that
#contentbody, then you'll need to use another clearing technique.
For a few ideas, see [2].
[1] http://www.l-c-n.com/IE5tests/float2misc/#fm002
more tid-bits over there about IE Mac.
[2] http://www.positioniseverything.net/ has a good article on
'easyclearing'.
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com/
Thank you, Philippe.
I'd read and implemented the 'clearfix' fix described in the
easyclearing article in a previous version of this site.
Unfortunately I had so many browser glitches that I started over and
then overlooked 'easyclearing'. And I had NOT seen your site, which
looks valuable.
Unfortuantely, there are other floated elements (just one on some
pages) which precede div#contentbody visually and in the document
flow -although they are not ancestors. This is best illustrated by
http://www.vsi.cape.com/~dagnew/abt/beacon.php
It will take me a few days to properly digest the pointers you've
given (I really want to avoid unneeded code), but I'll report back
with my progress.
Thanks again!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] can't get images to float in IE5 Mac
I'm probably missing something obvious, but...
I'm simply trying to get one or more images to float to the right of
some text. It works on Firefox and Safari (MacOS), and in Firefox and
IE6 (Windows) - but I have no luck with Mac IE5.
These pages illustrate the problem:
http://www.vsi.cape.com/~dagnew/act/
http://www.vsi.cape.com/~dagnew/abt/beacon.php
I'm using DTD XHTML 1.0 Transitional.
The most pertinent CSS is:
#contentbody {
position: relative; /* -- IE6 peekaboo tweak -- */
clear: right; /* - else 'tabs' div is invisible!
- */
padding: 6px 8px;
background-color: #fff;
color: #333;}
#contentbody img { position: relative; } /* -- IE6 peekaboo
tweak -- */
The style sheet is here: http://www.vsi.cape.com/~dagnew/lib/styles.css
Moving the img around in the document flow hasn't helped. Assigning
positioning to the adjacent p fixed the problem in Mac IE, but
broke it everywhere else. I also tried the 'clearfix' hack* to no
avail, and looked at
http://css-discuss.incutio.com/?page=AlignLeftAndRight which didn't
seem all that relevant (and it's example link was dead).
All suggestions appreciated!
***
*The following 'clearfix' hack was added to the stylesheet, but
didn't help http://www.positioniseverything.net/easyclearing.html:
added to #contentbody declaration:
display: inline-table;
/* Hides from IE-mac \*/
* html #contentbody {height: 1%;}
#contentbody {display: block;}
/* End hide from IE-mac */
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] can't get images to float in IE5 Mac
At 01:43 PM 11/17/2005, David Agnew wrote: I'm probably missing something obvious, but... I'm simply trying to get one or more images to float to the right of some text. It works on Firefox and Safari (MacOS), and in Firefox and IE6 (Windows) - but I have no luck with Mac IE5. These pages illustrate the problem: http://www.vsi.cape.com/~dagnew/act/ http://www.vsi.cape.com/~dagnew/abt/beacon.php I'm using DTD XHTML 1.0 Transitional. The most pertinent CSS is: Actually, the most pertinent CSS you have is mixed in with the markup: img src=../img/soccergame.jpg width=400 alt= style=float: right; margin: 0 0 4px 4px / Note that there is no width on the float. Mac IE is the only browser that, by default, gives widthless floats 100% width, in slavish adherence to the mostly-superceded 2.0 version of the spec. That means there is no room for the image to be to the right of inline content. To make IE happy, you will need to declare a width on the float. HTH, -Adam Kuehn Thank you, Adam. Nice explanation. I'd read that someplace, but I thought: img src=../img/soccergame.jpg width=400 alt= style=float: right; margin: 0 0 4px 4px / WAS declaring a width. But I moved it to the style declaration, like so: img src=../img/soccergame.jpg alt= style=float: right; width: 400px; margin: 0 0 4px 4px / but IE Mac draws it the same as before. I've noticed that IE Mac caches the stylesheet (or something), so I restarted IE, also viewed the source (which indicated updated code). hmmm... __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] text appears only if window is resized!
Thank you, Michael, that was it! At 12:23 PM -0600 11/8/05, Michael Hulse seems to have written: Peekaboo bug maybe? http://www.positioniseverything.net/explorer/peekaboo.html When http://www.vsi.cape.com/~dagnew/lib/foo.php is viewed in IE6 Win, all text within #content div appears only after the window is resized. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] text appears only if window is resized!
I'm making vey slow headway with my first CSS layout. I'd love it if someone could offer advice on my 2 biggest unresolved problems: When http://www.vsi.cape.com/~dagnew/lib/foo.php is viewed in IE6 Win, all text within #content div appears only after the window is resized. When http://www.vsi.cape.com/~dagnew/abt/beacon.php is viewed in IE5 Mac, the text of contentbody appears below and img floated in that div. neither of these problems occur with IE on the other platform, or in Firefox (Win or Mac) or Safari. The CSS is at http://www.vsi.cape.com/~dagnew/lib/styles.css Thanks! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Frustration learning css for layout
CSS is clearly elegant and powerful, and I have little difficulty using it to style elements. And using divs for layout - which I'm new at - works pretty well designing for ONE browser. But trying to make the layout look right for 'all' browsers is driving me nuts (and I suspect I have company). I've read possibly hundreds of pages of code/hack advice, yet it seems that every fix I make breaks something else, and I often have no way to know if the advice I'm following is truly savvy or not. Are there any agreed-upon (or widely accepted) fundamentals (conditional comments vs. hacks; the 'best' box-model hack; best source for reliable hacks; top 3 issues to address, when and how to position divs, etc)? Without knowing or understanding some basics, I get the feeling that I'm building on quicksand, and thinking fondly of tables. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Site Check - ElasticJohn.com
Hi Rahul - From Mac OS 10.4, Safari 2, it looks fine, 'tho elastic John is fixed (stays out of text, as he should). Using IE 5.2, John sticks to right side of window - if window is small enough, he intrudes on text - and if the window is short and it's scrolled, the image gets hacked up by Mr. Gates. All cosmetic, only a problem if the window is too small. From: Rahul Gonsalves [EMAIL PROTECTED] To: CSS-D css-d@lists.css-discuss.org Subject: [css-d] Site Check - ElasticJohn.com http://janaagraha.org/rahul/elastic/news.html A small site here. It was designed with 800*600 in mind (I'm almost afraid to say that, given the recent discussion on fixed/fluid width sites that the Web-Design list has seen). I've used Operas built in small-screen viewer, and so on to try and see how it looks in as many different devices/browsers. I would appreciate it if people with Macs, and older versions of Internet Explorer could take a quick look and see whether everything looks decent. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Stretching Too Much in IE
Using Mac OS 10.4.2, your page looks fine in Safari 2.0.1 looks good in Firefox 1.5 b1 - but the yellow lower portion of the chipotle box (only) protrudes to the right about 6px looks good in IE 5.2.3 - but to the right of both headlines (Iron Giant / I like Ray) is a white, borderless liquid box that covers the grey areas behind it. I'll leave the fixes to someone with more experience than I. http://www.christianziebarth.com/rent/mockup.html I would like to get it to work in IE the way that it is in Netscape. Anybody looking at this page in these two browsers should be able to figure out what I am talking about but feel free to ask questions if necessary. BTW, I have no idea how this page is performing in any Mac browser. Thanks. Christian Ziebarth __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Newbie probs with css layout on IE
I'm attempting to re-design a website using CSS layout. It looks fine
in Safari, Opera (Mac) and FireFox (Mac/PC), but not IE (Mac/PC). I've
identified 4 rendering issues, I'll mention the most glaring 2 here.
No doubt my issues have been addressed in this list, but i've done a
bunch of reading, and am not sure how to describe the issues in a
search string, so with apologies for asking the
already-answered-someplace...
PROB 1: Floated img 'hangs down' below parent container.
I thought I'd found the fix in 'How To Clear Floats Without Structural
Markup' from www.positioniseverything.net, and added the 'fix' code to
my CSS, but no improvement. That fix calls for a class selector, but I
used an ID selector since my parent div's HTML used ID. I don't think
this is why the fix doesn't work, 'tho, 'cuz I tried the other way
also.
Somewhat related to this problem: It would be great to find a
workaround for IE's failure to support min-height for pages with
longer nav-column than content (instead of a bunch of br /'s).
PROB 2: On a couple of pages the text displays as if it's in a narrow
td (but it isn't). I have no idea why.
All is illustrated here: http://www.vsi.cape.com/~dagnew/arc/test.php
Below is the fix I added to my CSS (I'll gladly post all the CSS if
someone nibbles at this).
Thanks in advance to any and all suggestions.
#content {
margin:0 10px 0 168px; /* INTERDEPENDENT with */
padding: 0; /* */
background-color: #fff;
border-left: 1px solid gray;
border-top: 1px solid gray;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
}
#contentbody:after { /* PRIMARY CONTENT AREA */
min-height: 430px; /* to avoid using br / to keep footer down - but
NG in IE */
/* FIX to force IE to vertically expand div to accomodate imgs: */
content: .;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* FIX to force IE to vertically expand div to accomodate imgs: */
#contentbody {
display: inline-table;
padding: 6px; /* disabling didn't fix IE probs */
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
