Re: [css-d] Css menu
Abyss Information wrote: Here is a neat CSS menu - if anyone is looking for one http://koivi.com/css-menus/ You will do us all a big favor by adding this to our css-d WIKI. The information will be more persistent than a passing post. Find the WIKI link at the bottom of every posting. -- Bob Easton Accessibility Matters: http://access-matters.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] footer jumps in IE on a:hover
On 1/28/06, Tunnel 7 [EMAIL PROTECTED] wrote: Hello. This is my first tableless layout and I have one bug that I just can't figure out. When you hover over the body links the footer jumps - it looks like about 10 pixels of padding are added. It can best be seen on this page (mouse over body link then mouseover logo at top (it will jump back): http://www.blueowlmassage.com/dev/clients_forms.php It looks like you fixed the problem? Please let us know what you did to fix it. The site looks nice, but there is one error: div id=box is used twice. Might want to change it to div class=box -- -- Christian Montoya christianmontoya.com ... rdpdesign.com ... cssliquid.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Browser Bugs and Work Arounds
As a relatively newcomer to CSS, I'm just wondering if there is a good resource on-line that has a run down of all the major browser bugs and work arounds in one place. It seems that with each new how-to book that I pick up, I learn about a new bug and work around - It all gets a little confusing for a newbie. Just thought I would ask - thanks in advance for any info. -- Jamie Cantrell Creative Director Square 1 Creative ph. 703-738-9656 fax. 703-9974833 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Browser Bugs and Work Arounds
The wiki (found on the bottom of any list email) is a great resource, many (but not all) bugs can be found there. (specifically at http://css-discuss.incutio.com/?page=BrowserBugs) Zach On 1/29/06, jamie cantrell [EMAIL PROTECTED] wrote: As a relatively newcomer to CSS, I'm just wondering if there is a good resource on-line that has a run down of all the major browser bugs and work arounds in one place. It seems that with each new how-to book that I pick up, I learn about a new bug and work around - It all gets a little confusing for a newbie. Just thought I would ask - thanks in advance for any info. -- Jamie Cantrell Creative Director Square 1 Creative ph. 703-738-9656 fax. 703-9974833 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Browser Bugs and Work Arounds
jamie cantrell wrote: As a relatively newcomer to CSS, I'm just wondering if there is a good resource on-line that has a run down of all the major browser bugs and work arounds in one place. Try: http://css-discuss.incutio.com/?page=BrowserBugs ...as most useful bug-related sites are linked in there. It seems that with each new how-to book that I pick up, I learn about a new bug and work around - It all gets a little confusing for a newbie. (That's why I never buy any books about the subject. Good browsers get updated so often that most of what's written in books about bugs and workarounds is outdated by the time they hit the shelf.) The complete lack of logic behind most bugs is causing confusion even among somewhat more experienced developers. No really complete lists exist, and it would be a nightmare to create and maintain such lists anyway. There are millions of markup/CSS combinations that _might_ trigger bugs in one or another browser. Most bugs are found in IE/win at the moment, but that's another matter. To avoid some of the confusion, look at standard-support before deciding whether it's a bug or incomplete support you're dealing with - in each case. This list might help a bit: http://nanobox.chipx86.com/browser_support.php ...although that, and all other support-lists I've seen, are incomplete. The rest is solved through practical experience, testing, validating, and asking around on discussion-lists like css-d. First and foremost - don't hunt for bugs and look for workarounds. Most bugs are created by the designer - not the browsers. A good understanding of how it should work will counter-act most designer-bugs. The rest... is just bugs... http://www.gunlaug.no/contents/molly_1_15.html regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering horizontal list in a liquid container
See my annotations to your CSS below; perhaps it will fix your problem. Please let us know if it does, and if it doesn't, let us know what rendering it does result in so we can go from there. I finally got some time to troubleshoot the entire situation, and I put up a test case page on my server that explains everything in detail: http://www.charlestonwebsolutions.com/test_case/tester.html The page explains how I (with Zoe's help) got the horizontal list of images to stay horizontally centered inside of a fluid container in all of the browsers that I have at my disposal: Firefox 1.5 Safari Opera 8.51 (Mac and PC) IE 6.0 Netscape 8 (PC) IE 5.2.3 IE 5.5 IE 5.0 Note: There is an odd issue in IE 5.0, where the left side of the page's content gets chopped off - as if there were a negative left margin and overflow: hidden; but it is most likely specific to this page, and won't appear in others. IT only occurs in the lower part of the page. -- Jono Young Designer | Developer | Illustrator Charleston Web Solutions Bringing Higher Standards to the Lowcountry http://www.charlestonwebsolutions.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Form Layout - better table or CSS for this one?
I thought I was getting pretty good at accessible CSS driven form layouts, but I might have met my match this time (meaning - amount of time needed for table layout verses CSS). Here's Photoshop mock ups of two of the form pages. http://www.cyndustries.com/formTEST.cfm This is an 8 multi-page form, and stuff is all over the place on every page. Layouts for these *ain't* gonna change no matter what, so they've got to be done like these... Just wondering, would you folks go with tables on these for layout, or stick to your guns and work through the CSS? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE border problems
So this is my first time ever trying to use these forums. I hope I'm doing this right. I have been working on a small webpage for about a week new. I am new to CSS and I am having some small problems. One, IE seems to be having problems rendering the boarders. I tryed to use the position: relative; trick I found on the website earlier, and it worked for about a day. Then I did some more mods and now that fix no longer works. In fact, when I put that fix back in IE totally blows up and won't even show my text. Also, I have a gallery section at the bottom where neither IE or Firefox/Mozilla want to render the red border around the gallery section. They just leave that division extremely small and throw the picture/caption outside of the border. I hope I am clear as to how I would like my webpage to appear. Any suggestions would be wonderful. The URI is below: http://www.swilly.tk/~martin/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Form Layout - better table or CSS for this one?
Looks completely do-able in CSS to me. The first page I'd divide into two main DIVs, floating the first one left. Inside the first block, labels with a set width (could be in ems though if a fluid layout is required) floated left and cleared left, so that the input fields sit neatly next to them. A cleared heading for the 'Types of Cases' bit. Then the checkboxes in two groups, the first group floated left... And so on. Footer clearing both blocks. The main trick I use for CSS forms is to use a fixed width for floated labels etc, so that they simulate a table-like layout. Traditional right-aligned labels work in exactly the same way. You can also be sure then that your containing blocks are the right width to hold all that's in them. And the left-floated elements must clear the previous left-floated element above. Enclosing a label/input pair in a div or other block-level element makes it easier to keep them horizontally aligned, but shouldn't strictly be necessary. (I'd be interested in hearing of a bulletproof method for this.) Hope this gives you some encouragement. Chris On 1/29/06, Les Mizzell [EMAIL PROTECTED] wrote: I thought I was getting pretty good at accessible CSS driven form layouts, but I might have met my match this time (meaning - amount of time needed for table layout verses CSS). Here's Photoshop mock ups of two of the form pages. http://www.cyndustries.com/formTEST.cfm This is an 8 multi-page form, and stuff is all over the place on every page. Layouts for these *ain't* gonna change no matter what, so they've got to be done like these... Just wondering, would you folks go with tables on these for layout, or stick to your guns and work through the CSS? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Are there footers that play nicely with absolutely positioned content?
On 28/01/06, Ingo Chao [EMAIL PROTECTED] wrote: a while ago [1], I proposed an extra element to be placed last in the absolutely positioned box to establish some space beyond the box. Seems to work in my browsers. Hey Ingo, Thanks for this. I can see what it's meant to be doing, and while it doesn't solve all of my problems, it does at least solve one of them. However, I don't seemt o be getting it to work. In Firefox, the menu is still disappearing behind the footer and what's past the end of the screen can't be seen. In IE it's disappearing behind the footer, but is at least extending the absolutely positioned box so that you can see the rest of the menu poking out from behind the footer (which has glued itself to the bottom of the main content). Have a look at http://staging.renovate.com.au and see if you can figure out what's going wrong here. The CSS is at http://staging.renovate.com.au/_resources/pageShell.css and the new class is at the bottom. Cheers, Seona. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Are there footers that play nicely with absolutely positioned content?
On 28/01/06, Zoe M. Gillenwater [EMAIL PROTECTED] wrote: Seona Bellamy wrote: I've had a look on the wiki, but as far as I can tell the footers there don't seem to work real well when two of your three content columns are positioned absolutely. I think a better way to say this would be that absolutely positioned layouts don't work well with footers, but carry on. :-) True, and that is in fact what I meant. :) I was feeling a little frazzled when I typed my question, so I guess I wasn't explaining things all that well. Does anyone know how to tweak my existing footer to make it behave, or can point me to another one that I can use instead? It's not an issue of your footer not behaving. It's the absolute positioning that is the issue. When something is absolutely positioned, it's removed from the flow, so the other divs don't know it's there any more. This includes the footer, which is just as blissfully unaware as all the other stuff on the page, and nothing you can do can make it see that absolutely positioned object that's cruelly overlapping it. Yeah, I knew about the absolute positioning removing it from the flow. Once again I just didn't express myself all that well. *blush* So I guess what I really ought to have said was that I need a way to make my absolutely positioned box behave. :) There's a Javascript solution to this, but a far more reliable one is to avoid using absolute positioning to lay out large portions of your pages and use floats instead. Normally I do use floats, and it's my preferred way of laying out the page (this being one of the reasons why). In this case, however, I was trying to move the content further up the code since otherwise it will be preceeded by a great big menu. To get a better feel for what I'm talking about, have a look at: http://staging.renovate.com.au/ If the content is longest, everything works fine. Otherwise, the background doesn't extend to the bottom and the menu falls off the end of the page behind the footer. Is there a way to clear absolute elements like the way you can clear floats? I'm guessing not, but I figured I might as well ask. :) Hope this makes my problem a little clearer. Cheers, Seona. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE border problems
Martin Davis III wrote:
One, IE seems to be having problems rendering the boarders.
Also, I have a gallery section at the bottom where neither IE or
Firefox/Mozilla want to render the red border around the gallery
section.
http://www.swilly.tk/~martin/
Try adding:
.article,.gallery {height: 100%; overflow: hidden;}
...which will fix both problems in the mentioned browsers. All in
accordance with [1][2].
regards
Georg
[1]http://www.satzansatz.de/cssd/onhavinglayout.html
[2]http://www.w3.org/TR/CSS21/visuren.html#q15
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Are there footers that play nicely with absolutely positioned content?
Seona Bellamy wrote: ... I can see what it's meant to be doing, and while it doesn't solve all of my problems, it does at least solve one of them. However, I don't seemt o be getting it to work. In Firefox, the menu is still disappearing behind the footer and what's past the end of the screen can't be seen. In IE it's disappearing behind the footer, but is at least extending the absolutely positioned box so that you can see the rest of the menu poking out from behind the footer (which has glued itself to the bottom of the main content). Have a look at http://staging.renovate.com.au and see if you can figure out what's going wrong here. This is not what I had proposed: div id=ibase class=apboxgluesolvent ... /div Actually, I meant some sort of a solid element: div id=ibase ... div class=apboxgluesolvent!/div /div This does work with a fixed-positioned footer. A fixed footer at the bottom would just take the space it needs, regardless of the presence or absence of any absolutely positioned box. The footer still does not know anything about the a.p. box. With the glue solvent, the a.p. box gets space beyond itself. It's the html element that expands to contain the a.p.box plus glue solvent. Note that this does not change the fact that the a.p. box is still an absolutely positioned element. Apart from the html element, other elements on your page do not know about its presence. You cannot use the a.p. box to extend anything but the viewport. Therefore, your Jellow Mold design is not possible with a.p. elements. In your original post, you said you were using the Cookiecrook mod to Devnull's example method of a position:fixed-emulating frame-alike footer for IE in quirks mode. I had re-builded this kind of footer on my testcase [1] from the link you provided. If I understand your design correctly, you are using a different technique. Your current technique does not emulate a fixed positioning, but I can be wrong. Is there a way to clear absolute elements like the way you can clear floats? No. My proposal is meant to establish space between the absolute element's bottom edge and the bottom edge of the viewport. Regards, Ingo [1] http://www.satzansatz.de/cssd/apboxgluesolvent.html -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Are there footers that play nicely with absolutely positioned content?
On 30/01/06, Ingo Chao [EMAIL PROTECTED] wrote: Actually, I meant some sort of a solid element: div id=ibase ... div class=apboxgluesolvent!/div /div This does work with a fixed-positioned footer. A fixed footer at the bottom would just take the space it needs, regardless of the presence or absence of any absolutely positioned box. Ah-ha! Apologies, I'd misunderstood the way that that one was supposed to be working. Both are now playing nicely with regards to that box. Thanks you very much! You cannot use the a.p. box to extend anything but the viewport. Therefore, your Jellow Mold design is not possible with a.p. elements. Bummer. :( In your original post, you said you were using the Cookiecrook mod to Devnull's example method of a position:fixed-emulating frame-alike footer for IE in quirks mode. I had re-builded this kind of footer on my testcase [1] from the link you provided. If I understand your design correctly, you are using a different technique. Your current technique does not emulate a fixed positioning, but I can be wrong. Quite possibly. I am sur ethat was the one I ended up using, but I may have done something wrong. I might try again and see if I can get it to work right after a second try. I might use the code you've used on your page as a starting point, and see if I can figure out why mine isn't doing what it should. Is there a way to clear absolute elements like the way you can clear floats? No. Fair enough. Didn't think so, but it doesn't hurt to ask. :) Cheers, Seona. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS list question
I've got a simple 2 level CSS navigation menu that is giving me an odd issue, that is probably my fault. When you hover over one of the items in the top level, it displays the second level but pushes the adjacent top level items to the right. If anyone could point out what's being done wrong here I would greatly appreciate it. Thanks. http://caninetalk.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE and Firefox respond differently to pixel setting!
Hi, I used pixels to set the height on a web project I am working on. The height in IE does not respond(will not get any smaller) below a setting of 15px(in CSS), but in Firefox the setting reflects what height I put in the CSS. I would appreciate any advice on this matter. Thanks in advance! Thanks, Zach Byrd __ 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 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] 'One True Layout' doing odd things in IE/Win
Hi guys,
Well, I'm looking at abandoning my original layout, since it's just creating
far too many problems with column lengths. I've had a look around to see if
there were any solutions that combined floats and source ordering, and came
across the 'One True Layout' on PIE. Looks really good - just what I'm
looking for. However, I've hit a snag:
Coded it up, and in Firefox it looks great. Had a look at it in IE. Bummer.
:( The right-hand column has dropped down below the content, and the other
two columns have shifted to the right.
Can anyone have a look and tell me why this is happening? It's got me
stumped.
Page: http://staging.renovate.com.au
CSS: http://staging.renovate.com.au/_resources/pageShell.css
As a shortcut, here is the code for the relevant divs:
#content {
float: left;
width: 48.5%;
margin-left: 19%;
margin-bottom: -32742px;
padding-bottom: 32767px;
background-color: #FF;
}
#ibase {
float: left;
width: 19%;
margin-left: -67.5%;
margin-bottom: -32742px;
padding-bottom: 32767px;
background-color: #EBF2F7;
border: 1px #FF solid;
border-bottom: none;
text-align: left;
font-size: .8em;
}
#teasers {
float: right;
width: 32%;
margin: 0;
margin-bottom: -32742px;
padding-bottom: 32767px;
border: 1px #FF solid;
border-bottom: none;
}
Cheers,
Seona.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 'One True Layout' doing odd things in IE/Win
Seona Bellamy wrote: Can anyone have a look and tell me why this is happening? It's got me stumped. Page: http://staging.renovate.com.au CSS: http://staging.renovate.com.au/_resources/pageShell.css There are markup errors on the page. Try fixing those first and perhaps that will fix IE. In any event, it's best to fix those errors. If you're not sure where they are, run the page through the W3 validator: http://validator.w3.org/check?uri=http%3A%2F%2Fstaging.renovate.com.au%2F -- Al Sparber PVII http://www.projectseven.com Designing with CSS is sometimes like barreling down a crumbling mountain road at 90 miles per hour secure in the knowledge that repairs are scheduled for next Tuesday. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Menu Headers
Problem: to get compatibility between browsers for a simple menu system, which has two levels (main menu and submenus underneath). Attempts: numerous, but I cant get compatibility, and I am trying not to use tables (a table solution takes 5 minutes). My site is at http://www.merrows.co.uk. Request: I would like any links or suggestions about CSS for the above problem. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
