Re: [css-d] Need help with space between nav bar and content

2012-02-26 Thread Markus Ernst 

Am 27.02.2012 06:25 schrieb Theresa Jennings:

Here's a sample of the interior pages (the home page is handled a little 
differently):

http://mdh-test.com/HealthySkin/Healthy_Skin_Story.shtml

Style sheets, so you don't have to look for them:

mdh-test.com/HealthySkin/main.css
mdh-test.com/HealthySkin/ddsmoothmenu.css

In Safari and Chrome (Win and OSX), the white #box juts up against the bottom 
of the text of the navigation. There should be a 1px space between the bottom 
of the nav bar and the top of the white box, like there is on the home page. It 
does it perfectly in all the other browsers. If I add extra margin pixels in 
the CSS to make the white box go down in Safari and Chrome, then it goes down a 
bunch in FF. Bleccch.

On the home page, there is no #box rule.

I have validated the html (woot!), and the css validates except for a few 
things having to do with the smoothmenu and the webkit hacks. I've been futzing 
with the original code.

Can you help me, please? I imagine I'm going to need to hack the CSS a little.


Without having had a deep look at your code, I'd suggest trying to 
un-hack first. You state that Safari and Chrome behave differently from 
other browsers, and you talk about Webkit hacks. Safari and Chrome use 
the Webkit engine. Thus, removing the Webkit hacks might make these 
browsers behave like the others.


(Of course, if I am right, you will have to find other solutions for the 
things you try to do with the Webkit hacks; I don't know what they are for.)

__
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] Need help with space between nav bar and content

2012-02-26 Thread Theresa Jennings 
Here's a sample of the interior pages (the home page is handled a little 
differently):

http://mdh-test.com/HealthySkin/Healthy_Skin_Story.shtml

Style sheets, so you don't have to look for them:

mdh-test.com/HealthySkin/main.css
mdh-test.com/HealthySkin/ddsmoothmenu.css

In Safari and Chrome (Win and OSX), the white #box juts up against the bottom 
of the text of the navigation. There should be a 1px space between the bottom 
of the nav bar and the top of the white box, like there is on the home page. It 
does it perfectly in all the other browsers. If I add extra margin pixels in 
the CSS to make the white box go down in Safari and Chrome, then it goes down a 
bunch in FF. Bleccch.

On the home page, there is no #box rule.

I have validated the html (woot!), and the css validates except for a few 
things having to do with the smoothmenu and the webkit hacks. I've been futzing 
with the original code.

Can you help me, please? I imagine I'm going to need to hack the CSS a little.


Theresa Jennings
__
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] need a little help with links

2012-02-26 Thread Ghodmode 
On Sat, Feb 25, 2012 at 4:28 AM, Melinda Odom  wrote:
> Hi,
>
> I have the middle links on this page setup and working when you click on one 
> of the links and it goes to that page that link stays a changed color.
> http://www.designhosting.biz/design.html
>
> I am trying to do the same thing for the top menu but it doesn't work. I even 
> tried adding the id and class from the middle links to the top links and it 
> still will not work.
>
> Any help is greatly appreciated.

In your middle links (inside of div#subPageLinks) it looks like your "default"
color is defined for the links that have the class subLinks and the active link
is the one without the class.  That seems a little backwards to me, but hey...
whatever works :)

To do your main navigation the same way, define the color for the current page
in your CSS.  It should be something like

  div#nav a { color: #00ccff; }.

Then give the links in your navigation bar (div#nav) a common class and set a
color on that class as the "default" color.  If the class was mainLinks, then it
might be something like

  div#nav a.mainLinks { color: #99; }.

Finally, in each page remove the class from the link for that page's link.
For example, in design.html, the Design link wouldn't have the class mainLinks.

A more conventional way to do it would be as Tom Livingston suggested.  Use a
class just for the active page.  I like to use the class "active" for this.  In
each page, add the "active" class to the active page's link, then in your
stylesheet you could add the highlight color:

  div#nav a.active { color: #00ccff; }

This is the way I actually recommend doing it and you should probably do it this
way for your middle links, too.

--
Vince Aggrippino
Ghodmode Development
http://www.ghodmode.com


> Thank you!
>
> Best Regards,
> Melinda L. Odom
> 1605 Dechard Street
> Van Buren, Arkansas 72956
> Cell: 479-226-6040 CST
> Design Hosting, Inc.
> i...@designhosting.biz
> Join Me on Twitter
> Amazon Wish List
__
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] Object height and width issues

2012-02-26 Thread David Laakso 
On Sun, Feb 26, 2012 at 2:58 AM, David Thorp
 wrote:
Greetings all...

I'm relatively new to both CSS, and this list, but I've had some very
positive experiences on other lists for other programming tools, so
I'm hoping this list will be similar :)



Welcome to the list, David.

Start here:

End there.

Best,
~d

PS "Sufficient unto the day is the evil thereof"
__
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] Cross Browser Font Rendering Issues

2012-02-26 Thread Felix Miata 

On 2012/02/27 10:42 (GMT+0800) Ghodmode composed:


You're using the generic font family "sans-serif", so you're letting the
OS/browser decide what font to use.  It's more likely that they're different


Actually you're letting the user decide, since the default is presumptively 
what the user either chose actively by personalizing his personal computing 
device, or passively by retaining the choice of the browser vendor.



fonts than that they're the same fonts rendering differently.



You would probably be better off using "web safe" fonts, which means that
they're likely to be available on all of your target platforms.


All recent major browsers and most other browsers released this century 
default to web safe fonts.



A web search for web safe fonts will help you decide what fonts to use.  I just
did it and here's my first result:
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

--
"The wise are known for their understanding, and pleasant
words are persuasive." Proverbs 16:21 (New Living Translation)

 Team OS/2 ** Reg. Linux User #211409 ** a11y rocks!

Felix Miata  ***  http://fm.no-ip.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] Cross Browser Font Rendering Issues

2012-02-26 Thread Ghodmode 
On Sat, Feb 25, 2012 at 4:50 AM, Matthew Willis  wrote:
> Hi CSS-heads,
>
> I'm working on a site map, using background images with lines connecting the 
> various site pages. The problem I'm having is that fonts render differently 
> over different operating systems and browser. I thought that by using px 
> rather than em for font-size would control the height of the fonts, but that 
> hasn't been the case. Does anyone know of any strategies for this, short of 
> replacing the text with images?
>
> Here is what i'm working on to get a better idea of what I'm talking about.
>
> http://fat-hair.com/2012stage/ftr-sitemap.php

It already seems to line up well for me on Linux and Windows, but I noticed that
you aren't setting the line-height of the text and you're adjusting the vertical
position of the background image down a little.  That was to correct for the
height of the text being taller than the height of the image, right?

A detail that might help you out is that text is vertically centered on its line
height.  You can even make the line-height smaller than the font size.  So, if
your background image is 11px, you can make your line-height 11px also and it
should line up pretty well.

This could make text overlap vertically a little, but that's not a problem here
because you're using header elements for your text and their default margins
prevent the text from overlapping.

I tried it out on your site and it worked well, but I also had to change the
vertical background position to 0.

And if that doesn't work ...

You're using the generic font family "sans-serif", so you're letting the
OS/browser decide what font to use.  It's more likely that they're different
fonts than that they're the same fonts rendering differently.

You would probably be better off using "web safe" fonts, which means that
they're likely to be available on all of your target platforms.

A web search for web safe fonts will help you decide what fonts to use.  I just
did it and here's my first result:
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

--
Vince Aggrippino
a.k.a. Ghodmode
http://www.ghodmode.com


> Thank you!
> Matthew
__
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] Make drop down third level links always remain up top

2012-02-26 Thread Ghodmode 
On Fri, Feb 24, 2012 at 8:48 AM, Neal Watkins  wrote:
> on the link belowhttp://constructweb.com/test/index.html
>
> hover on the nav - "discover san diego"
> on the third level links that show up on hover is there a way to make them
> all have show up  the same horizontally ( just under the header ) instead
> of relative to there 2nd level link?

It shouldn't be a problem.  Set float:left on the li that you want to be
horizontal.  Then give the ul that contains them a width sufficient to allow
them to be horizontal.

I'm not sure exactly how you want it to look, but I played around with your site
a little bit using Firebug.  I added a "horizontal" class to the ul that
contains the "Menu Features" submenu.  Then I set float:left on
ul.sd-main-navm.horizontal li and width:1000px on ul.sd-main-navm.horizontal.

If that doesn't get you closer to how you would like it to look, draw a picture
of how you want it to look and put it on that test site for us to see and I'm
sure we can come up with a solution.

--
Vince Aggrippino
a.k.a. Ghodmode
http://www.ghodmode.com


> Thanks for taking a look
>
> Neal
__
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] Object height and width issues

2012-02-26 Thread David Hucklesby 

On 2/25/12 11:58 PM, David Thorp wrote:
[...]


I have a number of  objects arranged in various positions:

1. A toolbar across the top that is the full width of the window
(width:100%) and 30px in height.

2. A sidebar down the left hand side, that starts under the toolbar
(so the top border of it is 30px down the page).  It's 138 px wide.

3. Then a content area takes up the rest of the window.


I want each of these objects to take up the full height and width of
the window (wherever a height and width is not set), regardless of
the size of the window, without ever going over the edges of the
window.  I will use the overflow property to generate scroll bars if
the content within each of these objects is larger than the size of
the window allows.


[...]

For the layout, the second template on this page may work for you. The
sidebar on that example is 30%, but the layout will also work with your
fixed width. :)

  

For the height problem, look for "sticky footer" solutions. Here is a
simple one:

  

If you need the columns to have a colored background top to bottom, my
favorite solution is the "fluid faux columns" from this page:

  

Like most CSS problems, there are many solutions, but some fit a
particular page better than others. I believe it's always best to start
from a page with representative content, marked up with Plain Old
Semantic HTML. For me, that makes choosing the solution much easier. YMMV.

HTH.
--
Cordially,
David
__
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] Object height and width issues

2012-02-26 Thread Philip TAYLOR 



John D wrote:



You mean something like this:




This forces a vertical scroll bar in Seamonkey 2.7.2
at 1152 x 862.

Philip Taylor
__
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] Object height and width issues

2012-02-26 Thread John D 


You mean something like this:



If not then please post a link to your test page.

Good luck.




> Greetings all...
> 
> I'm relatively new to both CSS, and this list, but I've had some very 
> positive experiences on other lists for other programming tools, so I'm 
> hoping this list will be similar :)
> 
> I've been learning css from the w3schools website, which seems to be pretty 
> good as a crash course, but I'm having some difficulties getting positioning 
> and dimensions of objects to work the way I want.  I'm not sure if this is 
> because I don't properly understand the rules and concepts, or I'm just 
> getting syntax or something simple like that wrong.
> 
> If anyone can help me I'd be grateful...
> 
> I have a number of  objects arranged in various positions:
> 
> 1. A toolbar across the top that is the full width of the window (width:100%) 
> and 30px in height.
> 2. A sidebar down the left hand side, that starts under the toolbar (so the 
> top border of it is 30px down the page).  It's 138 px wide.
> 3. Then a content area takes up the rest of the window.
> 
> 
> I want each of these objects to take up the full height and width of the 
> window (wherever a height and width is not set), regardless of the size of 
> the window, without ever going over the edges of the window.  I will use the 
> overflow property to generate scroll bars if the content within each of these 
> objects is larger than the size of the window allows.
> 
> So this means that:
> 1. the sidebar's height essentially needs to be (100%-30px).
> 2. the content area's height needs to be (100%-30px), and its width needs to 
> be (100%-138px).
> 
> If I set the height of these two objects to auto, then they only go as far 
> down the window as there is content in them, which if that's less than there 
> is room in the window, then they don't reach the bottom of the window.
> 
> If I set the heights to be 100% then they stretch beyond the height of the 
> window by exactly the 30 pixels of the toolbar, and they force the window 
> scroll bars to appear - no matter what size i make the window.
> 
> I understand of course that I can't do this:
> 
> object {
> height:100%-30px
> }
> 
> (well at least it's my understanding i can't do that, and I tried it and it 
> didn't work, but feel free to correct me if I'm wrong there somehow).
> 
> I'm also having some (different) challenges with the width of the content 
> area, but let's come back to that - one thing at a time.
> 
> Clearly I'm missing something... What's the best practice for getting the 
> heights the way I want them?
> 

  
__
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/