[css-d] how i can make a dynamic height for div element?
hello please can u help me how can i assigned a dynamic height for a div element. i have the following case: div id=div-leftleft side/div div id=div-centercenter/div div id=div-rightright side/div div-center height changes dynamically depending on the content . so I want to know how to make div-left and div-right heights the sane as div-center. And is this the right way to do it. Regards, Dakka, Rami __ Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam protection around http://mail.yahoo.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] site testing, now with url!
Andy Mosmiller wrote: It is hard to tell unless you worked on the site, but I am pretty sure that IE 7 is setting the height of the content to exactly 300px as specified in my IE conditional stylesheet (which of course acts as a min-height for current versions.) Have people figured out how to tackle this looming problem yet for when people start using this browser? IE7 only has this problem when you used fixed units (like pixels). Where possible in such scenarios try to use percentages if you absolutely *must* show it a height (although I cannot think of a reason). In this case George has already provided you with the answer (* html hack to hide from IE7). HTH Mark __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] radio buttons waaaaaaaaaay to big in IE
Hi Thanks Micky and Mark for fine the culprit, I had forget about this rule. I'm using 100% in that so the body will always fill the entire page, since min-height don't work in IE, and the js I had to fix that was causing me some bugs. I think I don't need them for all that elements I will check it and remove. The css got a little more messed up than I really wanted, but this is a late project, was due almost 2 weeks ago, I will beautify it after everything is working. Thanks for the answer. Grillo On 8/28/06, Mark Henderson [EMAIL PROTECTED] wrote: From: Marcelo Wolfgang [mailto:[EMAIL PROTECTED] Can anyone help me figure out why IE is acting so weird about the radio buttons on this page ? http://work.grillo.tk/gaiolla/checkout_shipping.html Sure. From: Micky Hulse [mailto:[EMAIL PROTECTED] Just quickly looking-over you code, I see this as a potential prob: html, body, form, fieldset, select, a, input{ padding:0px; margin:0px; font:10px Verdana, Arial, Helvetica, sans-serif; color:#00; height: 100%; } Micky was on the money I can confirm this is the culprit. Modifying your body rule to the following: html, body { padding:0px; margin:0px; font:10px Verdana, Arial, Helvetica, sans-serif; color:#00; height: 100%; } and viewing in Firefox through an ie tab resolves the issue. Like Micky I didn't take an in-depth look at your code, but is there any particular reason you are using height:100% on the body? If the answer is no then remove that also, since, unless you're experimenting with sticky footers or vertical/horizontal centering, it's generally not required. Also, 10px for a body rule is rather small, and just as a FYI, the following might prove an interesting read if you have the time. http://css-discuss.incutio.com/?page=FontSize HTH Mark -- This message has been scanned for viruses and dangerous content by ISPNZ's automated virus detection system, and is believed to be clean. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fixed back to top tab at bottom of screen
not a css question, but what that button does is redirect you back to the same page and put you into position to view the bookmark (which is the # sign). for example if yahoo wanted to put such a link on their main page, it would look like http://yahoo.com/#;. that # sign is the start of a bookmark, and would look something like http://yahoo.com/#recentnews; if it was used normally. clicking on that link would then take make the top of your viewing area show the element on the page with the id of recentnews, such as h1 id=recentnews. that's it! to do the same thing with a little javascript, it would look something like a onclick=window.scrollTo(0, 0)[Back to Top]/a __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Background Images wont load in IE when the parent div is set to display:none
I currently have this issue on my website. I use png's, so in order to fix them in ie I use the fixer() javascript code which changes them into span's with the background png img and the Alpha Transparency filter doohicky. But when the parent div is set to display:none onload ie doesnt load the background images for the children divs so when u open the tab and set the parent div to display:block *tada* no background images. Anyone have a clue, or URL or blog entry or something that i can look at that may present a solution? I have searched through the archives in CSS-D, i didnt find anything : Thanks In Advance __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fixed back to top tab at bottom of screen
Tady Walsh wrote: I was on a website (http://home.skysports.com) which has a back to top tab fixed at the bottom right of the browser window (you may have to access a long article to see it. Just click on anything...), no jumping, no scroll issues, nothing!!! Yes, they must have worked overtime on that one. It's a master-piece in browser-specific markup, scripting and styling - complete ignorance when it comes to standards, and totally failed reliance on error-recovery. XHTML Transitional with 261 [errors]... http://validator.w3.org/check?uri=http://home.skysports.com/ I didn't think /anyone/ could still manage to create such a mess, but the people behind that site have proved me wrong. If only they had made it work across browser-land... I want to use this style on a site I'm working on and I cannot for the life of me decipher how they have achieved this. Well, they haven't done very well, but it's no big deal to fix elements to the bottom of the window or anywhere else. A simple 'position: fixed' does it in all somewhat standard-aware browsers. Anyone out there got any ideas or urls you can point me to..? If you want IE6 in on the game, then one of these will do... http://www.gunlaug.no/contents/wd_additions_15.html http://www.gunlaug.no/contents/wd_additions_17.html Same 'position: fixed', but different fixes for IE6 and IE5+. Just add a link around or inside the 'fixed' element - depending on what markup you end up with. Having written that; I can't think of a good reason for a link to 'top of page', since all browsers I know of understand a push on the [Home] key perfectly well. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] z-index relative positioning
I'm wondering if the z-index is so inconsistent among different browsers that I should quit working with it and use another strategy to accomplish what I am trying to do. I have an image that I want to overlap the background image below it. I could make just one image but then I would have to make a unique image for every time I want to use that round-corner background and it would also add to the download size of every page. I started out by using a negative bottom margin and that worked just fine in Opera and Firefox but not IE6. I then tried the z-index but that didn't help IE6. I then switched to relative positioning and with the z-index I got it to work in Opera and IE6 but not in Firefox. Is there a good tutorial on this that tells how to hack the different browsers? Thanks, Matt __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] z-index relative positioning
Matt, on Tuesday, August 29, 2006 at 17:29 matt1027 wrote: Is there a good tutorial on this that tells how to hack the different browsers? Did you read the wiki? http://css-discuss.incutio.com/?page=OverlappingAndZIndex regards Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] z-index relative positioning
Matt, you may want to read the following articles too: http://www.aplus.co.yu/css/z-pos/ http://www.satzansatz.de/cssd/onhavinglayout.html regards Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Long outstanding IE7 bug still unfixed in IE7 RC1 - CSS selector parsing, comment handling with attribute selectors - serves as an IE7 hack or filter
It seems IE7 RC1 still has an outstanding CSS parsing problem, which although reported a long time ago,never got fixed, and now could serve as a hack that forms the basis for an IE7-exclusion filter. See the test case I posted a good while ago at http://archivist.incutio.com/viewlist/css-discuss/72604 But please, no more CSS hacks. Best, Cecil Ward. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Floats getting hung up on previous row height differences
I am trying to create a table of contents where each entry consists of an image and some text to the right. I have a liquid layout so the number of entries in each row will vary. If a previous row has a short entry, because the image was smaller, the succeeding row will start under the short entry rather than at the beginning of the row. http://www.sandsmuseum.com/test/testcss3.html includes css and has been tidy'd and validated. I know I can put a huge height on the container but I am not sure what the maximum size is going to be. I also worry, perhaps needlessly about browser compatibility when specifying heights. I want the div's to flow, creating nice full rows (and columns,) without using tables of course... As a side issue, I prefer the text not float around the image but rather have the text appear as a single column. Is there an easy way to make this happen. I tried adding a huge bottom margin to the image to discourage text floating but that just added to the height and caused the rows to have a huge space between them. I am sure there is an easy answer and do not know why I am blocked, he says with a wry smile. Thanks for the help, Michael __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Movement in IE and FF
Hi guys, OK I'm finishing a site but have two, I think related, problems. This site is: http://www.henryfelton.co.uk/oscarlayout/; as you can see, the drop down menus are too far to the right whatever, but more so in IE. Secondly, the requests section changes place dependant upon the browser. I can't see any reason why they should do this, anyone have any ideas? Many thanks, Henry __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS Horizontal Sub-Navigation (IE Woes)
I'm having problems with my sub-nav displaying in that browser we all love. Works fine in Safari, Firefox (Win and Mac), Camino, etc. http://davidensor.com/dev/test.php http://davidensor.com/dev/styles-test.php My primary concerns is the obvious crap that is displayed in IE; secondary is about a recommendation on a better way to have the sub-nav display in the correct location below the services menu (negative margins scare me). Thanks, Dave -- __ David A. Ensor IT Services Support Desk Analyst [EMAIL PROTECTED] 513.529.1925 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS Horizontal Sub-Navigation (IE Woes)
I'm having problems with my sub-nav displaying in that browser we all love. Works fine in Safari, Firefox (Win and Mac), Camino, etc. http://davidensor.com/dev/test.php http://davidensor.com/dev/styles-test.php My primary concerns is the obvious navigational crap that is displayed in IE; secondary is about a recommendation on a better way to have the sub-nav display in the correct location below the services menu (negative margins scare me). Thanks, Dave [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] z-index relative positioning - It Works!
At 11:38 AM 8/29/2006, Martin Heiden wrote: Did you read the wiki? http://css-discuss.incutio.com/?page=OverlappingAndZIndex The wiki had the had the key. Positioned elements paint on top of everything else if they don't have negative z-index. The div that was causing problems was relatively positioned. So I gave the preceeding div a relative position also (even though it didn't need it) and then its higher z-index was enabled to place it above the relatively positioned div following it which had a lower z-index. I had previously been able to get the order to change by using a negative z-index but then Firefox put it completely out of site under the whole page. At least it's working in Opera 9, IE 6 and Firefox 1.5. I hope it holds up when I upload and check with Browsercam. Thanks again, Matt __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Menu stopped working in IE
I'm having a problem with my menu and IE - if you look at http://www.lemoyne.edu/student_life/index.htm You'll see that if the main heading is longer than the flu-out list, the menu skips down to the next menu. I'm guessing I've got a problem with the settings I'm using for my z-index, but I can't figure out what one to change. Any assistance would be much appreciated! Michelle -- “We should be taught not to wait for inspiration to start a thing. Action always generates inspiration. Inspiration seldom generates action.” – Frank Tibolt * Michelle Tarby Director of Web Services Information Technology Le Moyne College http://www.lemoyne.edu [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Catawampus shadows!
Dear All: We are using an image repository, and I thought it would be pretty to add shadows to the thumbnails (the shadows also stop the images from bleeding onto the page). However, sometimes the text to the right is taller than the image itself and seems to be affecting the image's height. Does anyone have any ideas how to fix this so the image is unaffected by the size of the container? Thank you in advance. :-) http://search.jocohistory.org/cdm4/browse.php -- In peace, Amy M Ostrom Web Interface Designer [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Strange css rules
*padding:1px; This is the lonestar hack which sends declarations only to IE5 (in both Windows and MacOS 9, it seems). http://www.media451.com/experiments/css/hacks/ie_star.html _width:140px; This is the underscore hack which sends declarations to IE5 and IE6 in Windows (fixed in IE7). http://wellstyled.com/css-underscore-hack.html -- Craig, www.focalcurve.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] A newbie's first enounter with IE css bugs
Greetings, css-d I've recently started working on a new website design for the lab I work for. I'm not very experienced as a web designer, particularly in the use of CSS, but I've been studying and experimenting a lot for the past several weeks. I've finally got something that looks decent in firefox, but has some annoying display problems in IE. I've been researching as much as I can of the information available online about IE's various css bugs, and I suspect my problems stem from the 3px float error and boxes that grow when they're not supposed to, but I'm having trouble working out how exactly these bugs and their workarounds apply in my particular case. The development version of my site design is being served at: http://clml.uchicago.edu:8081/ Hopefully the source is fairly readable. The css file is at http://clml.uchicago.edu:8081/static/css/main.css I would be most grateful if any of you could take a look at it and make any suggestions. In particular, I've noticed the following things get screwed up in IE: - the main content box (with the white background) is for some reason not flush with the menu to its left (as it is in firefox), and thus does not line up with the orange header and footer. - the blue div which runs horizontally across the field grows taller as the window resizes, whereas it is supposed to keep a fixed height (as it does in firefox). - the main content box doesn't respect its minimum height in IE I'm aware that PNGs don't render with transparency in IE, so I'll get around to fixing the logo by converting to a gif. Also, if you're curious, i'm rounding the corners of the header and footer in javascript (with MochiKit). Thanks for any assistance. Yell at me if these problems have been answered too often -- just provide a link to the appropriate part of the archives :) -- Max Bane [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Strange css rules
Thank you very much... also to others that replied. (mystery solved :-) ) Craig Cook skrev: *padding:1px; This is the lonestar hack which sends declarations only to IE5 (in both Windows and MacOS 9, it seems). http://www.media451.com/experiments/css/hacks/ie_star.html _width:140px; This is the underscore hack which sends declarations to IE5 and IE6 in Windows (fixed in IE7). http://wellstyled.com/css-underscore-hack.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] A newbie's first enounter with IE css bugs
Max Bane wrote: http://clml.uchicago.edu:8081/ - the main content box (with the white background) is for some reason not flush with the menu to its left (as it is in firefox), and thus does not line up with the orange header and footer. 3px jog bug. Simplest fix is to adjust the backside margin on the floating menu in IE6 (and older)... * html div#menu {margin-right: -3px;} - the blue div which runs horizontally across the field grows taller as the window resizes, whereas it is supposed to keep a fixed height (as it does in firefox). IE6 doesn't respect given dimensions. Only fix is to hide the overflow first - which prevents the element from growing, and then make the overflow visible again. Such a fix can only work in IE/win, since it is relying on IE-bugs to fix IE-bugs. Will also only work if the other elements can be relative positioned - which isn't always the case. No problems when added to _your_ page. * html div#crossbox {overflow: hidden;} * html div#crossbox * {position: relative;} - the main content box doesn't respect its minimum height in IE Make use of the fact that IE6 doesn't respect given dimensions. It'll work to your advantage here. * html #content {height: 350px;} --- Generally: font-size isn't fixed in any browser - despite the use of pixels, so it would be wise to change the element-dimensioning slightly to make it look better when subjected to regular, or optional, font-resizing. The menu overflows blue container in all my browsers. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Scrollable TABLE?
I have a DIV that defines a content well in a three - column layout. Within my content DIV, I have a TABLE whose width, data-wise, I won't be able to control. I would like to be able to have my table be horizontally scrollable based on whether or not the data to be displayed is wider than the content well. So far I've tried: table#spreadsheet_contents { width: 100%; overflow: scroll; } which doesn't work in either FF or IE. Do I have to abandon the table and construct the table out of DIVs in order to do this? Or should I use a frame perhaps? Thanks, Wes __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Scrollable TABLE?
Wes Gamble wrote: Do I have to abandon the table and construct the table out of DIVs in order to do this? Or should I use a frame perhaps? Neither. Wrap a div around your table, and set 'overflow: scroll' or 'overflow: auto' on that div. Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] A newbie's first enounter with IE css bugs
On 8/29/06, Gunlaug Sørtun [EMAIL PROTECTED] wrote: Max Bane wrote: http://clml.uchicago.edu:8081/ - the main content box (with the white background) is for some reason not flush with the menu to its left (as it is in firefox), and thus does not line up with the orange header and footer. 3px jog bug. Simplest fix is to adjust the backside margin on the floating menu in IE6 (and older)... * html div#menu {margin-right: -3px;} Aha - I had tried making the content box's margin-left -3px, but that alone did not work. Neither did your suggestion by itself -- but both of them together seem to have fixed it. Thanks! * html div#crossbox {overflow: hidden;} * html div#crossbox * {position: relative;} * html #content {height: 350px;} These worked perfectly as is. :) Generally: font-size isn't fixed in any browser - despite the use of pixels, so it would be wise to change the element-dimensioning slightly to make it look better when subjected to regular, or optional, font-resizing. The menu overflows blue container in all my browsers. Thanks for pointing this out. I'll play around with the overflow options and see what I can do to make it play nice with arbitrary font sizes. Thanks for the help! -- Max Bane [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] site testing, now with url!
I mistakenly wrote In this case George has already provided you with the answer (* html hack to hide from IE7). My apologies for misspelling your name Georg. -- This message has been scanned for viruses and dangerous content by ISPNZ's automated virus detection system, and is believed to be clean. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Newbie seeking layout examples to study
I've been working for about 2 days straight trying to get a fairly straightforward alignment set up (left navigation top header that runs the width of the page starting after left nav middle part of page (under header) right side of page (narrow margin) and footer) Hi Anne: Are you going for fixed width or fluid? I started to show you some of the things I did but not sure if it fits what you want. I've learned a great deal and perused many sites and bought 2 books - but still can't get it right. I would like to know if someone can point me to some sites that have a basic 3 column layout with header and footers where I can study the code? Thank you! In my mind, what you describe in your first paragraph would work with a two column layout. but maybe i'm not understanding. If I'm understanding what you want, its not particularly easy to find. Most sites, it seems have a header that stretches all the way across, then content (two or three columns) then a footer. Here's one I did recently (actually not even finished yet) that I think is what you're saying and its two columns, http://www.maineddc.org/about.htm The menu could easily go in what I'm calling the firstcolumn. So thought maybe this might help. best Donna -- Donna Jones Portland, Maine 207 772 0266 http://www.westendwebs.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] A newbie's first enounter with IE css bugs
Max Bane wrote: 3px jog bug. Simplest fix is to adjust the backside margin on the floating menu in IE6 (and older)... * html div#menu {margin-right: -3px;} Aha - I had tried making the content box's margin-left -3px, but that alone did not work. Neither did your suggestion by itself -- but both of them together seem to have fixed it. May I clear that one up a bit in case someone is looking for similar fixes. There's _more than one_ IE-bug involved here, and that may add a bit of confusion about the whole thing. Of course both fixes were needed, since the 3px jog can be seen as added to the left margin of #content. A 'margin-left: 150px' + '3px jog' will result in _153px distance_ from the left edge of #page, and IE6 can't go below that. However, you _had_ already reduced the left margin on #content below the danger-zone - IE had 'margin-left: 148px' while others had 'margin-left: 150px', so clearly I didn't have to add it in. What's _really_ important is that you also have a 'width: 70%' declared on #content, which acts as a 'hasLayout'[1] trigger in IE. This transfers the 3px jog onto the entire 'Layout box', and is usually seen as a 3px jog fix. Triggering 'hasLayout' also has the effect that #content no longer needs its left margin to rest on, and the left margin on #content can therefore just as well be set to zero the way IE/win sees it. Not even a ridiculous value of 'margin-left: -3000px' on #content will make a difference in IE6, since it won't let that '3px jog gap' become less than 3px anyway. The real fix is the pulled-in backside margin on the floating #menu that #content is lining up against - since the 3px jog is still there, and that's what is achieved by this... * html div#menu {margin-right: -3px;} ...which simply lets the 3px jog occupy some of the floating menu's space. However, this fix can only work when there's nothing else that creates a distance in addition to the 3px jog bug. regards Georg [1]http://www.satzansatz.de/cssd/onhavinglayout.html -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Newbie seeking layout examples to study
I would like to know if someone can point me to some sites that have a basic 3 column layout with header and footers where I can study the code? Thank you! I missed the earlier part of this thread, but try the layout gala: http://blog.html.it/layoutgala/ If you want a better explanation and further insight then the following might help: http://alistapart.com/articles/negativemargins http://alistapart.com/articles/holygrail HTH Mark -- This message has been scanned for viruses and dangerous content by ISPNZ's automated virus detection system, and is believed to be clean. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE fieldset background bug
I can't find this one in the wiki... With default browser positioning of legend (straddling the border) IE6 seems to paint the background of fieldset above its border, up to the top of the legend. body {background-color:#fff;} fieldset.basketholder {border: 1px solid #aaa; margin-bottom: 1.5em; padding:0; background-color: #eee; color:#000;} .basketholder legend {border: 1px solid #aaa; padding: 3px 5px; background-color: #fff; font-weight: bold; margin-left:0;margin-right:0; } applying the background colour to a child of fieldset also fails as that starts 0.5em below the top border of fieldset. Are there any workarounds for this (other than forgoing either the border or the background colour? -- Richard Grevers, New Plymouth, New Zealand Hat 1: Development Engineer, Webfarm Ltd. Hat 2: Dramatic Design www.dramatic.co.nz __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE fieldset background bug
Richard Grevers wrote: I can't find this one in the wiki... With default browser positioning of legend (straddling the border) IE6 seems to paint the background of fieldset above its border, up to the top of the legend. It's not actually a background bug, but rather an offset built into the entire construction in IE/win. I have studied it, but not needed a fix often enough to bother about all the details and documenting it. Are there any workarounds for this (other than forgoing either the border or the background colour? I've found the following to work quite well in IE6... @media screen { * html legend { margin: -24px 0 0 0; position: fixed; line-height: 1.4; } } ...which will simply correct, or counter-act, the margin on legend that's causing the problem in IE. Values must of course be tuned slightly to the actual case. Note that this fix also make use of the fact that IE6 doesn't properly understand 'position: fixed', so the the entire hack is needed to make sure no other browser ever see this fix. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/