[css-d] Float problem in Firefox
Hi, I have a small problem with float in Mozilla. http://gauravsharma.uuuq.com The site above is a totally stripped down version with only the problem code displayed. The class box is assigned a float: left property. It works fine in IE 6, but in firefox 3, the background image does not render right. I need two lists side-by-side. Please help. Thanks and regards, Gaurav Sharma. __ 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] Float problem in Firefox
--- On Sat, 3/28/09, Gaurav Sharma sharmal...@gmail.com wrote: I have a small problem with float in Mozilla. http://gauravsharma.uuuq.com the background image does not render right. Hi Gaurav, With only a cursory glance, I have a feeling that the structure is slightly more complicated than it need be - there are quite a few nested divs there. However, with what you have, the containing element with the background (#footer) needs to clear the floats that it contains. One method is applying 'overflow: auto' to that element. Alternatives can be found with a search for 'self clearing float'. - Bobby __ 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] ie/7 image issue
Mac os x 10.4.11 parallels xp ie/7 (only). When clicking the numerals beneath images, the images load wider than intended, causing an annoying horizontal movement and flash while they adjust to their correct width. http://www.chelseacreekstudio.com/yl/index.html What to do? __ 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] Fwd: Re: Middle align?
Oi-va-voili . . . here it is http://blackboxarts.com Kim Brooks Wei wrote: I can't align the logo at the top of the page to the pagenav sitting to its right. Tried a bunch of things but none of them worked. Is there a link we can use to view the troublesome page? ! Bill Brown macnim...@gmail.com -- This email sent by Kimi Wei 201-475-1854 | k...@thewei.com | thewei.com __ 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] Fwd: Re: Middle align?
Kim Brooks Wei wrote:
http://blackboxarts.com
I can't align the logo at the top of the page to the pagenav
sitting to its right. Tried a bunch of things but none of them
worked.
ul#pagenav {padding-top:7px;} ???
__
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] Page Check
Morning all I'd appreciate it if some of you with IE 8 would have a look at www.nannery.net and let me know if there are any problems. This is a conversions from tables Works as I expect in IE 6- 7, FF 3.0.7 and Opera 9.00 on Win XP Pro SP3. Thanks in advance. Jim Nannery blog - www.nannery.net/wordpress __ 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] ie/7 image issue
David Laakso wrote:
Mac os x 10.4.11 parallels xp ie/7 (only).
Confirmed in IE7(XP) *and* IE8(Vista).
Think it's a flaw in how Trident apply 'max-width' - as 'width' before
checking if 'max-width' should take effect or not.
http://www.chelseacreekstudio.com/yl/index.html
What to do?
I can't test your construction locally, but since it only happens when
#d is so wide that #d img {max-width : 96%;} is wider than the images
intrinsic width, I suggest you declare a max-width on #d too.
Something close to...
#d {max-width: 554px;}
...(image-border included) should do.
Declaring...
#d img {width: 530px; max-width: 96%;}
...may also work, since 'max-width' overrides 'width'. I can't test this
either.
BTW: those fixed margin-top on images are only correct when images are
not shrunk on narrower windows. When they are, those margins cause
strange alignment-changes when switching images. Same problem in all
browsers.
Not exactly CSS, but if you want a stable alignment: overlay all images
on a common canvas, a white one sized as large as the largest image
would otherwise be, so all images get the same width and height. You'll
have to incorporate the image-border in the image itself then, and make
the canvas wide enough to incorporate it.
Oh, and IE6 stretches all images to perfect squares at first load on
slow connections, and the min/max script makes it freeze and die under
certain conditions. The latter is usually not a problem, but the former
may still be.
regards
Georg
--
http://www.gunlaug.no
__
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] Page Check
JWN wrote:
Morning all
I'd appreciate it if some of you with IE 8 would have a look at
www.nannery.net and let me know if there are any problems.
This is a conversions from tables Works as I expect in IE 6- 7, FF
3.0.7 and Opera 9.00 on Win XP Pro SP3.
Thanks in advance.
Jim Nannery
blog - www.nannery.net/wordpress
Dunno about IE/8 but imagine it will also break the same way all browser
will at 800 and drop the right column at less than that ;-) .
This could be a nice touch:
p{ /*font-size:.8em;*/}
__
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] Page Check
JWN wrote: I'd appreciate it if some of you with IE 8 would have a look at www.nannery.net and let me know if there are any problems. Looks a bit strange on narrow windows, but the same in all browsers - including IE8. regards Georg -- http://www.gunlaug.no __ 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] ie/7 image issue
Gunlaug Sørtun wrote: Confirmed in IE7(XP) *and* IE8(Vista). Think it's a flaw in how Trident apply 'max-width' - as 'width' before checking if 'max-width' should take effect or not. http://www.chelseacreekstudio.com/yl/index.html What to do? regards Georg Got it. All of it. I think :-) . Thank you, Georg. ~d __ 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] Is this possible with CSS?
I'm trying to replicate the effect done (with tables, images and Javascript) in the left column of this page... http://holdenluntz.com/artist.htm ... with CSS only. Specifically, I want the li bullet to turn a color when I hover on the a inside it. (Ignore the images that show up on hover in the right-hand column). I've recoded it as a simple link list, e.g ul lia href=#Link One/a/li lia href=#Link Two/a/li lia href=#Link Three/a/li /ul I know that it's possible to use a re-positioned background image to achieve this effect, but I was wondering if it is possible to do with CSS only. I've tried several of the obvious things without any luck. Any suggestions? TIA, Geoff __ 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] Is this possible with CSS?
Hi Geoffrey,
Have you tried something like the following?
ul { list-style-type: none; color: #fff; }
li:hover { list-style-type: disc; color: #f7c30e; }
li:hover a { color: #f7c30e; }
a { text-decoration: none; color: #fff }
(The li:hover a and a { color: ... } seem to be required by IE7 - gah.
Other browsers handle inherit properly)
Probably won't work in IE6, although I haven't tested it; one version of IE
doesn't like :hover on anything but a, but I cannot remember which
- Bobby
--- On Sun, 3/29/09, Geoffrey Hoffman geo...@globalmediaminds.com wrote:
From: Geoffrey Hoffman geo...@globalmediaminds.com
Subject: [css-d] Is this possible with CSS?
To: css-d@lists.css-discuss.org
Date: Sunday, March 29, 2009, 3:20 AM
I'm trying to replicate the effect done (with tables,
images and Javascript) in the left column of this page...
http://holdenluntz.com/artist.htm
... with CSS only.
Specifically, I want the li bullet to turn a color
when I hover on the a inside it. (Ignore the images
that show up on hover in the right-hand column). I've
recoded it as a simple link list, e.g
ul
lia href=#Link
One/a/li
lia href=#Link
Two/a/li
lia href=#Link
Three/a/li
/ul
I know that it's possible to use a re-positioned
background image to achieve this effect, but I was wondering
if it is possible to do with CSS only. I've tried
several of the obvious things without any luck.
Any suggestions?
TIA,
Geoff
__
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-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] Is this possible with CSS?
Geoffrey D. Hoffman
President, Global Interactive Minds, LLC
398 S. Mill Ave. #303
Tempe, AZ 85281
Office: 480-921-3171
Fax: 480-921-3139
Mobile: 480-231-8323
G | M | M
Global Media Minds
--- On Sun, 3/29/09, Geoffrey Hoffman geo...@globalmediaminds.com wrote:
From: Geoffrey Hoffman geo...@globalmediaminds.com
Subject: [css-d] Is this possible with CSS?
To: css-d@lists.css-discuss.org
Date: Sunday, March 29, 2009, 3:20 AM
I'm trying to replicate the effect done (with tables,
images and Javascript) in the left column of this page...
http://holdenluntz.com/artist.htm
... with CSS only.
Specifically, I want the li bullet to turn a color
when I hover on the a inside it. (Ignore the images
that show up on hover in the right-hand column). I've
recoded it as a simple link list, e.g
ul
lia href=#Link
One/a/li
lia href=#Link
Two/a/li
lia href=#Link
Three/a/li
/ul
I know that it's possible to use a re-positioned
background image to achieve this effect, but I was wondering
if it is possible to do with CSS only. I've tried
several of the obvious things without any luck.
Any suggestions?
TIA,
Geoff
-Original Message-
From: css-d-boun...@lists.css-discuss.org on behalf of Bobby Jack
Sent: Sat 3/28/2009 7:35 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Is this possible with CSS?
Hi Geoffrey,
Have you tried something like the following?
ul { list-style-type: none; color: #fff; }
li:hover { list-style-type: disc; color: #f7c30e; }
li:hover a { color: #f7c30e; }
a { text-decoration: none; color: #fff }
(The li:hover a and a { color: ... } seem to be required by IE7 - gah.
Other browsers handle inherit properly)
Probably won't work in IE6, although I haven't tested it;
one version of IE doesn't like :hover on anything but a, but I cannot
remember which
- Bobby
Yeah, I can get the colors I want to change on hover on the text...
that's just a simple a{ } and a:hover{ }
I just can't make the bullet change on hover.
I think it's due to how selectors work.
In short, the hover is happening on a
but I'm trying to change the color of li (a's parent)
Even when I try to make an li:hover rule,
a different color it doesn't seem to work.
It doesn't matter if it has an a inside it or not.
I'm testing on FF 3.0.7, Win XP
__
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] Is this possible with CSS?
--- On Sun, 3/29/09, Geoffrey Hoffman geo...@globalmediaminds.com wrote: I just can't make the bullet change on hover. I think it's due to how selectors work. The CSS I supplied should do just that - turns off the bullets on the whole list by default, turns them back on for each li, much as your example does. In short, the hover is happening on a but I'm trying to change the color of li (a's parent) To do this (without javascript or) requires the :hover to apply to the li. This shouldn't, practically, be a problem (other than the possible old-version-of-IE issue I mentioned previously). - Bobby __ 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] Is this possible with CSS?
Geoffrey Hoffman wrote: Specifically, I want the li bullet to turn a color when I hover on the a inside it. With CSS only, yes, but browser support is a bit weak. As an example: we can play with generated content... http://www.gunlaug.no/tos/moa_43.html ...and get the effect you want - in supporting browsers. regards Georg -- http://www.gunlaug.no __ 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] Is this possible with CSS?
On Mar 29, 2009, at 1:12 PM, Gunlaug Sørtun wrote: As an example: we can play with generated content... http://www.gunlaug.no/tos/moa_43.html ...and get the effect you want - in supporting browsers. Works as well in Fx 3. You could improve it: set the generated content to display:inline-block and give it a small margin-right. The alternative, more cross-browser friendly way (aka, support for old IE): set the a to display:block, give it some padding-left and fill it with a background-image that changes on hover. Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ 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/
