Dysfunctional Dynamically Introduced Stylesheet

[iwato]

GENERAL:  One of my colleagues claims that no one likes CSS.  But surely, someone does, else it would not exist.  Unfortunately, I am not one of those who is very fond of it.  Probably because I do not understand it.  Dsonesuk once told me that id takes precedence over class.  The furtive fox told me to insert my stylesheet dynamically, so that I would be sure that the needed CSS would be present when my dynamically HTML was in need of it.  I have accommodated my CSS specification in both of these ways, but still it does not work.  Rather, when I visit the Inspector menu of my web-console, it looks like a graffiti-board that someone was too lazy too clean and on which he simply crossed out everything that he did not like.

SPECIFIC:  I am trying to get my referral URL to break when it gets to the end of the div block in which it is contained. In order to achieve this I entered the following piece of code in my stylesheet.  The url does not wrap.  Although the inspector of my web console  indicates the presence of my specification, it also shows that the rule has been cancelled.  Truly I do not get it.

#yp_container #current_referral_url {
	overflow-wrap: normal;
}	

SOURCE:  Please open to the mainpage of the Grammar Captive website and click on the phrase Your Data and You under the heading Visitor Profile in the navigation bar.  Look for the term Referral URL and note, if you are able, that the URL exceeds the size of the fieldset and div in which the value of the URL is contained .

QUESTION:  What more must I do to achieve my goal?

[Ingolme]

About CSS and rule precedence

CSS is currently the best system we have for easily creating flexible layouts. Some people might hate CSS but I'd like to see if they can come up with a better alternative.

CSS rules are chosen based on how specific the selectors are. In general the following rules apply:

1. A rule with an ID selector always has precedence over a rule without one.
2. A more specific rule has precedence over a less specific one, that is when the selector has more pieces in it.
3. If two rules are still the same after the previous tests, the last rule has precedence. This works across stylesheets and in the document as well.

To get more details you can read this article: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

The solution to your specific issue

The issue here does not seem to be with precedence, though, it's actually a combination of a lot of small things.

First, due to browsers very unusual way to render fieldsets, you need to set the min-width of your fieldsets to make them behave like normal boxes:

#yp_container fieldset {
  min-width: 0;
}

The second thing is that you have to restrict your box's width so that the text is not given the opportunity to not wrap. If it's allowed to stretch the box, it will do that instead of wrapping, so we'll set the max-width of the box to 100%.

#current_referral_url {
	max-width: 100%;
}

Finally, you made a mistake: The overflow-wrap property should be set to break-word. The normal behaviour is to not break.

#current_referral_url {
	max-width: 100%;
	overflow-wrap: break-word;
}

A word about using IDs as selectors

I would recommend not using IDs in your selectors if you have any other option. IDs are very powerful and as you know, with great power comes great responsibility. When you use an ID selector to set the style of an element, you make it terribly difficult for rules anywhere else to override your style. If you are going to use an ID selector, you should be sure to use it to only set properties that are very special to the element, which in most cases none of them are that special. It's a good idea to make all your selectors as weak as possible, you never know when you want to override them.

A word about usability in your website

I haven't had a good moment to tell you this, but your website has a severe usability problem and you have already been experiencing its negative effects. Every time you want somebody to get to a specific page on your site, you find yourself forced to give a long list of instructions on how to get there. This is a problem, there should be unique URLs to get people to land on any part of the site in just one click.

[iwato]

PRAISE and ADORATION:  I would like to thank you for a very wonderful post.  It was very readable and hence very helpful.  So much so that I have created a private webpage to capture its insight.  Also, my URLs no longer extent beyond the <fieldset: element in which they are contained.  Hooray!  Hooray!

iRONY:  Although I understand fully what is meant by the following, it is only because I have worked long enough with CSS to get the gist.  Taken at its face value this statement is completely contradictory:

Quote

... you have to restrict your box's width, ... so we'll set the max-width of the box to 100%.

This is CSS in a "nut"-shell.

Roddy

 

[Ingolme]

That is not a contradiction. The width is restricted to any value less than or equal to 100% of its parent's width. It is not allowed to be 200% or 400%. The range of valid values used to be from 0 to infinity, we have restricted it to the range [0, 100].

[iwato]

Oh well, infinity wins out.  For, it is only bounded by the imagination, and it seems to be without end.  At least, until I die, and someone else's carries on.

Roddy