Click to See Complete Forum and Search --> : li items not left aligning correctly


nnhubbard
01-24-2008, 02:18 PM
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?

WebJoel
01-24-2008, 02:22 PM
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..

nnhubbard
01-24-2008, 02:29 PM
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..

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.

WebJoel
01-24-2008, 05:03 PM
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 "font: bold 12px Arial, Helvetica, Verdana, Sans-serif; color:#c4582b; border-bottom:1px dotted #525245;} on BODY {} 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?
* {margin:0; padding:0}
: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 {margin:0; padding:0; }
a img,:link img,:visited img {border:none; margin:0; padding:0;}
address {font-style:normal; } " * {margin:0; padding:0} " means "everything" (ANY element that can exist on a HTML document) so the BOLD 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. :)

nnhubbard
01-24-2008, 05:20 PM
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;}

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.

WebJoel
01-24-2008, 05:35 PM
-Thousands of pages? CMS? -Well I guess that answers that! :D

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

WebJoel
01-24-2008, 06:34 PM
(back from my supper)..

#subnav li a {display:block;}Seems to solve that. :)

nnhubbard
01-24-2008, 06:49 PM
(back from my supper)..

Seems to solve that. :)

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?

WebJoel
01-24-2008, 08:10 PM
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?
You're killin' me here with the easys! :D
#subnav li {padding: 4px 3px 4px 0px; list-style-type:none; line-height:1.0em;} 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).

nnhubbard
01-25-2008, 10:48 AM
You're killin' me here with the easys! :D
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).
Thanks, I appreciate it!

Sometimes I get confused by your sarcasm...

OctoberWind
01-25-2008, 10:58 AM
You're killin' me here with the easys! :D

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

WebJoel
01-25-2008, 04:05 PM
Yes, -THANK YOU! :D

As a fairly decent human being and otherwise mild-mannered person, -and let's remind everyone that as a Moderator I/we are 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.

nnhubbard
01-25-2008, 04:08 PM
Yes, -THANK YOU! :D

As a fairly decent human being and otherwise mild-mannered person, -and let's remind everyone that as a Moderator I/we are 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.

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