[css-d] How to 'clear' absolute?
Hi, is there a way to clear a absolute positioned element? For example: div style=position:absolute; psome content/p /div div psome more content/p /div How do I make the second div appear after the first one and not on top of it? Assume that I can't use float and the height of the first div is unknown (its content is dynamically generated). Appreciate your help. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to 'clear' absolute?
Chang Huang wrote: Hi, is there a way to clear a absolute positioned element? No. A:P elements take up no space, and therefore can't be cleared or otherwise interacted with space-wise. You can prepare a space for the A:P, and control any expansion beyond that by using some kind of 'overflow: auto/scroll' styling on it. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 anchor pseudo class problem
Use visibility: hidden or transparency/opacity (set it to zero..) . You have
nothing to hover over, since #nav ul li a is now empty..
Good luck
2008/10/29 Sandy [EMAIL PROTECTED]
http://www.sandygonzales.com/aggressor/index.php
Without using any JS im using CSS on the navigation so that when you
:hover over it that little black arrow appears at the bottom.
The :hover seems to be working but not the other pseudo-classes in IE6.
This works in FF and IE7 even without the display: none in the other
pseudo-classes.
I am saying:
#nav ul li a img{
display: none;
position: absolute;
top: 29px;
left: 15px;
}
#nav a:link img{
display: none;
}
#nav a:visited img{
display: none;
}
#nav a:hover img{
display: block;
}
#nav a:active img{
display: none;
}
Any ideas or explanation before i use Javascript?
__
css-discuss [EMAIL PROTECTED]
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/
--
http://www.linkedin.com/in/lourensthalen
__
css-discuss [EMAIL PROTECTED]
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] Sliced Images within a div question
I have a simple question when you slice a image up, photoshop spits out a html file with each image slice in table format. Is this the best method to use by just cutting and pasting the code from the HTML created and pasting it within a div or is their a more effective and better way to place a sliced image within a div ? __ css-discuss [EMAIL PROTECTED] 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] Sliced Images within a div question
On Thu, Oct 30, 2008 at 9:11 AM, Majestic [EMAIL PROTECTED] wrote: I have a simple question when you slice a image up, photoshop spits out a html file with each image slice in table format. Is this the best method to use by just cutting and pasting the code from the HTML created and pasting it within a div or is their a more effective and better way to place a sliced image within a div ? This isn't a topic you need to discuss on the CSS-D list. Try Webdesign-L http://css-discuss.incutio.com/?page=OffTopic -- -Jack Timmons http://www.trotlc.com __ css-discuss [EMAIL PROTECTED] 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] Sliced Images within a div question
The off-topic list is not a list though. On 10/30/08, Jack Timmons [EMAIL PROTECTED] wrote: On Thu, Oct 30, 2008 at 9:11 AM, Majestic [EMAIL PROTECTED] wrote: I have a simple question when you slice a image up, photoshop spits out a html file with each image slice in table format. Is this the best method to use by just cutting and pasting the code from the HTML created and pasting it within a div or is their a more effective and better way to place a sliced image within a div ? This isn't a topic you need to discuss on the CSS-D list. Try Webdesign-L http://css-discuss.incutio.com/?page=OffTopic -- -Jack Timmons http://www.trotlc.com __ css-discuss [EMAIL PROTECTED] 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] CSS reset and table cell padding
Gunlaug Sørtun wrote: Andrew Gaffney wrote: I've found recently that when I use a CSS reset, I can no longer use the cellpadding attribute on a TABLE tag, but the cellspacing attribute works just fine. Is this normal? Is there a recommended way to deal with this? It's very much the norm, and it can't work any other way if CSS should work at all. CSS will always overrule equivalent HTML attributes, so if you want HTML attributes to take effect you must leave out - not style - relevant parts in your CSS reset. Recommendation: fine-tune your CSS reset so it goes with your specific requirements, or leave out CSS reset completely and style specific elements when and where you need/want to. (I always do the latter.) Thanks. -- Andrew Gaffney agaffney.org __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to 'clear' absolute?
Hi, is there a way to clear a absolute positioned element? For example: div style=position:absolute; psome content/p /div div psome more content/p /div How do I make the second div appear after the first one and not on top of it? Assume that I can't use float and the height of the first div is unknown (its content is dynamically generated). Is there a reason for not doing it like this? div style=position:absolute; div psome content/p /div div psome more content/p /div /div Granted, the second div will also be positioned absolute then, but it does follow your specs of the second one being placed right after the first one. __ css-discuss [EMAIL PROTECTED] 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] help: three columns with the same height
On Wed, 29 Oct 2008 15:41:45 -, MEM wrote: Hi all... This is my first post, any help will be greatly appreciated. I'm a CSS total newbie, so please, have patience. Ok. Yes I know this is the old table design déjà vu and we must avoid it etc... etc... I know we maybe have a .js solution (I don't want it thank you). I know about faux columns, but that doesn't allow me to play with the pseudo-left and pseudo-right columns border witdh, because we... we don't have them. So... [...] Hi Talofo, We all feel your pain. Please be aware that this is not a weakness of CSS, but of browser support. All browsers save one implement table display properties that provides an easier solution in many cases. Hang in there. IE 8 promises to bring Microsoft into the 21st century by supporting table display in CSS. :) Meanwhile we have to jump through hoops to provide for the care and feeding of Internet Explorer. Sorry. Cordially, David -- __ css-discuss [EMAIL PROTECTED] 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] CSS reset and table cell padding
On Wed, 29 Oct 2008 13:36:40 -0500, Andrew Gaffney wrote: I've found recently that when I use a CSS reset, I can no longer use the cellpadding attribute on a TABLE tag, but the cellspacing attribute works just fine. Is this normal? Is there a recommended way to deal with this? [...] To expand on Georg's reply re: fine-tuning those reset styles to your own requirements, I'd like to suggest that Eric Meyer never intended his reset styles to be used thoughtlessly and as is. In his related article[1] he states: My hope is that people will use them as a launch pad for their own resets and for deeper thinking about styling and browsers. [1] http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ Cordially, David -- __ css-discuss [EMAIL PROTECTED] 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] Sliced Images within a div question
On Thu, 30 Oct 2008 10:11:36 -0400, Majestic wrote: I have a simple question when you slice a image up, photoshop spits out a html file with each image slice in table format. Is this the best method to use by just cutting and pasting the code from the HTML created and pasting it within a div or is their a more effective and better way to place a sliced image within a div ? Yes. Use CSS to add the images as backgrounds. You may like to consider using a little less slicing, too: http://www.alistapart.com/articles/sprites/ http://css-tricks.com/css-sprites-what-they-are-why-theyre-cool-and-how-to-use-them/ Cordially, David -- __ css-discuss [EMAIL PROTECTED] 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] CSS reset and table cell padding
David Hucklesby wrote:
On Wed, 29 Oct 2008 13:36:40 -0500, Andrew Gaffney wrote:
I've found recently that when I use a CSS reset, I can no longer use the
cellpadding
attribute on a TABLE tag, but the cellspacing attribute works just fine.
Is this
normal? Is there a recommended way to deal with this?
[...]
To expand on Georg's reply re: fine-tuning those reset styles to your
own requirements, I'd like to suggest that Eric Meyer never intended
his reset styles to be used thoughtlessly and as is. In his related
article[1] he states:
My hope is that people will use them as a launch pad for their own
resets and for deeper thinking about styling and browsers.
[1] http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
They weren't being used by themselves. I did the reset and then proceeded to
set
by own margin/padding for various elements in the stylesheet. However, even so,
I'd want to the default padding on any given TD to be 0.
I tried to do a CSS solution to this problem by creating a style like:
table.cellpadding_4 tr td {
padding: 4px;
}
and then putting class=cellpadding_4 on the TABLE containing the TDs I wanted
to have the padding, but this didn't seem to have any effect. What's the proper
way to do this?
--
Andrew Gaffney
agaffney.org
__
css-discuss [EMAIL PROTECTED]
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] Safari problem-CSS issue?
I'm a VERY amateur web designer. My website www.callingazhome.com displays properly with all browsers except Safari and Opera. Is it just lacking a proper code in the css page (ex.css) Yours Truly, Neal Farrell Russ Lyon Sotheby's International Realty Cell: (623)695-2934 E-Fax: (623)547-3943 www.callingazhome.com __ css-discuss [EMAIL PROTECTED] 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] Horizontal Nav Bar Centering Issue in IE7
Hi, I am new to CSS and this list, and this is my first post. I recently created a site which uses a header, horizontal nav bar (with CSS drop-down menus), content area and footer. In IE7 (haven't checked IE6), when the window is expanded, the nav bar doesn't stay centered. When I hover over it, it goes back to the center. The same thing happens when I make the window smaller. This does NOT happen in Firefox. The URL for the site is: http://www.incline2000.com/jroes/ The URL to the CSS file is: http://www.incline2000.com/jroes/styles.css Hopefully, this will be an easy one for the experts on this list! I appreciate any help you can provide. This isn't a major problem, but it IS annoying. Thanks, Debbie __ css-discuss [EMAIL PROTECTED] 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] Floated divs don't stay in place when text size is increased
Hi, I have another issue with which I hope you can help. This one relates to the following site: http://www.kristenluke.com The CSS file is at http://www.kristenluke.com/styles.css The site looks fine when the Text Size is set to Medium (default). However, if I increase the Text Size to Larger or Largest, the layout gets messed up. Is there are way to stabilize a layout using floated divs so that this effect doesn't happen? I don't know how many people increase the text size. When I use the Zoom property, the site still looks good (in both IE7 and Firefox). Thanks! I hope one day to be able to help others with CSS, but I am still a newbie. Debbie __ css-discuss [EMAIL PROTECTED] 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] Jumping Sidebar li
Hey everyoneI've been subscribing to the list for months now and frankly I've been embarrassed at my level of understanding, despite having been lynda-dot-comming CSS for months, now But I wonder if you'd look at this page: http://www.seventhheaven.net/index.html The issue is that when first invoked, the links in the left sidebar jump slighlty; but then not again, thereafter.I've heard people talk about the IE flash on this list, but this happens in FF and Safari, as well any help would be most appreciated.. http://www.seventhheaven.net/css/mainConFloat.css ... Todd Bingham [EMAIL PROTECTED] 760806 7699 __ css-discuss [EMAIL PROTECTED] 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 divs don't stay in place when text size is increased
--- On Thu, 10/30/08, Debbie Roes [EMAIL PROTECTED] wrote: http://www.kristenluke.com The CSS file is at http://www.kristenluke.com/styles.css The site looks fine when the Text Size is set to Medium (default). However, if I increase the Text Size to Larger or Largest, the layout gets messed up. This is being caused by your horizontal margins/padding which are in em measurements, which will get larger as you increase the text size. Since your 'containers' widths are specified in pixels, they do not increase in size, so cannot accommodate the wider floats, thus the latter drops below. You can solve this by specifying all horizontal measurements in the same unit - either px or em, depending on whether you want a fixed-width or 'fluid' layout. - bobby __ css-discuss [EMAIL PROTECTED] 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] Re; Safari problem-CSS issue?
I fixed it, the problem was I did not have the proper html definition for Safari to recognize. Yours Truly, Neal Farrell Russ Lyon Sotheby's International Realty Cell: (623)695-2934 E-Fax: (623)547-3943 www.callingazhome.com __ css-discuss [EMAIL PROTECTED] 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] Safari problem-CSS issue?
Neal Farrell-Russ Lyon Sotheby's wrote: I'm a VERY amateur web designer. My website www.callingazhome.com displays properly with all browsers except Safari and Opera. Is it just lacking a proper code in the css page (ex.css) Your page does have source-code and CSS issues, and it is stuck in 'quirks mode' in all browsers because it lacks a 'standards mode' triggering doctype. Doctypes and their respective layout mode: http://gutfeldt.ch/matthias/articles/doctypeswitch/table.html Check with the validators. HTML: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.callingazhome.com%2Fcharset=%28detect+automatically%29doctype=Inliness=1group=0user-agent=W3C_Validator%2F1.591 CSS: http://jigsaw.w3.org/css-validator/validator?uri=http://www.callingazhome.com/warning=1profile=css21 Your CSS contains a number of mostly harmless double-styling - properties/values that are already implied by other properties/values or by default. Note also that absolute positioning is generally not safe for positioning elements in pages without stating relations an prepare space for them. Absolute positioned elements make your page weak for end-user introduced variables like font resizing and alike. A:P can create serious problems for less experienced designers. Beyond that it is difficult to judge what your page is supposed to look like and/or where your problems lie. Safari 3 and Opera 9.6 doesn't present your page much different from other browsers, so you have to provide details on what you think looks wrong in which versions of which browsers, compared to what it looks like in the exact browsers/versions you think present it correctly. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Sliced Images within a div question
David Hucklesby wrote: On Thu, 30 Oct 2008 10:11:36 -0400, Majestic wrote: I have a simple question when you slice a image up, photoshop spits out a html file with each image slice in table format. Is this the best method to use by just cutting and pasting the code from the HTML created and pasting it within a div or is their a more effective and better way to place a sliced image within a div ? Yes. Use CSS to add the images as backgrounds. You may like to consider using a little less slicing, too: http://www.alistapart.com/articles/sprites/ http://css-tricks.com/css-sprites-what-they-are-why-theyre-cool-and-how-to-use-them/ You can also generate them automatically from a bunch of images - including the CSS: http://spritegen.website-performance.org/ :) /Chris __ css-discuss [EMAIL PROTECTED] 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] Jumping Sidebar li
Todd Bingham wrote: http://www.seventhheaven.net/index.html The issue is that when first invoked, the links in the left sidebar jump slighlty; but then not again, thereafter.I've heard people talk about the IE flash on this list, but this happens in FF and Safari, as well You have a number of serious flaws in your stylesheet that must be addressed first... http://jigsaw.w3.org/css-validator/validator?uri=http://www.seventhheaven.net/index.htmlwarning=1profile=css21 Also: IE6 isn't doing too well on that page. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to 'clear' absolute?
Hi, yes and no, because the element that follows the parent div with be on top of the parent div itself. What I'm trying to do is make this markup into tabs: div id=tabs h3a href=#Tab1/a/h3 divTab 1 Content/div h3a href=#Tab2/a/h3 divTab 2 Content/div h3a href=#Tab3/a/h3 divTab 3 Content/div /div So far I've come up with 2 solutions: 1. Move all tabs (h3) up using P:A and then move them horizontally. But in order to move them horizontally, I need to know the width of each tab. So I can do something like 'left:80px;'. The problem, I don't know the width of each tab as they are generated dynamically. 2. Make all divs inside div#tabs P:A and float the tabs (h3). The problem, the element that goes after div#tabs will be placed on top because of the P:A. I can define a height for div#tabs, but again, the content of each tab is generated dynamically, so the height is unpredictable. And this is where I'm at so far, stuck. And if you wonder why I'm not using this markup instead: ul lia href=#Tab 1/a/li lia href=#Tab 2/a/li lia href=#Tab 3/a/li /ul divTab 1 Content/div divTab 1 Content/div divTab 1 Content/div it's just because of an accessibility issue, tabbing issue specifically. For instance, if there are 10 tabs, the user will have to hit the tab key 10 times in order to get to the content of the first tab, which I don't think that is something that they are happy with. If you can think of any solution for my problem, please share. Thanks! On 31/10/2008, at 4:14 AM, Mark Senff wrote: Hi, is there a way to clear a absolute positioned element? For example: div style=position:absolute; psome content/p /div div psome more content/p /div How do I make the second div appear after the first one and not on top of it? Assume that I can't use float and the height of the first div is unknown (its content is dynamically generated). Is there a reason for not doing it like this? div style=position:absolute; div psome content/p /div div psome more content/p /div /div Granted, the second div will also be positioned absolute then, but it does follow your specs of the second one being placed right after the first one. __ css-discuss [EMAIL PROTECTED] 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] Sliced Images within a div question
Alright, I will take a look at those links. I thought that possible converting the tables which are cracked out of photoshop you would convert to another method. Maybe I have not read the articles yet and my question is answered their or maybe not. On 10/30/08, Christian Heilmann [EMAIL PROTECTED] wrote: David Hucklesby wrote: On Thu, 30 Oct 2008 10:11:36 -0400, Majestic wrote: I have a simple question when you slice a image up, photoshop spits out a html file with each image slice in table format. Is this the best method to use by just cutting and pasting the code from the HTML created and pasting it within a div or is their a more effective and better way to place a sliced image within a div ? Yes. Use CSS to add the images as backgrounds. You may like to consider using a little less slicing, too: http://www.alistapart.com/articles/sprites/ http://css-tricks.com/css-sprites-what-they-are-why-theyre-cool-and-how-to-use-them/ You can also generate them automatically from a bunch of images - including the CSS: http://spritegen.website-performance.org/ :) /Chris __ css-discuss [EMAIL PROTECTED] 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] Sliced Images within a div question
Alright, I will take a look at those links. I thought that possible converting the tables which are cracked out of photoshop you would convert to another method. Maybe I have not read the articles yet and my question is answered their or maybe not. On 10/30/08, Christian Heilmann [EMAIL PROTECTED] wrote: David Hucklesby wrote: On Thu, 30 Oct 2008 10:11:36 -0400, Majestic wrote: I have a simple question when you slice a image up, photoshop spits out a html file with each image slice in table format. Is this the best method to use by just cutting and pasting the code from the HTML created and pasting it within a div or is their a more effective and better way to place a sliced image within a div ? Yes. Use CSS to add the images as backgrounds. You may like to consider using a little less slicing, too: http://www.alistapart.com/articles/sprites/ http://css-tricks.com/css-sprites-what-they-are-why-theyre-cool-and-how-to-use-them/ You can also generate them automatically from a bunch of images - including the CSS: http://spritegen.website-performance.org/ :) /Chris __ css-discuss [EMAIL PROTECTED] 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/
