Re: [css-d] Not possible to lay transparent PNG on top of form element? [SOLVED]
On September 25, 2009 2:38:06 pm Dave M G wrote: Tim, Thank you for responding. I managed to create the effect you were going for (and it's nifty)... Thanks for your code! That does get a step closer, though, as you say, it interferes with the accessibility of the select box. As you can tell, I'm trying to use the shading from the PNG for a 3D effect to make it look like the options are printed on a kind of roller. I'm not quite sure how to get this to work as I want it. I'm thinking of applying some Javascript. The hope is to get it to rotate in specific units so that the the selected option is always vertically centred. In any case, the question I asked in this thread can be considered solved, so thanks again for helping me progress forward. Try breaking the image into pieces and overlaying those in such a way that the center is not covered by anything. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Strange image behavior in IE8
I'm trying to style a web photo gallery by stacking pictures side-by-side. Since I want to center them, I chose to use display: inline-block instead of float: left to make them align horizontally. The strange thing is, although it looks fine in every other browser, IE8 gives me this: http://crystalsanctuary.rpgsource.net/dp_stuff/misc/ie8_images.jpg If you reload, it goes away. Anyone see this display of stupidity before? I tried a bunch of tricks, and nothing seems to work well on this. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Strange image behavior in IE8
On September 23, 2009 6:38:28 pm David Laakso wrote: Kelly Miller wrote: I'm trying to style a web photo gallery by stacking pictures side-by-side. Since I want to center them, I chose to use display: inline-block instead of float: left to make them align horizontally. The strange thing is, although it looks fine in every other browser, IE8 gives me this: http://crystalsanctuary.rpgsource.net/dp_stuff/misc/ie8_images.jpg If you reload, it goes away. Anyone see this display of stupidity before? I tried a bunch of tricks, and nothing seems to work well on this. Do you have a doctype. Is the CSS and markup valid. Do you have a clickable link to the page. See: Bruno Fassino /www.brunildo.org/test/ImgThumbIB.html and Gabriele Romanato http://www.css-zibaldone.com/articles/gallery/examples/final/final.html To all of the above, yes. I'm not sure if I can give a direct link to the site, though, since it's still under development and under wraps. I did the styling myself, and I'm trying to figure out a way around this bug. I've seen it on multiple projects; it seems to crop up any time I try to use a group of images contained in divs with displays of inline-block. I suspect IE8's inline-block support is not as good as Microsoft would have people believe. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floated tab menu with imageless rounded corners. IE goes berserk.
-BEGIN PGP SIGNED MESSAGE- Hash: SHA1 charles wrote: | Hi List! | | Long-time listener; first-time poster here. | | I'm combining a floated tab menu and rounded corners. Independently, | either one displays fine across browsers. It's when I combine them that | the problems begin. | | Firefox, of course, displays it perfectly, as does Konqueror (my Safari | proxy). IE, on the other hand, stacks the tabs as soon as the rounded | corners are applied. If the rounded corners are removed, IE once again | displays the tabs inline. | I would suggest looking into the Sliding Doors method here; unfortunately, horizontal menus and rounded corners tend not to mix. If you still want to try it this way, though, I suggest looking into using a combination of inline-block and table display settings instead of floats. IE tends to do odd things in the presence of floats... -BEGIN PGP SIGNATURE- Version: GnuPG v1.4.3 (GNU/Linux) Comment: Using GnuPG with Fedora - http://enigmail.mozdev.org iD8DBQFEYr4hvCLXx0V8XHQRAo3RAJ4lT0DVMExK9NijGuJPLD8NOr2uxQCfTl8Z ftyTMlm4mDRLh4PVtC2FW38= =w6KP -END PGP SIGNATURE- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Nesting divs problem in Mozilla, fine in Explorer
-BEGIN PGP SIGNED MESSAGE- Hash: SHA1 There a good reason you're doing what amounts to a border effect without using any border properties? Magenta Placenta wrote: http://www.5finger.com/css/bottom_mozilla.html (styles embedded in source) - -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! Please avoid sending me Word or PowerPoint attachments. See http://www.gnu.org/philosophy/no-word-attachments.html -BEGIN PGP SIGNATURE- Version: GnuPG v1.4.2 (GNU/Linux) Comment: Using GnuPG with Mozilla - http://enigmail.mozdev.org iD8DBQFEBsoewWrjHBui99cRArliAJ45q5UWnxXx2VBh7JBQC3NJhtQCRwCfYSFW Vmk+2ODHS1T4mcBZFDoCq8s= =71WT -END PGP SIGNATURE- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] My CSS is wrong or it's Firefox?
-BEGIN PGP SIGNED MESSAGE- Hash: SHA1 I seem to recall that CSS2.1 says that absolutely positioned elements with no given width should use the shrinkwrap algorithm. Can anyone confirm? Peter Michaux wrote: | | Am I making a CSS mistake or is it Firefox? | - -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! Please avoid sending me Word or PowerPoint attachments. See http://www.gnu.org/philosophy/no-word-attachments.html -BEGIN PGP SIGNATURE- Version: GnuPG v1.4.2 (GNU/Linux) Comment: Using GnuPG with Mozilla - http://enigmail.mozdev.org iD8DBQFD/VHawWrjHBui99cRAsyaAJ4wJt8vuYI764iVvwzMUw48fK34NACeNJgB aJH+OrRN8yqW7sMHJsGSwTI= =fn7p -END PGP SIGNATURE- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE min-height problem
-BEGIN PGP SIGNED MESSAGE- Hash: SHA1 Try giving IE a height equal to the min-height you give to the other browsers. IE doesn't understand min-height, but generally it treats height as if it were min-height. Martin Davis III wrote: | I am having a problem with min-height in IE.I need the entire background | picture to show up. Any suggestions? | The address for the site is: | http://swilly.tk/~swilly/2ndpres/ | | Thanks, | Martin | __ | css-discuss [EMAIL PROTECTED] | http://www.css-discuss.org/mailman/listinfo/css-d | IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 | List wiki/FAQ -- http://css-discuss.incutio.com/ | Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ | - -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! Please avoid sending me Word or PowerPoint attachments. See http://www.gnu.org/philosophy/no-word-attachments.html -BEGIN PGP SIGNATURE- Version: GnuPG v1.4.2 (GNU/Linux) Comment: Using GnuPG with Mozilla - http://enigmail.mozdev.org iD8DBQFD+DA0wWrjHBui99cRAgcNAJ4tQnrXE86itS/h4O0VHZe1hVyT0gCaAzTI AbIuHFOmaCXlfnZENtbaFNM= =k51g -END PGP SIGNATURE- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Drop shadow effect on Text with CSS
David Hucklesby wrote: AFAIK - only Safari and Opera 9 support this alternative. Konqueror supports it as well (in this case, there ARE differences between Konqueror rendering and Safari rendering). And I imagine now that Gecko has builtin blurring capabilities (for implementing the SVG filter GaussianBlur), you'll be seeing text-shadow there in the near future, too. -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! Please avoid sending me Word or PowerPoint attachments. See http://www.gnu.org/philosophy/no-word-attachments.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problems with IE 7
Actually (as crazy as this sounds), this isn't a CSS error, but an HTML error (but only in this case; spaces on other elements are related to CSS). I already reported it to the IE team yesterday. It's documented here: http://www.howtocreate.co.uk/wrongWithIE/?chapter=Empty+Elements It appears as if IE doesn't process /li and doesn't close a list item until it hits either li or the end of the list item. When you add a line break (like most of us do to make the code look better), IE generates a gap in the li where the line break is in the source. Christian Heilmann wrote: Just added a workaround for the whitespace issue to the wiki, can you please confirm that it works for you, too? http://icant.co.uk/sandbox/whitespaceBugMSIE7.html -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! Please avoid sending me Word or PowerPoint attachments. See http://www.gnu.org/philosophy/no-word-attachments.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] About Conditional Comments IE7b2
For those who are complaining about strange results with Conditional Comments and the IE7 beta... A post was just made on the IE Blog mentioning that the IE7 Beta is looking for this: !--[if IE 7.0b] and not !--[if IE 7.0] I believe that goes a long way to explaining why some sites are reacting funny to certain conditional comment types. I guess that means we're going to have to think about this. I did find that !--[if lte IE 6] is ignored by IE7, but parsed by IE6 and less. Maybe use that in place of !--[if lt IE 7.0] -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! Please avoid sending me Word or PowerPoint attachments. See http://www.gnu.org/philosophy/no-word-attachments.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How close is MS from releasing IE7?
Actually, they said that min-height, min-width, max-height and max-width are the next big issues they're going to tackle. So it appears that yes, they are going to add them to IE7 (the specific comment mentioned that fixing the expanding box model bug was the precursor to adding these properties, since obviously the W3C definitions of width and height are rather useless without the min and max properties to go with them). Here's the source: http://blogs.msdn.com/ie/archive/2006/01/31/520883.aspx#522483 David Dorward wrote: Does anyone know if they are going to address the min-height command? From what I can gather from their blog - no (and its a property, not a command). -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! Please avoid sending me Word or PowerPoint attachments. See http://www.gnu.org/philosophy/no-word-attachments.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problems with IE 7
I found that a solution that works for now and will work in the future is to Tan Hack all the entries in the conditional comments. Remember, IE7 can't see through the Tan Hack, but IE5-6 can. Christian Montoya wrote: Any suggestions as to how to fix any of this? Hope for the best, don't do anything yet. Let Microsoft fix their bugs right now, before you go off hacking for something that might be fixed in the next couple months. -- -- Christian Montoya christianmontoya.com ... rdpdesign.com ... cssliquid.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! Please avoid sending me Word or PowerPoint attachments. See http://www.gnu.org/philosophy/no-word-attachments.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IEW7 selectors support
According to my tests on the selectors, IE7b2 supports: (Child) + (Direct Adjacent Sibling) ~ (Indirect Adjacent Sibling) [attr] (Basic Attribute) [attr=value] (Attribute/Value) [attr~=value] (Attribute/Spaced Values) [attr|=value] (Attribute/Hyphen-Sep Values) [attr*=value] (Attribute Substring Selector) [attr^=value] (Attribute Starting String Selector) [attr$=value] (Attribute Ending String Selector) :hover :first-child Seems like an awful short list. Also note that form elements seem to show really odd bugs with the attribute selectors (for example, input[type=submit] will select nothing, and when I had both a text and submit input element on the same page, input[type] only selected the submit button). __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS problems with Opera 8.5:
BTW, while we're discussing interesting things Opera does with CSS, anyone ever see Opera 7.5 go haywire if you use a series of floated elements in an absolutely positioned box? Every other browser (including Opera 8.5) properly shrink-wrapped without dropping the floats to the next line; but Opera 7.5 dropped every single float to it's own line. Not a problem I'm having (I found a few ways around it), just something I wanted to note. __ 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] How to define CSS alt/title attributes in stylesheet
Just as an addon to that, the alt attribute is supposed to be describing the embedded image for those who can't view it. This is assuming that the image in question actually has something to do with the content of the site to begin with; if it's a CSS background image, odds are it's either being placed behind or near text that covers what it is about, or it's part of the site design and doesn't actually need to be described to someone who can't view images. Also, though this is off-topic, you do know you can attach title to anything, right? Cem Meric wrote: In html you define the alt/title attributes in the page markup. How would you do the same in a CSS stylesheet for a background or other image? Should you? -Bob Interesting question Bob. Short answer; you shouldn't, or even if you could you wouldn't. Search engines ignore CSS files. Even if they start indexing them, it would be a labour intensive code disaster. Image trying to define alt/title attributes for your catchy header slogan background with your top two/three keywords in mind. And, let's say you have a small web site around 50 pages where you have to nominate different keywords for every page in order to maximise your SEO outcome. See where I am getting? This would be against the core principles of CSS which I believe to generate more with less code in size. -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! Please avoid sending me Word or PowerPoint attachments. See http://www.gnu.org/philosophy/no-word-attachments.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] Div shrinking to content width in IE
Try placing the margins and so on on the h2, then add a span and put
the background image and the border on that.
Barnaby Scott wrote:
The reason I had {position: relative;} was so that I could force a vertical
space before the H2 and reduce the space below it (by a combination of line
height and top offset). If I had left it as a block, I could have forced it
down vertically with a top margin, but then I couldn't fix the bottom border
to the length of the text.
--
http://www.mozilla.org/products/firefox/ - Get Firefox!
http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox!
Please avoid sending me Word or PowerPoint attachments.
See http://www.gnu.org/philosophy/no-word-attachments.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] Multipart hr styling
Actually, I ran some experimental styling on the hr element in my last design project, and found the following: Firefox (1.5beta) and Opera (9beta) allow full customization of the hr element. That's a good sign for the future, but I've yet to test it in earlier versions. IE (6, quirks mode) insists on having a border on an hr, no matter what you tell it. IE also refuses to paint borders on the top of an hr, and forcibly inserts a margin above it (I know this because when I replaced the hr with a div, the space disappeared). I still need to experiment with earlier browsers, though. -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! Please avoid sending me Word or PowerPoint attachments. See http://www.gnu.org/philosophy/no-word-attachments.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] min-height and IE
Actually, if you just need min-height, it tends to be somewhat cleaner just to feed IE a height value. But for max-height, expressions are especially useful. Only one thing; has anyone figured out how to use em values in expressions? clientHeight and clientWidth return pixels. -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! Please avoid sending me Word or PowerPoint attachments. See http://www.gnu.org/philosophy/no-word-attachments.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] Inline blocks - did you ever see the like of this?
You can use -moz-inline-block for inline-block, you know. Just be careful; FF1.5B has a strange bug related to this. -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! Please avoid sending me Word or PowerPoint attachments. See http://www.gnu.org/philosophy/no-word-attachments.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] Still an open issue: Vertical Alignment
AFAIK, you can't do that with CSS, because it's a combination of floating and vertical alignment. If you use float, the only aligning you can get is to the top (I can't even get floats to align to the bottom of a line). -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! Please avoid sending me Word or PowerPoint attachments. See http://www.gnu.org/philosophy/no-word-attachments.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] Vertical Alignment
Set line-height to the height of the button, then use vertical-align: middle. -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! Please avoid sending me Word or PowerPoint attachments. See http://www.gnu.org/philosophy/no-word-attachments.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] (Second Posting...anyone know?) How can I create a shadow around a div without the imageinside?
There are a number of ways of doing shadows in CSS. The one you're asking about uses two divs; the out is the shadow and the in is the main div. The code simply makes the out div offset to the right bottom and colours the background black (with a grey border, so it appears to blur). Personally, I use a combination of a group of translucent PNG's and the shadow filter (to make up for IE's lack of PNG support) to do drop shadows on objects, http://crystalsanctuary.rpgsource.net/designs/msf/final/images-imagelist.htm#jumpmenu Rick Faircloth wrote: I checked out another of the demos on the cssplay site and found this code, but I can't see what is creating the shadow...in the other code I tried, filter:shadow was used, but what in the code below creates the shadow? -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! Please avoid sending me Word or PowerPoint attachments. See http://www.gnu.org/philosophy/no-word-attachments.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] Background Image not Displaying in FF
Tim Zappe wrote: I have a background image that does not display in FF, and I think it is because my outer most div (#wrapper) is not getting any height. I looked at all of my floats, and I think everything should be clearing correctly, but apparently it isn't, because FF doesn't display it. Any ideas on what I have done wrong? Any help would be awesome, thanks. http://dev.tzappe.com/jud/ -Tim -- www.tzappe.com http://www.tzappe.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/ First of all, the div around the h1 actually isn't necessary. Try attaching the id to the h1 itself. The problem here is that you set an absolute height on div#page. Browsers not named IE will take that height literally, and make div#page (and div#wrapper) exactly the height specified, and allow the content to spill out the bottom. I believe what you really want here is min-height, not height. Either that, or change it so that the content is not inside #page. -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! Please avoid sending me Word or PowerPoint attachments. See http://www.gnu.org/philosophy/no-word-attachments.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/
[css-d] Second Site Check, Please!
http://crystalsanctuary.rpgsource.net/designs/rpgsource/final/template2.htm I managed to fix the font problem and the problem with resizing the columns in IE. The site should now work without horizontal scrollbars in IE, but I'm looking for potential problems anywhere in the layout. Thanks ^^ -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! Please avoid sending me Word or PowerPoint attachments. See http://www.gnu.org/philosophy/no-word-attachments.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] problem with nav bar
Matt Lemay wrote: Hi all this will be my first post on this list. I am having a problem with a site I am building mostly using css. There is a left side navigation bar that is made up of .gif's, the last one having a height of 100% so it resizes with the content. The problem is it resizes irregularly sometimes not expanding all the way to the bottom, sometimes leaving a lot of unwanted open space after the last div. I have tried everything i can think of but nothing has worked. Any ideas? The site is here: http://www.lpcapitalinvestments.com/118eharvard.html and the external style sheet can be viewed here: http://www.lpcapitalinvestments.com/styles.css thanks for your help __ 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/ You know...your HTML is invalid. I'd suggest making it valid HTML 4.0 at least (at this point, it's not even valid HTML 3.2). Oh, one suggestion, even though it's off-topic...using the attributes onmouseover and onmouseout is usually a bad idea. You do know you can assign events to HTML tags without using the attributes, right? Try starting here: http://www.quirksmode.org/js/introevents.html . -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! Please avoid sending me Word or PowerPoint attachments. See http://www.gnu.org/philosophy/no-word-attachments.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] Validation Error -moz-outline
Tracy Shorrock wrote:
I'm getting rid of the ugly outline that appears on an image when it's
used as a link. It doesn't seem to be set to default, as when I don't
set -moz-outline I get the ugly borders when I click the links.
That ugly outline is actually a border, not an outline. Try this:
a img {border-width: 0}
--
http://www.mozilla.org/products/firefox/ - Get Firefox!
http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox!
Please avoid sending me Word or PowerPoint attachments.
See http://www.gnu.org/philosophy/no-word-attachments.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/
[css-d] Site Check, Please.
http://crystalsanctuary.rpgsource.net/designs/rpgsource/final/template2.htm I've checked it in IE5, IE5.5, IE6, Firefox 1.0, Opera 7.5 and Opera 8 already. Thanks for helping out. -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! Please avoid sending me Word or PowerPoint attachments. See http://www.gnu.org/philosophy/no-word-attachments.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] Site Check, Please.
Okay, I've updated an improved version with the following fixes: 1. I changed the very large link in the middle of the site layout, so it shouldn't break Safari any more. 2. I added a height to the h1 on top, so IE/Mac shouldn't be tripped up by that anymore. 3. I resized the sidebars just for IE6, IE5 and IE5.5. They should be usable at 800 by 600 without side scrolling now. 4. I replaced 14px with small in the top font declaration. IE should allow font resizing now. -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! Please avoid sending me Word or PowerPoint attachments. See http://www.gnu.org/philosophy/no-word-attachments.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] Site Check, Please.
Felix Miata wrote:
Kelly Miller wrote:
http://crystalsanctuary.rpgsource.net/designs/rpgsource/final/template2.htm
4. I replaced 14px with small in the top font declaration. IE should
allow font resizing now.
The first part of the center content includes the following text: What
do you think of when you think Nintendo? It's It's contained in
body - div#body - div#news - div#feature - div#navlinks p, to which
the following rules apply:
body, html {font-size: small;}
div#feature {font-size: 80%;}
div#feature p {font-size: 90%;}
Small equals approximately 88.75%, so the result due to the cascade is
the p text is 88.75% X 80% X 90%, or 63.9%. To the poor IE user already
requiring larger or largest text in the first place, you're making
it (unless a rare user who knows how to locate and select ignore font
sizes specified on web pages) impossible to make comfortably large
enough to read if large enough to read at all:
http://mrmazda.no-ip.com/SS/crysanct2.png
Besides the undersized text problem, the CSS suffers from a rather
extreme case of what
http://developer.apple.com/internet/webcontent/bestwebdev.html describes
as Classitis and Divitis.
There is no div#feature rule in any of my stylesheets. What you have is
actually:
div#feature p {font-size: 90%} (standard)
div#feature p {font-size: 80%} (contained in IE-only stylesheet; used
because IE makes text insanely large by default).
But since you're complaining, I boosted up the font size of the center
section. I'd make the menus larger too, except then IE'll start
breaking the layout due to it's invalid behavior involving width and height.
I also removed any classes/ids I didn't end up using in the design. I
originally put them in there in case I needed to target something
specific in the layout. As for the div-itis, if you check, I only
used as many divs as I needed to get the effect I want.
--
http://www.mozilla.org/products/firefox/ - Get Firefox!
http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox!
Please avoid sending me Word or PowerPoint attachments.
See http://www.gnu.org/philosophy/no-word-attachments.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] Site Check, Please.
Felix Miata wrote: There's so many apparently affecting the same text it makes my head swim trying to figure it out, even with the help of Domi, Thanks to that list, now there is no font-size related cascade. On top of that, you accidentally isolated the portion of CSS that was causing IE to break the columns whenever I tried to change the font size there. Now the font size is pretty much medium (except for the right column, where I had to use small), and there shouldn't be any stupid cascade issues. On top of that, there also shouldn't be any scrollbar problems at 800 by 600 on IE (though I don't like how I had to do it; I wish IE actually had support for max-width and max-height...). -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! Please avoid sending me Word or PowerPoint attachments. See http://www.gnu.org/philosophy/no-word-attachments.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] Errrmmm. maybe Opera hack not needed
Roger Roelofs wrote: First, you are working harder than you need to. You have a fairly standard layout here, and templates for this layout are available many places including the wiki for this list. Also, you are giving the browser more instructions (occaisionaly conflicting) than it needs to get the result you want. Third, it looks like you are creating complete separate stylesheets for each browser. This isn't necessary, and will come back to bite you in the end. Besides, the difference between Firefox rendering and Opera rendering isn't big enough to be banging your head off your desk over. A cardinal rule of CSS design is not to worry about it being pixel perfect; you can't predict the setup of your viewers, so odds are someone will get something you don't expect. If it's close, then it should be okay. As Roger said, don't design one stylesheet for every browser. I suggest starting with a standards-compliant browser (I usually use Firefox), and designing the CSS for it. Every once in a while, open the page in IE and see what IE does with it. Then use conditional comments to feel IE repairs (it's rare that you'll have to feed any other browser than IE fixes, though I've used :root to feed Opera fixes, 'cause Opera doesn't understand root, but Firefox and Safari/Konqueror do). Most of the time, if it's good in Firefox, it's good in Opera (though I do open Opera and look). -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! Please avoid sending me Word or PowerPoint attachments. See http://www.gnu.org/philosophy/no-word-attachments.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] Floating tables
Christian Heilmann wrote:
what is wrong with
div class=longtext
p class=shorttextShort Short/p
/p
pLong Long Long Long Long Long Long Long Long Long Long Long
Long Long Long Long Long Long Long Long Long Long Long Long Long
Long Long Long /p
/div
and p.shorttext{ float:left;width:8em;}
Tables for non-tabular data is hard enough to take in for some
visitors, no need to confuse them even further.
I believe it's illegal to nest p elements like that in HTML. Try using
span (note that a floated element automatically becomes generates a
block box, so you don't have to add display: block; though you can if
you want).
--
http://www.mozilla.org/products/firefox/ - Get Firefox!
http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox!
__
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] Floating tables
Christian Heilmann wrote:
div class=longtext
p class=shorttextShort Short/p
pLong Long Long Long Long Long Long Long Long Long Long Long
Long Long Long Long Long Long Long Long Long Long Long Long Long
Long Long Long /p
/div
and p.shorttext{ float:left;width:8em;}
Tables for non-tabular data is hard enough to take in for some
visitors, no need to confuse them even further.
I believe it's illegal to nest p elements like that in HTML. Try using
span (note that a floated element automatically becomes generates a
block box, so you don't have to add display: block; though you can if
you want).
How could that be illegal? It is a DIV with two Paragraphs... The
second closing /p is a typo, no nesting, sorry about that.
Using spans and making them behave like paragraphs would be
semantically wrong, nothing the police would nick you for, but still
why not use what the specs gave us?
You're right, that extra /p confused me. I thought it was:
ppSmall text/pLong text, long, long, long/p
My error.
BTW, what exactly is it doing that's wrong?
--
http://www.mozilla.org/products/firefox/ - Get Firefox!
http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox!
__
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] absolute position
travis laduke wrote: how come position: absolute; left: 200px is a different place in IE than in firefox? and how do you do workarounds these days if IE reads the box-model- hack-parsing-error-trick-characters correctly now? __ 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/ IE tends to flip out horribly if you try to do absolute positioning on a box that doesn't have layout (I've seen cases where it positions to the body when it's containing block isn't body, and other such craziness). You have to feed IE a dimension for the relatively positioned box. -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! __ 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] Safari doctype switcher affecting CSS
When I look at your nav code, I see -1. -1 what? I believe the standards say that the rule should be ignored if there are no units specified. It doesn't work in Firefox, either (there are no hover effects). -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! __ 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] How to add Unicode chars with CSS 'content' property?
David Hucklesby wrote:
That clobbered the first rule(s) in Opera.
I just wanted to mention that if a browser (9 out of 10 times it'll be
Opera; I dunno why) ignores the first rule in your CSS file, you can
dodge it by putting this as the first rule:
html {}
Okay, that IS rather obvious...but it works!
--
http://www.mozilla.org/products/firefox/ - Get Firefox!
http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox!
__
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] an absolutely positioned a to 100% of parent
Actually, I was just discussing this on this list. top: 0; bottom: 0 works for Firefox and Opera (and I assume Safari/Konqueror too), but you'll have to use an expression to make IE do it right. -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! __ 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] Who is wrong? I would say: Firefox!? - - Extended - -
If you want the honest truth, I'd bet most of your problems come from giving the browser both a width and a min-width (and same with height and min-height). IE ignores min-height, and treats height as if it were min-height. Firefox, on the other hand, will use height literally. Try giving most browsers min-height and only giving IE height, and see if that gives you a better result. -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! __ 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] Eric Meyer thumbnail gallery
Change:
div.ls img {height: 96px; width: 128px; margin: 16px 0;}
to
div.ls img {height: 96px; width: 128px; margin: 32px 0 0;}
--
http://www.mozilla.org/products/firefox/ - Get Firefox!
http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox!
__
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] Printing problems with DL/DT/DD for numbered paragraphs...
Peter Williams wrote: From: [EMAIL PROTECTED] ?xml version=1.0? !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN DTD/xhtml1-transitional.dtd html xmlns=http://www.w3.org/1999/xhtml; Remove the xml prolog and see if the behaviour is better, as far as I'm aware it is unusable in todays browsers. IE goes into quirks mode with anything before the doctype dec. I don't think it's the prolog in this case...I was unaware that you could use a float in a print page... You know, this is precisely what counters are supposed to be for...damned IE... -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! __ 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] Float breaks padding and border in Firefox
Prabhath Sirisena wrote: Sweet, that fixed it. Thanks a lot! Yes, having an extraneous div to clear floats does work. There's an even better way to do with clean markup: http://www.positioniseverything.net/easyclearing.html Prabhath http://nidahas.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/ Yeah, and I would have suggested it, except then you start running into the Gullotine Bug in IE... -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! __ 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] Float breaks padding and border in Firefox
According to CSS2, if a container contains only floats, it should collapse to have 0 height. Try putting a third div after the floats, and giving it the rule clear: both. -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! __ 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] Possible way of doing columns in CSS?
I was just somewhat curious, has no one tried doing columns in CSS by using top: 0; bottom: 0 and giving the longest column margins? I tried it and got correctly sized columns in Firefox and Opera, but not IE (BIG surprise there). -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! __ 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] Eric Meyer on CSS - td#advert
Ian Sweeney wrote:
The first chapter of 'Eric Meyer on CSS' listing 1.1 has the following CSS
rule
td#advert {width: 234px;}
Could that rule not simply be
#advert {width: 234px;}
Since #advert should refer to a unique identifier, why does the selector
specify the 'td'?
Ian Sweeney
Well, technically, #advert is the same as saying *#advert. Putting the
td in the front just tells the browser you're specifically aiming for a
td element. With ids, there's no real difference.
I believe CSS authors get into doing that because of classes. With
classes, it can make a BIG difference.
--
http://www.mozilla.org/products/firefox/ - Get Firefox!
http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox!
__
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] Philosophical question about images
Matthew Velic wrote: Hello, Are we trying to push CSS so much that the img element no longer gets used in xhtml? The cornerstone to creating a good layout for a site is built upon semantic markup, using the elements for their correct purpose. Yet, I see such a push for the use of no images directly in the structure because, in most cases, it is for design purposes only. In the case of images that are the bulk of the information, such as in online galleries and portfolios, would those be 'allowable' in the structural markup? They can always be styled and repositioned... I mostly ask for myself since I am trying to rebuild my portfolio, and just trying to hack all my images through CSS (especially for images that are going to act as links) is becoming a major pain. And I realize that this is probably not the best project to throw myself into learning 'real' CSS layouts and design, but, unfortunately, I don't have any other projects pending right now, and this is the only thing I can truly concentrate on. Well, I was just hoping to gain some of your thoughts on my above queries. Matt Also, if you know of a way to do image links purely through CSS, I would love to here those too. In the situation you describe, I don't see a problem with using img. The push for no images is to try and remove img tags that just contain presentational information, because that's of interest only to people with visual browsers. In that case, the images are not just presentational, they are part of the content. -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! __ 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 Bug Related To Absolute Relative Positioning?
Okay, I've written some code to do a popup menu. But IE seems to think that all relatively positioned elements should sit on top of all absolutely positioned elements. I dunno if it's based on code order (the menu is after the stuff giving me problems). It's not z-index; I tried that. Does IE have yet another bug related to it's handling of positioning? -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! __ 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] OT When is the next version of CSS?
Peter Williams wrote: We still can't usefully use parts of CSS2. We still can't usefully use parts of CSS1, either. background-attachment? -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! __ 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] Non-Tables layout help
zonjai wrote: rel= stylesheet -- Try removing the space before stylesheet. Some browsers get confused about that sort of thing, and won't load the stylesheet. Okay Kelly it worked. I removed the space and it is now displaying in Opera just fine. In IE6.0 for Win, I am getting the same spacing issues I was getting with Safari on Mac. Here is a screenshot of what I am referring to. I blurred the image to cut the size down. http://zonjai.com/indyhead/ie.jpg Thanks again Kelly for noticing that space. As for this extra line spacing, will designating a line-height value set up as an IE6 hack work? I have never noticed a difference when setting up one of those before. Would it just be a simple 1% or am I thinking of something different? Zonjai -- zonjai.com I'd bet that those gaps are due to odd margin collapsing. Try turning off all the margins on the div's. -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! __ 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] Re: advice for complex background image?
Theodore Serbinski wrote: Well the border part I've figured out... I just have a 1 x 768px image that is set as the bg for the body this creates the shadow effect perfectly. I agree with the title image graphic being an h1 as well no problems there. But that graphic of the cable, whew still having trouble figuring out the best bet for that image. The hard part is that it fades into the blue and black bars. Either I take this an entire big image and have it on top of the blue and black bars with the content on top of that (the text) or I cut it up into 3 slices, one for the bg of the black bar, blue bar, and the white content area. Thoughts? ted __ 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/ The problem with putting the shadows in the body is it makes the layout fixed (you can't position with anything but pixels). I suggest using 3 divs there; make all 3 relatively positioned, and shift the first one to the left the width of the left shadow, the second one to the right the width of the left shadow plus the right shadow, then shift the third one back the width of the right shadow. Then just give the first div the left shadow background with a background position of top left, then second div the right shadow background with a background position of top right, and the middle one a white background with black borders (or you can merge the black borders into the shadow pictures). As mentioned, the title should be an h1. For the cables, I suggest surrounding the rest of the content minus the h1 at the top in a div, make that div relatively positioned with no offset, then slice the cables starting just before the fade (so the left side of the graphic contains the right side of the blue bars). Then absolutely position a div with the cable graphic as a background image, in the top right. Then simply give the rest of the elements a right margin large enough to prevent the text from flowing under the cable graphic. You might have to experiment here, because putting the right margin on the element containing the bars will likely screw up the effect. It might be better to mark up the text inside (probably with an h2 for the first bar, and a ul for the second bar), give them both no backgrounds, and put the margins on them. You could also add padding to the outer div that surrounds everything, but this will have the same problems as adding the margins to all child elements. The advantage of doing it this way is that the size of the padding is in one place, making it easier to adjust. You'll have to experiment to find the right way. Sorry if this is a bit confusing, if you don't quite follow it, I can explain with examples and/or diagrams. -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! __ 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] Re: advice for complex background image?
Theodore Serbinski wrote:
Hi Kelly,
The entire website is going to be fixed width at 768px ... I know
pros/cons to this but it seems to the most reliable method to date and
all of the top CSS designers switched back to fixed design. But thanks
for the tip for using it as liquid.
As for the graphic of the cables, I think I'm in agreement (although
slightly confused as to what you mean).
What I am thinking... I make the blue and black bars their own divs,
with a content div below that.
I then slice up that cable image into 3 rows and put those
respectively in the black, blue, content divs as the background-image
(since the background image will be ABOVE the background color of
blue, black, white).
Seems simple enough, although I'm wondering if there is a more elegant approach.
Make sense?
ted
Yes. Actually, there is a more elegant solution. I used to slice my
background images up, but it's easier and technically better to simply
use an absolutely positioned div with the image in the background
instead. Here, I'll give an example:
div id=wrap
divThis is the first line of text./div
divThis is the second line of text./div
divContent.../div
/div
That's about the structure, right? I would make this adjustment:
div id=wrap
div id=cables/div
divThis is the first line of text./div
divThis is the second line of text./div
divContent.../div
/div
Then try this:
div#wrap{position: relative; (rest of styles...)}
div#cables{position: absolute; top: 0; right: 0; background-image:
url(cable background image); width: (width of image); height: (height of
image)}
Then you just have to give the other three div's margins equal to that
image's width (don't make them shorter than that image, though; if you
want the text to stop before the cable image, use padding). That frees
up the backgrounds of the div's for whatever else you want, and the
plus is that you don't have to slice the image up at all. As long as
you get enough of the graphic that the entire fade is part of the
graphic, then it'll line up. Even better than this, use an h2 for the
first line of text (since it's a secondary header), and use an
unordered list (ul) for the links below that. Then you don't have to
use div's at all (div is technically only supposed to be for
situations where no other element makes sense. Here, an h2 and a ul
make more semantic sense, though you have to float the li's to make it
horizontal).
Oh, and about that one pixel line between the first and second div.
If your background is white (and it looks like it is), you can enforce
that with 1 pixel of margin on either the top of the second div or the
bottom of the first div instead of using a border ;)
--
http://www.mozilla.org/products/firefox/ - Get Firefox!
http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox!
__
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] Re: advice for complex background image?
You do know z-index only applied to positioned elements, right? But regardless, in this case, if you'd managed to get the text over the image, the image would have disappeared (because the text and the white background are on the same level). If you give the text a right margin, you can get it to wrap before the image. Just, if you don't want the text to wrap right where the image ends, use margin for the image and padding between the image and the text (if you don't, any background images on the elements won't line up). -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! __ 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] Re: advice for complex background image?/Liquid vs Fixed
Christie Mason wrote: Thanks Gunlaug Sørtun, that was somewhat reassuring. As a ending comment, I would like to say to all those that are going in the fixed direction (CSS or table or hybrid) that, as a site guest, I REALLY dislike the trend. Christie Mason __ 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/ It's true, though. My last big web design project I did liquid with CSS, and it wasn't that hard. The trick is to use relative values for the text, so people at high resolutions can raise the text size if necessary. -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! __ 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 one line content
I think you could get it simply by adding a br / between the two images you want to display. This is in fact one of the times where a BR is good, because all you want is a single line break. Marcelo Wolfgang wrote: Hi list, I need some help with a xhtml site I'm making, I'm kinda of new in doing things this way, and this is a commom wall I bang my head now and them You can check it out at http://work.grillo.tk/elementn/009/media-centre.html I have one big div there and smaller one inside of it, the small one share the display:inline css selector ( you can check this in the source code ). But I need the not registered img and the forgot password img to be one on top of the other. Something like rowspan=2 for the other elements, and theses images each own its own row. Is there a way to do that with xhtml and css ? Can someone explains to me how to achieve that is someway ? Also if you think my code is going on the wrong direction can you explain what's a better solution for something like this, so I can learn ? TIA Grillo __ 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/ -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! __ 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] Best way to make this rollover image map?
Id's must be unique, but you can assign multiple classes to a tag by using this syntax: class=class1 class2 class3 Andrew Mason wrote: Thanks for the feedback! My rollover is a little more complicated because of the image of the country name which changes in the bottom right corner (Egypt in this example) http://www.pandamouth.org/images/map.gif Maybe the best way is to have a second image with all the country names that switches for each element, but the question is, how would I implement a second background image? You can't have two background images on the same element, can you? Or, is it possible to assign a second id or class to the li elements, like li id=mapimage1 id=mapimage1name ? -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! __ 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 windows layout problem
I figured I'd mention here that another way to solve that problem is by adding a non-breaking space (nbsp;) between div and /div. However, if you do this, you have to watch for IE's auto-expansion behavior (the div will automatically become as tall as the line-height in IE). To dodge this, simply set overflow to hidden (this turns off the auto-expansion behavior; well, in this example, anyway). Gunlaug Sørtun wrote: Quick fix first: Change this code: div id=content-top/div ...to this: div id=content-top!-- --/div ...since IE/win may get a bit lost when elements are empty. It's still empty, but IE/win doesn't know that... -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! __ 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 I Have no clue how to position these Divs!
Okay, what you want is to have the left and right sides of a frame surround the picture, right? (I assume it's the left and right sides, since lining up the top and bottom sides aren't really hard, but I'll put some info in there anyway). There are actually two ways of doing this in CSS, depending on your situation: If your inner content div has a fixed width, then the best way to handle it is to merge the left and right sides of the frame into one graphic, and put it in the background of a div that surrounds the content. Have it repeat downward, and add padding so that the text doesn't flow over the background image. There's a fantastic demo of this setup at Position Is Everything (url: http://www.positioniseverything.net/piefecta-rigid.html ). If, on the other hand, your inner content div doesn't have a fixed width, then the only real way to do it is this: Create 3 divs, all nested. Like this: div id=left div id=right div id=content Content goes here! /div /div /div Then, measure the pixel width of your side frames. Make all 3 of those divs relatively positioned, then make the left div shift the pixel width of the frame to the left, make the right div shift TWICE the width of the frame to the right, and then shift the content div the pixel width of your frame to the left (basically, you'll get exactly the pixel width of your frame of the left and right divs sticking out). Then add the left frame to the left div (position it at 0, 0 and repeat-y), and the right frame to the right div (0, 100% and repeat-y). Then you can make the content div have whatever background you want. [EMAIL PROTECTED] wrote: Dear css-discuss members, I have a huge problem. I have a website that i am making that has a frame around the content (The brown thing, you'l see). Its not a frame like an html frame frameset thing its like a picture frame. It is made up of 4 divs arranged around 2 content divs (1 body + 1 navigation). I have a huge problem. The frame divs dont wrap around the content divs so whenever i type more than the default length of content set it goes under the frame. To see more of what i mean the website is nuttygorilla.com . I Really need help with this and would love for it to be corrected quicly. Thanks for your time. Cheers, Jeremy -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! __ 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/
