07-20-2023, 01:42 PM
First, a couple of limitations:
1. I have a limited CSS vocabulary, so I would appreciate some schooling on that, and
2. The only thing I have the power to change is a global style sheet.
I have a list of links called a breadcrumb that looks like this:
![before]()
Except when you increase the text size or number of sub elements, then it looks like this:
![after]()
When I press F12 and view the HTML, it looks like this:
<div id="Breadcrumb">
<span id="dnn_dnnTEXT_lblText" class="Intro">You are here:</span>
<span id="dnn_dnnBreadcrumb_lblBreadCrumb">
<a class="SkinObject" href="https://www.c-ied.org/Projects.aspx">Projects</a>
<span class="Sep"></span>
<a class="SkinObject" href="https://www.c-ied.org/Projects/Capabilities.aspx">Capabilities</a>
<span class="Sep"></span>
<a class="SkinObject" href="https://www.c-ied.org/Projects/Capabilities/MaritimeInitiative.aspx">Maritime Initiative</a>
<span class="Sep"></span>
<a class="SkinObject" href="https://www.c-ied.org/Projects/Capabilities/MaritimeInitiative/MSC2012.aspx">MSC 2012</a>
<span class="Sep"></span>
<a class="SkinObject" href="https://www.c-ied.org/Projects/Capabilities/MaritimeInitiative/MSC2012/6June.aspx">6 June</a>
</span>
</div>
This is in a DotNetNuke CMS, so I can go in the Site Settings and mess with the Style Sheet Editor. Nothing I tried in there has had any effect, except `#dnn_dnnBreadcrumb_lblBreadCrumb {width: 100%}` which made it look even worse.
I've also taken the HTML above and placed it above some text blurbs I was adding in another module. There, it looks fine. Back to F12 again and the only lines in the TraceStyles that look different for the dnn_dnnBreadcrumb_lblBreadCrumb span were some crossed-out styles:
![F12 After]()
whilst before it was:
![F12 Before]()
So, this all has to be viewed in IE. Is there a CSS property I can use on some selector or another that will make this work?
1. I have a limited CSS vocabulary, so I would appreciate some schooling on that, and
2. The only thing I have the power to change is a global style sheet.
I have a list of links called a breadcrumb that looks like this:
![before]()
Except when you increase the text size or number of sub elements, then it looks like this:
![after]()
When I press F12 and view the HTML, it looks like this:
<div id="Breadcrumb">
<span id="dnn_dnnTEXT_lblText" class="Intro">You are here:</span>
<span id="dnn_dnnBreadcrumb_lblBreadCrumb">
<a class="SkinObject" href="https://www.c-ied.org/Projects.aspx">Projects</a>
<span class="Sep"></span>
<a class="SkinObject" href="https://www.c-ied.org/Projects/Capabilities.aspx">Capabilities</a>
<span class="Sep"></span>
<a class="SkinObject" href="https://www.c-ied.org/Projects/Capabilities/MaritimeInitiative.aspx">Maritime Initiative</a>
<span class="Sep"></span>
<a class="SkinObject" href="https://www.c-ied.org/Projects/Capabilities/MaritimeInitiative/MSC2012.aspx">MSC 2012</a>
<span class="Sep"></span>
<a class="SkinObject" href="https://www.c-ied.org/Projects/Capabilities/MaritimeInitiative/MSC2012/6June.aspx">6 June</a>
</span>
</div>
This is in a DotNetNuke CMS, so I can go in the Site Settings and mess with the Style Sheet Editor. Nothing I tried in there has had any effect, except `#dnn_dnnBreadcrumb_lblBreadCrumb {width: 100%}` which made it look even worse.
I've also taken the HTML above and placed it above some text blurbs I was adding in another module. There, it looks fine. Back to F12 again and the only lines in the TraceStyles that look different for the dnn_dnnBreadcrumb_lblBreadCrumb span were some crossed-out styles:
![F12 After]()
whilst before it was:
![F12 Before]()
So, this all has to be viewed in IE. Is there a CSS property I can use on some selector or another that will make this work?