Re: [css-d] Equal heights solutions
2009/3/16 Nancy Johnson njohnso...@gmail.com: ... but I'm still looking for an ideal solution to equal heights problem ... There is no ideal solution. Maybe this is a helpful read: http://www.satzansatz.de/cssd/companions.html Ideally, your layout idea would adapt to suit the constraints of CSS implementations. That means, it would be probably better to design without the need for equal height columns. Ingo __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] ul, p after image floating left
Hi all i have a question regarding behaviour of unordered lists beside a left-floating image compared to a another element like paragraph. here is the code: div class=anyContainer img src=anyimage.jpg style=float: left;/ pThis is any text on the right side of the image/p ul liThis is a list entry behaving badly/li liThis is another list entry behaving badly/li /ul /div this happens: the paragraph's text starts exactly after the image, same does the list's text, but not the bullets, they are *over* the image itself (hidden in ie7), and that's not what I want 'workarounds': - list-style-position: inside moves the bullets out of the image, but i do not want inside bullets. - fiddling with margins: i could set left margin for the ul, but what's if there is an image with different width or no image at all? i wonder why these lists are rendered as they are, because i can not imagine a case for which this behaviour is useful. any help/good workarounds/comments appreciated! thanks -peter __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ul, p after image floating left
On Mar 18, 2009, at 5:15 PM, Göldi wrote: i have a question regarding behaviour of unordered lists beside a left-floating image compared to a another element like paragraph. here is the code: div class=anyContainer img src=anyimage.jpg style=float: left;/ pThis is any text on the right side of the image/p ul liThis is a list entry behaving badly/li liThis is another list entry behaving badly/li /ul /div this happens: the paragraph's text starts exactly after the image, same does the list's text, but not the bullets, they are *over* the image itself (hidden in ie7), and that's not what I want 'workarounds': - list-style-position: inside moves the bullets out of the image, but i do not want inside bullets. - fiddling with margins: i could set left margin for the ul, but what's if there is an image with different width or no image at all? That is a difficult problem for which there are no perfect solutions. Due to the float, the line-box for the paragraphs and the list items are pushed to the side. That is the correct behaviour. But the list markers are not really part of the line-box, and what browsers do is quite a bit of a fudge. IE 8, at least the copy I have open (running on Windows 7 beta) leaves the list markers at the left side (on top of the left floated block). That is, unlike other browsers, it doesn't move the list markers at all. For most browsers (not IE 8 beta), setting a big enough margin-right on the left-floated block will (partially) solve the problem. Something like 1em ~ 1.5em should be good. The list markers will still be 'out of alignment', hanging outside of the left edge of the text blocks (parag and list-items). There has been quite a bit of discussion on the CSS Working group mailing list (www-style) about this issue, without reaching a definite resolution. What IE 8 does is not wrong per the spec, what other browsers do is not really correct, but matches a bit more author expectations. Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ul, p after image floating left
hi peter, in addition to Philippes explanation: div img src=anyimage.jpg width=250 height=100 style=float: left; margin-right:2em; / pThis is any text on the right side of the image/p ul style=overflow:hidden; padding-left: 1em; liThis is a list entry behaving badly/li liThis is another list entry behaving badly/li /ul /div seems to work everywhere (i.e. XP, IE6, 7, Win7, Mac etc) tina Von: Göldi peter.goe...@gmail.com Datum: Wed, 18 Mar 2009 09:15:01 +0100 An: CSS-Discuss css-d@lists.css-discuss.org Betreff: [css-d] ul, p after image floating left Hi all i have a question regarding behaviour of unordered lists beside a left-floating image compared to a another element like paragraph. here is the code: div class=anyContainer img src=anyimage.jpg style=float: left;/ pThis is any text on the right side of the image/p ul liThis is a list entry behaving badly/li liThis is another list entry behaving badly/li /ul /div this happens: the paragraph's text starts exactly after the image, same does the list's text, but not the bullets, they are *over* the image itself (hidden in ie7), and that's not what I want 'workarounds': - list-style-position: inside moves the bullets out of the image, but i do not want inside bullets. - fiddling with margins: i could set left margin for the ul, but what's if there is an image with different width or no image at all? i wonder why these lists are rendered as they are, because i can not imagine a case for which this behaviour is useful. any help/good workarounds/comments appreciated! thanks -peter __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] box goes down the bottom of the page
Hi, All Please check http://www.soundbowl.com on IE6. You'll found that the main content goes down the bottom of the page. It's OK on IE7 and FF. I found this kind of problem on IE6 for many times. It must be caused by a bug of IE6. Can somebody give me some hint? Thanks __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Equal heights solutions
Ingo Chao ichaoc...@googlemail.com Ideally, your layout idea would adapt to suit the constraints of CSS implementations. That means, it would be probably better to design without the need for equal height columns. to suit the constraints of CSS implementations What is to be the successor to CSS that will actually solve the open problems and enable web designers? Bruce __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ul, p after image floating left
On Mar 18, 2009, at 6:48 PM, Göldi wrote: thanks for your hints. seems to be a problem with no reasonable solution. why are the list markers not part of the box? shouldn't that be changed? i like your approach, tina, problem is if the height of the list is bigger than the image's, the list items below the image are not shifting to the left edge of the surrounding container. There are two options, none of them are perfect: 1. as suggested by Tina, using overflow:hidden (or any trigger for a block formatting context). the list will not wrap under the image 2. omit the overflow:hidden. The list flows under the image. The list- marker, when next to the image, hangs outside of the left edge of the text blocks. http://dev.l-c-n.com/_temp/list-marker-float.html Screenshots: IE 8, win 7 http://dev.l-c-n.com/_b/list-marker-IE8.png Fx3.1b3+ (and other browsers) http://dev.l-c-n.com/_b/list-marker-FX3.1b.png Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Why this page moves?
Sorry for my late reply. I was busy for some days. Thanks for your replies. I found this issue on FF3 on Ubuntu 8.10. Since you all cannot reproduce this problem, I tested again and found it only occurs on one particular profile of FF. I tested on other relatively clean profiles, this issue doesn't occur. Maybe it's the problem of that profile of FF, I installed many add-ons on that profile. Thank for your help. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ul, p after image floating left
thanks for your hints. seems to be a problem with no reasonable solution. why are the list markers not part of the box? shouldn't that be changed? i like your approach, tina, problem is if the height of the list is bigger than the image's, the list items below the image are not shifting to the left edge of the surrounding container. cheers -peter 2009/3/18 Bettina li...@newhouse.at: hi peter, in addition to Philippes explanation: div img src=anyimage.jpg width=250 height=100 style=float: left; margin-right:2em; / pThis is any text on the right side of the image/p ul style=overflow:hidden; padding-left: 1em; liThis is a list entry behaving badly/li liThis is another list entry behaving badly/li /ul /div seems to work everywhere (i.e. XP, IE6, 7, Win7, Mac etc) tina Von: Göldi peter.goe...@gmail.com Datum: Wed, 18 Mar 2009 09:15:01 +0100 An: CSS-Discuss css-d@lists.css-discuss.org Betreff: [css-d] ul, p after image floating left Hi all i have a question regarding behaviour of unordered lists beside a left-floating image compared to a another element like paragraph. here is the code: div class=anyContainer img src=anyimage.jpg style=float: left;/ pThis is any text on the right side of the image/p ul liThis is a list entry behaving badly/li liThis is another list entry behaving badly/li /ul /div this happens: the paragraph's text starts exactly after the image, same does the list's text, but not the bullets, they are *over* the image itself (hidden in ie7), and that's not what I want 'workarounds': - list-style-position: inside moves the bullets out of the image, but i do not want inside bullets. - fiddling with margins: i could set left margin for the ul, but what's if there is an image with different width or no image at all? i wonder why these lists are rendered as they are, because i can not imagine a case for which this behaviour is useful. any help/good workarounds/comments appreciated! thanks -peter __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Equal heights solutions
bruce.som...@web.de wrote: to suit the constraints of CSS implementations What is to be the successor to CSS that will actually solve the open problems and enable web designers? None, since this is about implementation. CSS may need another level, or five, and will probably get them over time. However, that in itself won't help much when it comes to implementation in browsers. We need new generations of browsers and eradication of the old ones. It is after all the old browsers - mainly IE - that stand in the way. So, ask the browser vendors and the end users to enable us, as they're the only ones that can do it. regards Georg -- http://www.gunlaug.no __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Make layout more liquid?
Kim Brooks Wei wrote: Hi People, So, I finally seem to have worked out something with this layout. I've put the type into a resizeable div but it's not as liquid as I would like it to be: when I reduce the browser width the right side of the content div disappears. How could I make it scale better? Or can't I?\ http://thewei.com/sandbox/tw2 Thanks as always, Kimi One way might be to slightly reduce the width of the image or the content slightly so that the page does not draw an h-scroll bar at 1024 and set a fixed width. Or, do the same but set a min/max width. Something sort of like min-width: 990px; max-width: 1200px; -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] box goes down the bottom of the page
ray wrote:
Hi, All
Please check http://www.soundbowl.com on IE6. You'll found that the main
content goes down the bottom of the page. It's OK on IE7 and FF. I found
this kind of problem on IE6 for many times. It must be caused by a bug of
IE6. Can somebody give me some hint?
Thanks
* html #mainContent {display:inline;}
Snaps it in place. Too wide. Tweaking the margins may be needed as well.
--
A thin red line and a salmon-color ampersand forthcoming.
http://chelseacreekstudio.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] 2 css interfering using conditional comments
the problem: situation : http://www.melusinedesign.nl/test/test.html has 2 css , one for IE6 and one for IE7( and of course for FF, opera and some more...) it looks fine in IE7, but not in IE6, it seems the 2 css are interfering ?! http://www.melusinedesign.nl/test/test_2.html looks fine in IE6 andhttp://www.melusinedesign.nl/test/test_3.html looks fine in IE7 So, what is the solution to this problem, does anyone have an answer ? Thx, Rose. _ Express yourself instantly with MSN Messenger! Download today it's FREE! http://messenger.msn.click-url.com/go/onm00200471ave/direct/01/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] unremovable img margin?
Hello all,
thanks much in advance for your help.
could you please take a look at this trial html file:
http://www.giuseppecraparottacv.co.uk/doubts/press.html
As you can see the images are separated by a bottom / right margin.
- Is it related to the fact that images are *inline elements*?
- Is it any way to eliminate it which is not making the images *block
elements*?
As you can see I included * {padding:0; margin:0;} among the styles.
cheers,
Giuseppe
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Improper Float
Being new to CSS and tying to design my first page, I have run out of ideas as to why the First Paragraph div (green background/white border) will not float up on the right side of this page beside the menu/list on the left side of the page. Both HTML and CSS validate but my syntax is obviously wrong in some regard. And ideas would be appreciated. http://www.wickson.net/css_march_18/index.htm http://www.wickson.net/css_march_18/style1.csshttp://www.wickson.net/css_march_18/index.htm Wayne __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Improper Float
Wayne Wickson wrote: How does this look now? http://www.wickson.net/css_march_18/index.htm Opera likes it. Same for IE 6/7. aside: Keep up the good work. Reply to the list as others may have thoughts for you. Bottom posting in reply is appreciated.Thanks. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] unremovable img margin?
--- On Wed, 3/18/09, Giuseppe Craparotta gcraparo...@googlemail.com wrote: http://www.giuseppecraparottacv.co.uk/doubts/press.html - Is it any way to eliminate it which is not making the images *block elements*? What you're seeing is the whitespace between those image elements in your markup. You could try removing it, e.g. div id=top img src=covers/bot1.gif /img src=covers/bot1.gif /img src=covers/bot1.gif /img src=covers/bot1.gif / /div div id=down img src=covers/bot1.gif /img src=covers/bot1.gif /img src=covers/bot1.gif /img src=covers/bot1.gif / /div __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Improper Float
On Wednesday 18 March 2009 10:40:51 am Wayne Wickson wrote:
Being new to CSS and tying to design my first page, I have run out of ideas
as to why the First Paragraph div (green background/white border) will
not float up on the right side of this page beside the menu/list on the
left side of the page. Both HTML and CSS validate but my syntax is
obviously wrong in some regard. And ideas would be appreciated.
http://www.wickson.net/css_march_18/index.htm
http://www.wickson.net/css_march_18/style1.csshttp://www.wickson.net/css_m
arch_18/index.htm
Wayne
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
change:
#content_r
{
background-color: green;
width: 500px;
border: 5px solid white;
float: right;
/* display: block; */
}
to:
#content_r
{
background-color: green;
width: 500px;
border: 5px solid white;
float: left;
/* display: block; */
}
Note, the float:left.
Blessings,
David M.
http://www.dmcentral.net
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image Slices
Here is my Image slices problem you'll see on the page
http://www.thecreativesheep.ca/site/imagepage3.html
the slices are not in order on the page and they should be at the top within
the div id=logo
On Tue, Mar 10, 2009 at 12:11 PM Christian Kirchhoff
christian.kirchh...@editura.de wrote:
Most of the times when the experts in this mailing list take a look at
some HTML and CSS code they find a solution for problems within minutes.
Therefore I kindly ask and stronlgy encourage you, as it was asked
before, to provide a link to the HTML and CSS code, so the others can
analyze the code in detail.
Without that is is almost impossible to help you cause there can be too
many possible causes for that problem.
Best regards,
Christian Kirchhoff
*Editura Gesellschaft für Verlagsdienstleistungen mbH*
Tempelhofer Damm 2 · 12101 Berlin
www.editura.de
AG Berlin-Charlottenburg · HR B 81823 · USt.Id. DE217180548
Geschäftsführer: Ralf Szymanski
Christopher R schrieb:
I put in padding 0, margin 0 within the div and that didn't solve it
neither did display:inline or display: block.
idname img {rules} is how I currently have it laid out. Now what also I
find odd is that I have all my slices loaded but 2 slices don't show up
in the right order there still is a gap between the slices that do show up.
On Tue, Mar 10, 2009 at 8:38 AM Virgilio Quilario
virgilio.quila...@gmail.com wrote:
Hi does anyone know why I'm getting white spaces between sliced images ?
I have a bunch of img tags within the div and I can't figure out why
the images have spaces, and currently why half of the image slices look
fine and the rest look like a jigsaw puzzle.
hi, maybe you need:
img {
margin:0;
padding:0;
}
please post a code or link to it.
Virgil
http://www.jampmark.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 2 css interfering using conditional comments
In a sense, yes. IE6 sees all styles, so interference is guaranteed. 1: reverse the order of the stylesheets. Correct IE6 AFTER the main stylesheet. link href=sc-ie7.css rel=stylesheet type=text/css / !--[if lte IE 6]link href=lte-ie6.css rel=stylesheet type=text/css /![endif]-- I tried them every possible ( or did I forgot one ? ) way around the last 10 days: http://www.melusinedesign.nl/test/test.html http://www.melusinedesign.nl/test/test_2.html http://www.melusinedesign.nl/test/test_3.html http://www.melusinedesign.nl/test/test_4.html http://www.melusinedesign.nl/test/test_5.html http://www.melusinedesign.nl/test/test_6.html doesn't work ;-( 2: you may have to give styles in the IE6 stylesheet even higher specificity, to make sure override takes effect. what do you precisely mean ? Do you have an example? Thanks for your help! Rose _ Express yourself instantly with MSN Messenger! Download today it's FREE! http://messenger.msn.click-url.com/go/onm00200471ave/direct/01/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] page messed up in IE6
Dear All, The following page works perfectly in FF, but not in IE6. http://frank.mtsu.edu/~provost/tcgs/ The top bg doesn't appear and the center container is not centered. Can anyone please help me? Thanks, Kris __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image Slices
On 19/03/2009, at 6:11 AM, Christopher R wrote: Here is my Image slices problem you'll see on the page http://www.thecreativesheep.ca/site/imagepage3.html the slices are not in order on the page and they should be at the top within the div id=logo Check your css: http://tinyurl.com/dz4tpy Also image #1 has the width and height swapped. A suggestion - resize your images to the correct size in your graphics application before uploading rather than using peoples' browsers to do it. Saves on user download time amongst other things. And #4 image seems to be nothing but a great big transparent png - no image or graphic at all. It serves no purpose?? Cheers, KathyW. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 2 css interfering using conditional comments
On 19/03/2009, at 6:25 AM, rose red wrote: In a sense, yes. IE6 sees all styles, so interference is guaranteed. 1: reverse the order of the stylesheets. Correct IE6 AFTER the main stylesheet. link href=sc-ie7.css rel=stylesheet type=text/css / !--[if lte IE 6]link href=lte-ie6.css rel=stylesheet type=text/css /![endif]-- Having done battle with ie5 vs ie6 vs ie7 this week with JQuery plugins and fallbacks it might help to prevent ie6 seeing your other style sheets with these sorts of conditional: !--[if gte IE 7] Stuff only for ie 7 or better ![endif]-- !--[if gte IE 7]!-- Stuff for ALL other browsers AND ie 7 or better !--![endif]-- !--[if IE 6] Stuff for ie6 only ![endif]-- !--[if lte IE 6] Stuff for ie6 or lower ![endif]-- (As long as I cut'n paste this right it should all validate - at least the page(s) it comes from do) Cheers, KathyW. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] page messed up in IE6
A.K. Allen wrote: Dear All, The following page works perfectly in FF, but not in IE6. http://frank.mtsu.edu/~provost/tcgs/ The top bg doesn't appear and the center container is not centered. Can anyone please help me? Thanks, Kris Sorry, but it works perfectly in FF only because there is nothing in it (no content). And if there were something in it it would be close to unreadable. Over coded to compliant browsers. And even IE/7. Over hacked in what's left-- IE/6. Validate the markup to a strict (x)html doctype for a new site. A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 2 css interfering using conditional comments
rose red wrote:
I tried them every possible ( or did I forgot one ? ) way around the
last 10 days: [...] doesn't work ;-(
It does when done right. However, looking at your stylesheets it becomes
clear that you are trying to serve IE6 complete styles instead of just
corrections, so you are making it extremely complicated for yourself
and the chances of getting it wrong somewhere in those stylesheets is
extremely high.
More about that further down, after the specificity part.
2: you may have to give styles in the IE6 stylesheet even higher
specificity, to make sure override takes effect.
what do you precisely mean ? Do you have an example?
First: understand selector specificity.
In CSS standards dry but accurate language...
http://www.w3.org/TR/CSS21/cascade.html#specificity
...and in a more popularized form...
http://css-tricks.com/specifics-on-css-specificity/
To exemplify by using an arbitrary style declaration from your page. The
order of your stylesheet links is here as in your original, with IE6
styles linked in first.
In 'lte-ie6.css' you have...
#footer {
position: relative;
/* more styles */
}
...while in 'sc-ie7.css' you have...
#footer {
position : fixed;
/* more styles */
}
Same selector (= same specificity) in both stylesheets, means the last
style declaration wins. IE6 doesn't understand 'position : fixed;' so it
will fail.
If I now change specificity for #footer in the 'lte-ie6.css' stylesheet,
so it becomes...
html body #footer {
position: relative;
/* more styles */
}
In 'sc-ie7.css' you still have...
#footer {
position : fixed;
/* more styles */
}
The html body #footer selector in the first stylesheet points at the
same element as the one in the second stylesheet, but now with higher
selector specificity thanks to the html body addition from the
element-chain your markup has. So now the first style declaration wins
over the second, and IE6 will therefore see 'position: relative;' for
#footer.
---
IE6 needs corrections, *not* a complete stylesheet in addition to the
regular one, so you should therefore start with stylesheet links in the
right order, and a completely empty stylesheet for IE6.
IE6 will pick up all styles from the regular 'sc-ie7.css' stylesheet,
and only when IE6 gets it wrong do you add a style declaration in the
IE6 stylesheet - to correct IE6 on that point.
First let me clean up your #footer styles so they make more sense...
In the 'sc-ie7.css' you'll then have...
#footer {
position : fixed;
bottom : 0;
left : 0;
width : 100%;
height : 100px;
background-image : url(images/footer_grass.png);
background-repeat : repeat-x;
z-index : 9;
}
IE6 doesn't understand 'position: fixed', so in the 'lte-ie6.css'
stylesheet I write...
#footer {
position: relative;
}
...and nothing more for #footer.
As long as the 'lte-ie6.css' stylesheet is linked in after the regular
'sc-ie7.css' stylesheet, IE6 will see all the other #footer styles, but
'position: fixed' will be overridden so IE6 only sees 'position: relative'.
This correction won't make IE6 handle the #footer the same way as the
other browsers do - IE6 doesn't understand 'position fixed' ... period.
The correction will only allow the #footer to be rendered where it is in
the markup in IE6, instead of IE6 trying to do fancy things with it.
The same with all other style declarations. First make it work flawless
in all browsers but IE6, and then correct what IE6 doesn't handle
correctly by serving IE6 _only_ the corrections it needs in order to
behave.
Remember: what IE6 can't do, it can't do no matter what. Thus, all you
can do it to make the most out of what IE6 _can_ do, and avoid its worst
weaknesses in the process.
Serving IE6 only corrections will cut the size of your 'lte-ie6.css'
stylesheet down to almost nothing, and give IE6 a chance to do what it
can with what it understands, without disturbing better browsers.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Firefox is covering the corner of a button with the background of the main div
I am working on the book Javascript the Missing Manual, by David McFarland, and I've noticed that during the tutorials, the corner of the image for a link button is covered by the div for the middle column. You can download the files at www.sawmac.com/javascript. The button is not covered in the most recent IE. Any explanation/fix? Thanks, Don __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox is covering the corner of a button with the background of the main div
Donald Davis wrote:
I am working on the book Javascript the Missing Manual, by David
McFarland, and I've noticed that during the tutorials, the corner of
the image for a link button is covered by the div for the middle
column. You can download the files at www.sawmac.com/javascript. The
button is not covered in the most recent IE. Any explanation/fix?
The #banner element needs a z-index.
#banner {/* global.css (line 221) */
background:#E6E2AF none repeat scroll 0 0;
position:relative;
z-index:999;/* == ADD THIS */
}
Hope it helps.
--Bill
--
!--
! Bill Brown macnim...@gmail.com
! Web Developologist, WebDevelopedia.com
--
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image Slices
Alright, I took out the 4th image and I fixed the CSS problem. As you can see the image is still not in order it's like a jigsaw puzzle on the page which is not how it's intended to look and I can't figure out why this is happening when I sliced the graphic nicely. I tried even with more slices which should make no difference with fewer slices or more slices yet the results are near the same. On Wed, Mar 18, 2009 at 6:14 PM Kathy Wheeler kat...@home.albury.net.au wrote: On 19/03/2009, at 6:11 AM, Christopher R wrote: Here is my Image slices problem you'll see on the page http://www.thecreativesheep.ca/site/imagepage3.html the slices are not in order on the page and they should be at the top within the div id=logo Check your css: http://tinyurl.com/dz4tpy Also image #1 has the width and height swapped. A suggestion - resize your images to the correct size in your graphics application before uploading rather than using peoples' browsers to do it. Saves on user download time amongst other things. And #4 image seems to be nothing but a great big transparent png - no image or graphic at all. It serves no purpose?? Cheers, KathyW. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] unremovable img margin?
Bobby Jack wrote:
--- On Wed, 3/18/09, Giuseppe Craparotta gcraparo...@googlemail.com wrote:
http://www.giuseppecraparottacv.co.uk/doubts/press.html
- Is it any way to eliminate it which is not making the
images *block
elements*?
What you're seeing is the whitespace between those image elements in your
markup. You could try removing it, e.g.
div id=top
img src=covers/bot1.gif /img src=covers/bot1.gif /img
src=covers/bot1.gif /img src=covers/bot1.gif /
/div
... and to eliminate the gaps underneath, try
img { vertical-align: bottom; }
Cordially,
David
--
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image Slices
From: Christopher R majes...@thecreativesheep.ca
As you can see the image is still not in order it's like a jigsaw puzzle on
the page
http://www.thecreativesheep.ca/site/imagepage3.html
Following are some suggestions that may, or may not be what you're looking for.
As was suggested, if you want the images to be the size specified in the HTML,
you should resize them in a graphics program rather than letting browsers do
the work.
That being said, here are my suggestions.
Remove all width and height attributes in the HTML for those three images.
Alter the CSS as follows -
#logo {
background-color: transparent;
/*top: -7px;*/ /* remove */
left: 109px; /* change value */
/*width: 850px;*/ /* remove */
height: 250px;
position: relative;
text-align: center;
z-index: 1;
}
logo img {vertical-align: bottom; display:block;} /* remove - it's not doing
anything anyway, despite the spelling correction */
#logo img {float: left;} /* add */
.navigationpanel {
background-image: url(navgraphic.png);
background-repeat: no-repeat;
top: -20px; /* change */
left: -250px; /* change*/
/*width: 400px; /* remove */
/*height: 75px; /* remove */
position: relative;
}
Perhaps these suggestions will give you a new place to start from.
~holly
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Up Margin - where is it?
Hello, I`m transforming this site: http://www.caarj.org.br/ to wordpress. Its all 95% done, now im fixing details. Theres a up space (white above logo) i just look everywere to remove it, margin, padding, etc, but have no sucess, can anyone gime a help? __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
