[css-d] Navigation positioning awry?

[Laurie Landry]

For this page:

http://laurielandry.com/homepage.html

and using the subsequent CSS 
http://laurielandry.com/assets/templates/laurielandry/css/primary_test.css 
, I'm trying to figure out why the UL is shift over.

In some browsers, the links are centered  with the white box as  
desired, but in Firefox 2.0 (PC) the navigation links is shifted over  
in the correct positioning with the UL area.

I want the UL (outlined in red) to be centered with the white box, not  
shifted over so much.

I'm really stumped on why this is happening, and how to correct it.

Thanks in advance,

Laurie
__
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] Navigation positioning awry?

[David Hucklesby]

On 2/4/10 2:31 PM, Laurie Landry wrote:
> For this page:
>
> http://laurielandry.com/homepage.html
>
> and using the subsequent CSS 
> http://laurielandry.com/assets/templates/laurielandry/css/primary_test.css
> , I'm trying to figure out why the UL is shift over.
>
> In some browsers, the links are centered  with the white box as
> desired, but in Firefox 2.0 (PC) the navigation links is shifted over
> in the correct positioning with the UL area.
>
> I want the UL (outlined in red) to be centered with the white box, not
> shifted over so much.
>
> I'm really stumped on why this is happening, and how to correct it.
>

Hmm. Yes. The UL is positioned 50% of the container width to the right 
in all my (Mac) browsers, just as you tell it, but FF 2 is ignoring your 
instruction to position the LIs 50% of the UL width to the left. In 
fact, it ignores the 'position: relative;' on those LIs completely.

There is a solution to centering horizontal menus on listamatic[1], but 
it relies on using 'display: inline;' so that 'text-align: center;' 
works. But that does not allow you to put top and bottom borders and 
padding on the links. Adapting that design by putting 'display: 
inline-block;' on the A element solves that for most browsers. But FF 2 
does not 'do' 'inline-block'...

I tried using 'display: -moz-inline-box;' locally here, and that seems 
to work. Might be worth a try.

[1] http://css.maxdesign.com.au/listamatic/horizontal27.htm

BTW - the design is very fragile - even a small increase in text size 
creates weirdness... :(

Cordially,
David
--

__
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] Navigation positioning awry?

[David Laakso]

Laurie Landry wrote:
> For this page:
>
> http://laurielandry.com/homepage.html
>
> and using the subsequent CSS 
> http://laurielandry.com/assets/templates/laurielandry/css/primary_test.css 
> , I'm trying to figure out why the UL is shift over.
>
> Laurie
>   


Laurie, a less complex construct will yield better results for you 
cross-browser.
Cursory checked in IE 6/7/8, FF/2.0.0.2, FF/3.5.7, and the latest ver 
Mac Safari.
Note both changes to markup and css files.
It is just roughed in-- tweak to taste.

html

css


In general, throughout your layout, you may want to re-consider and 
abandon all that absolute positioning and setting of heights. These make 
for a brittle layout that is easily broken by young children and their 
grandparents :-) .

Best,
~d

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

__
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] Navigation positioning awry?

[David Hucklesby]

On 2/4/10 2:31 PM, Laurie Landry wrote:
> For this page:
>
> http://laurielandry.com/homepage.html
>
> and using the subsequent CSS 
> http://laurielandry.com/assets/templates/laurielandry/css/primary_test.css
> , I'm trying to figure out why the UL is shift over.
>
> In some browsers, the links are centered  with the white box as
> desired, but in Firefox 2.0 (PC) the navigation links is shifted over
> in the correct positioning with the UL area.
>
> I want the UL (outlined in red) to be centered with the white box, not
> shifted over so much.
>
> I'm really stumped on why this is happening, and how to correct it.
>

Missing from my earlier reply--

The UL is positioned to the right because of this rule:

/* position the UL from the left by half the container width */
div.navcontainer ul {
...
left: 50%;
position: relative;
...
}

You then attempt to center the links by this rule:

/* position the LIs away from the right by half the UL width */
div.navcontainer ul li {
float: left;
...
position: relative;
right: 50%;
}

But Firefox 2 seems to ignore the 'position: relative;' - apparently 
because of the 'float: left;' declaration.

If you move the float declaration and margins from the LIs to the rule 
for 'div.navcontainer ul li a' I think you'll find browsers agree. (Not 
well tested.)

Hopefully my previous suggestion works for you.

Cordially,
David
--








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