[css-d] adjust position of hover nav tab

2011-01-20 Thread Rory Bernstein 
On this site:

http://mcgivney.ehclients.com/

I cannot for the life of me figure out how to get the positioning of the dark 
green tab that appears behind the nav items when you hover on them. For 
example, if you hover over practices in the nav, that box is not quite the 
same distance from the left and right divider lines. There is more space 
between the dark green box and the line on the right side; I'd like to have 
this spacing on the left too but I cannot figure out how to do that.

Thanks, Rory 

__
css-discuss [css-d@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] adjust position of hover nav tab

2011-01-20 Thread Rory Bernstein 
 http://mcgivney.ehclients.com/
 
 if you hover over practices in the nav, that box is not quite the
 same distance from the left and right divider lines.
 
 Correct in Win7 FF 3.6.13 + Opera 11 (no IE here). The favicon link is not 
 closed.
 
 Gruss, Ingo
 

I am using Firefox on a Mac, and I am seeing that green box as having a bit 
more space to the right of it than to the left. The green box that appears when 
you hover over a nav link. Any way to get that centered?

__
css-discuss [css-d@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] print style sheet problem IE7 layout issue

2011-01-20 Thread Rory Bernstein 
Apologies if this was answered, but I did not hear anything and for some reason 
the archive link is not working on the web site. Here's my question again.

1. On this page:
http://seidenschein.com/index.php/seidenschein/practice_areas/421-a_benefits/

When I print it, only about two-thirds of the text on the page shows up on the 
printed version. I have a print style sheet. it stops about 1 line into the 
duration section. Why would this happen?

2. On the same page, the left column links stick out too far, past the divider 
in IE7. Can anyone tell me how to fix that?

Thank you, Rory
__
css-discuss [css-d@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] adjust position of hover nav tab

2011-01-20 Thread Jonny Stephens 
Try this.

#nav {
list-style:none;
margin:0;
padding:19px 0 0;
width:100%;
text-align:center;
position:relative;
display:table; /* new */
word-spacing:-1em; /* new */
}

#nav li {
display:inline-block;
background: url(../images/global/separator.gif) no-repeat 0 10px;
padding:0 3px 0 5px; /* changed */
position:relative;
word-spacing:0; /* new */
}

#nav .drop {
position:absolute;
top:33px;
left:5px; /* changed */
white-space:nowrap;
z-index:10;
background: url(../images/global/none.gif);
visibility:hidden;
} 

On 20 Jan 2011, at 19:39, Rory Bernstein wrote:

 On this site:
 
 http://mcgivney.ehclients.com/
 
 I cannot for the life of me figure out how to get the positioning of the dark 
 green tab that appears behind the nav items when you hover on them. For 
 example, if you hover over practices in the nav, that box is not quite the 
 same distance from the left and right divider lines. There is more space 
 between the dark green box and the line on the right side; I'd like to have 
 this spacing on the left too but I cannot figure out how to do that.
 
 Thanks, Rory 
 
 __
 css-discuss [css-d@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 [css-d@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] adjust position of hover nav tab

2011-01-20 Thread Jakub Bachniak 

On 2011-01-20 19:39, Rory Bernstein wrote:

On this site:

http://mcgivney.ehclients.com/

I cannot for the life of me figure out how to get the positioning of the dark green tab 
that appears behind the nav items when you hover on them. For example, if you hover over 
practices in the nav, that box is not quite the same distance from the left 
and right divider lines. There is more space between the dark green box and the line on 
the right side; I'd like to have this spacing on the left too but I cannot figure out how 
to do that.

Thanks, Rory

Hi there!
Since you're using bgd image (separator.gif) as those separation bars:
...
#nav li{
display:inline-block;
background: url(../images/global/separator.gif) no-repeat 0 10px;
padding:0 5px 0 5px;
position:relative;
...
try increasing left pading to say 10px:

padding: 0 5px 0 10px;

I've only quickly tried it on Firefox 3.6 PC and it worked

Hope it helps...

Good Luck!

__
css-discuss [css-d@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 [css-d@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] adjust position of hover nav tab

2011-01-20 Thread David Laakso 

On 1/20/11 2:39 PM, Rory Bernstein wrote:

On this site:

http://mcgivney.ehclients.com/

I cannot for the life of me figure out how to get the positioning of the dark green tab 
that appears behind the nav items when you hover on them. For example, if you hover over 
practices in the nav, that box is not quite the same distance from the left 
and right divider lines. There is more space between the dark green box and the line on 
the right side; I'd like to have this spacing on the left too but I cannot figure out how 
to do that.

Thanks, Rory



Trust me,  your idea of dark green and my idea of dark green may be two 
entirely different things. Either way the words about and practices 
appear to be visually horizontally centered in Mac OS X 10.4  FF/3.16.3. 
If the goal is to center the links and their respective border 
horizontally in the dropdown-box, then adding and tweaking this is one 
way to do it...

#nav ul li a{left: 6px;}

~d





--
http://chelseacreekstudio.com/
http://chelseacreekstudio.com/fa/

__
css-discuss [css-d@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] adjust position of hover nav tab

2011-01-20 Thread David Laakso 

On 1/20/11 5:09 PM, David Laakso wrote:

On 1/20/11 2:39 PM, Rory Bernstein wrote:

On this site:

http://mcgivney.ehclients.com/

I cannot for the life of me figure out how to get the positioning of 
the dark green tab that appears behind the nav items when you hover 
on them. For example, if you hover over practices in the nav, that 
box is not quite the same distance from the left and right divider 
lines. There is more space between the dark green box and the line on 
the right side; I'd like to have this spacing on the left too but I 
cannot figure out how to do that.


Thanks, Rory



Trust me,  your idea of dark green and my idea of dark green may be 
two entirely different things. Either way the words about and 
practices appear to be visually horizontally centered in Mac OS X 
10.4  FF/3.16.3. If the goal is to center the links and their 
respective border horizontally in the dropdown-box, then adding and 
tweaking this is one way to do it...

#nav ul li a{left: 6px;}

~d




Hmm. Guess I see what you mean, now. You might try this [and tweak] and 
see if it helps?

#nav li a{margin-left:6px;}

~d

--
http://chelseacreekstudio.com/
http://chelseacreekstudio.com/fa/

__
css-discuss [css-d@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] menu hover issue

2011-01-20 Thread Debbie Campbell 
When trying to fix an issue with z-index and IE7, I seem to have done 
something else. When you hover over the dropdown menus in this page in 
IE7, they close unless you're actually over a link:



http://www.redkitecreative.com/projects/team/contact-us/


Can someone help?

--
Debbie Campbell
www.redkitecreative.com
__
css-discuss [css-d@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] adjust position of hover nav tab

2011-01-20 Thread Rory Bernstein 
 Hmm. Guess I see what you mean, now. You might try this [and tweak] and see 
 if it helps?
 #nav li a{margin-left:6px;}
 
 ~d
 

Great; I applied this one rule and indeed the spacing is just right now. Thank 
you!
Rory

__
css-discuss [css-d@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] how to constrain width of box?

2011-01-20 Thread Rory Bernstein 
I have a div that has a photo with a caption under it. The div is floated left 
so that a block of text can wrap around it:
http://mcgivney.ehclients.com/press/

But, I can't set a fixed width to the div with the photo because this is in a 
CMS and people can upload photos of different sizes. So, is there some way to 
always make the box as wide as the photo and not wider? I'd like the caption to 
wrap around in the box under the photo, but not be wider than the photo.


__
css-discuss [css-d@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] how to constrain width of box?

2011-01-20 Thread Germán Martínez 
Hi Rory,

As far as I know, you can't achieve that using only CSS, maybe you should 
consider using JS.
Also, I noticed a problem with your HTML, you have a p inside a span.
Drop the p and set the span to display:block with something like this:   
.photo_and_caption span {display: block;}

You may also want to consider using max-width and min-width for both the image 
and the span.

Best,
Germán



On Jan 20, 2011, at 9:56 PM, Rory Bernstein wrote:

 I have a div that has a photo with a caption under it. The div is floated 
 left so that a block of text can wrap around it:
 http://mcgivney.ehclients.com/press/
 
 But, I can't set a fixed width to the div with the photo because this is in a 
 CMS and people can upload photos of different sizes. So, is there some way to 
 always make the box as wide as the photo and not wider? I'd like the caption 
 to wrap around in the box under the photo, but not be wider than the photo.
 
 
 __
 css-discuss [css-d@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/



Germán Martínez, UX Designer

http://martinez.pe



__
css-discuss [css-d@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] how to constrain width of box?

2011-01-20 Thread G.Sørtun 



http://mcgivney.ehclients.com/press/

[...] is there some way to always make the box as wide as the photo and not 
wider? I'd like the caption to wrap around in the box under the photo, but not 
be wider than the photo.



Rearrange source-code and restyle...

div class=photo_and_caption
span
img 
src=http://mcgivney.ehclients.com/images/channels/press_sample_photo2.jpg; 
alt=Test Press Event /


This is a really long caption that will wrap under the photo and it goes 
on and on and on

/span
/div


.photo_and_caption span {display: table; width: 100px; text-transform : 
uppercase;

font : 12px 'TitilliumText22LBold', Tahoma, Arial, Helvetica, sans-serif;}

...and you'll get the effect you want in all somewhat decent browsers.

regards
Georg
__
css-discuss [css-d@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/