li items not left aligning correctly

@nnhubbardJan 24.2008

I have a problem, where in my subnav, which is using li items. When a page name is too long it wraps to the next line, which is fine, but it does not seem to line up correctly with the rest of the line above it that it is wrapping from.

Why would this be happening?

~~[upl-file uuid=97e05779-531a-42e5-b7c8-f111573fd253 size=16kB]~~Picture 1.png[/upl-file]

to post a comment

CSS

12 Comments(s) _↴

@WebJoelJan 24.2008 — #I've seen this before. You probably need to padding-left of the "<li>" and maybe ensure that there are no default, and not shown, bullets. This is usually done by adding a "list-style-type:none;" to the governance of the "<li>"s

I'd need to view your code to examine this further..

@nnhubbardauthorJan 24.2008 — #I've seen this before. You probably need to padding-left of the "<li>" and maybe ensure that there are no default, and not shown, bullets. This is usually done by adding a "list-style-type:none;" to the governance of the "<li>"s

I'd need to view your code to examine this further..[/QUOTE]

I tried adding list-style-type:none; and it did not help. Here is all I have for my li tags:

#subnav li {padding: 4px 3px 4px 0px; list-style-type:none;}

My full css file is here:

http://websrv.puc.edu/__data/assets/text_file/0012/246/global.css

Stumped as to why this would be problematic.

@WebJoelJan 24.2008 — #Apart from the CSS being massive, seeing it and not the HTML it affects, doesn't really help me. :o -Need HTML too.

Also, -just curious, -what does this do??

a#a6095, a#a7600, a#a7610, a#a7615, a#a7619, a#a7629, a#a7643, a#a7663, a#a6053, a#a8043, a#a799, a#a803, a#a718, a#a710, a#a746, a#a12480, a#a909, a#a913, a#a917, a#a921, a#a925, a#a929, a#a933, a#a3276, a#a937, a#a941, a#a945, a#a953, a#a957, a#a961, a#a965, a#a973, a#a969, a#a977, a#a981, a#a750, a#a7449, a#a7443, a#a8981, a#a706, a#a6151, a#a726, a#a730, a#a6057
 {font: bold 12px Arial, Helvetica, Verdana, Sans-serif; color:#c4582b; border-bottom:1px dotted #525245;}

I am thinking 'superfluous code-bloat' but maybe these are all needed. A SINGLE "[B]font: bold 12px Arial, Helvetica, Verdana, Sans-serif; color:#c4582b; border-bottom:1px dotted #525245;[/B]} on [B]BODY {}[/B] might suffice sufficiently... This is overly-complicated and needless re-state I suspect. :o

Do you misunderstand the purpose and function of the universal selector?
[COLOR=Red][B]* {margin:0; padding:0}[/B][/COLOR]

:link,:visited {text-decoration:none; }

ul,ol { list-style:none }

h1,h2,h3,h4,h5,h6,pre,code {font-size:1em;}

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,blockquote,fieldset {[B]margin:0; padding:0;[/B] }

a img,:link img,:visited img {border:none; [B]margin:0; padding:0;[/B]}

address {font-style:normal; }[/quote] " [B][COLOR=Red][B]* {margin:0; padding:0}[/B][/COLOR][/B] " means "everything" (ANY element that can exist on a HTML document) so the [B]BOLD[/B] re-stating is un-needed. This is part of the code-bloat that is making this CSS so weightly.

A good CSS file should not be any larger than maybe 10% of the size of the HTML, -and this file is probably as big or bigger than the HTML(??). -Won't know until you can post your HTML or URL to it. ?

The problem with the "<ul>" is minor, -would take minutes to repair if the HTML code were posted. ?

@nnhubbardauthorJan 24.2008 — #Also, -just curious, -what does this do??

a#a6095, a#a7600, a#a7610, a#a7615, a#a7619, a#a7629, a#a7643, a#a7663, a#a6053, a#a8043, a#a799, a#a803, a#a718, a#a710, a#a746, a#a12480, a#a909, a#a913, a#a917, a#a921, a#a925, a#a929, a#a933, a#a3276, a#a937, a#a941, a#a945, a#a953, a#a957, a#a961, a#a965, a#a973, a#a969, a#a977, a#a981, a#a750, a#a7449, a#a7443, a#a8981, a#a706, a#a6151, a#a726, a#a730, a#a6057
 {font: bold 12px Arial, Helvetica, Verdana, Sans-serif; color:#c4582b; border-bottom:1px dotted #525245;}

[/QUOTE]

These are extremely necessary. The are styles for specific top level navigation items. You will see in my html example, that Accreditation is targeted with these styles. We use a CMS, and this is the logical was to target these.

I fixed the padding and margin bloat. Thanks for the tip, I just had not realized that it was there.

Also, the css file is large as this is a huge site with thousands of pages. Do you have any tips on how to slim it down? Split it up?

Here is the html, I have to post it as our site is still offline.

[upl-file uuid=4f69a3bb-429e-473d-8116-2dd77ca5a7cd size=4kB]index.html.zip[/upl-file]

@WebJoelJan 24.2008 — #-[I]Thousands[/I] of pages? [I]CMS[/I]? -Well I guess that answers that! ?

I'll look at your HTML and see what comes up..

@WebJoelJan 24.2008 — #(back from my supper)..

#subnav li a {display:block;}[/QUOTE]Seems to solve that. ?

@nnhubbardauthorJan 24.2008 — #(back from my supper)..

Seems to solve that. ?[/QUOTE]

Hooray! now it seems that my heights of those list items got all out of whack. I don't want to give me a or li tags specific heights to correct this, as some wrap to 2 lines. What should I do to fix this?

@WebJoelJan 25.2008 — #Hooray! now it seems that my heights of those list items got all out of whack. I don't want to give me a or li tags specific heights to correct this, as some wrap to 2 lines. What should I do to fix this?[/quote]
You're killin' me here with the easys! ?
#subnav li {padding: 4px 3px 4px 0px; list-style-type:none; [B]line-height:1.0em;[/B]}[/QUOTE] and maybe reconsider the padding values for 'top' and 'bottom'. But "line-height:1.0em;" (and you can go a bit less, like "0.95em" and not make the 'wrapped line' over-write the top line).

@nnhubbardauthorJan 25.2008 — #You're killin' me here with the easys! ?

and maybe reconsider the padding values for 'top' and 'bottom'. But "line-height:1.0em;" (and you can go a bit less, like "0.95em" and not make the 'wrapped line' over-write the top line).[/QUOTE]
Thanks, I appreciate it!

Sometimes I get confused by your sarcasm...

@OctoberWindJan 25.2008 — #You're killin' me here with the easys! ?[/QUOTE]

Sometimes, its the 'softballs' that make life much easier. After a day of dead-ends, "recursive looping", and 'rip-your-hair-out' problems, being able to just pop off a few quick and simple answers is enough to let you sit back and smile. :p

@WebJoelJan 25.2008 — #Yes, -THANK YOU! ?

As a fairly decent human being and otherwise mild-mannered person, -and let's remind everyone that as a Moderator I/we [I]are[/I] representing JupiterMedia here, -we do have to be respectful of and patient with, all postees.

A lil' bit o' fun doesn't hurt either. :rolleyes:

If I wasn't, I'm sure Admins would strip me of my decoder ring and WD membership.. :eek:

I hope the solutions I offered are working for you.

@nnhubbardauthorJan 25.2008 — #Yes, -THANK YOU! ?

As a fairly decent human being and otherwise mild-mannered person, -and let's remind everyone that as a Moderator I/we [I]are[/I] representing JupiterMedia here, -we do have to be respectful of and patient with, all postees.

A lil' bit o' fun doesn't hurt either. :rolleyes:

If I wasn't, I'm sure Admins would strip me of my decoder ring and WD membership.. :eek:

I hope the solutions I offered are working for you.[/QUOTE]

Yes they did, thanks again, I really appreciate the help!

Also in #CSS _↴

css how to format this picture without changing the HTML code HR properties, and IE Unselecting one Radio button

Success!

Help @nnhubbard spread the word by sharing this article on Twitter...

Tweet This

li items not left aligning correctly

12 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

li items not left aligning correctly

12 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #CSS _↴