[css-d] Float doesn't shrink fit content under Safari - any workarounds?
Hi,
I'm struggling with a Safari float shrinking problem and I'm
desperately seeking a solution. I've spent days on the issue now.
I have a floated container containing floated fixed sized divs. On FF
the container shrinks to fit the contents, as is correct for a
widthless float. In Safari however the container isn't shrinking, it's
taking up 100% of the available width.
Here's some minimal code that displays the problem:
#a { float: left; background-color: red; }
.b { float: left;
display: block;
width: 300px;
height: 300px;
background-color: green;
border: white solid 2px;
}
When the window is wide enough to display the 3 blocks the behaviour
is as expected and the container shrink wraps the floats. However,
when the window is made narrower we see that the container takes up
the full width of the window when it should still be shrinking to fit
the contents, as it does on FF.
You can also see the bug in action here:
http://www.timothyarmes.com/gallery.php?lang=en-gb&sec=personal
It's slightly more complicated than the minimal version above, but the
problem is the same. In this case the floated outer container is
centered on the page and there should be a white border around the
images. In the case of Safari, as in my test code, my outer container
takes up the available width. This has two side effects:
1) The images aren't centered (because the container is too wide)
2) My border is far too wide on the right hand side.
Any help with this issue would be greatly appreciated,
Tim
__
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] Float doesn't shrink fit content under Safari - any workarounds?
On Tue, Jun 10, 2008 at 10:02 AM, Timothy Armes wrote: > > I'm struggling with a Safari float shrinking problem and I'm > desperately seeking a solution. I've spent days on the issue now. > > I have a floated container containing floated fixed sized divs. On FF > the container shrinks to fit the contents, as is correct for a > widthless float. In Safari however the container isn't shrinking, it's > taking up 100% of the available width. [...] > > When the window is wide enough to display the 3 blocks the behaviour > is as expected and the container shrink wraps the floats. However, > when the window is made narrower we see that the container takes up > the full width of the window when it should still be shrinking to fit > the contents, as it does on FF. > > You can also see the bug in action here: > > http://www.timothyarmes.com/gallery.php?lang=en-gb&sec=personal On the above page, what you see in Safari occurs in Firefox 3 beta as well. And I believe it is not wrong according to the definition of the shrink-to-fit algorithm in the spec [1]. When the "preferred width" (no inserted line breaks) cannot be used because it is greater than the available width, then the width "jumps" to the latter. In other words, roughly speaking, the spec says: fit the content if you don't need to break it, but as soon as you need to break some lines then use all the available width. Once line breaks are determined you would like to have a sort of extra step to fit the placed contents. This 'extra fit' (not required by the spec) is done by Opera (and by FF2), and it would indeed be sometimes desirable, but I don't know how to get it with current CSS. Bruno [1] http://www.w3.org/TR/CSS21/visudet.html#float-width -- Bruno Fassino http://www.brunildo.org/test __ 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] Float doesn't shrink fit content under Safari - any workarounds?
> Once line breaks are determined you would like to have a sort of extra > step to fit the placed contents. This 'extra fit' (not required by the > spec) is done by Opera (and by FF2), and it would indeed be sometimes > desirable, but I don't know how to get it with current CSS. Thanks, I now understand the reason for my problem. If anyone out there has a solution I'd be a very happy man. __ 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] Float doesn't shrink fit content under Safari - any workarounds?
Timothy Armes wrote: >> Once line breaks are determined you would like to have a sort of extra >> step to fit the placed contents. This 'extra fit' (not required by the >> spec) is done by Opera (and by FF2), and it would indeed be sometimes >> desirable, but I don't know how to get it with current CSS. > > Thanks, I now understand the reason for my problem. > > If anyone out there has a solution I'd be a very happy man. Hi Timothy -- To add to what Bruno has already put forward, you might also consider taking another look at your code. It's incredibly difficult to fix a CSS problem with invalid code. You've written your code in XHTML Transitional, which is more for migrating old sites and documents than for the creation of new ones. It almost implies that you can't be bothered to follow all the specs, which I know is not the case. The W3C Validator returns 104 errors [1] for your XHTML source code (many of which are probably solved by properly closing a few tags here and there) and the W3C Jigsaw Validator [2] (for CSS) returns 11 errors. While it doesn't appear that this would fix your problem since you've included a simpler test case, it'll save you a lot of headaches later on. I tested both your website and the simplified code on: - Firefox 3/Ubuntu Hardy - Konqueror 4.0.5/Ubuntu Hardy - Safari 3.1.1/Vista (Hardly) The behavior in the test case is not the same as it is on your website - the float shrinks correctly in the test case for all browsers tested. I'll have another look at it if you like after you've fixed the validation errors. Your CSS seems quite complicated for a simple (though nice) layout, so I'm also not sure what else you've got going on in there. Hope it helps! Bill Brown TheHolierGrail.com [1]: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.timothyarmes.com%2Fgallery.php%3Flang%3Den-gb%26sec%3Dpersonal [2]: http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.timothyarmes.com%2Fgallery.php%3Flang%3Den-gb%26sec%3Dpersonal __ 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] Anchor hover in IE 6 'absorbs' margin of above element
On 3 Jun 2008, at 21:55, David Laakso wrote:
> Patrick James wrote:
>> http://www.patrickjames.me.uk/test.html
>>
>> In Internet Explorer 6 when the mouse cursor hovers over the anchor
>> elements they turn red, as they should, but Link 002, Link 003 and
>> Link 004 'bunch up' against the box above in the list.
>>
>> They are kept apart by a 5 pixel margin applied to the anchor
>> element.
>> It looks like on hover the element being hovered over 'absorbs' the
>> margin above.
>>
>> I can't work out a remedy and so I'd be grateful for any suggestions.
>>
>> Patrick
>
> Couple of things:
>
> You have targeted the a
> #nav001 a {
> }
> #nav001 a:hover {
> }
> Instead, target li a
> #nav001 li a {
> }
> #nav001 li a:hover {
> }
> And remove the margin-bottom:
> #nav001 li a {
> /*margin: 0 0 5px 0; delete*/
> margin:0 /*add*/;
> }
And if a margin is required, apply it to #nav001 li rather than
#nav001 li a.
Jonny
__
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] Anchor hover in IE 6 'absorbs' margin of above element
Jonny Stephens wrote:
> On 3 Jun 2008, at 21:55, David Laakso wrote:
>
>
>> Patrick James wrote:
>>
>>> http://www.patrickjames.me.uk/test.html
>>>
>>> In Internet Explorer 6 when the mouse cursor hovers over the anchor
>>> elements they turn red, as they should, but Link 002, Link 003 and
>>> Link 004 'bunch up' against the box above in the list.
>>>
>>> They are kept apart by a 5 pixel margin applied to the anchor
>>> element.
>>> It looks like on hover the element being hovered over 'absorbs' the
>>> margin above.
>>>
>>> I can't work out a remedy and so I'd be grateful for any suggestions.
>>>
>>> Patrick
>>>
>> Couple of things:
>>
>> You have targeted the a
>> #nav001 a {
>> }
>> #nav001 a:hover {
>> }
>> Instead, target li a
>> #nav001 li a {
>> }
>> #nav001 li a:hover {
>> }
>> And remove the margin-bottom:
>> #nav001 li a {
>> /*margin: 0 0 5px 0; delete*/
>> margin:0 /*add*/;
>> }
>>
>
> And if a margin is required, apply it to #nav001 li rather than
> #nav001 li a.
>
> Jonny
>
But, if you do so, check the /page/ cross-browser as it may no longer
look the same (render the same) in the IE's as in compliant browsers. Or
will it?
--
http://chelseacreekstudio.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] Float doesn't shrink fit content under Safari - any workarounds?
Hi Bill, > To add to what Bruno has already put forward, you might also consider > taking another look at your code. It's incredibly difficult to fix a CSS > problem with invalid code. You've written your code in XHTML > Transitional, which is more for migrating old sites and documents than > for the creation of new ones. It almost implies that you can't be > bothered to follow all the specs, which I know is not the case. It's now XHTML strict. r > > I tested both your website and the simplified code on: > - Firefox 3/Ubuntu Hardy > - Konqueror 4.0.5/Ubuntu Hardy > - Safari 3.1.1/Vista (Hardly) > > The behavior in the test case is not the same as it is on your website - > the float shrinks correctly in the test case for all browsers tested. Odd, because it doesn't behave as I wish under Safari/Mac. Or, apparantly, FF3, and that's really annoying. > I'll have another look at it if you like after you've fixed the > validation errors. Your CSS seems quite complicated for a simple (though > nice) layout, so I'm also not sure what else you've got going on in there. Thanks for your offer. I've now fixed the validation errors. Most of the complexity comes from the fact that I'm trying to center the gallery whilst resting fluid. I'm using the technique of placing the contents in a div positioned at 50% and then using an inner div to shift back buy half its own width. Of course, this is all pointless in safari since the inner div is taking up all the width for the reasons explained by Bruno. Surely there's a solution? Tim __ 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] Anchor hover in IE 6 'absorbs' margin of above element
Hi Jonny and David This was the fault and I discovered it a day or two after posting :) The margin is now on the 'li' and all is fine in all browsers I've tried. Patrick On 10 Jun 2008, at 14:35, David Laakso wrote: >> And if a margin is required, apply it to #nav001 li rather than >> #nav001 li a. >> >> Jonny >> > > > > But, if you do so, check the /page/ cross-browser as it may no longer > look the same (render the same) in the IE's as in compliant > browsers. Or > will it? __ 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] CSS popup not popping in IE
This pure-css popup works in FireFox, but not IE.
http://tinyurl.com/6xkooa
The css is:
div#popup a span {display:none;}
div#popup a:hover span {display: block;
position: absolute; top: 150px; left:330px; width: 300px;
padding: 5px; margin: 10px; z-index: 100;
color:#00; background-color:cc;
font: 10px arial; text-align:left;border:1px solid #00;
}
The html is:
some text here
roughly half
footnote-ish text here
remainder of some text here
When you mouse over the word "roughly," the footnote-ish text pops up.
Why doesn't it work in IE?
TIA,
Nancy
__
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] Fixed LI dimension with XHTML
Hi
Is it possible to display a unordered list inline, have a hyperlink fill the
full size of the LI element and force the LI element to have a fixed dimension
using XHTML? It works if I just let it fall back to QUIRKSMODE but obviously I
don't want that =)
I'm trying to make six LI elements horizontally line up and have a dimension of
150x80 pixels and have the entire LI be covered by a hyperlink element. I've
tried these two doctypes with the same outcome. Its only been tested on IE7 so
far... IE7, FF, Safari would be nice to have it work in
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
http://www.w3.org/1999/xhtml";>
Test
* {border: 0;margin: 0;padding: 0; } body {font-family:
Verdana, Helvetica, Sans-Serif;font-size: .75em; }#menu {
background-color: #0f0;width: 900px; } #menu ul { padding: 2px;
position: relative; text-align: left; }
#menu ul li { display: inline; background-color: #000; list-style:
none; width: 150px;
height: 80px;; }
#menu ul li a { color: #aaa; font-weight: bold; line-height:
2.8em; padding: 10px 20px; text-decoration: none; width: 100%;
height: 100%; }
#menu ul li a:hover { color: #fff; text-decoration: none; }
#menu ul li a:active { background-color: #a6e2a6; text-decoration:
none; }
#menu ul li.selected a { background-color: #FFF; color: #000; }
Home Page New Product Specials My Account Contact Us
__
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 popup not popping in IE
> When you mouse over the word "roughly," the footnote-ish text pops up. > Why doesn't it work in IE? Hi Nancy, Try changing to Best regards, Kepler Gelotte Neighbor Webmaster, Inc. 156 Normandy Dr., Piscataway, NJ 08854 www.neighborwebmaster.com phone/fax: (732) 302-0904 __ 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] Fixed LI dimension with XHTML
On Jun 11, 2008, at 5:39 AM, <[EMAIL PROTECTED]> <[EMAIL PROTECTED]
> wrote:
> Is it possible to display a unordered list inline, have a hyperlink
> fill the full size of the LI element and force the LI element to
> have a fixed dimension
> using XHTML? It works if I just let it fall back to QUIRKSMODE but
> obviously I don't want that =)
>
> I'm trying to make six LI elements horizontally line up and have a
> dimension of 150x80 pixels and have the entire LI be covered by a
> hyperlink element. I've
> tried these two doctypes with the same outcome. Its only been tested
> on IE7 so far... IE7, FF, Safari would be nice to have it work in
>
> #menu ul li { display: inline; background-color: #000;
> list-style: none; width: 150px;
> height: 80px;; }
width and height do not apply to inline elements
You could float your 's:
#menu ul li {float:left; width:150px; ..}
locking the height is not a good idea, it could give strange results
if the user has a different font-size than the one you have choosen.
Philippe
---
Philippe Wittenbergh
http://l-c-n.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] How would you approach an organization chart in CSS?
I need to redo a organization chart that is a graphic and therefore not editable. I could rework it in another graphic, but I was trying to think how you could do it with just markup and CSS. It is a tree with a President at the root, 4 positions under him, and two of those have a level of four under them (8 total). Then there is a fourth layer that reports to the third level with 6 different people. You can see the current org chart here: http://www.lechess.com/management.htm Anyone have any thought on this? Thanks! __ 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] overflow bg image
Hello, Probably an easy fix but I'm not sure how to do it: I have a bg image on a tag that is positioned bottom, right. In IE7 the bg image is actually stuck to the bottom right of the viewing port, but in FF the bottom, right of the content or body tag. You can view this at http://www.tchh.org/new/ Thank you, Matt Tibbits __ 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 would you approach an organization chart in CSS?
You said just markup and CSS, but honestly this sounds more like a table with many of the cells spanning multiple columns and perhaps a narrow vertical background image used as the vertical line. Conjurer wrote: > I need to redo a organization chart that is a graphic and therefore not > editable. > > I could rework it in another graphic, but I was trying to think how you > could do it with just markup and CSS. > > It is a tree with a President at the root, 4 positions under him, and > two of those have a level of four under them (8 total). > Then there is a fourth layer that reports to the third level with 6 > different people. > > You can see the current org chart here: > http://www.lechess.com/management.htm > > Anyone have any thought on this? > > Thanks! > > > > __ > 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/ > > > -- Bob Meetin dotted i - Internet Strategies & Solutions www.dottedi.biz 303-926-0167 __ 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 would you approach an organization chart in CSS?
Hi I think it could be done with a lot of absolute positioning but personally I would just rework it as another graphic in a vector drawing program, then export that as a .png and use that. When you need to edit it, do it in the vector drawing program and export again as .png for use on web. Patrick On 11 Jun 2008, at 00:51, Conjurer wrote: > I need to redo a organization chart that is a graphic and therefore > not > editable. > > I could rework it in another graphic, but I was trying to think how > you > could do it with just markup and CSS. __ 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] overflow bg image
Matt Tibbits wrote:
> I have a bg image on a tag that is positioned bottom, right. In IE7
> the bg image is actually stuck to the bottom right of the viewing port, but
> in FF the bottom, right of the content or body tag.
>
> You can view this at http://www.tchh.org/new/
Hi Matt,
This should help:
html{height:100%;margin:0;padding:0;}
Good luck,
Bill Brown
TheHolierGrail.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] How would you approach an organization chart in CSS?
Looks like a table to me... I wouldn't be afraid of using a table for it but making it a graphic would be MUCH easier than screwing with any HTML element. Mike -Original Message- > I need to redo a organization chart that is a graphic and therefore > not editable. > > I could rework it in another graphic, but I was trying to think how > you could do it with just markup and CSS. __ 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] overflow bg image
Almost, although now the bg image will not stop when it reaches the TOP of
the view port in FF. It keeps being pushed up as the window is resized...
Matt
>
> Hi Matt,
>
> This should help:
> html{height:100%;margin:0;padding:0;}
>
__
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] overflow bg image
On Jun 11, 2008, at 9:06 AM, Matt Tibbits wrote:
> Probably an easy fix but I'm not sure how to do it:
>
>
>
> I have a bg image on a tag that is positioned bottom, right.
> In IE7
> the bg image is actually stuck to the bottom right of the viewing
> port, but
> in FF the bottom, right of the content or body tag.
>
>
>
> You can view this at http://www.tchh.org/new/
Not sure if I understand what you want. The background-image should
always be at the bottom right corner of the window ? No matter how
much content or how tall the window is?
body {background: #ccc url(../path/to/image.png) no-repeat 100% 100%
fixed;}
out to do just that.
Philippe
---
Philippe Wittenbergh
http://l-c-n.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] How would you approach an organization chart in CSS?
I would agree with an image for the kind of char you want, but don't toss out the idea of reworking the chart to take better advantage of HTML elements and CSS, such as a hierarchical - you could have a class="levelN" (where N is the level, 0, 1, 2, etc) and each class could have a set indent based on the level and a different icon for each level's element. Use bold/unweighted font for the solid lines vs. Founders and Hon VP (since they have the dotted lines going on). Also, tables would do fine, but again you would have to think outside of the original design. One idea would be to create a table, make use of 'd cells in the table for spacing or overflow: auto; for cells (can't remember if this is legal in a ?). Instead of solid chart lines, use different color backgrounds from cell to cell and make your cellspacing and border to 0. Good Luck! Zak On Tue, Jun 10, 2008 at 8:33 PM, Michael Stevens <[EMAIL PROTECTED]> wrote: > Looks like a table to me... I wouldn't be afraid of using a table for it > but > making it a graphic would be MUCH easier than screwing with any HTML > element. > > Mike > > -Original Message- > > I need to redo a organization chart that is a graphic and therefore > > not editable. > > > > I could rework it in another graphic, but I was trying to think how > > you could do it with just markup and CSS. > > __ > 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-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 popup not popping in IE
On Tue, 10 Jun 2008 13:36:45 -0500, Nancy E. Sosna Bohm wrote:
> This pure-css popup works in FireFox, but not IE.
> http://tinyurl.com/6xkooa
>
> [code snipped]
>
> When you mouse over the word "roughly," the footnote-ish text pops up. Why
> doesn't it
> work in IE?
>
I *think* that IE needs an extra boost to make it notice the "hover."
Try adding a rule like this:
div#popup a:hover {
background-position: 0 0;
}
More about this here:
http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp
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] Fixed LI dimension with XHTML
Philippe,
Why didn't I think of that :) Thank you. However is there anyway I could get
the hyperlink to fill the entire
LI element once it's been floated? I would like for my mouseover effect to be
applied when you are over the
entire menu item and not only the text itself.About the fixed height, you are
right it would be better to apply a min-height then I guess.
.Andreas
> CC: [EMAIL PROTECTED]> From: [EMAIL PROTECTED]> To:
> css-d@lists.css-discuss.org> Subject: Re: [css-d] Fixed LI dimension with
> XHTML> Date: Wed, 11 Jun 2008 08:49:04 +0900> > > On Jun 11, 2008, at 5:39
> AM, <[EMAIL PROTECTED]> <[EMAIL PROTECTED] > > wrote:> > > Is it possible to
> display a unordered list inline, have a hyperlink > > fill the full size of
> the LI element and force the LI element to > > have a fixed dimension> >
> using XHTML? It works if I just let it fall back to QUIRKSMODE but > >
> obviously I don't want that =)> >> > I'm trying to make six LI elements
> horizontally line up and have a > > dimension of 150x80 pixels and have the
> entire LI be covered by a > > hyperlink element. I've> > tried these two
> doctypes with the same outcome. Its only been tested > > on IE7 so far...
> IE7, FF, Safari would be nice to have it work in> >> > #menu ul li { display:
> inline; background-color: #000; > > list-style: none; width: 150px;> >
> height: 80px;; }> > width and height do not apply to inline elements>
> > > You could float
> your 's:> #menu ul li {float:left; width:150px; ..}> > locking the
> height is not a good idea, it could give strange results > if the user has a
> different font-size than the one you have choosen.> > Philippe> ---> Philippe
> Wittenbergh> http://l-c-n.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/
