Dropdown Text Break

[csosa]

Hi I got something funky going on in my dropdown menu
and its got my text breaking but im not sure what is. It seems to be
a width or padding of some sort.

http://thesolarconsultants.com/

[Mittineague]

It looks like what a malformed list might look like.

Did you run the mark-up through the validator?

[csosa]

I did but I am not sure where to find the error.

[Mittineague]

Ah, it isn’t a malformed list.

You’ve given a width: 100% but that is being overwritten somewhere to width: 200px

Because the text string is too long to fit into 200px it wraps to the next line.

You have text-align: left but list items take up a bit of space that’s reserved for the marker, even if you’re not using one.

[ronpat]

Try these three changes. Let us know what they break.

style.css (line 156)
.main-navigation .nav-menu a, .main-navigation .nav-menu a:visited {
    border-right: 1px solid #898989;
    color: #515151;
    font-size: 16px;
    font-weight: bold;
    padding: 0 10px;
    text-decoration: none;
    white-space: nowrap;  /* ADD Me */
}

style.css (line 205)
.main-navigation .nav-menu .sub-menu li {
    background: rgba(0, 0, 0, 0) url("images/menu-bg-trans.png") repeat scroll 0 0;
    border-bottom: 1px solid #898989;
/*    padding-right: 130px;  /* DELETE Me. */
    text-align: left;
    width: 100%;
}

style.css (line 218)
.main-navigation .nav-menu .menu-item-21 .sub-menu li, 
#dgo-footer .main-navigation .nav-menu .menu-item-21 .sub-menu li {
/*    width:200px;  /* Unnecessary; DELETE Me. */
}

I’m sorry, Carlos, I do not understand what part of the validator is hard to use. It tells you where to find the errors in plain English.

https://validator.w3.org/nu/?doc=http%3A%2F%2Fthesolarconsultants.com%2F

It would not have solved this particular problem for you, but you still need to clear the errors.

[csosa]

@ronpat

I’m sorry, Carlos, I do not understand what part of the validator is hard to use. It tells you where to find the errors in plain English.

naw not that but where would I find that specific issue in the validator. im not trying to be a douche about it…Maybe I should be asking how would I find a specific issue like that within the validator? in general.

@ronpat

but you still need to clear the errors.

yeah I know I do

BTW I didnt write this code.

[ronpat]

@csosa

BTW I didnt write this code.

Neither did I

As I mentioned earlier, the validator would not help you solve this issue. Firebug, or another similar diagnostic tool AND a knowledge of how the basic elements are supposed to behave, are the “tools of the trade” to solve issues like this.

For example, looking at the code for the lists and anchors, I saw padding-right:130px; in the sub-menu list items. 99.9% of the time that much padding is a useless consumption of space. So, using Firebug, I disabled it from the rule.

Also noted that the list items had a width of 100% and later a fixed width of 200px. That, too, made no sense. So, using Firebug, I disabled the fixed width:200px and let width:100% take charge of the width of the drop-downs.

However, the text still wrapped. So, using Firebug, I assigned white-space:nowrap to the anchors to prevent the text from wrapping. Therefore, the longest line of text in a column determines the width of the dropdown column.

It only took a few minutes using Firebug to troubleshoot this particular issue in code that I’ve never seen before. Therefore, I recommend that you pick a diagnostic tool and become familiar with it, AND learn the basic behaviors of CSS properties. AND of course start by checking the HTML with the validator to see if there are any serious errors that MUST be fixed before the CSS can be relied on to work properly.