Re: [css-d] continuity rounded corners with sliding doors navigation
Used this guys inverted tab design as inspiration (Roger Johansson): http://www.456bereastreet.com/lab/inverted_tabs/ http://arihoj.freehostia.com/css/upsideDownSlidingDoors/test3/slidingdoors1.html They look almost the same, but 2nd is expandable (but at expense drop shadows are less 'clean' looking). Gonna try to add the extra markup to get it working with IE later and change design to my own :) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] help with moving menu
I just started uploading the code for the cart design I've been working on and have discovered that in one of the views the left menu is jumping on top of the content and pushing the right column content to the bottom. I have stared at this for hours but can't figure out why it isn't working. Can anyone see something here that I can't?? I would rewrite the entire bit of code for this section, but I don't want to try that until I can figure out what is wrong with the original code (this part of the template between the cont div is from the original cart code) This is a category page (which is correct) http://209.59.136.73/shop/index.php/action/category/id/1/ and this is a product page (with the left menu suddenly on top of everything) http://209.59.136.73/shop/index.php/action/item/id/1/ The style is embedded into the code (function of the cart software). Thank you for the help!! Robin~ www.diaperfreebaby.org - due to launch at any moment __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help with moving menu
Wonderbaby Designs wrote: This is a category page (which is correct) http://209.59.136.73/shop/index.php/action/category/id/1/ and this is a product page (with the left menu suddenly on top of everything) http://209.59.136.73/shop/index.php/action/item/id/1/ Source-code HTML) in both pages are such a sorry mix of non-valid code and element-nesting, that hunting for one non-working part would be a waste of time. Validate and correct the source-code first. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Sidebar Menu Playing Up!
Good Morning All I hope you are all well. I have a slight problem with a menu. http://www.stwinnowceschool.info/ http://www.stwinnowceschool.info/wp-content/themes/iconschool/style.css I have copied the styling from this site: http://woodland.lostwithiel.org.uk/ http://woodland.lostwithiel.org.uk/includes/templates/woodland/css/stylesheet.css But as you can see the result is not the same. Any ideas why not please? Thanks. -- Rich http://www.cregy.co.uk Embracing what God does for you is the best thing you can do for him. Romans 12 v 1 __ 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] Works in IE7, Mozilla, Opera, but fails IE6
~davidLaakso wrote: The above is just a start. ...but an extremely good one. IE6 never was any good at percentage-calculations, and having a page that only works when users provide a 1280 wide window is not a good design solution - regardless of browser. Validate the markup. ...and use, and mark up for, a proper doctype if you want IE/win in on the team. XHTML 1.1 *should not* be served as 'text/html'... http://www.w3.org/TR/xhtml-media-types/#summary ...and IE/win doesn't understand the correct 'application/xhtml+xml', so *no* IE/win version should be able to render that page at all with the present doctype. In the meantime, some kind soul on the list may provide all the secret weapons you really need for IE6. The secret weapon for making layouts work in IE6 is to provide valid, sensible and well organized source-code and equally sensible CSS - the same as for other browsers. Most IE6 bugs are gone under such conditions, and the remaining bugs are easier to sort out and kill. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Check first css website
Hello, I'm new here, hello everyone. I build my first website with css: http://www.anderson-partners.nl There are a few problems which I cannot fix: I want a max width on my content. Including ie6 if this is possible. The navigation tab must stay on highlighted when it is selected (without php). I use templates and cannot use this tutorial: http://alistapart.com/articles/keepingcurrent/ because I am bad in PHP. The navigation is placed in a template. My client will change this navigationlist in Contribute. There is a problem in ie with window resize. Probably I must change something on the floating, padding, etc. Thanks in advance for any useful help. Greetings, - Ranja: illustrative design [EMAIL PROTECTED] http://www.anjaranja.nl - __ 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] IE 6 - Something wrong with my boxes?
So, I've been working on this site lately, and the CSS is really starting to bug me. In particular take a look at the left page area. Half of the content is chopped off, and I can't quite figure out why. The site was designed mostly with firefox, so if you want to see the way it should look, check there. I have already tried playing with overflow but it seems any element positioned left of the #leftpage div is getting chopped off. Any suggestions would be greatly appreciated. http://www.talentofrockford.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] How do I force opposed floats (left and right) to bottom align.
Hi. I'm trying to get two bits of text to sit on opposite sides (left/right) of a header, and various sources suggest using the opposing floats method. The problem that I have with that is that the opposing floats top align (which becomes apparent when the text sizes differ. In order to show what I'm talking about, I've set up example code from the aListApart website example here: www.sourceworks.co.uk/aListApartSplittingTheDifference and the example code from the peach pit website exandable rows example (by Dan Cederholm) here: www.sourceworks.co.uk/peachpitExpandableRows In both cases, the smaller text (on the right) is top aligned, whereas what I'm trying to achieve is to bottom align the text on the right. All of the examples on http://www.positioniseverything.net/easyclearing.html are top-aligned too, so that doesn't appear to help. All suggestions gratefully received... Jaime __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How do I force opposed floats (left and right) to bottom align.
On 3/13/07, j t [EMAIL PROTECTED] wrote: Hi. I'm trying to get two bits of text to sit on opposite sides (left/right) of a header, and various sources suggest using the opposing floats method. The problem that I have with that is that the opposing floats top align (which becomes apparent when the text sizes differ. I found another suggestion on this page: http://www.communitymx.com/content/article.cfm?cid=529B0 (written by John Gallant and Holly Bergevin) which talks about using absolute positioning. I've set up an example here: http://www.sourceworks.co.uk/communityMxExample This is great, apart from how the text disappears off the top of the page when I manually increase its size. This (I guess) is due to the containing box not expanding to enclose its contents (which in turn is because the contents use absolute positioning). Just in case my first post didn't clearly explain what I'm after, here's an ascii-art picture (it should make sense in a monospace font): \ / \/ \/ That's just two different-sized v's sitting on opposite ends of a line. Jaime __ 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] Site Check Please
Hi All I thought I had this site finished but it seems there might be some problems with it. This is what it should look like: http://woodland.lostwithiel.org.uk/Picture1.jpg Can you tell me if you are seeing this please and if not any ideas why please? http://woodland.lostwithiel.org.uk/ http://woodland.lostwithiel.org.uk/includes/templates/woodland/css/stylesheet.css Many thanks. -- Rich http://www.cregy.co.uk Embracing what God does for you is the best thing you can do for him. Romans 12 v 1 __ 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] Opera border bug
On Mar 13, 2007, at 7:09 AM, francky wrote:
I'm working on my first elastic-layout site and Opera is giving me
something I've never seen before. In my h1 declarations, I've added
border-bottom: 1px dotted {color} style. FF, IE 6/7, and Mozilla are
rendering correctly, but Opera is generating these huge colored
blocks
underneath my h1's.
Does switching between em and px cause problems in Opera? The page
is a
protected area, but I've set-up the CSS here,
http://the1912gallery.ehc.edu/testcss.css.
Thanks,
Jed
Hi Jed,
You have given also a border-width of 80%, and that is giving
different
interpretations by Opera and other browsers.
I think the css2.1 specs aren't very clear at this point.
Under 8.5.4 Border shorthand properties:
http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties
percentage values are mention explicitly.
'Percentages: N/A'
Which is not the most clear formulation.
I think that this should be understood as 'does not apply' or
'undefined', as far as CSS 2.1 is concerned.
CSS3 border module is more explicit:
'Percentages: width* of containing block'
http://www.w3.org/TR/css3-border/#the-border-width
The width of the border should be computed based on the width of the
box, the same way as percentage based margins are computed.
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Opera border bug
I wrote: CSS3 border module is more explicit: 'Percentages: width* of containing block' http://www.w3.org/TR/css3-border/#the-border-width The width of the border should be computed based on the width of the box, the same way as percentage based margins are computed. Gah, I missed one sentence there quote '[Border-width doesn't allow percentages in CSS2; should we allow percentages (of the containing block's width) in CSS3?]' /quote Written in red, guess that is why I couldn't see it. :p Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Opera border bug
Philippe Wittenbergh wrote: Gah, I missed one sentence there quote '[Border-width doesn't allow percentages in CSS2; should we allow percentages (of the containing block's width) in CSS3?]' /quote Written in red, guess that is why I couldn't see it. :p Probably :-) So, it looks like Opera treats that percentage-width border in accordance with the not yet recommended CSS3. We at least can't call it an Opera bug then, but rather wait till other browsers either pick up on it or W3C change that part in CSS3. Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How do I force opposed floats (left and right) to bottom align.
http://www.sourceworks.co.uk/communityMxExample This is great, apart from how the text disappears off the top of the page when I manually increase its size. This (I guess) is due to the containing box not expanding to enclose its contents (which in turn is because the contents use absolute positioning). You can make it work fairly well by using one float and one absolute positioned element inside a 100% wide float. Your example reworked... http://www.gunlaug.no/tos/alien/test_07_3660.html regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How do I force opposed floats (left and right) to bottom align.
On 3/13/07, Gunlaug Sørtun [EMAIL PROTECTED] wrote: http://www.sourceworks.co.uk/communityMxExample This is great, apart from how the text disappears off the top of the page when I manually increase its size. This (I guess) is due to the containing box not expanding to enclose its contents (which in turn is because the contents use absolute positioning). You can make it work fairly well by using one float and one absolute positioned element inside a 100% wide float. Your example reworked... http://www.gunlaug.no/tos/alien/test_07_3660.html That's great - thank you! I still wonder, however, whether it's possible to do some kind of bottom alignment when they're both floats, because then I'm guaranteed that the two boxes will never overlap. Once again, thanks for your help. Jaime __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How do I force opposed floats (left and right) to bottom align.
j t wrote: I still wonder, however, whether it's possible to do some kind of bottom alignment when they're both floats, because then I'm guaranteed that the two boxes will never overlap. You can't bottom-align floats reliable. The way I usually solve this is to declare a margin-right on the float, so it can't go into the space occupied by the absolute positioned element. Same example with suitable addition... http://www.gunlaug.no/tos/alien/test_07_3660.html The exact width (value and unit) of such a margin depends on design-decisions, as it is possible to affect the absolute positioned element's width and make it adjust to its environment (its parent). This will indirectly make these two elements adjust to each other, giving you a near perfect visual illusion until the window gets really narrow or the text is made really large. A bit more manipulation of those width and size relations, and it may become almost unbreakable. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE 6 - Something wrong with my boxes?
Looks like those negative margins are getting cutoff. like set margin-left to 0px instead of -30px. Not sure why they are getting cutoff though. Ari __ 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/
[css-d] Further Testing: position: fixed, transparency, and site performance
Hello again, I've had a few days to play around some options regarding the scroll speed of a website redesign I'm working on, and wanted to post some findings. The story so far: the site design has 4 main elements: a university toolbar, a navigation menu, the page contents, and a background image. 3 of the 4 elements were placed using position: fixed; with only the content scrolling. The contents and menu were 10% translucent, and elements overlapped on the screen for aesthetic effect. The problem: on older computers (i.e. my 5-year-old Toshiba Portege tablet), using browsers such as Netscape 8 or Opera 9, the site scrolls so slowly as to be unuable. So I'm looking for ways to have that not be the case. What I've done: This link shows the original condition (article picked because it's a long page with form elements, which seems to be a hard thing to scroll smoothly) http://benedikt.knowlton.ohio-state.edu/default.asp?content=59 I created a series of pages that begin with only the content block, and slowly adds elements back into the mix to see when the slowdown starts happening. All tests were performed on the aforementioned Toshiba tablet PC, Windows XP Tablet PC Edition, connecting via Verizon's EVDO card, browsing in Opera 9.10. Minimal condition: Step 1 - http://benedikt.knowlton.ohio-state.edu/default-fast1.asp?content=59 This page deleted the background image div entirely, and emptied the university toolbar and navigation elements (but left the empty div's in place). The content block is the only div remaining in its original condition, and it has been set to fully opaque. Not surprisingly, this page scrolls immediately. University toolbar: Step 2 - http://benedikt.knowlton.ohio-state.edu/default-fast2.asp?content=59 This page adds the university toolbar. The site slows down -slightly-, but is still acceptable IMO. Step 2a - http://benedikt.knowlton.ohio-state.edu/default-fast2a.asp?content=59 This page swaps the CSS styling on the toolbar to position: absolute; to allow the toolbar to scroll with the content. Scroll speed seems to improve to the same as from step 1. Design-wise, I'm happy losing the university toolbar if it means the site scrolls faster. Minor adjustment: Step 3a - http://benedikt.knowlton.ohio-state.edu/default-fast3a.asp?content=59 This page adds in some source code that shouldn't make it to the rendered page - essentially taking care of special content cases that exist elsewhere on the site. No change in scroll speed is noted. Menu div: Step 4a - http://benedikt.knowlton.ohio-state.edu/default-fast4a.asp?content=59 Here things get interesting. This page adds an h2 element to the menu div, but not the actual navigation menu itself. The h2 is styled via the hideme class to get the label off the screen, but still visible to screen readers like JAWS. With only this label in the menu div, the site does start scrolling more slowly. It's still acceptable, but ominous that just adding text to this div causes such a slowdown. Step 4b - http://benedikt.knowlton.ohio-state.edu/default-fast4b.asp?content=59 The first appearance of the menu items themselves, and things get really ugly. Scroll performance drops so much as to become (IMO) unusable. The menu in this page is an old-school images with JS rollovers affair - which may have something to do with the problem...I think. I did, however, bump the content to the right on this and subsequent pages so that the content doesn't slide over the menu, so there's no overlap. Step 4c - http://benedikt.knowlton.ohio-state.edu/default-fast4c.asp?content=59 This swaps to a more modern CSS-styled-text menu. While the CSS needs to be tweaked (the words in the menu seem to get cropped), I believe everything should pass the validators. Unfortunately, this doesn't result in any speed improvement - things on this page are as slow as they were in version 4b above. So, it doesn't appear that the -images- in the menu are the cause of the problem; which makes a certain sense given the degradation when I put just the h2 element into this div. Step 4d - http://benedikt.knowlton.ohio-state.edu/default-fast4d.asp?content=59 This page is identical to version 4b above (old school image/rollover menu), but with the overlap between content and menu restored. There is still no translucency on the content. The scroll speed between versions 4b and 4d seems to be roughly the same - both unacceptable, but the overlap doesn't seem to slow things down much. Step 4e - http://benedikt.knowlton.ohio-state.edu/default-fast4e.asp?content=59 Working from version 4d above, this re-introduces the translucency from the original condition. Scroll speeds decrease yet again (I'd describe this speed as glacial personally). So the overlapping translucency is definitely a complicating factor. Step 4f -
Re: [css-d] centering list items within a div
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
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
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
On Tue, 13 Mar 2007, David Agnew wrote:
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
That's similar to alternating backgrounds for table rows, a frequently
deployed idea. Unfortunately it requires - in both cases - either extra
class markup or long selectors, and the latter method doesn't work on IE 6
and older.
This method works in most browsers including MSIE 7 5, but MSIE 6 and
5.5 completely ignore the list item background-color(s).
I'm afraid I don't quite see what's happening 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+...
--
Jukka Yucca Korpela, http://www.cs.tut.fi/~jkorpela/
__
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] List Items
How can I modify the amount of space between the bullet in an unordered list and the actual text? Barb [EMAIL PROTECTED] 515-242-5036 __ 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] List Items
Ledvina, Barbara [ED] wrote:
How can I modify the amount of space between the bullet in an unordered list
and the actual text?
Which way?
Officially, it's impossible. All such joy was ripped out of CSS2 and stamped on
by the W3C.
Since list items are block-level elements, you could try placing another block
inside each one, and use their margins to affect the spacing, like:
li div { margin-left: 1em }
ul
lidivHere is some text/div/li
/ul
Adding more space is fine. Removing space (negative margins) is troublesome as
you don't actually know how much space is there (since it's not defined and not
controllable) and you might overrun the bullet.
__
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] IE display problems
Hi Please can someone help me sort out the Internet Explorer problems. A couple of alignment issues in the header and fonts not displaying in bold http://www.philturner-uk.com/kruger/ Thanks Kind Regards Phil Turner FREELANCE CREATIVE TEL: 0161 439 1669 Chartered Graphic Designer MCSD BA Hons [EMAIL PROTECTED] http://www.philturner-uk.com HELP SAVE THE PLANET http://www.yourplanetneedsyou.org __ 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] IE 6 - Something wrong with my boxes?
Interesting... Played with your suggestions, got #leftpage positioned 40px left of where it was and added a 40px padding-left, still seems to hold up in IE. I'm well aware of the font-size issue and everything overflowing, the graphic designer on the project doesn't want to spend the time to cut up the graphics just yet. For now, we will hope that our users aren't font-size 150% :) Also, I've heard of the pngfix.js way of fixing PNG in img tags, is there a hack for ie6 for PNG's in the background-image property? Web Developer wrote: Looks like those negative margins are getting cutoff. like set margin-left to 0px instead of -30px. Not sure why they are getting cutoff though. Ari __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] files structure opinion
Hi I would like to know the opinions from CSS coders about website file structure. How do you organize your files? Advantages and disadvantaged? My approach: /images/ /tools/ /css/ /css/main.css /css/menu_item_1.css /css/menu_item_2.css ... /css/menu_item_N.css /menu_item_1/index.php /menu_item_2/index.php ... /menu_item_N/index.php /index.php /header.php /footer.php - main.css for global specifications; - css file for each page; - every page include the header.php,footer.php,i.e.,fixed elements Phillip __ 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] clearing only a nested float
Hi there, I am trying to clear after a right-float inside a div which has something floating to it's right too. E.g.: div id=1 div id=2 ul id=2.1 / pSome text/p /div 1 floats to the right of 2, and 2.1 should align with the right border of 2, so I floated it right. This works, even if 2.1 has nothing to float right against. The problem is when I try to add the p, since it will appear left of 2.1. However, I want it to appear *below*. But if I set clear:right on the p, it also clears the right wrt 1 and thus p will appear at the very bottom of the page, below the content of 1 (but inside 2). Example page: http://martin-krafft.net/new/ [valid] CSS: http://martin-krafft.net/new/css/base.css [valid] How can I achieve what I want, without assuming the height of the ul (and ideally without hardcoding a width)? I tried making the ul (2.1) inline and text-aligning it right, but that does not work either. And neither does position:relative;right:0 -- martin; (greetings from the heart of the sun.) \ echo mailto: !#^.*|tr * mailto:; [EMAIL PROTECTED] spamtraps: [EMAIL PROTECTED] whoever fights monsters should see to it that in the process he does not become a monster. and when you look into an abyss, the abyss also looks into you. - friedrich nietzsche signature.asc Description: Digital signature (GPG/PGP) __ 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] IE display problems
Phil Turner wrote: Hi Please can someone help me sort out the Internet Explorer problems. A couple of alignment issues in the header and fonts not displaying in bold http://www.philturner-uk.com/kruger/ Thanks Kind Regards Phil Turner The page is not contained within its wrapper (all browsers). I think someone offered one method for correcting the page cross-browser (and the font issue) yesterday. Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] clearing only a nested float
also sprach martin f krafft [EMAIL PROTECTED] [2007.03.13.2110 +0100]: http://martin-krafft.net/new/ [valid] CSS: http://martin-krafft.net/new/css/base.css [valid] Never mind that IE* barfs on the page big time. I am just doing some design studies right now and will probably simplify the layout by much later. -- martin; (greetings from the heart of the sun.) \ echo mailto: !#^.*|tr * mailto:; [EMAIL PROTECTED] spamtraps: [EMAIL PROTECTED] the less you know about computers the more you want micro$oft! -- micro$oft ad campaign, circa 1996 (proof that micro$oft's advertising _isn't_ dishonest!) signature.asc Description: Digital signature (GPG/PGP) __ 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] Opera border bug
Gunlaug Sørtun wrote: Philippe Wittenbergh wrote: Gah, I missed one sentence there quote '[Border-width doesn't allow percentages in CSS2; should we allow percentages (of the containing block's width) in CSS3?]' /quote Written in red, guess that is why I couldn't see it. :p Probably :-) So, it looks like Opera treats that percentage-width border in accordance with the not yet recommended CSS3. We at least can't call it an Opera bug then, but rather wait till other browsers either pick up on it or W3C change that part in CSS3. Georg According to this, and for the time being, the css-validator with option css3 is saying yes to the question: '[... should we allow percentages (of the containing block's width) in CSS3?]' w3c css-3 validating of testpage http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fhome.tiscali.nl%2Fdeveloperscorner%2Fcss-discuss%2Ftest-operadots.htmlwarning=2profile=css3usermedium=all Molly the Cat will like it: Opera ahead for the future! ;-) francky btw: maybe next question for w3c: [css2 doesn't say what is the definition of a 'dot' - should we allow UA's to have their own definition like now (FF and Opera: a dot is a square dot; IE: a dot is a round dot) ?] screenshot http://home.tiscali.nl/developerscorner/css-discuss/images/just-a-dot.gif :-) __ 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] UL margins
Please help me figure out why there is extra space to the left of my menu list in FireFox. Displays correctly in IE7. Thank you. http://bananaboxes.net -Travis Killen __ 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] site check: 24-10reading.nl A PostScript
Gunlaug Sørtun wrote: http://24-10reading.nl/ Too many back and forth corrections between browsers for my taste, so I leave the rest to others. Georg, what do you mean exactly with this? Erik __ 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
On Tue, 13 Mar 2007, David Agnew wrote:
#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
That's because e.g. the third list item also matches a selector like
li+li. It is a li element that follows a li element. Using contextual
selectors like li:first-child+li you could make the rule apply to even
items only, but I'd say it really gets more confusing than the use of
class attributes (even though it would be cleaner in principle to handle
this purely inside CSS, without polluting the markup with class
attributes that have no logical meaning).
--
Jukka Yucca Korpela, http://www.cs.tut.fi/~jkorpela/
__
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] List Items
Ledvina, Barbara [ED] wrote: How can I modify the amount of space between the bullet in an unordered list and the actual text? Set suitable paddings on the ul and the li... http://www.gunlaug.no/tos/alien/test_07_3670.html regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] UL margins
Travis Killen wrote: Please help me figure out why there is extra space to the left of my menu list in FireFox. Displays correctly in IE7. Thank you. http://bananaboxes.net Declare 'padding: 0;' on ul. Firefox has default paddings on lists, and so have most other non-IE browsers. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] relatively positioned float with background is stuck (IE6)
This float is relatively positioned, it has a percentage width, and it
should move to the right due to a left margin.
.c {
position: relative;
float: left;
display: inline;
width: 50%;
margin-left: 100px;
background: gray url(bg.gif) no-repeat 0 0;
}
body
div class=c
nbsp;
/div
/body
The problem with IE7 is that it does not move, initially.
http://www.satzansatz.de/cssd/prbgbug.html
To make it move, the window has to be resized a little.
The bug does not occur if the float has no background image attached.
But I need the bg-img, the float, the pos.relative, the margin shift,
the percentage width (and display:inline is added to prevent the doubled
margin bug.)
Can anyone help me, point me to a bug description, or to a fix maybe?
Thanks,
Ingo
--
http://www.satzansatz.de/css.html
__
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] site check: 24-10reading.nl
~davidLaakso wrote: Erik Visser wrote: A site check please for anoter site i recently finished: http://24-10reading.nl/ Any remarks, also on the design are very welcome. Thanks, Erik Visser She did well on my end (xp) in ie/7., opera/9.1, and ff (version whatever it is). In ie/6.0 at /text-size largest/, the vertical logo disappears and there is no horizontal scroll-bar with which to retrieve it. See screen shot: http://chelseacreekstudio.com/ca/cssd/ev.gif. i will loook into that one. any idea on why the scrolllbar doesn't appear? (or maybe better: why the left side is chopped off?) However, with both of your sites (and this is a personal opinion that is not shared by all on this or any other list), I find sites that require both horizontal and vertical scrolling when the fonts are scaled to be bothersome. Ok, vertical scrolling is hard to avoid. That is, when the amount of content rises. With all designs there comes a point where you can't keep the content in the browser window. Isn't it? Then the horizontal scrolling. While keeping the same design, this horizontal scrollbar can only be avoided by not using a min-width. Isn't it? Then it comes up to the design how it keeps up without min-width. Especially the 24-10reading client could not accept the horizontal menu wrapping over 2 lines on smaller browser windows / bigger font sizes. So withouut brekaing the design with a horizontal menu bar there isn't a way to avoid this horizontal scrollbar. Or...? Thanks, Erik __ 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] List Items
Gunlaug Sørtun schreef: Ledvina, Barbara [ED] wrote: How can I modify the amount of space between the bullet in an unordered list and the actual text? Set suitable paddings on the ul and the li... http://www.gunlaug.no/tos/alien/test_07_3670.html regards Georg Ah, too late to send. Well, then more of the same http://home.tiscali.nl/developerscorner/css-discuss/test-bulletspace.html Greetings, francky __ 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] background doesn't fill area border doesn't show
Hi, Here are the two page links: http://www.gentlethreads.com.au/master.html (still in tables) http://www.gentlethreads.com.au/test.html (tableless version) CSS: http://www.gentlethreads.com.au/gentlethreads.css I'm trying to take link 1 above and make it tableless (link 2). My problems are: 1) The background image on the left and right sides of the tabled version do not fill the cell/div in FF but do in IE. In the tableless version the background doesn't go all the way to the bottom in either browser version. 2) There is supposed to be a 3-sided 1px green border around the white box below the image button in the right cell/div and the white box should be aligned centered under the image. In the tabled version/FF http://www.gentlethreads.com.au/master.html the border is there both are correct but IE6 the border doesn't show up. In the tableless version: http://www.gentlethreads.com.au/test.html the border is there in both browsers but the alignment is off. These are the last glitches to work out before one or the other can become a template for the rest of the site. At this point I'm so sick of trying to figure this out that I don't think I care if I have to use tables as long as it works! Please use small bullets if you want to shoot me for saying that. I need to have this done tonight! Your help is greatly appreciated. ÷÷÷ ÷÷÷ ÷ ÷÷÷ Deb Designer @ PBC Web Design com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Opera border bug
francky wrote: Molly the Cat will like it: Opera ahead for the future! ;-) She loves it!!! She is also quite used to seeing Opera in that position ;-) btw: maybe next question for w3c: [css2 doesn't say what is the definition of a 'dot' - should we allow UA's to have their own definition like now (FF and Opera: a dot is a square dot; IE: a dot is a round dot) ?] screenshot http://home.tiscali.nl/developerscorner/css-discuss/images/just-a-dot.gif :-) Haven't they added a 'custom dot' in CSS3..? If not, then we have to demand one. I want mine left-angled ... or maybe diamond-shaped. Oh, well, the 'border-image'[1] property should do. Georg [1]http://www.w3.org/TR/css3-background/#the-border-image -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] site check: 24-10reading.nl
Daniel Beardsmore wrote: ~davidLaakso wrote: However, with both of your sites (and this is a personal opinion that is not shared by all on this or any other list), I find sites that require both horizontal and vertical scrolling when the fonts are scaled to be bothersome. Not just font size but window size. I think every relatively interesting design will have its limits as to how small the window can go before the design breaks up. Personally I aim to make sure anything I do works on 800x600, but for everyone this will vary. Erik, the site you highlighted will go down to about 850px (in Firefox 2) before the first link in the navigation bar starts to go off the side of the window. I don't think that anything in the design requires a window this wide. Everyone's needs vary, but 850px width for such a simple design worries me personally. I agree with you Daniel. In this case it was the client that came up with the basic design. And initially it had even more white space. My client said he likes space and designs with lots of room. I don't know if i can translate this in understandable English, but he said: I want to create a certain image. And create a certain athmosphere. And thus i told him that in most cases (if not an art work) the primary goal of a website is to provide information to the visitor. And preferable in way so that the visitor can take that info as easy as possible. And that scrolling is very irritating to a lot of people. So at first i made a small version of his design. But he did not like it. It was not breathing the right athmosphere he said. So i expanded the design again until he was satisfied. What can you do if a customer insists? Erik __ 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] List Items
How can I modify the amount of space between the bullet in an unordered list and the actual text? Of course, the most positioning control comes from replacing the bullet with a background image. But then the bullet doesn't resize with the text, which may be an accessibility issue. __ 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] site check: 24-10reading.nl A PostScript
Erik Visser wrote: Gunlaug Sørtun wrote: http://24-10reading.nl/ Too many back and forth corrections between browsers for my taste, so I leave the rest to others. what do you mean exactly with this? Only that I personally found it hard to keep track of what was targeting which browser where and in what order. We all have our preferences when it comes to how stylesheets are organized. Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] site check: 24-10reading.nl
bill scheider wrote: I really like the design of the site; it has a nice, open feel that I like. That's exactly what my cliennt was after. But it takes a lot of space as you noticed. The same as David noted, in IE6 on xp on my machine, the left side logo starts to disappear at text-size 'large'. At text-size 'largest', the logo is gone and much of the information (on the home page, at least) also falls off the left side and, again as David said, is irretrievable. Screenshot on ie6 at text largest: http://first-encounter-design.dreamhosters.com/imgs/24-10.jpg I primarily develop with firefox on linux and mac. So i have to dig into that one. And i guess it is something that should be taken care of, isn't it? (to be honest, I thought IE 6 wasn't able to zoom so i never tested for it stupid eh?) I'd also like to echo what Daniel said about window size. I'm not as averse to a horizontal scrollbar as David is but I sometimes think they're an inconvenience that I can minimize with a little foresight. When designing a site that can be scaled, I design so I won't get a horizontal scrollbar at about 800px wide at medium text in IE David already mentioned the same; thus 800px is a generally accepted rule (of the thumb?) for width without scrolling? and then, if possible, try to not have critical content, i.e., navigation, primary text, fall off if the text is zoomed to large. That's one of the reasons the home disappeared from the menu bar. One other comment I have about your site: I know it's a convention, but it took me a bit to realize that the way back to the home page was through the link on the logo. A home navigation button would have helped. And there quite a couple of places with the link: - terug naar reading Utrecht - Which is the same as home but then i a sentence of the Dutch language. Thanks, Erik __ 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] background doesn't fill area border doesn't show
PBC Web Design wrote:
http://www.gentlethreads.com.au/master.html (still in tables)
http://www.gentlethreads.com.au/test.html (tableless version)
I'm trying to take link 1 above and make it
tableless (link 2). My problems are:
1)
#leftcolumn, #middlecolumn, #rightcolumn {padding-bottom: 1px;
margin-bottom: -1px;}
#content {overflow: hidden;}
* html #content {overflow: visible;}
2)
#rightcolumn {text-align: center;}
#rightcolumn img {vertical-align: bottom;}
These are the last glitches to work out before
one or the other can become a template for the
rest of the site. At this point I'm so sick of
trying to figure this out that I don't think I
care if I have to use tables as long as it
works! Please use small bullets if you want to
shoot me for saying that. I need to have this done tonight!
I'll hit you with a CSS sledgehammer instead :-)
Anyway, if you plug in the additions above, your table-less version will
end up looking like this...
http://www.gunlaug.no/tos/alien/pbc/test_07_3690.html
...which shouldn't be too far off. Nice flowers.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] site check: 24-10reading.nl A PostScript
Gunlaug Sørtun wrote: Erik Visser wrote: Gunlaug Sørtun wrote: http://24-10reading.nl/ Too many back and forth corrections between browsers for my taste, so I leave the rest to others. what do you mean exactly with this? Only that I personally found it hard to keep track of what was targeting which browser where and in what order. We all have our preferences when it comes to how stylesheets are organized. ok, i get it what i basicly did was: 1. take one true layout [1] as base layout this provided 1 css file: style.css all positional css additions are added to style.css 2. for the menu i added Ruthsarian Menus [2] to the layout this provided a second .css file: menu.css which contains everything related to the menu 3. then for visual presentation css i added the makeup.css 4. for ie only css: ie.css So my approach is: take an existing webstandards compliant css layout that have proofed itself (till some extend) and take out or add code blocks and css (like the ruthsarian menu) to this base layout. Why did i choose this approach? Since - i have really limited time - and i'am not that quick at learning it all by myself I decided i better use a good base prooven css layout and from there: - make websites - read a list like this one - read some books - look at tutorials - etc. This might be a slow road for really mastering webdevelopment (xhtml / css / etc.). But it makes it possible (in the time available to me) to better myself while developing websites for customers. Any thoughts from the gurus on this appproach? Thanks, Erik [1] http://www.positioniseverything.net/articles/onetruelayout/ [2] http://webhost.bridgew.edu/etribou/layouts/rMenu/index.html __ 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] site check: 24-10reading.nl
Daniel Beardsmore wrote: Hm ... I am no expert, but the design seems simple enough to me that it should reduce in width quite a bit more. agreed lots of whitespace everywhere to reduce I don't know why it stops at ~850px. me neither, but i should look into that later. Personally I find the site a tad bit empty, bare ... Like it's missing something. i totally agree, but when a client insiists.. thanks, Erik __ 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] site check: 24-10reading.nl
sorry, this mail was meant to be sent offlist Erik Visser wrote: Daniel Beardsmore wrote: Hm ... I am no expert, but the design seems simple enough to me that it should reduce in width quite a bit more. agreed lots of whitespace everywhere to reduce I don't know why it stops at ~850px. me neither, but i should look into that later. Personally I find the site a tad bit empty, bare ... Like it's missing something. i totally agree, but when a client insiists.. thanks, Erik __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background doesn't fill area border doesn't show
At 04:30 PM 3/13/2007, you wrote: I'll hit you with a CSS sledgehammer instead :-) Anyway, if you plug in the additions above, your table-less version will end up looking like this... http://www.gunlaug.no/tos/alien/pbc/test_07_3690.html ...which shouldn't be too far off. Nice flowers. I'll take the hit in the head, bless you so much for helping so quickly. I'm about totally out of a very full head of hair and this project is due in a few hours. I'm going to try your fixes right now. What you made it look like is exactly what it's SUPPOSED to look like :) Thanks for the compliment - but I can't take credit. The design itself was created by another designer, I'm just the subcontractor for a few things. I'll pass it along to her, though. I thought it was real pretty myself. Ugh .. forgot to change the TO to CSS-D addy - anyway - it works and it looks great - THANKS AGAIN! ÷÷÷ ÷÷÷ ÷ ÷÷÷ Deb Designer @ PBC Web Design com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] relatively positioned float with background is stuck (IE6)
Ingo Chao wrote:
This float is relatively positioned, it has a percentage width, and it
should move to the right due to a left margin.
.c {
position: relative;
float: left;
display: inline;
width: 50%;
margin-left: 100px;
background: gray url(bg.gif) no-repeat 0 0;
}
body
div class=c
nbsp;
/div
/body
The problem with IE7 is that it does not move, initially.
http://www.satzansatz.de/cssd/prbgbug.html
To make it move, the window has to be resized a little.
The bug does not occur if the float has no background image attached.
But I need the bg-img, the float, the pos.relative, the margin shift,
the percentage width (and display:inline is added to prevent the doubled
margin bug.)
Can anyone help me, point me to a bug description, or to a fix maybe?
Thanks,
Ingo
Hi Ingo,
Yes, all hasLayout tricks failed; IE is always in for a joke! ;-)
Seems something like the opposite of the doubled margin bug, or a
peekaboo without a link to hover...
I found as a fix: isolate the problem, i.e. pulling the background out
of the class=c div, and pushing it in an inner div.
testpage
http://home.tiscali.nl/developerscorner/css-discuss/test-prbgbug.html
Hope you can apply this wrapper in your case, and no other IE troubles
will appear.
Greetings,
francky
__
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] Site Check Please
Richard Brown wrote: Hi All I thought I had this site finished but it seems there might be some problems with it. This is what it should look like: http://woodland.lostwithiel.org.uk/Picture1.jpg Can you tell me if you are seeing this please and if not any ideas why please? OK, three things: div id=navMainWrapper must lose the br because this causes IE to expand that div to a whole line. Use div id=... class=clearBoth instead if you find you need a clear, but I don't think you do. #navMainWrapper needs these lines removing: height: 1%; width: 100%; They also cause that div to be the height of one line. Removing these lines, or the br class=clearBoth alone does not cure it: you must remove the above lines AND the br. Otherwise, that div becomes a grey block the height of one line. Finally, the image tag in div id=logo is broken and leads to an 'x' (missing image) in IE. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Sidebar Menu Playing Up!
Richard Brown wrote: Good Morning All I hope you are all well. I have a slight problem with a menu. http://www.stwinnowceschool.info/ http://www.stwinnowceschool.info/wp-content/themes/iconschool/style.css I have copied the styling from this site: http://woodland.lostwithiel.org.uk/ http://woodland.lostwithiel.org.uk/includes/templates/woodland/css/stylesheet.css But as you can see the result is not the same. Any ideas why not please? Um, you might want to validate the code, mate :P e.g. li form method=get id=searchform action=http://www.stwinnowceschool.info/; divinput value= name=s id=s type=text input id=searchsubmit value=Search type=submit /div /form /li Where did that li come from? That seems to really confuse Firefox. Remove that and the search form does start on a new line as it should. Also, you have a /br in there, which is what? __ 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] relatively positioned float with background is stuck (IE6)
francky wrote:
Ingo Chao wrote:
This float is relatively positioned, it has a percentage width, and it
should move to the right due to a left margin.
.c {
position: relative;
float: left;
display: inline;
width: 50%;
margin-left: 100px;
background: gray url(bg.gif) no-repeat 0 0;
}
body
div class=c
nbsp;
/div
/body
The problem with IE7 is that it does not move, initially.
http://www.satzansatz.de/cssd/prbgbug.html
To make it move, the window has to be resized a little.
The bug does not occur if the float has no background image attached.
But I need the bg-img, the float, the pos.relative, the margin shift,
the percentage width (and display:inline is added to prevent the
doubled margin bug.)
Can anyone help me, point me to a bug description, or to a fix maybe?
Thanks,
Ingo
Hi Ingo,
Yes, all hasLayout tricks failed; IE is always in for a joke! ;-)
Seems something like the opposite of the doubled margin bug, or a
peekaboo without a link to hover...
I found as a fix: isolate the problem, i.e. pulling the background out
of the class=c div, and pushing it in an inner div.
testpage
http://home.tiscali.nl/developerscorner/css-discuss/test-prbgbug.html
Hope you can apply this wrapper in your case, and no other IE troubles
will appear.
This fix does solve for the example, probably not for the original
problem, but I will try, thank you very much. It's a column, its height
is not easy to determine, and the proposed inner div would have to have
the same height ...
I'm already shifting the column by a .c{left: percentage value} offset.
The margin for the column is just a small negative backside margin to
compensate for rounding errors. The stuck and release of the small
correction was barely visible, but the column started in a dropped
position, and moved into place after a resize of the window. Took me
ages to stumble over the cause, the background image.
Another div for all columns just to compensate for a 1 pix rounding
problem ... sigh.
Ingo
--
http://www.satzansatz.de/css.html
__
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] relatively positioned float with background is stuck (IE6)
Ingo Chao wrote: http://www.satzansatz.de/cssd/prbgbug.html This fix does solve for the example, probably not for the original problem, but I will try, thank you very much. It's a column, its height is not easy to determine, and the proposed inner div would have to have the same height ... Another div for all columns just to compensate for a 1 pix rounding problem ... sigh. Is it possible that you can use this reduced version in your 'real world' layout... http://www.gunlaug.no/tos/alien/test_07_3690.html ? Would save you from having extra divs, and looks rock steady in my IE6. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] List item markers in different colour using pure CSS?
On 3/12/07, Barney Carroll [EMAIL PROTECTED] wrote:
So if I were to have a list of black text with red numeric markers,
would I be forced to create a span within each li, then set the li's
colour to red and the span back to black?
Here it is with pure CSS. It works in FF 2 and Opera 9 on Ubuntu, and
presumably on other platforms. A minor, non-standards compliant
browser doesn't work with the style sheet, so we send it something
more palatable via conditional comments.
--Chris
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd;
html
head
style
ol {
counter-reset: list;
list-style-type: none;
}
li:before {
content: counter(list) . ;
counter-increment: list;
color: #F00; /* and/or other styling... */
}
/style
!--[if IE]
style
ol {
list-style-type: decimal;
}
/style
![endif]--
/head
bodyol
lifoo/li
libar/li
libaz/li
/ol
/body
/html
__
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
If you can afford a little javascript, jQuery can solve that pretty
quickly...
$(document).ready(function(){ $(#containAbt .features
li:even).addClass(even); });
-or-
$(document).ready(function(){ $(#containAbt .features
li:even).css({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/
Re: [css-d] relatively positioned float with background is stuck (IE6)
Gunlaug Sørtun schreef: Ingo Chao wrote: http://www.satzansatz.de/cssd/prbgbug.html This fix does solve for the example, probably not for the original problem, but I will try, thank you very much. It's a column, its height is not easy to determine, and the proposed inner div would have to have the same height ... Another div for all columns just to compensate for a 1 pix rounding problem ... sigh. Is it possible that you can use this reduced version in your 'real world' layout... http://www.gunlaug.no/tos/alien/test_07_3690.html ? Would save you from having extra divs, and looks rock steady in my IE6. regards Georg That's a stable release over here too! :-) In the meantime also an instable illustrating experiment for the IE-documentation ;-) http://home.tiscali.nl/developerscorner/css-discuss/test-IE-percentages.html Greetings, francky __ 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] IE 6 - Something wrong with my boxes?
hmmm anyone know AlphaImageLoader isn't working for him? I tested the method as well by going to http://www.satzansatz.de/cssd/tmp/alphatransparency.html in IE6 and transparency failed on that age in IE=6. any ideas? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Sidebar Menu Playing Up!
Hi Daniel On 13/03/07, Daniel Beardsmore [EMAIL PROTECTED] wrote: I hope you are all well. I have a slight problem with a menu. http://www.stwinnowceschool.info/ http://www.stwinnowceschool.info/wp-content/themes/iconschool/style.css But as you can see the result is not the same. Any ideas why not please? Um, you might want to validate the code, mate :P Where did that li come from? That seems to really confuse Firefox. Remove that and the search form does start on a new line as it should. Also, you have a /br in there, which is what? Duly validated and yes it is working fine now. Many thanks. -- Rich http://www.cregy.co.uk Embracing what God does for you is the best thing you can do for him. Romans 12 v 1 __ 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] Hiding div class in print stylesheet
Hi,
I have a print stylesheet on a site I'm making.
div#footer *{
display: none;
}
This hides div id=footer but how would I get it to hide div
class=footer I tried the following (below) but it didn't work.
div.footer *{
display: none;
}
.footer *{
display: none;
}
Joanne
__
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] Hiding div class in print stylesheet
On Mar 14, 2007, at 2:16 PM, Joanne wrote:
I have a print stylesheet on a site I'm making.
div#footer *{
display: none;
}
This hides div id=footer
No it doesn't. It hides all the descendants of div#footer. That is
what the * selector does there.
Depending on the formatting (e.g. padding+ border) applied to that
div, it will still appear on the page.
but how would I get it to hide div
class=footer I tried the following (below) but it didn't work.
div.footer *{
display: none;
}
.footer *{
display: none;
}
In both cases, the same thing applies. You are selecting all
descendants of an element with class footer
What you probably want is
#footer {display:none;}
.footer {display:none;}
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] List Items
On Tue, 13 Mar 2007, Kenny Graham wrote:
How can I modify the amount of space between the bullet in an
unordered list and the actual text?
Of course, the most positioning control comes from replacing the
bullet with a background image.
There are various ways to create bulleted lists in the visual sense, with
great flexibility, but they are mostly based on methods that turn the list
into non-bulleted and then add something that looks like a bullet. The
method using a background image is commonly used, but its drawbacks
include the loss of anything bullet-like when image display is turned off
_or_ background images are not used, as is normal in printing.
But then the bullet doesn't resize
with the text, which may be an accessibility issue.
A normal bullet created with ul by default or by using list-style
properties in CSS doesn't resize either. This is an odd feature in
browsers, but nothing in CSS specs says that they _should_ resize.
Using list-style-type: none to suppress normal bullets and
li:before { content: ...; ... } would give flexibility in using
different characters as bullets, in spacing between bullet and list item
text, and in bullet resizability. But it's not feasible on web pages,
since IE does not support generated content.
So the most flexible and robust way, though perhaps awkward and
theoretically impure, is to use list-style-type: none and bullets included
in document content and marked up as elements, i.e.
lispan class=bullet.../span text/li
For limited styling ambitions, you could dispense with the span markup,
using e.g. li:first-letter { padding-left: 0.5em; }
--
Jukka Yucca Korpela, http://www.cs.tut.fi/~jkorpela/
__
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/
