Re: [css-d] Disappearing Navigation Bar

[taestrada]

-Original Message-
From: David Laakso [mailto:da...@chelseacreekstudio.com] 
Sent: Wednesday, September 01, 2010 5:01 AM
To: taestrada
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] Disappearing Navigation Bar

taestrada wrote:
> I am having the strangest problem with a site I built. It looks great when
I
> view it in Firefox, Chrome and IE8, but two people have reported that the
> the brown navigation bar doesn't show up at all. One of them was using IE7
> and the other said IE8. Since I can't replicate the problem, I have no
idea
> what is causing it or what to do.
>
> This is the url:  http://www.pastrycraftseattle.com
>
> Apparently they can see the banner with the logo and cookies, and they can
> see all the content under "Lively lessons..." - they just can't see the
> navigation!
>
> I would be so grateful if someone can figure this out!
>
> Thanks,
>
> Alix Estrada
>
>   





The IE/7 "has layout" trigger is position: relative; and the vertical 
positioning needs to be set.
Additionally both IE/6.0 and IE/7 throw  both an horizontal and 
veritical scroolbars.

This seems to bring both 6/7 on-board on a local file...

*:first-child + html #topnav {position:relative;}/*IE/7.0*/
*:first-child + html #content1 {margin: 38px auto 0 
auto;overflow:hidden;}/*IE/7.0*/
* html #content1 {overflow:hidden;}/*IE/6.0*/

Reference:
<http://www.satzansatz.de/cssd/onhavinglayout.html>

Best,
Julia Child



-- 
:: desktop and mobile ::
http://chelseacreekstudio.com/


Thank you so much. You're brilliant!!! It worked!

Alix

__
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] Disappearing Navigation Bar

[taestrada]

I am having the strangest problem with a site I built. It looks great when I
view it in Firefox, Chrome and IE8, but two people have reported that the
the brown navigation bar doesn't show up at all. One of them was using IE7
and the other said IE8. Since I can't replicate the problem, I have no idea
what is causing it or what to do.

This is the url:  http://www.pastrycraftseattle.com

Apparently they can see the banner with the logo and cookies, and they can
see all the content under "Lively lessons..." - they just can't see the
navigation!

I would be so grateful if someone can figure this out!

Thanks,

Alix Estrada


__
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] Background image not showing up

[taestrada]

-Original Message-
From: Thierry [mailto:thierry.koble...@gmail.com] On Behalf Of Thierry
Koblentz
Sent: Sunday, May 02, 2010 9:58 AM
To: 'taestrada'; css-d@lists.css-discuss.org
Subject: RE: [css-d] Background image not showing up

> > I've used j-query to create some toggled content on this page:
> >
> > http://www.issaquahfish.org/dev/education/learn-about-salmon.html


> I'm not sure why you're styling all the DIVs like that, but if you do
> not
> want to change that styling you can use the following to fix the issue:
> 
> #container .block {
>   background-color:transparent;
> }

> Thanks so much. That worked perfectly! (I need the container div to
> have the
> #fff background because otherwise the blue patterned background shows
> through.) 

Alix,

That container already has a white background:

#container {
  background:#FF;
  border:1px solid #00;
  margin:0 auto;
  text-align:left;
  width:960px;
}

so imho there is no need to style all the divs inside it:

#container div {background-color:#FF;}

Did you try to *remove* the above rule? Imho it should work just fine
without it.
The only reason I could think you'd need this is if you had a construct
where #container collapses (mostly because of floats), but I see you're
using the last child to clear everything so I don't think you need that
rule...


--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz

Yes, I tried removing it after reading your initial email but the blue
background was visible so I put it back.


__
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] Background image not showing up

[taestrada]

-Original Message-
From: Thierry [mailto:thierry.koble...@gmail.com] On Behalf Of Thierry
Koblentz
Sent: Sunday, May 02, 2010 8:35 AM
To: 'taestrada'; css-d@lists.css-discuss.org
Subject: RE: [css-d] Background image not showing up

> I've used j-query to create some toggled content on this page:
> 
> http://www.issaquahfish.org/dev/education/learn-about-salmon.html
> 
> 
> 
> If you click on any of the toggles, you will see the bottom background
> image
> from  is there, but the repeating image for  class="toggle_container"> is missing. I've spent way too much time
> troubleshooting this but can't figure out what I'm doing wrong.

The background image declaration is in this rule:

.toggle_container {}

But you have the following rule that styles div.block which is a child of
div.toggle_container

#container div {
background-color:#FF;
}

I'm not sure why you're styling all the DIVs like that, but if you do not
want to change that styling you can use the following to fix the issue:

#container .block {
background-color:transparent;
}


--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz

Thanks so much. That worked perfectly! (I need the container div to have the
#fff background because otherwise the blue patterned background shows
through.) I really appreciate your help!

Alix


__
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] Background image not showing up

[taestrada]

I've used j-query to create some toggled content on this page:

http://www.issaquahfish.org/dev/education/learn-about-salmon.html

 

If you click on any of the toggles, you will see the bottom background image
from  is there, but the repeating image for  is missing. I've spent way too much time
troubleshooting this but can't figure out what I'm doing wrong.

 

I'd appreciate any help with this.

 

Thank you,

 

 

 

__
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] Issues in IE

[taestrada]

-Original Message-
From: Alan Gresley [mailto:a...@css-class.com] 
Sent: Wednesday, October 28, 2009 11:50 PM
To: taestrada
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] Issues in IE

taestrada wrote:
> My page looks perfect in Firefox, but in IE 7 the left navigation is on
the
> right side of the content.  The content is also very low The more I tried
to
> fix it, the more I kept messing things up. Thought I had better ask fresh
> eyes for help. (I have a feeling it's something really basic!)
> 
> http://foundations-aba.com/index2.html
> 
> The only other pages up are "About Us" and "Services". I also have
something
> strange going on with the Services page. Column B (Behavior Analysis) is
20
> pixels lower than Column A. Not sure why.
> 
> Thank you!
> Alix Estrada


Strange case, Something to do with the wide image in the page header. 
Clear left on div#navigation brings IE7- into line.

#navigation {
   width:175px;
   float: left;
   margin-top: 0px;
   clear:left; /* Add for IE7- */
}

To fix the margin-top in IE7- for the  header in div#mainContent add 
this CSS.

#mainContent h1 {
margin-top: 20px;
}


None of these fixes should disturb the other browsers.


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

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo

Yay, thank you so much! Not sure how you figured that out but I really
appreciate it!

Alix

__
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] Issues in IE

[taestrada]

My page looks perfect in Firefox, but in IE 7 the left navigation is on the
right side of the content.  The content is also very low The more I tried to
fix it, the more I kept messing things up. Thought I had better ask fresh
eyes for help. (I have a feeling it's something really basic!)

http://foundations-aba.com/index2.html

 

The only other pages up are "About Us" and "Services". I also have something
strange going on with the Services page. Column B (Behavior Analysis) is 20
pixels lower than Column A. Not sure why.

 

 

Thank you!

 

Alix Estrada

__
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] Can't Get Rid of Gap in Firefox

[taestrada]

-Original Message-
From: r...@catjuggling.com [mailto:r...@catjuggling.com] 
Sent: Friday, October 16, 2009 5:12 PM
To: taestrada; css-d@lists.css-discuss.org
Subject: Re: [css-d] Can't Get Rid of Gap in Firefox

You may be aware of these things already, but :

I am seeing a 1-pixel offset in the border on the Home page. The header 
graphic sits 1 pixel to the left of the lower content, as seen in the 
border.

On the Services > Project Management, and Services > Landscape Architecture,

the image is not contained. It runs out the bottom of the container in 
Firefox.

This seems to fix it:

#content {
overflow: hidden;
} 

What browser are you using? I don't see the 1 pixel offset in IE 7. Thank
you for the other code. I'll add it.

Alix

__
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] Can't Get Rid of Gap in Firefox

[taestrada]

-Original Message-
From: r...@catjuggling.com [mailto:r...@catjuggling.com] 
Sent: Friday, October 16, 2009 5:12 PM
To: taestrada; css-d@lists.css-discuss.org
Subject: Re: [css-d] Can't Get Rid of Gap in Firefox

You may be aware of these things already, but :

I am seeing a 1-pixel offset in the border on the Home page. The header 
graphic sits 1 pixel to the left of the lower content, as seen in the 
border.

On the Services > Project Management, and Services > Landscape Architecture,

the image is not contained. It runs out the bottom of the container in 
Firefox.

This seems to fix it:

#content {
overflow: hidden;
} 

You were right about the 1 pixel - I did just see it. Thank you!!!

__
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] Can't Get Rid of Gap in Firefox

[taestrada]

-Original Message-
From: David Laakso [mailto:da...@chelseacreekstudio.com] 
Sent: Friday, October 16, 2009 2:54 PM
To: taestrada
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] Can't Get Rid of Gap in Firefox

taestrada wrote:
>  
>
> In Firefox, there is a gap between the two divs. I would like the borders
to
> connect, as they do in IE 7.
>
>  
>  
>
> http://carlsonlandscapearch1.com.previewdns.com/index.html
>
>  
>
>
> Alix Estrada
>   





Not tested. Try:
#content{
padding-top: 0; <- :: delete ::
padding-top: 1px; <- :: add ::
}

Collapsing-margins:
<http://www.w3.org/TR/CSS21/box.html#collapsing-margins>

~d

Thanks David. I also received some advice from Michael Brandt to add
margin:0; to my H1 which did the trick. I will read up on collapsing margins
however!

Alix

__
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] Can't Get Rid of Gap in Firefox

[taestrada]

I'm having an issue in Firefox that looks fine in IE.  I have a header div
with a content div right underneath it. The border in the header div is part
of the image, whereas in the content div it is an actual border. 

 

In Firefox, there is a gap between the two divs. I would like the borders to
connect, as they do in IE 7.

 

Any help would be appreciated!

 

http://carlsonlandscapearch1.com.previewdns.com/index.html

 

Thank you,

 

Alix Estrada

__
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] Two Cross-Browser Issues

[taestrada]

-Original Message-
From: David Laakso [mailto:da...@chelseacreekstudio.com] 
Sent: Sunday, July 12, 2009 3:29 PM
To: taestrada
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] Two Cross-Browser Issues

taestrada wrote:
> 1)  In Firefox 3.0 my background images were showing up just fine. I
> upgraded to 3.5 and they disappeared. You can see them for a second when
you
> refresh the page, but then they are gone! (They do show up in IE 7)
>   


Unless I have misunderstood the question, there does not seem to be a 
background image problem in FF/3.5 on this end.


>
>
> 2)  In Firefox, the "Clearance" image is exactly where it belongs, but
> in IE 7 it is showing up in the main content area. It should be under the
> "New & Fabulous" image.
>
>  
>
> http://mrjculinarye894.corecommerce.com/index.html
>   


The image is not showing up where it should in Opera/10b.

Add this to your style sheet to correct Opera and IE/7.
#column1 img {clear: both;}

Calling the js from an external directory, ditching the awful inline 
styles, and validating could be a nice touch...



Thanks David. Your suggestion for the image worked. I have the inline styles
on some of those images because I am only using them one time, and I didn't
want to clutter up my stylesheet with a style I wasn't re-using - although I
guess it could be argued that I'm cluttering up my code!

I did move the javascript to an external file. I don't know why I wasn't
seeing the background images but I closed and reopened Firefox and now I
have them. 

Thanks so much for your help!

Alix





__
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] Two Cross-Browser Issues

[taestrada]

1)  In Firefox 3.0 my background images were showing up just fine. I
upgraded to 3.5 and they disappeared. You can see them for a second when you
refresh the page, but then they are gone! (They do show up in IE 7)



2)  In Firefox, the "Clearance" image is exactly where it belongs, but
in IE 7 it is showing up in the main content area. It should be under the
"New & Fabulous" image.

 

http://mrjculinarye894.corecommerce.com/index.html

 

I would appreciate any help with these two issues. 

 

Thank you so much,

 

Alix Estrada
Web Studio 180
  www.webstudio180.com
Web Design | Development | Usability 

 

__
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] Padding Browser Issue

[taestrada]

-Original Message-
From: Els [mailto:el...@tiscali.nl] 
Sent: Thursday, April 09, 2009 12:19 AM
To: taestrada; css-d@lists.css-discuss.org
Subject: Re: [css-d] Padding Browser Issue

taestrada wrote:

> In IE7, the photos and the 2009-2010 Outdoor Programs have the same
> padding and the tops line up (as intended). But in Firefox, the
> Outdoor Programs box is about 9 pixels higher. I can't figure out
> why. Any ideas?
>
> http://wildernessawareness.org/index1.html

The top margin of the h2 collapses with the top margin of the 
#rightCol, forcing the #sidebar1 to extend upwards to encompass the 
h2's margin.

Fix: set that h2 inside #sidebar1 to have a top-margin of 0, or add a 
border-top to #sidebar1.

-- 
Els

Thank you so much to you and Phillipe. I will try your fixes tonight.

Alix

__
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] Padding Browser Issue

[taestrada]

In IE7, the photos and the 2009-2010 Outdoor Programs have the same padding
and the tops line up (as intended). But in Firefox, the Outdoor Programs box
is about 9 pixels higher. I can't figure out why. Any ideas?

 

http://wildernessawareness.org/index1.html

 

Thank you

 

Alix Estrada
Web Studio 180
  www.webstudio180.com
Web Design | Development | Usability 

 

__
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] Centering Navigation Bar Div

[taestrada]

 

From: Rod Castello [mailto:flashju...@sbcglobal.net] 
Sent: Wednesday, February 11, 2009 6:32 PM
To: 'Els'; taestrada
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] Centering Navigation Bar Div

 




Rod Castello
11812 A Moorpark Street
Studio City, CA 91604
(818) 437-7880
http://rodcastello.com

--- On Wed, 2/11/09, taestrada  wrote:

From: taestrada 
Subject: Re: [css-d] Centering Navigation Bar Div
To: "'Els'" 
Cc: css-d@lists.css-discuss.org
Date: Wednesday, February 11, 2009, 8:45 PM




-Original Message-


From: Els [mailto:el...@tiscali.nl] 


Sent: Wednesday, February 11, 2009 12:37 PM


To: taestrada


Subject: Re: [css-d] Centering Navigation Bar Div


  


taestrada wrote:


  


Then, I've noticed your :hover effect, is making the text bold. The 


problem is, that that makes the whole row 'dance' when hovering, as 


bold letters are wider than normal weight letters. I suggest using a 


different hover effect, such as a colour difference or a background 


colour, or an
 underlining. Anything that doesn't change the size of 


the letters.


-- 


Els


  


I forgot to mention, I completely agree with you on the bold hover effects,


but my client is INSISTING on it. I've tried to talk her out of it!


  


Alix


  


Alix,


I tried this in Firefox to lessen the "dancing text" during the hover
effect. 


Haven't tried in any other browsers.  


Took the padding off of the li and placed it on the "a" and "a:hover".


Works pretty well.


  


 #topnav li  {


font-size: 100%;


display: inline;   


margin: 0px;


}


  #topnav li a {


display: inline;


color: #FFF;


text-decoration: none;


font-weight: normal;


line-height: 35px;


vertical-align: middle;


padding-right: 35px;


padding-left: 35px;


letter-spacing: 0.14em;


}


  #topnav li a:hover {


display: inline;


color: #FFF;


text-decoration: none;


font-weight: bold;


padding-right:
 33px;


padding-left: 33px;


letter-spacing: 0.125em;  


}


  


Rod
 

Thanks Rod. I'm still going to try and talk her into something else!

 

Alix

 



  


__


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] Centering Navigation Bar Div

[taestrada]

-Original Message-
From: Els [mailto:el...@tiscali.nl] 
Sent: Wednesday, February 11, 2009 12:37 PM
To: taestrada
Subject: Re: [css-d] Centering Navigation Bar Div

taestrada wrote:

This worked PERFECTLY in Firefox, but IE 7 is still off a little. Any
suggestions? Thank you so much for suggesting this. (I don't suppose 
you
know how to make it center vertically too???)


I just noticed I replied to you without replying to the group. Wasn't 
my intention, but oh well, too late now :-)

IE7 is probably just padding/margin issue.
Set #topnav ul to have margin:0 and padding:0, and also set margin:0 
for the li elements. Every browser uses different default margins and 
paddings on UL and LI.

Then, I've noticed your :hover effect, is making the text bold. The 
problem is, that that makes the whole row 'dance' when hovering, as 
bold letters are wider than normal weight letters. I suggest using a 
different hover effect, such as a colour difference or a background 
colour, or an underlining. Anything that doesn't change the size of 
the letters.

You set a width of 125px on the  elements. This has zero effect, 
since they are inline elements, you can just take it out.

Last but not least, vertical centering. This can't really be done the 
same way as horizontal centering, but there are of course tricks, 
especially in the case of your navigation. One such trick is to simply 
set the line-height to 1, and then have the same top and bottom 
padding on the  elements, and let the box around it be sized by the 
ul and its contents.
Another one is to set the line-height at exactly the height of the 
box, and make sure the text is set to 'vertical-align:middle;'. This 
gives slightly varying results in different browsers though, depending 
on how they place the letters in their line-height.

-- 
Els

I forgot to mention, I completely agree with you on the bold hover effects,
but my client is INSISTING on it. I've tried to talk her out of it!

Alix

__
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] Centering Navigation Bar Div

[taestrada]

-Original Message-
From: Els [mailto:el...@tiscali.nl] 
Sent: Wednesday, February 11, 2009 12:37 PM
To: taestrada
Subject: Re: [css-d] Centering Navigation Bar Div

taestrada wrote:

This worked PERFECTLY in Firefox, but IE 7 is still off a little. Any
suggestions? Thank you so much for suggesting this. (I don't suppose 
you
know how to make it center vertically too???)


I just noticed I replied to you without replying to the group. Wasn't 
my intention, but oh well, too late now :-)

IE7 is probably just padding/margin issue.
Set #topnav ul to have margin:0 and padding:0, and also set margin:0 
for the li elements. Every browser uses different default margins and 
paddings on UL and LI.

Then, I've noticed your :hover effect, is making the text bold. The 
problem is, that that makes the whole row 'dance' when hovering, as 
bold letters are wider than normal weight letters. I suggest using a 
different hover effect, such as a colour difference or a background 
colour, or an underlining. Anything that doesn't change the size of 
the letters.

You set a width of 125px on the  elements. This has zero effect, 
since they are inline elements, you can just take it out.

Last but not least, vertical centering. This can't really be done the 
same way as horizontal centering, but there are of course tricks, 
especially in the case of your navigation. One such trick is to simply 
set the line-height to 1, and then have the same top and bottom 
padding on the  elements, and let the box around it be sized by the 
ul and its contents.
Another one is to set the line-height at exactly the height of the 
box, and make sure the text is set to 'vertical-align:middle;'. This 
gives slightly varying results in different browsers though, depending 
on how they place the letters in their line-height.

-- 
Els

Thanks so much; I will try all this. (I copied the group so your answer
would show up in case anyone else needs help with this.)

Alix

__
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] Centering Navigation Bar Div

[taestrada]

-Original Message-
From: whaggerty [mailto:whagge...@vwh.ca] 
Sent: Wednesday, February 11, 2009 11:10 AM
To: taestrada; css-d@lists.css-discuss.org
Subject: Re: [css-d] Centering Navigation Bar Div

Hello;
--
From: "taestrada" 
Sent: Wednesday, February 11, 2009 10:08 AM
To: 
Subject: [css-d] Centering Navigation Bar Div

> My top navigation bar isn't quite centering. In IE 7, it's a little too 
> far
> to the right, but then in Firefox it's a little too far to the left. I 
> just
> want it perfectly centered in both!
>
> http://www.liftpilatesstudio.com/index1.html
>


I think you'll find that if you add  ... margin-left: auto; margin-right: 
auto; ... to the #topnav it will behave in both browsers

#topnav {
font: 0.9em Verdana, Arial, Helvetica, sans-serif;
height: 35px;
margin-left: auto; /* add this */
margin-right: auto; /* and this*/
text-align: center;
width: 934px;
overflow:hidden;
border-bottom: 1px solid #FFF;
color: #FFF;
}


William Haggerty
System Builder/Solution Provider
Microsoft, Intel, AMD.
Penticton, BC
250-493-0153
http://vwh.ca 


Hi William. I had tried that before, but it didn't change anything, so I
removed it. I tried it again after you suggested it - same result. Isnt'
that crazy??? 

Thank you for responding.

Alix

__
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] Centering Navigation Bar Div

[taestrada]

My top navigation bar isn't quite centering. In IE 7, it's a little too far
to the right, but then in Firefox it's a little too far to the left. I just
want it perfectly centered in both! 

http://www.liftpilatesstudio.com/index1.html

 

Thank you for any help on this.

 

Alix Estrada
Web Studio 180
  www.webstudio180.com
Web Design | Development | Usability 

 

__
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] Help with Drop Down Menu

[taestrada]

If you view my top navigation and drop down menu in IE 7, it looks "almost"
perfect. I just need help with centering the entire navigation bar.

 

If you view it in Firefox, the drop down menu is too low on the page. When I
adjust it, it throws off IE 7 and becomes too high on the page.

 

And if you view it in IE 6, it's a mess!

 

I would certainly appreciate any help with this.

 

http://www.drdarvish.com/dev/index.html

 

Thanks so much,

 

Alix Estrada
Web Studio 180
  www.webstudio180.com
Web Design | Development | Usability 

 

__
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] Centering Containers

[taestrada]

-Original Message-
From: David Laakso [mailto:[EMAIL PROTECTED] 
Sent: Sunday, August 24, 2008 9:38 PM
To: taestrada
Cc: css discuss
Subject: Re: [css-d] Centering Containers

David Laakso wrote:
> David Laakso wrote:
>   
>> taestrada wrote:
>>   
>> 
>>> David, that worked great for the top nav, but the secondary nav is still
not
>>> centered. Anymore ideas?
>>>
>>>
>>>
>>> Alix
>>>
>>>
>>>   
>>> 
>>>   
>>>> http://www.cascadepest.com/_NEW_SITE/rodents/index.html
>>>>
>>>>
>>>>
>>>> 
>>>>   
>>>> 
>>
>>   
>> 




Providing, of course, that you are able to change the markup, this is a 
relatively simple way to center the horizontal list items in a 
horizontally centered containing block.
<http://www.chelseacreekstudio.com/ca/cssd/pests.htm>
Markup changes on the source document.
CSS additions for the menu at the very bottom of this CSS file.
<http://www.chelseacreekstudio.com/ca/cssd/pests_files/stylesCa.css>
You'll want to validate your markup some day...

"Hickory, dickory, dock. The mouse ran up the clock."

...such a pest.


Thanks David. That worked beautifully. I validated the CSS, but I haven't
done the html yet. Will be doing that tomorrow before I get too much
further. Thanks so much for your time.

Alix


__
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] Centering Containers

[taestrada]

-Original Message-
From: David Laakso [mailto:[EMAIL PROTECTED] 
Sent: Sunday, August 24, 2008 6:19 PM
To: taestrada
Cc: css discuss
Subject: Re: [css-d] Centering Containers

David Laakso wrote:
> taestrada wrote:
>   
>> David, that worked great for the top nav, but the secondary nav is still
not
>> centered. Anymore ideas?
>>
>> Thank you so much for taking your time to help me.
>>
>> Alix
>>
>>
>>   
>> 
>>> http://www.cascadepest.com/_NEW_SITE/rodents/index.html
>>>
>>>
>>>
>>> 
>>>   
>
>
>
>   

Question for clarification:

Are you locked into the current markup for the secondary menu? In other 
words, do you have control over /both/ the CSS and the markup for the page?


-- 

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

http://chelseacreekstudio.com/



Yes, I can change any of it. Is that what you mean?

Alix

__
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] Centering Containers

[taestrada]

I'm having some centering problems with my navigation. IE 7 looks good for
the main green navigation (with Home, About Us, etc.), but Firefox is off.
(I haven't checked IE 6 yet as I don't have a computer at home with IE 6.)

 

The secondary navigation (Basics, Damage, etc.) is completely off. It should
be centered on both lines, and contained within the "secondaryNavRodents"
div. It is contained within the div in IE 7, but not in Firefox. 

 

I have the left and right margins set to auto, and a width applied to the
div - but I'm obviously missing something.

 

http://www.cascadepest.com/_NEW_SITE/rodents/index.html

 

Thank you for any help.

 

Alix Estrada
Web Studio 180
  www.webstudio180.com
Web Design | Development | Usability 

 

__
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] Help with Navigation Bar

[taestrada]

I'm having a few different problems with my navigation bar that I would
really appreciate any insight on.

 

1.   How do I center the entire navigation div? (I've tried different
things, but nothing has worked.)

2.   The width of each link looks good in IE 7 and Firefox, but in IE 6
each link is stretching the entire width of the screen so it looks like
these long bars piled on top of each other. How do I fix that?

3.   When I hover over each link, the lime green hover background is
taller than the dark green regular background, even though I have the same
height applied to each. (You can see it at the bottom)

 

Here is a link:  http://www.cascadepest.com/_NEW_SITE/index.html

The CSS link:  http://www.cascadepest.com/_NEW_SITE/stylesCascade.css

 

Thank you so much for any help.

 

 

Alix Estrada
Web Studio 180
  www.webstudio180.com
Web Design | Development | Usability 

 

__
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] IE6 Issue

[taestrada]

-Original Message-
From: Holly Bergevin [mailto:[EMAIL PROTECTED] 
Sent: Sunday, June 01, 2008 8:06 PM
To: css-d@lists.css-discuss.org; taestrada
Subject: Re: [css-d] IE6 Issue

From: "taestrada" <[EMAIL PROTECTED]>
> In the
>navigation, "Portfolio" is smaller and higher than the other links. But the
>CSS and code is exactly the same as for the other words.  Any ideas???

>> www.webstudio180.com

I guess you forgot about the following selector.

/***PORTFOLIO***/
  #portfolio  {
margin-top: 0px;
font: 0.9em Verdana, Arial, Helvetica, sans-serif; /* The font size
here is what is in effect on your page for this ID */
padding: 80px 0 0;
margin-bottom: 0px;
}

~holly 
 
   
Oh my gosh! I created a new style because I'm changing the portfolio page. I
didn't even think about that! Thanks so much!!!

Alix

__
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] IE6 Issue

[taestrada]

This solution worked perfectly! But now I have another problem. In the
navigation, "Portfolio" is smaller and higher than the other links. But the
CSS and code is exactly the same as for the other words.  Any ideas???

Thanks so much,

Alix

-Original Message-
From: Gunlaug Sørtun [mailto:[EMAIL PROTECTED] 
Sent: Sunday, June 01, 2008 1:51 PM
To: taestrada
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] IE6 Issue

taestrada wrote:

> There is a white block to the right on every page except the two that
> have very little content on them (contact and resources). I think the
> problem might be with the content div perhaps? If that is so, is
> there a bit of code I can add to fix this in IE 6 without messing up
> IE 7 and Firefox?

> www.webstudio180.com

The "margin-doubling on floats" bug in IE6 (and older).

To fix, add...

#content {display: inline;}

...which will make IE6 behave, and won't upset any browser since floats
can't be 'inline'.

regards
Georg
-- 
http://www.gunlaug.no
No virus found in this incoming message.
Checked by AVG. 
Version: 8.0.100 / Virus Database: 269.24.4/1476 - Release Date: 5/31/2008
12:25 PM

__
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] IE6 Issue

[taestrada]

My site looks fine in Firefox and IE 7, but something is happening in IE 6
that I can't figure out. Additionally, I don't have a computer with IE 6, so
I can't troubleshoot and test. (I had a friend with IE 6 test and tell me
about this issue.)

 

There is a white block to the right on every page except the two that have
very little content on them (contact and resources). I think the problem
might be with the content div perhaps? If that is so, is there a bit of code
I can add to fix this in IE 6 without messing up IE 7 and Firefox?

 

www.webstudio180.com

 

Thank you!

 

Alix Estrada

 

P.S. If you don't have IE 6, you won't see the problem.

 

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