Re: [css-d] Getting absolutely positioned divs with bottom: auto to end together
Michael Leibson wrote: www.thinkingmusic.ca/analyses I have used a copy of this page to exemplify one approach to solving your problems... http://www.gunlaug.no/tos/alien/ml/test_09_0511.html http://www.gunlaug.no/tos/alien/ml/test_09_0511_files/styles00.css Are these differences the result of my own errors, or normal browser behaviour? Both :-) Browsers behave this way given the styles you have provided. You can not calculate the right length (height) of an element in relation to another, unless one is a child of the other. If the result of browser behaviour, I’d rather just find a way to ensure that all divs conclude at the same point (and leave the minor differences alone), rather than write re-calibrated measurements for each browser. Is there a way to do this? CSS standards, and some workarounds for very old browsers, let you make the sidebar (#left) end up exactly in line with the main column. The easiest way to achieve this is to leave #main un-positioned (static), so it can affect the height of main div (#top) directly. Then the sidebar (left) can be absolute positioned relative to bottom of main div (#top) for perfect alignment. Resize (text) all you want in any somewhat standard compliant browser, and it'll keep the bottom alignment. IE6 can't position opposite edges of elements relative to parents, so I've added a workaround (dynamic expression) for it. I've also modified how those ul in the sidebar are positioned. Note that there's no way you can space those ul evenly down the sidebar in a way that will look alright for any page-length and amount of content and degree of font-resizing in the main column. You'll have to compromise. Design wise I agree with Philippe: a jagged line-up at the bottom will look better then a straight line. You can achieve a straight line or a jagged alignment as you wish with the method I've exemplified, and the chosen alignment will remain stable. 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] Fluid Page + Centered 80% Div + Thumbnails
Sorry for the late reply, and why yes. Thank you it is! -ck On May 6, 2009, at 5:33 PM, Tim Snadden wrote: On 7/05/2009, at 11:08 AM, Court Kizer wrote: I have a thumbnail gallery composed of 200px by 200px thumbnails. I put them in a 80% wide DIV and allow them to reflow as the browser resizes. This works great. However I do NOT want it justified to the left. So I put margin: 0 auto; on my 80% width div. It's a bit difficult without seeing an example, but I suspect you need to contain floats. There are a number of ways of doing this. One would be to set 'overflow: auto;' on the container. Have a look at this: http://snadden.com/sandbox/thumbnail.html Is that the kind of effect you were looking for? __ 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 Menu Causing Separate Issues In IE and Firefox?
I'm working on a table-free layout with jQuery-based drop-down megamenus (which have a hover-based trigger that displays a panel). The menus are ULs, though to make it fit underneath the logo they're contained in a DIV set to a display: inline (since otherwise, it doesn't validate). Though the page now validates, it's running into two problems in separate browsers. http://www.starcitygames.com/SCG_6/test.html In FIREFOX, the menu displays fine, but displays another line just below it - a narrow strip the height and background color of the menu that drops everything else down. I'm not sure why this is happening. In IE, if you hover your mouse over the Buying Cards link and see the (horrifically styled) drop-down panel, you'll note that the author in the text underneath the panel (The Ferrett) bleeds through into the actual panel, even though the z-index on the panel is set to 10,000. This could be a JavaScript issue, but I think it's CSS-related. In CHROME, OPERA, and SAFARI: No problems. Any ideas? The relevant markup and CSS is below, though obviously the whole page can be visited. Thanks in advance! div id=header div style=float: left; a href=http://www.starcitygames.com; class=disable_hover img src=http://www.starcitygames.com/images/button/SideSCGLogo.gif; alt=StarCityGames.com! / /a /div script type='text/javascript'!--//![CDATA[ var m3_u = (location.protocol=='https:'?'https://ads.starcitygames.com/phpad/www/delive ry/ajs.php':'http://ads.starcitygames.com/phpad/www/delivery/ajs.php'); var m3_r = Math.floor(Math.random()*999); if (!document.MAX_used) document.MAX_used = ','; document.write (scr+ipt type='text/javascript' src='+m3_u); document.write (?zoneid=4); document.write ('amp;amp;cb=' + m3_r); if (document.MAX_used != ',') document.write (amp;amp;exclude= + document.MAX_used); document.write (amp;amp;loc= + escape(window.location)); if (document.referrer) document.write (amp;amp;referer= + escape(document.referrer)); if (document.context) document.write (amp;context= + escape(document.context)); if (document.mmm_fo) document.write (amp;amp;mmm_fo=1); document.write ('/scr+ipt); //]]--/scriptnoscripta href='http://ads.starcitygames.com/phpad/www/delivery/ck.php?n=acef68fcamp; cb=INSERT_RANDOM_NUMBER_HERE' target='_blank'img src='http://ads.starcitygames.com/phpad/www/delivery/avw.php?zoneid=4amp;cb =INSERT_RANDOM_NUMBER_HEREamp;n=acef68fc' border='0' alt='' //a/noscript div id=navigation_bar ul id=menu li h2a href=http://www.starcitygames.com;Home/a/h2 /li li class=mega h2 a href=#Buying Cards/a /h2 div h3 Menswear /h3 p a href=#Articles/a, a href=#Cards/a, a href=#Decks/a, a href=#More.../a /p h3 Gifts /h3 p a href=#Gift Certificates/a, a href=#Ponies/a, a href=#More.../a /p h3 Clearance! /h3 p 10% off all Apocalypse Singles this weekend. a href=#Don't miss out!/a /p a href=# class=more More stuff for him.../a /div /li li class=mega h2 a href=#Selling Cards/a /h2 div h3 Menswear
[css-d] Image bullets and floated images
Hi, I have a div/image that is floated left from the rest of the content. My content consists primarily of p tags and lists. The text needs to wrap below the floated dv/image. This part is not difficult. However, I have a list where the bullets have been replaced with images. When I do this, the image bullets are all the way to the left of the page and collides with the floated div/image. When I check this in firebug, I noticed that the ul takes up the width of the parent element, so the bullet images are placed on the left side. I wanted the bullets to be immediately next to the list items (if I use the default bullets, the bullets appear next to the list item. Is there any way to get the bullet images next to the list items again? I don't want to jeopardize the text-wrapping either. Here is the URL: http://stephentang.info/floattest/test.html Thank you for your time in reading this. Sincerely, Stephen __ 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 bullets and floated images
The best that I can come up with is that since it is just a circle and not anything too intricate, you can just use the image as the list-style type...list-style:url(image name); the only problem with this is that the image is not directly in the center of the text. Hope this helps. __ 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] IE 8
Divya Manian wrote: I have also experienced MultipleIEs have issues with javascript (sometimes CSS). Plus it doesn't work as expected when u install IE 8. I am still looking for a good solution to test IE 6/7/8 in one machine, no luck so far. Linux with VirtualBox and 3 different Windows VM's works. -- David gn...@hawaii.rr.com authenticity, honesty, community __ 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] IE 8
2009/5/11 david gn...@hawaii.rr.com: Divya Manian wrote: I have also experienced MultipleIEs have issues with javascript (sometimes CSS). Plus it doesn't work as expected when u install IE 8. I am still looking for a good solution to test IE 6/7/8 in one machine, no luck so far. Linux with VirtualBox and 3 different Windows VM's works. A new toy has been discovered for Win-machines: IETester http://www.my-debugbar.com/ietester/index_all.php Shows your page in IE 5.5, 6, 7, 8. IE8 only showing, if IE7 is installed. I don't know if it's having any issues with javascript ? -- Regards / Mhv. Ib K. jensen - http://ikjensen.dk __ 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 bullets and floated images
Hi Bill, What is this style? ul {display:inline!ie;} Is this a browser hack? --Stephen On Mon, May 11, 2009 at 2:56 PM, Bill Brown macnim...@gmail.com wrote: Stephen Tang wrote: [snipped/] list item. Is there any way to get the bullet images next to the list items again? I don't want to jeopardize the text-wrapping either. http://stephentang.info/floattest/test.html Something like this ought to work for you: ~~~ body, ul, p, li, div {margin:0;padding:0;} .container {height:600px;width:700px;border:1px red solid;} .floatedobj {border:1px blue solid;margin-right:20px;height:100px;width:300px; float:left;} p {margin-bottom:5px;} ul {list-style:none;margin:0;padding:0;display:inline-block;} ul {display:inline!ie;} ul li {list-style:none;margin:0;padding:0 0 0 10px; background:transparent url(bullet_hdr.gif) no-repeat scroll 0 8px;} ~~~ 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 bullets and floated images
Stephen Tang wrote: [snipped/] list item. Is there any way to get the bullet images next to the list items again? I don't want to jeopardize the text-wrapping either. http://stephentang.info/floattest/test.html Something like this ought to work for you: ~~~ body, ul, p, li, div {margin:0;padding:0;} .container {height:600px;width:700px;border:1px red solid;} .floatedobj {border:1px blue solid;margin-right:20px;height:100px;width:300px; float:left;} p {margin-bottom:5px;} ul {list-style:none;margin:0;padding:0;display:inline-block;} ul {display:inline!ie;} ul li {list-style:none;margin:0;padding:0 0 0 10px; background:transparent url(bullet_hdr.gif) no-repeat scroll 0 8px;} ~~~ 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] Getting absolutely positioned divs with bottom: auto to end together
From: Gunlaug Sørtun gunla...@c2i.net To: Michael Leibson michael_mabe...@yahoo.ca Cc: css-d@lists.css-discuss.org Sent: Monday, May 11, 2009 5:56:02 AM Subject: Re: [css-d] Getting absolutely positioned divs with bottom: auto to end together www.thinkingmusic.ca/analyses I have used a copy of this page to exemplify one approach to solving your problems . . . . . The easiest way to achieve this is to leave #main un-positioned (static), so it can affect the height of main div (#top) directly. Then the sidebar (left) can be absolute positioned relative to bottom of main div (#top) for perfect alignment. Georg, I'm picking my jaw up from the floor, after it dropped in utter amazement at your solution! ; - ) You guys aren't 'mere web developers' -- you're mathematicians! I'm blown away. I'll get back to you after I've had a chance to re-gather my mind, and have tried to follow the principles involved in your solution. (Wow!) - Michael __ The new Internet Explorer® 8 - Faster, safer, easier. Optimized for Yahoo! Get it Now for Free! at http://downloads.yahoo.com/ca/internetexplorer/ __ 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] Getting absolutely positioned divs with bottom: auto to end together
Thanks for your generous feedback, Philippe! Some follow-up questions, below. . . To get all containers to ‘conclude’ at the same point, at the bottom of the page, I’ve given their bottom-most elements the margin-bottom measurements required to do that. However, I’m getting unexpected results that I don’t understand: Specifying a line-height will normalise things a little. . . While the #main div has line-height on all ps, you're right -- there was no line-height in the #left div. I just tried adding the same line-height, there, but it made no difference. IE gives a 2px bottom space to every li, while FF doesn't -- but, since the problem also occurs in other browsers, it's probably not because of that. Google 'faux columns', or try one of the following techniques: I read Dan Cederholm's article (http://www.alistapart.com/articles/fauxcolumns/), but I'm not 100% sure I get it: in my situation, I already have a repeating background image on my body element, but it must tile horizontally, not vertically, because the top third of my viewport has a white body background, and the rest has a dark slate background. Am I misunderstanding how the fauxcolumns would work? http://www.positioniseverything.net/articles/onetruelayout/ I see that, since its invention, many bugs have rendered this technique almost impossible (http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems). http://www.satzansatz.de/cssd/companions.html While I think I get the concept (and it's very neat!), the technical side of this one is way beyond my current level. Personally, I'd go with a 'ragged end-of-page' by design :-) Do you mean to just let the divs end wherever they may, and forget about the aesthetic consequences -- or to come up with a design in which such a consequence will be in keeping with an important design motif? Thanks again, Philippe! All the best, Michael 2) In Firefox, zooming all elements gives the #left div greater or lesser height than its neighbouring div, depending on the degree of zoom. Text zoom or page zoom ? With page zoom, there is little difference. With text-zoom, the columns will on grow based on the text content. The margins in your left column will not change the same way, as they are specified in pixels. Are these differences the result of my own errors, or normal browser behaviour? If the result of browser behaviour, I’d rather just find a way to ensure that all divs conclude at the same point (and leave the minor differences alone), rather than write re-calibrated measurements for each browser. Is there a way to do this? Google 'faux columns', or try one of the following techniques: http://www.positioniseverything.net/articles/onetruelayout/ http://www.satzansatz.de/cssd/companions.html Personally, I'd go with a 'ragged end-of-page' by design :-) PS - the little images in your #left column contain a colour profile. This causes a (severe) colour mismatch in browsers that support colour management for images (Safari, Firefox 3.5b). The embedded colour profile is the one coming from Photoshop when saving for web. I use pngcrush to strip it out. Philippe --- Philippe Wittenbergh http://l-c-n.com/ The total height of those 2 columns will also depend on the line-height, and how browsers interpret the 'normal' keyword - you don't specify any line-height as far as I a can tell. Specifying a line-height will normalise things a little, but you might still be at the mercy of differences in rounding of values to the nearest pixel between browsers. I've got line-height: 135% on all the p text in the #main div, but none on the elements in the #left div. I just tried adding the same line-height, there, but it made no difference to the ragged-end-of-page problem. In order to see what may be happening, I gave all the #left elements borders, and saw that IE gives a 2px bottom space to every li, while FF doesn't. However, since the problem also occurs in other browsers, I don't want to begin applying hacks unless I know what I'm doing. From: Philippe Wittenbergh e...@l-c-n.com To: CSS-D css-d@lists.css-discuss.org Cc: Michael Leibson michael_mabe...@yahoo.ca Sent: Sunday, May 10, 2009 10:49:57 PM Subject: Re: [css-d] Getting absolutely positioned divs with bottom: auto to end together On May 11, 2009, at 11:17 AM, Michael Leibson wrote: ... While building two more pages for that site -- www.thinkingmusic.ca/analyses/coltrane, and www.thinkingmusic.ca/analyses (the much smaller page of the two), I’ve begun to implement some of your recommendations. One of these was to allow containers’ heights to be deterimined by their contents, rather than by a given, fixed amount. I’ve now tried to do that, by giving my absolutely positioned divs positions for left, top, and right, but leaving their bottoms as “auto”. To get all
Re: [css-d] Getting absolutely positioned divs with bottom: auto to end together
Michael Leibson wrote: www.thinkingmusic.ca/analyses You guys aren't 'mere web developers' -- you're mathematicians! :-) When dealing with browsers that's definitely an advantage. Apart from that; when one has created and modified a few thousand layouts, the only problem is which solution(s) to choose amongst the many one knows will work for the case at hand. To use the same page for more examples - different ways to achieve the same thing, here are two identically-looking pages... http://www.gunlaug.no/tos/alien/ml/test_09_0511-a.html http://www.gunlaug.no/tos/alien/ml/test_09_0511-b.html These two have the left sidebar absolute positioned from inside an absolute positioned main column, which mean I've gone back to your absolute positioning method but rearranged the markup ever so slightly but modified it slightly to make it work as you wanted. test_09_0511-a has the sidebar above the main content in the markup - like your original page, while test_09_0511-b has the sidebar below the main content. As you can see the source-order can be modified to either main content first or main content last, based on the exact same stylesheet with the exact same absolute positioning... http://www.gunlaug.no/tos/alien/ml/test_09_0511_files/styles01.css Now, note that this method only works well when the main column is at least tall enough to stretch the sidebar to a reasonable height. To short a main column will make the sidebar look crammed, so you may have to add a suitable min-height to #main if you don't have enough content. I've used #main {min-height: 1200px;} which has no effect on the examples since the amount of content pushes it taller, but the optimal value depends on how much you want to put into the left sidebar. I added in a jagged bottom-edge just to show what we mean by that. By applying #left {bottom: 10px;} I'd mad sure the sidebar will always be 10px shorter than the main column, regardless of how tall the main column is or ends up being when you resize text. I think it looks better this way. To give you a bit more to build on; read this ALA article... http://www.alistapart.com/articles/conflictingabsolutepositions/ Also; for the examples above I used my own IE-expression to make IE6 play ball... http://www.gunlaug.no/contents/wd_additions_22.html 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] How do you dynamically change the size of graphics on a page?
Aloha! This is my first post, so be kind... Here's a site I've been playing around with: http://orangephile.com Right now the images are created at 150px square, but I list their height and width as 300px. What I would like to know is how can you create CSS code to dynamically change the dimensions of the images, say 75px for thumbnails, 300px to get a good overview, 600px for examining the color palette closely. Mahalo, Trevor Avichènnya Zénaïde __ 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] How do you dynamically change the size of graphics on a page?
Trevor wrote: Aloha! This is my first post, so be kind... Here's a site I've been playing around with: http://orangephile.com Right now the images are created at 150px square, but I list their height and width as 300px. What I would like to know is how can you create CSS code to dynamically change the dimensions of the images, say 75px for thumbnails, 300px to get a good overview, 600px for examining the color palette closely. Mahalo, Trevor Avichènnya Zénaïde Welcome to the list! CSS deals primarily with look and feel rather than behavior, so dynamic generation using pure css is somewhat limited. But you might consider pure css pop-ups. This is one example by Stu Nicholls. http://www.cssplay.co.uk/menu/photo_not_so_simple#nogo I don't recall ever having seen pop-ups done with 3 images, but in the vein that anything is possible, perhaps someone else has... Javascript or Flash are alternative methods to create the behavior you wrote about. __ 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] How do you dynamically change the size of graphics on a page?
Trevor wrote: Welcome to the list! CSS deals primarily with look and feel rather than behavior, so dynamic generation using pure css is somewhat limited. But you might consider pure css pop-ups. This is one example by Stu Nicholls. http://www.cssplay.co.uk/menu/photo_not_so_simple#nogo I don't recall ever having seen pop-ups done with 3 images, but in the vein that anything is possible, perhaps someone else has... Javascript or Flash are alternative methods to create the behavior you wrote about. Thank you for your response. Do you know a javascript site that would have that information, either in book, web, or list? Dunno, but try Google, subject line: creating image pop-ups with javascript, or creating image pop-ups with jQuery __ 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] IE 6 layout issues
Hi Tim and others, Sorry I have not responded sooner, but have been away. Thanks for the reply and helpful advice. On 07/05/2009, at 10:49 AM, Tim Snadden wrote: 1. Text content: The text drops down below the image on the right instead of being parallel to it. I'm sure I've seen something about this problem before in one of my books, but I can't find it for the life of me. The IE web developer toolbar is pale imitation of firebug but can be used to find out what is happening in IE. If you look you will see that the div class=hp_img is taking up with full width. You could set a width on it, or do away with it altogether and just position the image. I would absolutely position that image bottom right so that even if the content grows he still looks right. Thanks for that; that makes sense and works. I've downloaded the IE Web Developer toolbar too; that's great. You're probably right about the absolute positioning. I see it moves when the window is narrowed. I'll give that a go. 2. Stripes: The gray stripes under the navigation bar at the top and the bottom redish band at the bottom drops too low (the bottom one gets tangled with the footer text. .stripes { background:transparent url(/images/hor-stripes_bgtop.gif) repeat-x left bottom; clear:both; height:26px; } This has fixed it. You don't need the image inside that div. That's true, if I make the image longer than the widest screen. I'll look at that. I take it that this is better practice? Give the footer layout (google hasLayout) and the stripes will position correctly. One way is using the proprietary 'zoom: 1; ' Hmm. I'll have to do a bit of study here and see how all that works. I've heard about it, but this is the first time I've really had a problem of this sort. Will check it out. Thanks. By the way - It would look much nicer to anti-alias the violin on the left. It looks quite jaggy against the menu bar. You could do it as an alpha transparent PNG and it would look better to everyone but IE6 users, and to them it would look no worse than it does currently. I did use a PNG image at first, but Fireworks gave it a black edge which only emphasised the problem. I've done the same in Photoshop, which doesn't give it the edge, but still gets the halo. I may just start again with the original image and see if I can improve it. Thanks. Cheers, Tim Much appreciated, 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/