Re: [css-d] more vertical pop-out

[Alan Gresley]

Alan K Baker wrote:
> Tony.
> 
> I have separated your HTML and CSS because I find it easier to read and 
> troubleshoot this way.
> 
> I've put up a test page with your code, which I have modified.
> 
> The html is at: http://www.webbwize.co.uk/Test_Area/Somersetspiess/
> and the css is at 
> http://www.webbwize.co.uk/Test_Area/Somersetspiess/stylesheet.css
> which you should be able to copy and use.
> 
> You had some redundant declarations in the CSS and (if I have positioned the 
> way I *think* you want it) I have corrected your positioning.
> 
> ISTM that your buttonframe image set is not quite accurate, as there's a 
> slight jump when navigating it, which cannot be corrected by moving the image 
> up or down.
> It's *not* a browser bug, and it's only 1 pixel in each sub-image, so you may 
> not care too much. :-)
[..]
> Regards, 
>  
> Alan.


That jumping and alignment issue can be fixed by changing this CSS.

#buttonframe li ul {
top:4px;
}
#buttonframe li a span {
top:1px;
}
#buttonframe li a:hover {
background-position:0 -116px;
}


to this.


#buttonframe li ul {
top:0;
}
#buttonframe li a span {
top:0;
}
#buttonframe li a:hover {
background-position:0 -115px;
}


All those small amount of pixels add up. :-)



-- 
Alan http://css-class.com/

Nearly all men can stand adversity, but if you want to test a man's 
character, give him power - Abraham Lincoln
__
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] more vertical pop-out

[Alan K Baker]

Tony.

I have separated your HTML and CSS because I find it easier to read and 
troubleshoot this way.

I've put up a test page with your code, which I have modified.

The html is at: http://www.webbwize.co.uk/Test_Area/Somersetspiess/
and the css is at 
http://www.webbwize.co.uk/Test_Area/Somersetspiess/stylesheet.css
which you should be able to copy and use.

You had some redundant declarations in the CSS and (if I have positioned the 
way I *think* you want it) I have corrected your positioning.

ISTM that your buttonframe image set is not quite accurate, as there's a slight 
jump when navigating it, which cannot be corrected by moving the image up or 
down.
It's *not* a browser bug, and it's only 1 pixel in each sub-image, so you may 
not care too much. :-)

You also needed to set the sublist to 'hidden' and the > ul to 'visible' to 
make the 'popout work.

In your HTML you had your 
 
constructs incorrectly nested. You must put the  *after* the sublist.

I've also set up an extra popout submenu for you, just to show that it will 
work for any of your primary lists.

My modified code works in IE7, Firefox, Opera and Safari, but not in IE6. If 
you want it good for IE6, then it's a whole different ball game and will need 
some extra work. :-(

Hope this helps and sorry it took a while, but I'm also busy on other stuff. :-)

Regards, 
 
Alan.
 
www.theatreorgans.co.uk
www.virtualtheatreorgans.com
Admin: ConnArtistes, UKShopsmiths, 2nd Touch & A-P groups
Shopsmith 520 + bits
Flatulus Antiquitus


  - Original Message - 
  From: tony 
  To: css-d@lists.css-discuss.org 
  Sent: Thursday, August 07, 2008 5:17 PM
  Subject: [css-d] more vertical pop-out


  Hi,
  Georg helped me sort out my vertical menu to achieve the effects I wanted.
  Would now like to refine it with a hidden pop-out on the 'Local Photos'
  menu, to show in a vertical stack on hover.
  In Gecko mode I managed to align horizontally
  But
  Couldn't get them to display on hover.
  I see in Explorer the sub-menu has gone vertical and off to bottom.
  As can be seen at
  www.somersetspiess.co.uk
  Can anyone please indicate the tweaks I need to implement?
  Yeah you guessed dead novice, but thanks in advance
  Tony
__
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] more vertical pop-out

[Alan Gresley]

tony wrote:
> Hi,
> Georg helped me sort out my vertical menu to achieve the effects I wanted.
> Would now like to refine it with a hidden pop-out on the 'Local Photos'
> menu, to show in a vertical stack on hover.
> In Gecko mode I managed to align horizontally
> But
> Couldn't get them to display on hover.
> I see in Explorer the sub-menu has gone vertical and off to bottom.
> As can be seen at
> www.somersetspiess.co.uk
> Can anyone please indicate the tweaks I need to implement?
> Yeah you guessed dead novice, but thanks in advance
> Tony


The various browser are in recovery mode. You have the sub menu  
incorrectly nested. Currently you have this.


Local Photos

...
...
...



Change it to this.

Local Photos

...
...
...





See if this fixes the problem.


-- 
Alan http://css-class.com/

Nearly all men can stand adversity, but if you want to test a man's 
character, give him power - Abraham Lincoln
__
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] IE suckerfish drop down problem

[Alan Gresley]

ochieng' nelson wrote:
> SITE: www.pennywinter.com
> PROBLEM: dropdown over *clothes* misplaced in IE. Works well for other
> browsers though.
> 
> CSS:www.pennywinter.com/css/penny.css
> 
> Please assist.


I though this was spam.


OK, just providing some links today, I will do it again. I love IE...

This Suckerfish is suffering from the IE7 stick hover bug [1]. The
misplacement of the dropdown is due to some bug with IE7- and the
position of auto for  items [2] [3].

OK, the fix.

#navlist li {
   /* display: inline; DELETE */
   float: left; /* ADD */
   list-style-type: none;
   padding-right: 40px;
   position: relative; /* ADD */

}
#navlist li li {
   float: none; /* ADD for IE6 */

}#navlist li ul{
   position: absolute;
   left: -999em;
   background-color:#605F63;
   /* margin-left:170px; DELETE */
   padding-left:5px;
   padding-top:10px;
}

#navlist li:hover ul {
left: 0; /* CHANGE from auto */
top:100%; /* ADD for IE7 */
}


If you intend of adding more levels, I would investigate some more.


1. 
2. 
3. 


-- 
Alan http://css-class.com/

Nearly all men can stand adversity, but if you want to test a man's
character, give him power - Abraham Lincoln

__
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] Parsing the "background:" shortcut

[Thierry Koblentz]

> -Original Message-
> From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
> discuss.org] On Behalf Of Philippe Wittenbergh
> Sent: Thursday, August 07, 2008 5:53 PM
> To: CSS-D
> Subject: Re: [css-d] Parsing the "background:" shortcut
> 
> 
> On Aug 8, 2008, at 6:45 AM, Bill Moseley wrote:
> 
> > First, I'm looking for rules for parsing "background:".
> >
> > Obviously, not all background properties need to be included.
> >
> >background: red;  # just set the color
> 
> The short-hand notation (not only for background but for all
> properties where you can use shorthand) resets _all_ properties that
> apply to their default (initial) value.
> 
> > And, at least in my quick test with Firefox, it seems the order of the
> > properties doesn't matter.
> 
> They don't matter for background.

I remember running into something weird in Safari once.
If I recall, it was an issue when "url()" contained no URL and came last
(i.e. background: #eee 50% 50% no-repeat url();).


-- 
Regards,
Thierry | http://www.TJKDesign.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] a:hover vs images with alpha chanel

[Philippe Wittenbergh]

On Aug 8, 2008, at 3:48 AM, snak detek+0r wrote:

> and like i said earlier,
>   a img {...}
> should work, but never seems to.

Not really. As I noted in my previous post, that will disable a  
background-colour that is applied to the box generated for the image.
You'll still have a background-colour applied to the box generated by  
the  element, box that wraps around the image.

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] Parsing the "background:" shortcut

[Philippe Wittenbergh]

On Aug 8, 2008, at 6:45 AM, Bill Moseley wrote:

> First, I'm looking for rules for parsing "background:".
>
> Obviously, not all background properties need to be included.
>
>background: red;  # just set the color

The short-hand notation (not only for background but for all  
properties where you can use shorthand) resets _all_ properties that  
apply to their default (initial) value.

> And, at least in my quick test with Firefox, it seems the order of the
> properties doesn't matter.

They don't matter for background.

> But, every background-* property also supports "inherit", so how do I
> know which property that is associated with?
>
> What does this mean:
>
>background-color: red;
>background: inherit;
>
> or
>background: #eee inherit

That would inherit the background image specified for a parent element

> Can I safely convert all the background-* properties into a shortcut?
shorthand, not shortcut.

And yes, you can do that.

> ...
> But what if I have this:
>
>
>.foo {
>background-image: url(foo.gif);
>background-color: red
>background-repeat: no-repeat;
>background-attachment: inherit;
>background-position: inherit;
>}
That is a tricky one. If you look at

Inherit can only be used once.
.foo {background: inherit} is OK
.foo {background: red inherit} is not OK.

Given that background-attachment and background-position are not  
inherited by default, and given that the shorthand notation resets all  
properties to their initial values, you'd have to specify them  
specifically.

> And what about !important?
>
>.foo {
>background-image: url(foo.gif);
>background-color: red !important
>background-repeat: no-repeat;
>background-attachment: fixed;
>background-position: bottom;
>}
>
> How would that !important be written in the background: property?
> Does it just apply to the color?

.foo {
background: red url(foo.gif) no-repeat fixed bottom !important;
}

will apply to all individual properties listed.

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] footer and multiple background images

[Elle Meredith]

On 08/08/2008, at 10:19 AM, David Laakso wrote:

> I regret: left column float drop at +1 font-scaling in Mac Safari  
> and Camino. Same in XP FF/2.0.0.14. Our favorite browsers, IE/6 and  
> IE/7, drop the left column at text-size "largest."

At first I wanted to ask: "Now, why would that happen?"
But then I realised that my floats' margins were set in ems. Changing  
that to px fixed this.
Thanks David,

Elle

__
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] Parsing the "background:" shortcut

[David Laakso]

Bill Moseley wrote:
> I have two questions:
>
> First, I'm looking for rules for parsing "background:".
>
>
> Second question:
>
> How would that !important be written in the background: property?
>
>
>
> Thanks,
>
>
>
>
>   

Lots of questions.
Lots of answers:



-- 

A thin red line and a salmon-color ampersand forthcoming.

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] 1 pixel shift in Firefox

[Philippe Wittenbergh]

On Aug 8, 2008, at 4:39 AM, Annesta wrote:

> In FF3, my layout is shifted to the right by one pixel and I'm not  
> sure why.
> It seems to look OK in IE7 and Safari, but it's still driving me  
> crazy as I
> use FF.   I've tried everything...
>
> Here is a screenshot of what it's doing in FF3:
> http://www.giveyourdreamaheartbeat.com/pixelshift.jpg
> Page with issues here:
> http://www.giveyourdreamaheartbeat.com/subpagetest.php
> CSS here:
> http://www.giveyourdreamaheartbeat.com/master.css
> http://www.giveyourdreamaheartbeat.com/site.css
>
> I have a master css reset, and if I remove "margin: 0px" then it  
> centers it
> correctly but adds a margin to the top of the page. The issue also  
> gets
> resolved if I have content in the center box longer than 560 pixels.  
> If you
> can assist i'd greatly appreciate it.

It is a bug in Firefox 3.01/Gecko 1.9.0.1.
If the width of the window is an even number, the gap disappears. An  
odd number shows the issue.

This was discussed last month, with a possible solution in this post:


Basically: add an additional div that wraps everything in your page,  
and attach the background-image to that div (instead to the body).  
Make that div as wide as needed to contain the background image (the  
little 'shadows' on left and right), and give it {margin:0 auto;}


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] footer and multiple background images

[David Laakso]

Elle Meredith wrote:
>
> On 08/08/2008, at 10:05 AM, David Laakso wrote:
>>
>> Re: 
>> Are you asking the list?
>>
>
> Yes David :) I was asking the list.
> Just a quick disclaimer: haven't checked my page in IE just yet.
>
>
>
> Elle
>


I regret: left column float drop at +1 font-scaling in Mac Safari and 
Camino. Same in XP FF/2.0.0.14. Our favorite browsers, IE/6 and IE/7, 
drop the left column at text-size "largest."

-- 

A thin red line and a salmon-color ampersand forthcoming.

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] footer and multiple background images

[Elle Meredith]

On 08/08/2008, at 10:05 AM, David Laakso wrote:
>
> Re: 
> Are you asking the list?
>

Yes David :) I was asking the list.
Just a quick disclaimer: haven't checked my page in IE just yet.

On 08/08/2008, at 9:40 AM, Peter Hyde-Smith wrote:
>
> Dan Cederholm's Bulletproof Web Design, 
> http://simplebits.com/publications/bulletproof/ 
>  shows a number of nifty tricks like this.

Actually have it and read it. Great book -- not sure why my head  
wasn't working.
Will have a second look at my font-size.


Thanks,
Elle

__
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] footer and multiple background images

[David Laakso]

Elle Meredith wrote:
>> 
>
> That worked like a charm Peter -- and easier than what i would have  
> come up with. Thank you.
> Could I also ask for general feedback about the page so far?
>
> Thanks once again,
> Elle
>   


Re: 
Are you asking the list?

-- 

A thin red line and a salmon-color ampersand forthcoming.

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/

[css-d] Parsing the "background:" shortcut

[Bill Moseley]

I have two questions:

First, I'm looking for rules for parsing "background:".

Obviously, not all background properties need to be included.

background: red;  # just set the color


And, at least in my quick test with Firefox, it seems the order of the
properties doesn't matter.  i.e.:

background: 10px url(foo.gif) red center no-repeat;

seems to work.

So, it would seem I just need to parse left to right and determine the
type of the property by what it looks like.  "10px" is obviously a
position.

But, every background-* property also supports "inherit", so how do I
know which property that is associated with?

What does this mean:

background-color: red;
background: inherit;

or
background: #eee inherit


Second question:

Can I safely convert all the background-* properties into a shortcut?

That is, can I change:

.foo {
background-image: url(foo.gif);
background-color: red
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom;
}

Into this?

.foo {
background: red url(foo.gif) no-repeat fixed bottom;
}

But what if I have this:


.foo {
background-image: url(foo.gif);
background-color: red
background-repeat: no-repeat;
background-attachment: inherit;
background-position: inherit;
}

And what about !important?

.foo {
background-image: url(foo.gif);
background-color: red !important
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom;
}

How would that !important be written in the background: property?
Does it just apply to the color?


Thanks,




-- 
Bill Moseley
[EMAIL PROTECTED]
Sent from my iMutt

__
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] footer and multiple background images

[Elle Meredith]

> You're trying to affect a creation, right? Try this, to your HTML,  
> add a wrapper
> division that starts right after the body, and ends right before the  
> footer. To
> the CSS, remove the background image from the footer, but make sure  
> you add a
> background color (#bdbcaf). Then add,
>
> div#wrap {background: transparent url(../img/bkg-grass.jpg) left  
> bottom
> repeat-x;}
>
> You'll have to change the faded-tree.jpg to a transparent .gif  
> or .png, making
> sure the trunk in dark enough.

That worked like a charm Peter -- and easier than what i would have  
come up with. Thank you.
Could I also ask for general feedback about the page so far?

Thanks once again,
Elle
__
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] 1 pixel shift in Firefox

[Jonny Stephens]

On 7 Aug 2008, at 20:39, Annesta wrote:

> In FF3, my layout is shifted to the right by one pixel and I'm not  
> sure why.
> It seems to look OK in IE7 and Safari, but it's still driving me  
> crazy as I
> use FF.   I've tried everything...
>

> http://www.giveyourdreamaheartbeat.com/subpagetest.php

I'm not seeing this on FF3 Mac. Other versions show different behaviour.

Safari 2/3 Mac:

When the browser window width is below the width of the body  
background image (999px), a 1px gap appears between #wrap and the  
right vertical rule of the background image. On the left, it overlaps  
the vertical rule. Gradually reducing the browser window further  
shows that #wrap shuffles in and out of alignment with the body  
background.

FF 1.5 Mac/FF2 Windows:

Same as above but the alignment is out even if the browser window is  
wider than the body background image.

If a solution for stabilising the alignment of body to #wrap isn't  
forthcoming you could remove the vertical rules from the image and  
apply them as CSS borders to #wrap. With the background image showing  
only a shadow the shuffling would be less, if at all, noticeable.

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] Div placement with absolute and float positioning

[David Laakso]

Yazmin Media wrote:
> Hello,
>
> I'm having a problem with IE and my current layout. My footer is overlapping
> the columns:
>
> page: http://imaging-resource.com/ABOUTUS.HTM
> css: http://imaging-resource.com/IN/style.css
>
>
>
> I'd like to move to floating the columns to avoid this issue, but I believe
> I would have to place the divs on the page in the order they appear, thus
> losing whatever seo advantage we have by going absolute. I can't find where
> I read that, but could someone verify or correct me?
>
> Thanks!
>   


SEO advantage, or not,  setting the 4 and 3 column versions in the order 
you wish them to appear on the screen is relatively easy using a 
negative-margin float base layout. It can be a beast beyond belief in 
IE/6 if you have a pixel width (as you have on the outer most wrapper), 
and percent width is used for the column widths (as you have). Hold 
pixel widths for all widths; and, try Alex Robinson's "Interactive 
Example" [1], for setting their source order. You'll have no difficulty 
with clearing the footer, regardless of content depth in any column.






-- 

A thin red line and a salmon-color ampersand forthcoming.

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] Div placement with absolute and float positioning

[Gunlaug Sørtun]

Yazmin Media wrote:
> [...]
> 
> I'd like to move to floating the columns to avoid this issue, but I 
> believe I would have to place the divs on the page in the order they 
> appear, thus losing whatever seo advantage we have by going absolute.
> I can't find where I read that, but could someone verify or correct
> me?

You can arrange floats side by side, as columns, more or less in any
order you like - this way...


Source-order manipulation vs. number of columns can be taken as far as
you care to, as it's just a question about learning and understanding
this technique. I use it all the time...

...but in slightly more complex ways than the article describe, and
usually with only two or three columns.

I have no idea how source-order will affect SEO, but that's off-topic on
this list anyway ... me thinks.

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] a:hover vs images with alpha chanel

[Damian Gleason]

Hi Josh,

I'm by no means an expert, but I'd like to offer the following suggestion.

If you are certain that the background color on each page is white then you
can simply use the following css declaration

a:hover img {
background-color:#FFF;
}

whenever an imaged link is hovered over, it will display a white background
color.

Hope this helps.
Damian

On Thu, Aug 7, 2008 at 2:48 PM, snak detek+0r <[EMAIL PROTECTED]>wrote:

> david,
>
> yes, you are right. but that really has nothing to do w/ my original
> question, which was: is there a way to disable a:hover for all images
> w/o resorting to something clumsy (such as the
>
> declarations that you asked me to clarify).
>
> and like i said earlier,
>a img {...}
> should work, but never seems to.
>
> just another one of these things that seems like it would be so
> simple well, thanks for playing in any case. cheers,
>
> josh
>
> David Hucklesby wrote:
> > On Tue, 05 Aug 2008 14:11:51 -0400, snak detek+0r wrote:
>  does anyone have a good way of universally disabling
> 
>  a:hover{background-color}
> 
>  for images? i always have this problem, and i'm never satisfied with
> the solution.
>  it seems that you could fix it by styling
> 
> 
> >> 
> >>
> >>> Do you have a use-case you could put online for us?
> >>>
> >>> Cordially,
> >>> David
> >>> --
> >>>
> >> sure, how about this:
> >> http://minivanswebsite.com/testsite/cssd.html
> >> (note: this illustrates my point slightly better in FF)
> >>
> >
> > If you change this:
> >
> > a.image {
> > background-color: transparent;
> > }
> >
> > to this:
> >
> > a.image:hover {
> > background-color: transparent;
> > }
> >
> > then all browsers I have to test with act the same, except for
> > the yellow background only being line-height in most cases.
> >
> > If you want the yellow background to be the height of the image,
> > add "display: inline-block;" to the "a" selector's rule.
> > (You may have to add "display: -moz-inline-box;" to get FF 2 to behave.
> > Not tested.)
> >
> > 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/
>
__
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] 1 pixel shift in Firefox

[Annesta]

In FF3, my layout is shifted to the right by one pixel and I'm not sure why.
It seems to look OK in IE7 and Safari, but it's still driving me crazy as I
use FF.   I've tried everything...

Here is a screenshot of what it's doing in FF3:
http://www.giveyourdreamaheartbeat.com/pixelshift.jpg
Page with issues here:
http://www.giveyourdreamaheartbeat.com/subpagetest.php
CSS here:
http://www.giveyourdreamaheartbeat.com/master.css
http://www.giveyourdreamaheartbeat.com/site.css

I have a master css reset, and if I remove "margin: 0px" then it centers it
correctly but adds a margin to the top of the page. The issue also gets
resolved if I have content in the center box longer than 560 pixels. If you
can assist i'd greatly appreciate it.

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/

Re: [css-d] bottom gap problem

[Jonny Stephens]

On 7 Aug 2008, at 19:46, Kevin Evans wrote:

> I am using some jQuery tabs in the content area at the top on  
> http://www.fortheinjured.com/default_redesign.asp
>   but I can't seem to get rid of the bottom gap below the tabs.
> THere's also a gap to the left of the 3 tabs I can't get rid of also.

Remove the 15px bottom margin and 30px left margin from #content ul:

#content ul { margin: 7px 0 0 0; }

Alternatively, you could change to margin-top: 7px; as you have  
margin: 0 set globally.

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] a:hover vs images with alpha chanel

[snak detek+0r]

david,

yes, you are right. but that really has nothing to do w/ my original 
question, which was: is there a way to disable a:hover for all images 
w/o resorting to something clumsy (such as the

declarations that you asked me to clarify).

and like i said earlier,
a img {...}
should work, but never seems to.

just another one of these things that seems like it would be so 
simple well, thanks for playing in any case. cheers,

josh

David Hucklesby wrote:
> On Tue, 05 Aug 2008 14:11:51 -0400, snak detek+0r wrote:
 does anyone have a good way of universally disabling

 a:hover{background-color}

 for images? i always have this problem, and i'm never satisfied with the 
 solution.
 it seems that you could fix it by styling


>> 
>>
>>> Do you have a use-case you could put online for us?
>>>
>>> Cordially,
>>> David
>>> --
>>>
>> sure, how about this:
>> http://minivanswebsite.com/testsite/cssd.html
>> (note: this illustrates my point slightly better in FF)
>>
> 
> If you change this:
> 
> a.image {
> background-color: transparent;
> }
> 
> to this:
> 
> a.image:hover {
> background-color: transparent;
> }
> 
> then all browsers I have to test with act the same, except for
> the yellow background only being line-height in most cases.
> 
> If you want the yellow background to be the height of the image,
> add "display: inline-block;" to the "a" selector's rule.
> (You may have to add "display: -moz-inline-box;" to get FF 2 to behave.
> Not tested.)
> 
> 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/

[css-d] bottom gap problem

[Kevin Evans]

Hello all,

I am using some jQuery tabs in the content area at the top on 
http://www.fortheinjured.com/default_redesign.asp 
  but I can't seem to get rid of the bottom gap below the tabs.  
THere's also a gap to the left of the 3 tabs I can't get rid of also.

Any ideas how to get rid of it? THe tabs should be flush with the  
bottom box.

Thanks all!

Kevin

__
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] footer and multiple background images

[peter hyde-smith]

 Elle Meredith <[EMAIL PROTECTED]> wrote: 
>   
> want is to have the grass image to repeat itself across the page and  
> the tree image to appear in-front of the grass image and to be right- 
> aligned with the #content.
> The page is at: http://designbyelle.com.au/poinciana/
> Cheers,
> Elle
> 
> 
08/07/2008

Elle:

You're trying to affect a creation, right? Try this, to your HTML, add a 
wrapper division that starts right after the body, and ends right before the 
footer. To the CSS, remove the background image from the footer, but make sure 
you add a background color (#bdbcaf). Then add,

div#wrap{background: transparent url(../img/bkg-grass.jpg) left bottom 
repeat-x;}

You'll have to change the faded-tree.jpg to a transparent .gif or .png, making 
sure the trunk in dark enough.

The effect is the grass going across the page, sitting on the footer, with the 
faded tree image in front.

Best Regards,

Peter
www.fatpawdesign.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] Div placement with absolute and float positioning

[Yazmin Media]

Hello,

I'm having a problem with IE and my current layout. My footer is overlapping
the columns:

page: http://imaging-resource.com/ABOUTUS.HTM
css: http://imaging-resource.com/IN/style.css

I know this is because I'm using absolute positioning and am removing the
columns from the flow of the page. I went this route because we were working
on our search engine positioning by putting the most relevant info towards
the top of the page. Our home page is an example of this, with it's 4 column
formatting. This setup worked just fine as long as our second column, the
only non-absolute column, was longer than the other columns so it could push
down the header.

However, when we move to just 3 columns for some of our pages, we run into
the footer overlap issue again. We lack a lot of content on most of these
pages and the problem shows again in IE.

I'd like to move to floating the columns to avoid this issue, but I believe
I would have to place the divs on the page in the order they appear, thus
losing whatever seo advantage we have by going absolute. I can't find where
I read that, but could someone verify or correct me?

Thanks!
-- 
Yazmin Wickham
http://www.imaging-resource.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] more vertical pop-out

[tony]

Hi,
Georg helped me sort out my vertical menu to achieve the effects I wanted.
Would now like to refine it with a hidden pop-out on the 'Local Photos'
menu, to show in a vertical stack on hover.
In Gecko mode I managed to align horizontally
But
Couldn't get them to display on hover.
I see in Explorer the sub-menu has gone vertical and off to bottom.
As can be seen at
www.somersetspiess.co.uk
Can anyone please indicate the tweaks I need to implement?
Yeah you guessed dead novice, but thanks in advance
Tony
__
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] Site review and assistance with IE

[Jody Ferrell]

Here's the site: http://webct.mscc.edu/motlowtest/



This is my first try at this sort of thing so I'm willing to listen to all
criticism.



The Search div doesn't appear in the proper place in IE 6, it wraps to the
next line. I'm not sure why. Also in both 5.5 and 6 the A-Z index image has
a white background that doesn't appear in 7 or Firefox.



Thanks in advance.



Jody
__
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] IE suckerfish drop down problem

[ochieng' nelson]

SITE: www.pennywinter.com
PROBLEM: dropdown over *clothes* misplaced in IE. Works well for other
browsers though.

CSS:www.pennywinter.com/css/penny.css

Please assist.
__
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] footer and multiple background images

[Elle Meredith]

Hello,

I am trying to create an affect where the tree image comes in front of  
the grass repeated image. At the moment, the tree is a background  
image in the #content div and the bkg-grass.jpg is in the background  
of the #footer. Defining the faded tree in the background of the  
#content makes it easier with alignment, which might be difficult to  
achieve otherwise -- but I am open to suggestions. So basically what I  
want is to have the grass image to repeat itself across the page and  
the tree image to appear in-front of the grass image and to be right- 
aligned with the #content.  I can think of a couple workarounds but I  
wanted to ask for a recommendation for what would you think would be  
the best way to achieve that affect?
The page is at: http://designbyelle.com.au/poinciana/
Cheers,
Elle



__
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] Fwd: acid test on the display property

[Gabriele Romanato]

-- Forwarded message --
From: Gabriele Romanato <[EMAIL PROTECTED]>
Date: 2008/8/7
Subject: acid test on the display property
To: css test <[EMAIL PROTECTED]>


http://www.css-zibaldone.com/test/display/acid.html

HTH

xxx ^.^

-- 
http://www.css-zibaldone.com/
http://www.css-zibaldone.com/test/ (English)




-- 
http://www.css-zibaldone.com/
http://www.css-zibaldone.com/test/ (English)
__
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] IE bug?

[good one]

> Date: Thu, 7 Aug 2008 10:25:46 +1000> From: [EMAIL PROTECTED]> To: [EMAIL 
> PROTECTED]> CC: css-d@lists.css-discuss.org> Subject: Re: [css-d] IE bug?> > 
> good one wrote:> > On the 'About' drop down on the 'supporters/patrons' link 
> it goes 'too far' . It is fine in firefox where it defines the width of the 
> drop down but in IE it sticks out. > [..]> > How do I sort this out-what IE 
> bug is it? Thanks> > http://tinyurl.com/64cvtk> > > Putting whitespace on 
> either side of the 'supporters/patrons' link will > sort IE6 out. This is the 
> IE6 expanding box bug [1]. IE7 is showing the > sticky hover bug [2]. Since 
> the JS is only required by IE6 it would be > better to put the JS within IE 
> conditional comments.> > BTW, I would recommend considering making the links 
> shorter. Instead of > 'Join Voice Problem Community' just have 'Community' 
> and try to shorten > other links in a similar vein.> > A similar demo shows 
> an approach that can be used.> > > > > This is 
> based on the Ursidae menus [3].> > > 1. 
> > 2. 
> > 3. 
> > > > -- > Alan 
> http://css-class.com/> > Nearly all men can stand adversity, but if you want 
> to test a man's > character, give him power - Abraham Lincoln
 
 
 
Thank you Alan that is great
_
Get Hotmail on your mobile from Vodafone 
http://clk.atdmt.com/UKM/go/107571435/direct/01/
__
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/