Re: [css-d] Minor differences in IE
I am still chipping away at my first css page and I now have the layout sorted - it looks fine in both FF and Opera but I get minor differences when viewed in IE (all on Windows XP Pro) - I would like to correct if possible. Page is at http://www.samatason.co.uk/clients/tc/index.php and Css is at http://www.samatason.co.uk/clients/tc/css/tc.css I would appreciate if any one could identify either the bug(s) I am experiencing or problems with my css (both index.php and tc.css validate but of course that doesn't mean all is ok!) Could you perhaps list what differences you see? The only one I can find at all is that there is a larger space under property finder in IE than FF. Other than that, I must be blind. :) IE6 xp FF1.5 __ 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] Clearing does not work as I hoped..
I'm applying the clearfix to a div that contains a label and a input
field. I'm floating the label to the left and the input field to the
right. For some reason the clearing does not work on this (FF1.5).
When
I remove the input { float: right; } it does.. why?
Example: http://yaxay.ya.funpic.de/clearfix.html (I'm sorry for the
ad,
it's not mine..)
When I view the page in FF1.5, I see the same thing that IE6/winxp is
showing me. I tried deleting the input float right but nothing
changed. Have you managed to fix this?
__
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] problem in IE with subnav layout
The page: http://www.lullabot.com/node/18 The problem in question is the secondary subnavigation layout. In IE, the background image only extends so far in IE, whereas in Firefox/everything else looks fine. See how, when correct, the li's are wide enough that they'll go past the left edge of the browser? Not happening in IE. If you outline div elements in both FF and IE you'll see that FF sends your navigation div all the way to the left, whereas IE does not. Where IE stops the white is exactly where the menu div ends. Get that menu div to extend left in IE and you'll be golden! __ 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] problem in IE with subnav layout
Well, if i outline the #secondary-nav div, i see in all browsers that the width of that div stays at 120px as defined in the css. However, the difference is that the a breaks out of this parent div in FF/others, and is displayed running all the way left to the edge of the browser. Not in IE. The a stays within the parent div (#secondary-nav). This isn't what I'm seeing. Using the CSS Editor in FF (web developer toolbar extension) I go to outline custom elements and highlight div and a. Both are extending completely the left (in the naviation, not content). In IE (doing the same thing using the IE Developer Toolbar) the div is restricted in size and does not go completely to the left. However, the a does. The white is being stopped at the left edge of the navigation div instead of running all the way to the left with the a. [sending screen shots off list] __ 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] Specificity Problem
Your original problem was that this selector was not sufficiently
specific to override your other declarations for the anchor. I am
suggesting that your content management system should generate
something like this, instead:
lia href=about id=active
id=menu_aboutspanAbout/span/a/li
Note we have just changed the class=active to id=active. Your
global CSS file would then include something like this:
ul li a#active {background-color: foo;}
One note about this: now he has two IDs instead of one ID and one
class.
__
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] css Failure in IE
No one laugh I just discovered that the CSS for my web site http://kaiserklan.com/roundtable does not work in I.E. It works great in Safari and in FireFox it just never accrued to me it wouldn't work in IE. Please if you have a minute take a look and show me the error of my way. Interesting note: on first load (in IE), the menu appears on top of other content, but after maximizing/shrinking (not minimizing) the window, the menu appears right below the banner like I assume it should. Hitting refresh on the page doesn't make the menu move from its correct position. Even closing the window and reopening it doesn't budge the menu back to its bad position. I tried clearing the cache and going back, but still no bad position again. The menu is the only thing I noticed that doesn't appear decently, though I assume you know you have horizontal scrolling at 800x600. I'm not sure exactly where your green left column is supposed to end so I didn't really look at that. One more note: that sure is a heck of a lot of vertical scrolling. __ 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 pushing IE XP scroll bar
http://videointegrations.com/serenity/procedure_relax_pleasure.html http://videointegrations.com/serenity/layout.css Look at the bottom for #footer The Horizontal scroll bar only in IE6 is apparently caused by the footer. I can't figure out how to get rid of it without causing the problems I resolved in using the css for this particular footer. Compared to anything in the wiki, I think this footer is best, with exception to this. I didn't find the exact solution but I can point out several problems that will steer you in the right direction. - you can't have 100% width on the same div as you define borders if you don't want horizontal scrolling - the header has padding-right that is pushing the horizontal scrolling farther than it otherwise would be - deleting the margins on #AllContent decreased the scrolling - deleting the padding on #Content took it down farther, too - deleting the margin/padding on #MiddleContent took it down even farther. Almost gone now. Hopefully you can finish the rest up. :) Other notes: - your header has borders with 0px width - your menu is impossible for me to read because of the coloring. I can't see it at all __ 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] Alignment problem - form/psuedoelements
I have a form in which I wanted to change the properties for the p:firstline pseudo-element, just for the form. However, when I added the :first-line psuedo-element to the p.formleft and p.formright rules, the text centered, despite my alignment designations. I would think that the text rules were picking up the desgination for the container (which is centered) except that they aligned just fine before I added the :first-line psuedo-element. http://www.drk-writing.com/debscards/debscards3.html I don't believe :first-line gets text-align. http://www.w3schools.com/css/css_pseudo_elements.asp __ 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] clearing a float without using a float
Roger Roelofs wrote: As Zoe said, you need a new 'block formatting context' All of the following will do that float: left; position: absolute; display: table; But, all of these cause the container to 'shrink-wrap' Floating .inside seems the most typical approach, but other approaches may be better in your circumstances. There are always trade-offs... Aditionally: * display:inline-block (not Gecko) * the overflow property (other than visible, the default). * display:table-cell (weak in Safari) Each have strengths and weaknesses. for IE win, you can also use 'hasLayout' winIE property (setting a width/height on the container). Thanks, that's exactly the information I needed. I didn't know what constituted a new block formatting context, which makes it hard to do that. I wish there was an option block-format: new; or something. O:-) Roger - I agree, it seems my inside div is my best bet from what you both say. I need that outside content div just right for the other divs I show/hide, and getting *that* layout working in different browsers was fun... Yeah, fun... [PS: thanks Georg!] Philippe - the browser check for the properties you gave will come in handy and hopefully I'll be able to find one that displays well in them all. Fortunately I must have already triggered haslayout for IE, since it's displaying just fine. Whew. Many thanks again, cj __ 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] Box Model
I was wondering if there is just one simple tried and true style sheet method that can always be applied to at least start out on the right foot that I can build upon which would remove any browser computability issues. At least then I could be comfortable in knowing the problem is me and not the browser, thus removing one variable from the debugging process. If I understand you right, that method is a strict doctype. :) That will get IE6 to use the w3c version of the box model instead of its non-standard version, and you can feed older versions of IE different widths through either conditional comments or hacks. afaik that's basically the best method, but the good news is that simply having a strict doctype and coding for the w3c model will show the same model on all browsers other then pre-IE6 for windows (which not many people use). [If I got that wrong, I'm sure someone will correct me!] :D __ 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] CSS3 user-select vs current options
PS I realize the solution may not be CSS related (apologies to the group), but the problem is ;-) To me, it doesn't seem like it should be. Selecting text is something you *do*, not something that *displays*, which to me means that selecting text is behavior and therefore falls in the realm of JS. All IMO. :) __ 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] clearing a float without using a float
In one of my site layouts, I have the navigation floated to the left and gave the content area a margin-left to give the float room to breathe. On my content area, I have p tags clearing left by default since I float several things on various pages. Where this creates a problem is when the p element is supposed to show horizontally in the same area as the menu. Zoe helped Jennifer with an issue like this earlier this week, but the recommended solution was to float the content area. What might be another solution if floating the content div isn't desirable? My (cut down) page: http://sltclan.com/images/cj/default.html Notice that the please select a layout paragraph is below the bottom of the left menu because of the clear: left I set in layout5.css. (The problem doesn't occur in IE.) __ 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] clearing a float without clearing another float
-- original email (snipped) -- I've run into this problem a few times lately, and have yet to figure out how to resolve it. Here is the test page: http://offlead.com/stuff/floattest/index.html Is there a way to clear the bottom of the thumbnail div without clearing the bottom of the column div? -- - jennifer's reply when I asked for clarification Still no fix, and I've had to scrap two different layouts (two different sites) because I couldn't figure out how to resolve this problem. In the first url, http://offlead.com/stuff/floattest/index.html, the H3 element and everything below it is supposed to be below the floated thumbnails and the first paragraph of text. Sometimes there is one thumb, sometimes two. Sometimes a short intro paragraph, sometimes a long one. Regardless of whether the intro is longer than the thumbs or vice versa (which is more usual), the H3 should be on a clean line, not wrapped up next to the thumbs. The index2.html page has it below it, but of course the clearing div also clears the floated left column, dropping the h3 and content below it all the way down the page. I need it just right under the thumbs. --- The problem with it dropping lies somewhere in the left column being floated, which I'm sure you already found out. :) When I delete all the content in the left column, doing a clear: left; on that h3 works just fine. I came up with a few interesting things, and hopefully you can use them to find a solution. I'm really hoping someone else might be able to chime in with a real fix, since my findings are a bit pitiful. -- 1 -- One thing that worked for me in FF is to make both the column and content display: table-cell. Add a clear: left; to your h3 (or put it in a div and make that clear left [which is what I did]), and FF should be looking good. Opera 8 looks good on a 1024x768 screen, but the h2 section drops below the pictures on an 800x600. I didn't look into it, but just FYI. Now for IE. Ugh. Obviously IE has no idea what table-cell is, so you still end up with the same problem you had originally. I wasn't sure how to fix this one. -- 2 -- Adding overflow: hidden; to #content brought that h3 section right up there in FF, though the content's left gap space got a lot bigger. However, if you chop that out somehow it looks just how you wanted. Opera has some sort of problem with your page I think, because once again the h2 part slides under the pictures on 800x600 *and* the pictures get cut off this time. Looks just peachy in 1024x768 though. IE... doesn't work. :-/ Sorry. __ 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] Blocks wrapping
For a more serious explanation, take a look at: http://css.maxdesign.com.au/listamatic/about-boxmodel.htm To avoid such problems in the future, don't use left and right paddings on an containing block with a fixed width, and use left and right margins for child elements, instead. And then people wonder why we have div-itis. :) Me = guilty, just for this very reason. The box model one of the very few things I like about the IE way. (Actually, off the top of my head I can't think of a single other thing...) __ 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] fluidly sometimes show a floating div
If I have understood you correctly, then...
.content-inside {display: table-cell;}
...seems to give a close to perfect line-up in Opera9prev1 Firefox
1.5, on windows.
regards
Georg
You're a lifesaver! Opera 8 goofs up content-inside when the cart isn't there,
but other than that both cart and no-cart versions are looking good across my
browsers here with this tweak (and a * html hack to hide it from IE, of course).
Thanks Georg!!
__
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] fluidly sometimes show a floating div
[cj] Opera 8 goofs up content-inside when the cart isn't there, but other than that both cart and no-cart versions are looking good across my browsers here with this tweak (and a * html hack to hide it from IE, of course). [georg] Oh, and make sure to clear memory before trying to reproduce any difficult flaws in any browser, as some may fool you slightly by using previous repeated renderings as a kind of fall-back. That's just an observation that I don't have any real details on. I believe I found why Opera was doing a little funk on my page, though I changed things around before I found the funk again. It seems that Opera wants to have a containing div be display: table whereas FF doesn't need that (to do what I need, at least). The new version of my page has the cart markup after the content markup. I feel like banging my head on my desk for asking advice on the wrong source order, but at least I learned something. :) The new version is at the same spot: http://sltclan.com/images/cj/details.html ... but this time FF is showing it how I'd like (with content on the left, cart on the right [when cart is visible]) and Opera/IE are putting cart on the bottom instead of the right. (I don't have any other browsers to test in, so I figure if FF/Opera show it right, I'm doing OK.) I'm not sure how to get Opera's display: table in there without messing the whole thing up. Then of course there's IE. :-/ I'm not picky on the two divs being table-cell, float, or whatever as long as they display similarly. Help, tricks, and advice appreciated as always, ~ cj __ 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] class vs. id
And, if you *do* want to IDentify each link, an ID is what you want, anyway. Conversely, when writing rules for a class, always specfy the element. If only we all had the freedom to do so. sigh of longing ~ cj [stuck with Microsoft hijacking ID tags for their own use and making it impossible for me to specifically name or style those hijacked IDs.] __ 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] fluidly sometimes show a floating div
Would you please do some clean-up in there before further trouble-shooting? That would sure be nice, wouldn't it? :) Unfortunately this is the mess asp.net makes of the pages and I'm stuck with it. I'm afraid HTML Tidy won't help me much as the pages are generated through asp. Going through some of the w3c validation errors, though, I can put all of them in one of two categories. --- Category 1: I did it right. --- Take the first link to a style sheet. This is the markup I have in my code: link type=text/css rel=stylesheet href=includes/default.css/ And this is what it is after asp.net gets through with it (location changed so I could put it on a live web site): link type=text/css rel=stylesheet href=details_files/default.css Notice it no longer has an ending tag /, and afaik there's nothing I can do about it. --- Category 2: I didn't do it. --- All those errors about the input and img tags not having a close? Nothing I can do about that either. I don't even put those input tags in there to begin with. Asp does. FF, IE6 and Opera rendered the live page differently, so I made a copy. HTMLTidy protested wildly, and changed things. Leaving the DTD intact, but only after having added the missing XHTML pieces. Fixing the errors in the .html page won't do anything except give someone more experience with fixing errors. :( Now all browsers render the same, but it doesn't look like what any of them rendered before. Completely FUBAR. Opera 8 and IE6 display the cart underneath the content, and FF displays the cart right next to the content for me. I would like to see the fubar rendering you're getting. :) Also, if the main content-container shall react on the presence/absence of that float, then the float should come first (as in your previous example). Of course it can be done backwards if you have a really good reason for it, but rather not. If having the cart first in the source order won't make the pages more tedious for screen readers or disabled-CSS people, I don't have a big problem with moving it back up. However, if one of these people is browsing around the site with something in their cart, they'll have to skip over the cart quite often. __ 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] Preloading Background Images
Is it possible to preload the images in anyway, via CSS or Javascript? I'm not that keen on combining the 6 images into 1 large one and changing the background position, as that would mean the homepage would take too long to appear. [cj] I think my brain is dead today, so forgive the newbie question: How would preloading 6 different images take less time than loading 1 combined image? __ 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] fluidly sometimes show a floating div
On some of my pages I want to be able to display a div (shopping cart) sometimes, but not always. When the div doesn't exist, I want the main content area to take up the full width of the browser window. When the shopping cart exists, I want the main content to leave room for the extra div. I thought I would be able to float it to the right and text would wrap around it, but I've found that isn't the case (even though it appears to work just fine for the picture I have nested in the content-inside div). Go figure, IE is doing what I'm trying to achieve, but I can't get FF (1.5) or Opera (8) to look the way I want. I've tried moving the shopping cart div around in the source as well, but I've had no luck. I hijacked our clan's web site, so no more geocities links. :) The cart is the blue box of filler numbers. The content-inside div is bordered in green. http://sltclan.com/images/cj/details.html The most relevant CSS file is http://sltclan.com/images/cj/details_files/layout1.css .cart and .content / .content-inside __ 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] Generic Block Class?
Is there any way to apply a style rule to all block level elements (and not to any inline elements, or any other kind of element for that matter) without listing all block level elements in the style sheet? No. Seems a rather odd kind of thing to try to do though. Being able to stick a border on all block elements sure helps with debugging though. ;) I use the outline block level elements option on the FF Web Developer Toolbar every day. __ 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] Vertical centering in a table cell using CSS
Is there a way to vertically center content in a table cell using CSS
(not HTML)?
A CSS table cell or an HTML table cell?
CSS:
[assume markup - div class=vcenter]
.vcenter {display: table-cell;vertical-align: middle;height: 100%;}
HTML:
[assume markup - td class=vcenter]
.vcenter {vertical-align: middle;}
__
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] Odd background image behavior, mystery margin
http://www.pixelmech.com/ (site)
http://www.pixelmech.com/wp-content/themes/orangey/style.css (css)
You'll note the pixelmech logotype has a gradation behind it, and
that
it is spaced some
distance down from the top of the page
html, body {margin: 0;padding: 0;}
the bg image will jump down 100px or so. I don't know why this
happens,
nor why the border fixes
it. Any suggestions would be great.
Might be the collapsing margins we've been seeing a lot on the list. :)
http://css-discuss.incutio.com/?page=CollapsingMargin
Add padding: 1px 0; to #base and you an safely take out your border.
__
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] Vertical centering in a table cell using CSS
This doesn't seem to center vertically in either IE 6 or Firefox... Do you have a sample page online? I noticed you cut out the HTML td example from my original reply and only left in the CSS one. Are you sure you were using the right example? The full code for my td table was more like this (I'm only using inline styles for simplicity in emails): table style=height: 100%; trtd style=height: 100%;vertical-align: middle;hello world/td/tr /table __ 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] delete
-Original Message- please delete this address from your list thank you The list policies available from the CSS-D web site answer how to do this: http://www.meyerweb.com/eric/css/discuss/info.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] Firefox active link dotted border problem
If you want to delete it completely, think 3 times or more, that focus ring *is* an accessibility feature. You don't provide any other feedback to keyboard users. It's not that I want to get rid of it, I just want it to stop messing up my layout. Why in the world does FF have to insert their accessibility feature into the document flow? Why can't they just overlay the border, rather than right into the margin, where it makes these jumping links that make viewers want to hurl? If you hadn't have said that it was a bug, I would have left the site thinking the raising of the selected/clicked tab was a feature to give more visual enhancement to the links. There wasn't even any hurling involved. :D __ 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] help with IE needed gain
-Original Message- I have intergrated my orum with my site. so far so good. except the way IE renders the page. if i could get away with swearing i would lol. for now i shall cry. can anyone suggest a fix, or see where i have gone wrong? all fine in FF windows, just IE is the problem http://www.soddengecko.com/forum/ I've looked at your poor site half a dozen times now, and I can't seem to spot where IE is messing it up. Hopefully someone else here will have a fresh set of eyes to peer around with. __ 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] #idname.classname - IE Support
-Original Message-
IE up to and including 6 on Windows only supports a single selector at
a
time, inline with the CSS 1 spec. There's a bit more infor from the IE
team at
I think that though this may be true with ID/Class combinations (I
haven't tested), it works fine for me in IE6sp2 with two classes. If
multiple classes are possible for you instead of the ID/Class combo, you
might try it. Here's my relevant info:
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
div class=wrapper-div input-div wpart
.wrapper-div {
/* stuff */
}
.input-div.wpart {
/* stuff */
}
__
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] min-width/width setting with inputs
I'm trying to create 3 divs that sit next to each other if there's room and who move to the next line if there's not. I originally set a width: 31% on them which worked great until I put a file upload input inside. The text and headings still obey the width, but of course the input does not. The width of the div can be seen by the blue border underneath the headers. I tried the width at min-width: 31% (with a width hack for non-mac IE) but it still didn't work quite right in FF and Opera. Miraculously (or maybe not so miraculously since it's probably a bug) IE displays it exactly how I'm trying to get it to work. What am I missing to get it to display on different lines in smaller resolutions on the good browsers? Site: http://www.geocities.com/gotcj/temp/inputproblem.html Most relevant CSS (down in the wrapper-div section): http://www.geocities.com/gotcj/temp/layout5.css Screen Shots from my local host: FF (1024x780): http://www.geocities.com/gotcj/temp/image1.png Opera (800x600): http://www.geocities.com/gotcj/temp/image2.png IE6 (800x600): http://www.geocities.com/gotcj/temp/image3.png NOTE: As always (ugh) I'm on a local host, so disable JavaScript before viewing my geocities links to avoid the ads. The relevant CSS is in the file named layout5. The two weird-named CSS files you get when using FF's developer edit CSS are from geocities and don't affect the problem that I can tell (jsoff.css and div.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/
Re: [css-d] one template to rule them all
Did I miss a post, or is the article not yet finished? Thierry created a new post about the article instead of replying here, so if you've been keeping tabs here, no you didn't miss it. :) http://www.tjkdesign.com/articles/liquid.asp __ 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] Nav bar/div not sitting correctly
I have a site design at:
http://www.lostwithiel.org.uk/index1.html
It looks like you need to clear it, since you float the ul. Try this
(and let us know if it works):
#topnavcontainer:after {
clear: both;
content: .;
display: block;
height: 0;
visibility: hidden;
}
/* hoop for ie \*/
* html #topnavcontainer {height: 0;}
__
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] Nav bar/div not sitting correctly
That is perfect and as you can see from the site worked. Is there any
reason why I could not have just deleted the float bit?
This would be the PERFECT time for someone who knows more about floating
menus to take over. :)
From one not-so-great with this, though... I think floating the UL
makes it display more consistently across browsers, but my memory is
faulty at best. Maybe that consistency thing is just with LI, in which
case the following CSS steps work in FireFox (not tested in IE):
#topnavcontainer ul {
*DELETE* float: left;
}
#topnavcontainer ul li {
*DELETE* display: inline;
*ADD* float: left;
*ADD* list-style: none;
}
#topnavcontainer ul li a {
*DELETE* float: left;
}
*CHANGE* that #topnavcontainer:after { to be #topnavcontainer
ul:after {
*CHANGE* that * html topnavcontainer { to be * html topnavcontainer
ul {
__
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] Submenu width in list navbar
My aim is to have a greater width on the submenus than the width of the parent elements. My sample page is at http://www.webdesign101.dk/www/cssmenu/dropdownmenu/eks14.html WinXP IEsp2 - on your Inner Planet - Mars drop down, the pop out covers up the expanded space that IE puts in the Mars area. In other words, that second level pop out has the same position relative to the Mars link that FireFox has. __ 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] What should the selector be?
Your problem stems from the rule stating that id/class names must begin with an alphabetical character I believe. Try changing your id of 2-1 to id2-1 or along those lines. When I do this on your page, the what's right for me li turns white with a red background instead of the default of the rest of the list. __ 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] Flowable CSS Columns?
I better say at the start I didn't fully understand the question, so this might be completely off base. If so, ignore it. If not, well good. :) One thing to note is that it's possible to fake the look of crossing columns by using background images. The wiki has many useful links to help you with faux columns if you think this might work for you. http://css-discuss.incutio.com/?page=CssLayouts ++ || | multi-column text that takes up both columns | | but is really only one div with width: 100%| || | little div that looks | another little div| | like a column and only | that takes up 49.9% | | takes up 50% of the| of the space to allow | | space | for rounding errors | || ++ Then have a background image positioned 50% across to look like different columns? __ 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] stuck on IE scrolling/positioning/background/form bug
One way around the confidentiality issue would be to take all text or revealing names out of the code and post a simple test page with only your layout elements in it (including form fields, since those are where you issues lie). Without seeing the problem, I'll try to magically pull answers out of my hat though. Maybe I'll get lucky. :) However, when there is a form nested somewhere inside the div its background (image or color) is drawn from the left edge of the page instead of the left edge of the div. What CSS do you have for bug 1? Are you specifying the background 169px from the left, or leaving it default? Do you have negative margins or a large padding on the left side of that div? You might try putting a border-left on that div and see where the border shows up. If you simply set a background without a background-position specified, your div had no negative left margin, and your div had no large left padding, your background should show correctly according to everything I understand. there's a form inside the div...suddenly IE adds about 15-20px of unwanted padding between the top of the div and the top of its content. You might try telling ie only that form elements have padding/margin-top: 0 for bug 2. There are some tricky padding and margin issues and collapsing that I don't fully understand, but at least this is something to try. But if I absolute-position it and its content is longer than the window, either the page doesn't scroll at all or the page scrolls but fails to scroll far enough to show all the elements in it. For bug 3, absolute positions are taken out of the flow and don't resize. If you need it to resize and/or scroll, I think you'll need to un-absolute it. __ 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] Styling COL and COLGROUP
The extra classes have relevant names, so you shouldn't feel that they are obstructing your quest for purity. I think the problem posed is that *every* td has the same thing, the same thing, the same thing, so why should a class have to specified 40 times (number pulled from a hat) to style this one type of td? Now, if only one city td needed to be special, a class there would be different. For example, the city currently displayed on the page or in a little window would be bolded and made bigger. However, copy/pasting 'class=city' 40 times doesn't feel like a good programming practice, because we already know it's a city. It's the same dang thing 40 times. Making a colgroup for this city *one* time and being done with it is the intuitive thing to do, but since it doesn't work... problem. I think until the inheritance issue with colgroup is figured out, this will always be an issue. The instinctive reaction to colgroup and what it *should* do will bring up the restricting 4 properties limit as many times as there are people who see there is even a colgroup to begin with. :) My 2 cents, at least! __ 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] Styling COL and COLGROUP
Have you tried it? http://css-discuss.incutio.com/?page=StylingColumns (Combination method) (Sorry you get this twice Steve; I sent it off list accidentally the first time.) I was referring to colgroup as specified in the original post, not work-around methods (that consequently don't work in IE). Thank you for pointing the page out, however, since it might help the original poster. Now consider the following scenario: I have a feature table in which I have 5 total columns: ID, Name, Description, Cost, and Activated. On my main feature page, I wish to display the Name, Desc, and Cost fields in that order. On my manage your features page, I wish to display the Name, Description, and Activated fields in that order. On my shopping cart page, I wish to display the Name and Cost fields in that order. Using the method you linked to, I will need to style all tables completely separate in my CSS. Using what most people think to be what colgroup should be, I would only have 1 colgroup per field, and simply omit or add a colgroup when I display certain columns. Easy! (but currently not possible) This isn't a particularly specific example, but this is the spot I find my own self stuck in with my work environment restrictions. To get around this, I have to specify classes in each td I wish to style as a colgroup. I understand exactly the frustration Christianz is experiencing, and hopefully the scenario helped you see a narrowed use for the wiki's example. :) Note: I'm not saying the wiki example is bad! Please don't start arguing with me about that, because I definitely for-100%-sure am NOT saying that. I'm just saying not everyone has the luxury of having the exact same styling needs in the exact same order on every table, which is where being able to style colgroups more would be invaluable. __ 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] Styling COL and COLGROUP
It's possible, and pretty simple. You just use the solution from the wiki, where you style the COL and IE picks it up, and use adjacent siblings for standards-complient browsers. This is what I'm trying to avoid, since I would rather not style for individual browsers, which means it would be not-simple to me. I'm all for hacking the dead, I love CSS, and I use it as much as possible, but when it means keeping separate styling in very different ways all over the place for each browser, I don't have the patience (personal flaw) nor time (dang deadlines) to keep up with all of that. [Giving the tables individual names would be possible for me, but giving the body tag a class would not in my personal situation, as I'm using asp.net and master pages. To be more technically correct, I could use code behind to set a class on the body depending on what the page's file name was or some such way, but this would be a hassle for me to set up for no real purpose. Plus keep in mind here that my shopping cart displays on the side (or bottom depending on what layout is chosen) of the main section, which would potentially have both of the other tables on it (though not at the same time, of course), which the body-class method wouldn't cover.] It's a little bit more CSS, but it gets the job done without wading into the conceptual impossibility that is trying to force table cells to inherit from a COL or COLGROUP. Or I could get the job done the stinky, effective, and cross-browser compatible way and not mess with clunky CSS tricks to force table cells to behave the same in different browsers by different means. :) Please understand that I'm not knocking the suggestion as one that's not feasible or useful, but it would create a larger manageability curve that I personally would prefer not to climb, even if I had the time. Respectfully, ~ cj __ 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] ASP.NET/CSS
I basically want to use the programming power of ASP.NET with the site layout of CSS. Documentation weems very sparse. Anyone able to help out here? Finally a post I'm able to answer! Here at my work place, we've been using asp.net 2.0 since it was in beta, and I know how hard it is to get asp to play nice with CSS. I'll show you a few tricks I've come up with, as well as explain how I got my CSS Zen Garden to work. As I'm developing a site for our customers to use for *their* customers, I need the layout to be as flexible and changeable as possible. I'll use my trusty geocities account to provide some screen shots of what I'm doing, and I'll probably end up staying late at work to make up for the time this cost me. ;) But it will be worth it. === Tip 1 - Skin files === First of all, you need to half way buy into the skinning function asp offers. I know these skin things only do inline code, but that's not what I use it for. Instead of specifying CSS in this skin file, specify CSS *classes*, like this: asp:Button CssClass=x-button runat=server/ asp:CheckBox CssClass=x-checkbox runat=server/ Or this: asp:GridView CssClass=x-gridview runat=server GridLines=Vertical AlternatingRowStyle CssClass=x-gv-alternating/ FooterStyle CssClass=x-gv-footer/ HeaderStyle CssClass=x-gv-header/ PagerStyle CssClass=x-gv-pager/ %--RowStyle CssClass=x-gv-row/--% SelectedRowStyle CssClass=x-gv-selectedrow/ /asp:GridView Doing this gives you default CSS classes for everything you can specify. To access certain ones, refer to them as part of divs. Let's say you have the following asp: asp:Panel CssClass=shopping-div ID=divShopping runat=server Visible=false asp:Panel CssClass=category-div ID=divCartServices runat=server h5New Service Subscriptions/h5 asp:GridView ID=gvCartServices runat=server ShowHeader=false AutoGenerateColumns=False DataSourceID=odsCartServices DataKeyNames=ServiceID Ignoring how bad that looks with word wrap, you can now access your gridview by the path .shopping-div .category-div .x-gridview (remember it has a class x-gridview from my skin file), and also have that gridview under something else, such as .sub-content .x-gridview. Using the CssClass (mentioned already) is also handy for styling rows and such: asp:BoundField ItemStyle-CssClass=t-name DataField=PackageName / === Tip 2 - Extra Markup === One thing to keep in mind is that MS loves to spit tables and spans at you. With this in mind, use a repeater instead of a dataview and a literal instead of a label. Repeaters and literals use 0 extra markup, whereas dataview adds a table around your info, and label adds a span. There's not much extra I've found to get around the extra tables, so advice from someone else is much appreciated. === Tip 3 - CSS Files === I use a master page with 2 CSS links in it: link rel=stylesheet type=text/css href=default.css / link rel=stylesheet type=text/css runat=server id=ssLayout/ The first one is a file that includes basic fixers, like font-size for IE using ems, etc, which is included in every page regardless of anything else. The second one is generated by my C# code-behind and is based on a drop down list I have for different layouts. This allows me to change CSS files on the fly, which is really nice. For those that read TJK's post about Liquid Layouts [1] or PIE's In Search of the One True Layout (which were both published after my question of how to get one html file to have different layouts) you can see what this drop down lets me do. There you go: Zen Garden. :) But wait, there's more! We have our own BasePage class(?) that we put in our code behind instead of inheriting specifically from the default asp.net one. Our base page thingy (I'm hopeless on C#) gets a user preference setting from the session and inserts a third CSS file according to which theme is preferred. This means drum roll that you (the user, at least for now until our customers set a theme in stone) can change themes AND layouts INDIVIDUALLY for the whole site with two drop down lists, one for each change. Let me tell you, it's awesome (at least to me lol) and I wish I could show you a live site. == Ok, shutting up now == Hopefully my rambling helped a little bit with how to get asp to play nicer with CSS and how to do your zen garden. If you have any questions, I'll sure try to answer. == Screen shots == (only online temporarily, for this list's eyes only). Obviously they're not all perfected, but you can see the functionality when viewing the same page in all screen shots using an 800xX size screen. Note to those who want to critique the themes: These themes are what I've put together in a short time to demonstrate what our customers can do with CSS and are not necessarily going to be used. That said, any comments are
Re: [css-d] Form elements aligment
A few nice sites that have done forms with CSS: http://jeffhowden.com/code/css/forms/ http://www.themaninblue.com/writing/perspective/2004/03/24/ - http://www.themaninblue.com/experiment/InForm/ http://www.javier-julio.com/design/css/downloads/ - http://www.javier-julio.com/design/css/samples/form.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] question about universal declaration of zero padding, margin in css stylesheets
Your top definition will automatically make all div have 0/0 (the way
you specified it). You can change this for a specific div if you
want, but if you do not specify margin/padding for specifics, they'll be
0/0.
-Original Message-
If I declare at the top of my stylesheet
div {margin:0; padding:0;}
when I declare a specific div eg: #header, do I need to declare the
zero
attributes in there as well or does my top declaration take care of
that?
__
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] Button element
This is the closest I was able to come to the default look while
changing the color:
.x-button {
background-color: #ffcd45; /* ~ */
border-style: outset;
}
Notice I do *not* specify either border width or color. That seemed to
do the trick for me.
(hope that's what you meant)
-Original Message-
Is it possible to style the button element while keeping the distincnt
shape? I want to control the :hover effect.
__
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] Explanation of Spans
This goes a bit off topic from the original post, but you can change the first letter of a page without a span. The p:first-letter works well, and you are free to replace p with another definition. To get a bit more complicated, you can also select the first p of the page and then the first letter of that p, which would give you the elasticity of no extra classes. The w3school has a little bit more about it. http://www.w3schools.com/css/css_pseudo_elements.asp hope that helps. :) -Original Message- The only place in the entire municipal site that I manage that I use a span is for doing drop caps at the beginning of a page of text. __ 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] tool to help debug css across browsers
I've seen the new IE developer toolbar [1] brought up a couple times now, and of course the Aardvark [2] and Web Developer [3] FireFox extensions, but perhaps not everyone knows about the bookmarks from slayeroffice.com. The bookmarks, when clicked, bring up a little window (using JavaScript) that tells you information about the different parts of the page when you hover over them, and has been invaluable to me. Being a bookmark, it's not limited to one or two browsers. There are two versions, and both have their strengths. MODI v1: http://slayeroffice.com/?c=/content/tools/modi.html MODI v2: http://slayeroffice.com/tools/modi/v2.0/modi_help.html [3]FireFox Web Developer Extension: https://addons.mozilla.org/extensions/moreinfo.php?id=60 [2]Aardvark: http://karmatics.com/aardvark [1]IE Developer Toolbar http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4 511-bb3e-2d5e1db91038displaylang=en __ 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 Bugs with div alignment
I was curious as well. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Zoe M. Gillenwater Sent: Thursday, September 22, 2005 3:14 PM To: css-d@lists.css-discuss.org Subject: Re: [css-d] IE Bugs with div alignment Julie Davis wrote: -Original Message- My page looks perfect in Firefox v.1, Navigator v.6-8, Safari v.2, and Mozilla v.1.7 but the alignment of the main content portion of my page is really wild. http://www.clarkson.edu/depts/newweb/clarkson_experience/index.html CJ Larson [EMAIL PROTECTED] wrote on 09/21/2005 01:03:46 PM: To take a guess, I would imagine you've run into the ie float double-margin bug. Good news is that it's easily fixable. :) http://www.positioniseverything.net/explorer/doubled-margin.html Thanks for the idea CJ! I gave it a try though and it seems to not be the fix for my problem. i was so hoping it was that easy. Any other ideas, anyone? I don't see the difference between the page in FF and IE. Did you fix it? If so, how? Zoe -- Zoe M. Gillenwater Design Specialist UNC Highway Safety Research Center http://www.hsrc.unc.edu __ 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] Site Check: Completed Lice_control.com
Looking good in my FF 1.6 and in IE 6.02 SP2 on XP! The only issue I ran into was that the menu displays a big back box if images are hidden. -Original Message- I am 99.9% complete. Just doing the final once over. Please take a peak for me and let me know if anyones browsers are rendering crazy things. Thanks www.lice-control.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] Horizontal Menu question
* Where does this gap come in front of the menu items?
It comes from a default padding (in ff) and margin (in ie) on the ul.
This should fix it:
#bread ul {
margin-left: 0;
padding-left: 0;
}
While IE does not display the bottom border.
How can I achieve the same on IE?
Perhaps changing the height of your #bread is possible? If so, try
adding the following to #bread. You'll have to play around with the
height so that it plays nice with zooming on text, but it will get you
started.
#bread {
height: 27px;
}
__
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] Designing without tables
FireFox gives the user the ability to resize text regardless of what the
designer specified as units in their CSS code. IE, on the other hand,
doesn't resize the text if the CSS specifies the font in px/pt, which is
what the default template for zengarden does:
body { font: 9pt/17pt georgia; }
However, on ebay, they used a different method:
body { font-size:small; }
hth. :)
-Original Message-
In IE6 the text on this page (http://www.csszengarden.com) doesn't
change even when I select Text Size-Largest. On the other hand when I
do the same thing on another page (eg., www.ebay.com) it works fine, and
the text size is enlarged.
When doing the same in Firefox, the text on both web pages are
enlarged.
__
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 Bugs with div alignment
To take a guess, I would imagine you've run into the ie float double-margin bug. Good news is that it's easily fixable. :) http://www.positioniseverything.net/explorer/doubled-margin.html -Original Message- My page looks perfect in Firefox v.1, Navigator v.6-8, Safari v.2, and Mozilla v.1.7 but the alignment of the main content portion of my page is really wild. http://www.clarkson.edu/depts/newweb/clarkson_experience/index.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] maxlength attribute in css
What they *might* be asking is - A designer wants to format text boxes to be the same horizontal size even though their inputs are set at different maximums. For example, a phone number field takes 11 digits, give or take, and a name field takes 30 let's say, but the designer might want them both to be the same visual size to make the form prettier. This is a complete guess, so ignore it if it's completely irrelevant. :) -Original Message- I have been googling without success around for a way to set maxlength for form inputs in CSS -- is this possible as far as anyone knows? If not, and if I have to use Javascript to achieve this task, can someone point me to a Javascript discussion list that is equivalent to this CSS list? What is wrong with input maxlengh=20 ... ? A maximum length is not a visual attribute, it is a data restriction, and therefore not the job of css. With JavaScript youd need to read out the value length of the element on every keyup and stop at a certain length. __ 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] variable width left column, left+right column tops line up
I see no answer on the list. Maybe someone responded off list? Not yet at least, and thank you for your time. :) If not, the reason is that it's impossible to solve a problem or offer a solution without seeing working code, and without knowing exactly what you want to see. I know. I assume that the reason I don't get replies is that people really need working code, but our web design is done on the intranet, and I have no access to a site to upload to the outside world. I try to be as descriptive as possible without creating an essay, but it's not the same and I know it. See our WIKI for more information on centering: http://css-discuss.incutio.com/?page=CenteringBlockElement Yep, I've been to the wiki a lot. :) Thanks! __ 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: Re[2]: [css-d] variable width left column, left+right column tops line up
Yes, it's associated; The bullets on the right describe the picture on the left. My apologies for not making that clear. I know the table isn't the ideal solution, but it's the only one I could come up with. Perhaps I'll get lucky with CSS 3. :) Looks like I get to play with tables. Oh joy! -Original Message- Is the graphic associated with the list or is it just random decoration? If it /is/ associated, a table would be an OK (if not ideal) element to semantically link these elements together. __ 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] Headers and footers
You might also try http://webdesign-l.com :) -Original Message- I figured the post was a bit off-topic, but when I asked on the techwr-l list this was the only good list I got. __ 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] variable width left column, left+right column tops line up
My problem with floated divs is that the left column will not always be the same width. (The height doesn't concern me apart from wanting to vertically center the graphic and list.) This wouldn't be a problem if I knew the maximum width of the graphics, but since I don't, the left column is only as wide as the picture it holds - not as wide as the widest picture on the page. From what I've seen, floated divs would give the following output: +-+ | = :| | = : - bullet | | ===Graphic=== : - bullet | | = : - long bullet | | = :| +-+ / [notice 2nd div left column much narrower] / [height doesn't matter] +--+ | === : - bullet | | Graphic : - bullet | | === : - long long bullet| +--+ The question I posed to the list was asking if a CSS method exists that would keep the left column the same width for all graphic/list pairs without knowing the width (or height) of the graphic (and not using tables, obviously). I don't know enough CSS to be able to say for certain that this functionality doesn't exist, but from what I *do* know, I don't think it does. I hope that helps clarify what I was trying to say. :) If not, let me know! Everything I say always makes sense to _me_. lol From: Christian You don't have to do a table... you could use floated divs. It's more accessible and will probably work the same way. __ 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] Variation on off-site links - thanks
I'm not sure if you're still looking for comments, so ignore this if you're already good to go. :) In FireFox: I see a graphic on every link except the inserted graphic lines, where I don't see the graphic on either inserted bullet. In ie: I see a graphic on the very first line and all 4 bullets under the first refinements section. I do not see a graphic on the second one-sentence section nor the second refinements section. -Original Message- I created a second test page incorporating some of the ideas offered: http://www.johnhuetz.com/imagetest2.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] Opera and IE, each having different problems
In my IE, I actually have both the header *and* footer areas over the scrollbar. I'm not sure if you were getting this additional frustration or not. IE Version: 6.0.2900 SP2 -Original Message- URL: http://www.cityofdis.org/signo Question (finally!): how can I get the size of the pageHeader div to behave correctly from the beggining of the page load? __ 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] Is it possible to create this type of a layout with CSS?
The problem with floating the text to the right is that it falls below the header. It jumps right on top of my main content area underneath the header section, where you see the xxx to represent unreadable text. [logo not floated, right text floated] +--+ | LOGO | +--+ x x I can't set a min-height because I don't know the height of the logo. Also, if I float the logo, it no longer sets a height for the header. This is where the clearing div would come in, which I was hoping to avoid by not floating the header. This is still significantly less code than you would use with tables. Hehe. That's the kicker. I could do the above in 4 table cells. With CSS I have to have various floating and positioning code, 3 divs with unique classes, AND a blank clearing div. Don't get me wrong - I'm not advocating tables! I'm merely pointing out that tables (imo) are a heck of a lot easier than CSS to lay out when dealing with things like this for the non-experts. Advice much appreciated, and thank you. :) Any other ideas someone might be able to toss my way? -Original Message- From: Rob Cochrane [mailto:[EMAIL PROTECTED] [Style 1] (Logo on left, text right aligned) +--+ login/out | LOGO |name +--+ Images are inline and will force the height for the div. The alternate is to set a minimum height but this is not supported by all browsers. Some method of clearing the containing div is required if you are containing floated elements. This is still significantly less code than you would use with tables. __ 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] Is it possible to create this type of a layout with CSS?
I have a couple very similar questions. Currently, is there another method to style the following two header layouts without needing an additional clearing div? (Top line is the width of entire page) In my case, I can't specify a height for the logo, because the companies we deal with will want to put their own logo on the pages, and I can't code that height into the CSS. I've had an especially hard time with the second style. [Style 1] (Logo on left, text right aligned) +--+ login/out | LOGO |name +--+ [Style 2] (Logo centered between page margins, text right aligned, without the right text moving the image to the left) +--+ login/out | LOGO |name +--+ -Original Message- Hi Melissa, This is a quick run tested in FF IE6 win sp2. Works ok change sizes etc to suit. snip __ 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] Lateral backgrounds on fluid layout
Ah, my mistake. I'll have to let the more experienced give you the perfect answer, but I'll take a stab at a not-so-great one (or two). Is it possible in your layout to have a blank div to both the right and the left of the main content? You would then have a 3 column type of layout, but the outer two would only contain your background image. -or- Still using the method I mentioned in my previous reply, you can position the background image in CSS, so if you can figure out where your middle content edges are, you could place the images accordingly. I'm not sure if this is possible, but I figured I might as well mention it. waits for those above-mentioned experts. :) -Original Message- I understood what you suggested, but it's not quite what I had in mind. What I want is the background from #left-graphic not to be aligned to left top, but to the right edge of the layout, and the background from #right-graphic to be aligned to the right edge of the layout. CJ wrote: The method I've seen spoken of is to have two separate divs; one for the left graphic, one for the right graphic. Each div would take the whole screen. __ 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] Nav technique suggestion
[A little bit off the topic you are specifically referring to:] One possible change you might make would be to take the text out of the graphic and make it actual text, since the text isn't changing between normal and :hover states. This would help the accessibility of your site in that screen readers wouldn't need to read image alt tags, at least. I'm not as fluent in accessibility as I'd like to be, so if I'm wrong someone please correct me! -Original Message- Here is all of the nav together to see what I am going for (rollover state and normal state). http://www.lice-control.com/images/licecontrolsite-nav.gif __ 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] Lateral backgrounds on fluid layout
The method I've seen spoken of is to have two separate divs; one for
the left graphic, one for the right graphic. Each div would take the
whole screen.
For example -
#left-graphic {
background-image: url();
background-repeat: repeat-y;
background-position: left-top;
height: 100%;
width: 100%;
}
#right-graphic {
background-image: url();
background-repeat: repeat-y;
background-position: right top;
height: 100%;
width: 100%;}
div id=left-graphic
div id=right-graphic
~~ all other content ~~
/div
/div
-Original Message-
I can't figure a way out of how can I add two repeat-y lateral external
image backgrounds to a fluid layout.
__
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] Header Width
Wouldn't you be able to have { display: inline; clear: both; } instead
of floating them?
-Original Message-
The header elements are known as block level elements. You can turn
them into inline elements to with the following style rule:
h1, h2, h3, h4, h5, h6 {
display: inline;
}
-Original Message-
Another way (besides making them inline) is to float them right or
left. Floated block elements shrink to the size of their contents.
Then,
of course, you need to cancel the float with the next element on the
page
so that it doesn't align next to the headline:
h1Headline/h1
p id=bylineby Writer/p
h1
{
float: left;
}
p.byline
{
clear: left;
}
__
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] simple problem - difficult solution
This[1] is a real issue and one that should have been addressed by the
CSS spec. Setting a table to 100% high in IE in quirks mode makes the
table the height of the screen, a really useful feature. This isn't
available in standards mode, and there is *no* equivalent in a
tableless design.
No need for quirks mode, I don't think. Set html,body{height:100%} (as
well as your table) and you should be good to go in standards mode.
I'll let others reply to the more specific height details of CSS, as I
can get it working but don't understand it as well as I'd like to.
[1] making page content full height of the screen without hard coding
height.
__
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] list output spanning columns
I need to display a list of features we offer and am think that the best way would be to have the list expand or contract depending on how much room the main content area width allows. For example, in 1024x768: - Item #1 - Item #4 - Item #7 - Item #10 - Item #2 - Item #5 - Item #8 - Item #11 - Item #3 - Item #6 - Item #9 - Item #12 And in 800x600 it would collapse to: - Item #1 - Item #5 - Item #9 - Item #2 - Item #6 - Item #10 - Item #3 - Item #7 - Item #11 - Item #4 - Item #8 - Item #12 I saw a post this week about a newspaper-style site doing something similar, but with the vertical height instead of horizontal. In my case, it's fine if these scroll down the page, but the goal would be to keep the vertical scrolling to a minimum, hence them spanning the width. What code I use (ie ul, p, div, span, etc) to spit the list out from my database is completely open, as long as I can get the functionality. Is this possible with CSS? Pointers to a site or help section dealing with this that I overlooked are also very welcome. Thanks for looking. :) ~ cj __ 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] some unwanted spacing in FF/Mozilla
This might not be exactly the right solution, but it's at least a quick
look to help you before the more savvy people respond.
The problem that you're explaining actually happens for the whole main
content area on my FF 1.0.6, not just the testimonials box. If you add
this bit of code, it fixes on FF, which might lead you in the right
direction to an all-browser solution.
#middle {margin-top: -6px;}
-Original Message-
On this site :http://www.semlogic.com/
there is some unwanted spacing on the right margin where my h2 is for
testimonials is. (between the header and top gray bar). I am not sure
where this is coming from. Can someone take a look and give me some
possible suggestions?
__
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] Center alignment problem
Other than the site map and the bottom left fixed graphic rendering differently, I don't see a center align in FF 1.0.6 that doesn't occur in IE 6. Which specific items are you having problems with? -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of David Bailey Sent: Wednesday, August 17, 2005 6:03 PM To: css-d@lists.css-discuss.org Subject: [css-d] Center alignment problem I am having trouble with items aligning in the center of the page which I can't find why. Of all things, it is working in IE win, but not in FF win and Safari. Site: http://www.copyquality.co.nz CSS: http://www.copyquality.co.nz/styles/main.css Any help would be much appreciated. David __ 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] text box text not wrapping
Unfortunately I don't think I have control over which type of text input asp.net uses. Thanks for the quick replies! ps - hacks or any other weird ways I can change a textbox to wrap the text (off-list) will be met by eager eyes! -Original Message- Use a textarea element? Input elements are one line only... -Original Message- In my table, a user may click an edit button, which turns the table cell's data into editable text boxes. The description column has more text than can be seen on one line without scrolling (with no scroll bar - very annoying), so I changed the CSS to display the text box as a taller height. The text doesn't seem to care, however, and though the text box did indeed grow taller, the text is staying on the first line. __ 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] various problems, will need off-list help
I fear that my attempt at having a CSS layout while using Microsoft-generated dynamic code is going to fail miserably and I'll be stuck back in tables. I can't ask on this list for everyone to take a look at the areas I'm having problems with because I'm not able to display via the web, I have no web site to upload to (we're selling the site, not hosting it), and the issues are too specific to describe in words without a sample page or picture of the problem. I've created a zip file of my site (one page will do it - it uses a master page, and the master part is where I'm having problems) that includes the pre-rendered html and CSS as well as the source code after Microsoft gets done with it. I'll send it to anyone that thinks they might be able to help. A brief run down of the main problems: - the menu doesn't enlarge well when the font size is increased. However, changing it to em breaks the rest of the page. - my right hand panel (3 column layout) sticks off the page to the right, especially when the hidden second td is made visible. - the footer doesn't stay at the correct bottom of the page. It goes way way down there. I think it's scared. :x Please let me know if I should keep my responses to your advice in the list or off-list, as I don't know how beneficial I will be to others who didn't request the zip file. Thanks SO much, ~ cj __ 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] text box text not wrapping
Ok, I know this has to be an absurdly simple oversight on my part, but
I'm not finding an answer anywhere. Probably because it's absurdly easy
and I'm missing it.
In my table, a user may click an edit button, which turns the table
cell's data into editable text boxes. The description column has more
text than can be seen on one line without scrolling (with no scroll bar
- very annoying), so I changed the CSS to display the text box as a
taller height. The text doesn't seem to care, however, and though the
text box did indeed grow taller, the text is staying on the first line.
To see it all, the user has to keyboard arrow over or
click/drag/highlight the text with their mouse to see the rest of the
words.
Bad ascii example since I can't post a link:
|Conversion tool to migrate you|(r current phone number blah, blah,
blah)
| |
| |
| |
| |
My CSS looks like this:
.gv-desc input {
height: 100px;
width: 100%;
}
Ideas? :-/
Laugh quietly, please!
~ cj
__
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] full height tables - what's the best way?
I'm using an xhtml doctype on my pages and am not able to have table height be 100%. When I change the doctype to an html traditional with no url, though, the table displays correctly at the full page height. According to the chart on http://hsivonen.iki.fi/doctype/ however, my no-url, html doctype puts all browsers in quirks mode, while the standard xhtml doctype uses no quirking. I apologize for not having a site to display to show since it's on an intranet, but I do have a little test code. - Doctype #1 (table height is not 100% even though the CSS says it should be): !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.1//EN http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd; Doctype #2 (table height is 100%): !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN Test Page: html xmlns=http://www.w3.org/1999/xhtml; headtitle-=Company=- - Home/title/head body style=margin: 0; padding: 0; table style=height: 100%; width: 100%; border=1 cellpadding=0 cellspacing=0 trtd style=height: 100%this td should take up almost all the height/td/tr trtdfooter (should be on very bottom of screen)/td/tr /table /body /html - What is the best way and doctype to use to keep my pages as strict as possible while still allowing me to have my table height be 100%? __ 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/
