Hi all having a few problems with my CSS
I am trying to highlight a link on the navigation based on the page the user is on.
I have this style which works as I would like it to do, but when I pass a query-string into pcisHPprofile.aspx the CSS is not working. Does anyone know how i can get this style to work with query-strings?
body form[action="pcisHPprofile.aspx"] #btnuser
{
padding: 18px 4px 5px 4px;
background-image: url(../images/tabbluleft.gif) ;
background-repeat:no-repeat;
color: #fff;
}
<div id="nav" class="nav" >
<ul>
<li id="tab1">
<a id="btnsession" href="pcissessionlist.aspx" > <span >Session</span></a>
</li>
<li id="tab2">
<a id="btnsystem" href="pcissystemsettings.aspx" > <span >System Settings</span></a>
</li>
<li id="tab3">
</li>
<li id="tab4">
<a id="btnuser" href="pcisuserlist.aspx" > <span >User Logins</span></a>
</li>
<li id="tab5">
<a id="btninterpreter" href="pcisinterpreterlist.aspx" > <span >Interpreter Profile</span></a>
</li>
<li id="tab6"><asp:LinkButton ID="btnreports" runat="server" Visible="false" cssid="cssreports" PostBackUrl="#"><span>Reports</span></asp:LinkButton></li>
</ul>
</div>
I assume that the #btnuser ARE some buttonS inside the some forms, where one of the forms have action="pcisHPprofile.aspx"?
If that is correct, then your error is the fact that you have many buttons with the same id attirbute id="btnuser". The ID attibute MUST be uniqe on the page. change the id="btnuser" to class="btnuser" on the buttons and your selector from:
body form[action="pcisHPprofile.aspx"] #btnuser {
}
to
body form[action="pcisHPprofile.aspx"] .btnuser {
}
Then it should work.
In the first form it might work only if the FIRST button with id="btnuser" is actually inside the form with action="pcisHPprofile.aspx". If it is inside any other form, then it will not work.
Best regards,
SWilk
UPDATE:
After OP updated the question, I think that this form of selector should work:
body form[action^="pcisHPprofile.aspx"] #btnuser {
...
}
It would a element with id=btnuser inside a form, which action begins with "pcisHPprofile.aspx". It would not matter if the acutal action attibute contain only "pcisHPprofile.aspx" or "pcisHPprofile.aspx?any-parameters&and=some-values".
Best regards,
SWilk
Using action attribute for styling is a bad practice. Just give your form a name, class or ID like <form class="pcisHPprofile" action="pcisHPprofile.aspx"> and then apply CSS style to that name/class/id.
form.pcisHPprofile {
padding: ...
Found a working solution. a little hacky which I am not 100% keen on but it works.
I changed the query string to look like this
profile.aspx?-&username=
from this
profile.aspx?username=
and I changed the style to
Form[action|="pcisinterpreterprofile.aspx?"] #tab5
{
background-image: url(../images/tabbluright.gif);
background-repeat:no-repeat;
}
The difference is that I have changed the = to an |=.
[att|=val]
Represents an element with the att attribute, its value either being
exactly "val" or beginning with "val"
immediately followed by "-" (U+002D).
This is primarily intended to allow
language subcode matches (e.g., the
hreflang attribute on the a element in
HTML) as described in RFC 3066
([RFC3066]) or its successor. For lang
(or xml:lang) language subcode
matching, please see the :lang
pseudo-class.
by doing this the css selector works on pages with query strings. you just need to make sure the query string has at least ?- at the start. As I said at the last its not great but works.
Related
I need to set a honeypot section of a side form to display:none but for some reason my CSS adjustments would not work. The elements involved are these (as shown when inspected via Firebug):
<li id="field_9_9" class="gfield gform_validation_container field_sublabel_below field_description_below">
<label class="gfield_label" for="input_9_9">Phone</label>
<div class="ginput_container">
<input id="input_9_9" type="text" value="" name="input_9">
</div>
<div class="gfield_description">This field is for validation purposes and should be left unchanged.</div>
</li>
On the stylesheet, I inserted:
.gfield gform_validation_container field_sublabel_below field_description_below #field_9_9 {
display:none;
}
I have a feeling I'm targeting the wrong element. Which one should it be?
You need to do this:
#field_9_9.gfield.gform_validation_container.field_sublabel_below.field_description_below {
display:none;
}
You forgot to add the "." before each class name and since all the classes (and ID) are on the same element, you need to join all the classes and ID together.
But a more elegant solution would be to simply target the ID:
#field_9_9 {
display:none;
}
I'm having a problem and i'm really puzzled by it.
My markup is simple enough:
#foreach (var item in Model.Items)
{
<a class="mapIconUnit" id="pinDelete-#item.PinGuid.ToString()">
#Url.Action("DeletePin") <!-- testing purposes -->
#(Ajax.ActionLink("x", "DeletePin", MapAdministrationController.Routes.DeletePin(item.PinGuid), new AjaxOptions()
{
OnSuccess = "onMapPinDeleted",
Confirm = Resources.Resource.msg_GenericDeleteConfirmationQuestion
}
))
</a>
}
Now what i would expect to render from this is:
<a class="mapIconUnit" id="...">
... rendered url
<a href="..." etc>x</a>
</a>
But what i am getting is:
<a class="mapIconUnit" id="...">
... rendered url
</a>
<a href="..." etc>x</a>
What am i doing wrong here? The markup is too simple for it to be wrong to cause such a thing?
It's illegal to nest an anchor element inside another anchor element, more info can be found in the W3C specs: http://www.w3.org/TR/html401/struct/links.html#h-12.2.2
Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.
So either razor or the webbrowser renders the elements correctly (i.e. place them next to each other).
I am trying to use the following code to extract the inner html of menu items but it only picks up the text that is in the same line for some reason. Here is the code:
WebElement ReportStart=driver.findElement(By.xpath("//a[contains(text(),'Reports')]"));
List<WebElement> reports= ReportStart.findElements(By.xpath("//*[starts-with(#id, 'menu_')]"));
System.out.println(reports.size());
for (int i = 0; i < reports.size(); i++) {
System.out.println(reports.get(i).getAttribute("id"));
System.out.println(reports.get(i).getText());
}
It picks up all the id's but only the inner text of some of them and not nested one. So it picks up text Reports and id menu_1035 and menu_1036 but not the text General as it is not on the same line. Not sure why this is that findelements does not pick the whole web element
<li>
<a id="menu_1035" class="dynmenu" href="#">Reports</a>
<ul>
<li>
<a id="menu_1036" href="#">
General
<span class="dwn"/>
</a>
<ul>
</li>
Its not picking the text General as it is inner-html of li tag not a tag.
Your xpath only fetches element which has id - //*[starts-with(#id, 'menu_')]
If you want to get General text also, then you need to update your xpath' that points only tillli` element.
Hope it helps.
I'm using Visual Studio 2010 and ASP.NET 4.0 to render a Menu control as an HTML list so I can style it using CSS. Here is the code I am using below
<asp:Menu ID="navlist" runat="server" Orientation="Horizontal"
SkipLinkText="" ClientIDMode="Static" DataSourceID="MenuSource"
MaximumDynamicDisplayLevels="0" IncludeStyleBlock="False"
StaticDisplayLevels="2">
</asp:Menu>
This produces the following HTML
<!-- URL shortened -->
<script src="/WebResource.axd?...t=634066906994188146"type="text/javascript"></script>
<div id="navlist">
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
At first glance this looks like exactly what I wanted. However, if I open up WebResource.axd there is a whole bunch of javascript code related to the menu. Part of this code is applying it's own inline styles to the list. Using FireBug I can view the HTML markup after the javascript has executed and it looks something like this:
<div id="navlist" style="float: left;">
<ul class="level1 static" tabindex="0" style="position: relative; width: auto; float: left;" role="menubar">
<li role="menuitem" class="static" style="position: relative; float: left;">
Link 1
</li><li role="menuitem" class="static" style="position: relative; float: left;">
Link 2</li>
</ul>
</div>
These inline styles ultimately affect the layout of my page. I have no need for any of the scripts in WebResource.axd. How can I prevent this script from being rendered in the final markup of the page?
You can tell the menu to NOT style itself if you want to just use the IncludeStyleBlock Attribute
By default its turned on "true"
<asp:Menu IncludeStyleBlock="False" />
On your css use the !important
I've created a custom menu (derived from System.Web.UI.WebControls.Menu) and replaced the OnPreRender:
public class MyCustomMenu : System.Web.UI.WebControls.Menu
{
protected override void OnPreRender(EventArgs e)
{
// Don't call base OnPreRender
//base.OnPreRender(e);
}
}
That did the trick.
You can't do much to change the out-of-the-box functionality of the Menu control. However, you could either create your own control or use the CSS Control Adapter Toolkit.
I tried to override the asp:menu with a custom class, but still haven't learned how to simply remove all attributes from the ul, li, and a tags so that I could apply my own css code to a clean list.
Imports Microsoft.VisualBasic
Namespace MCO
Public Class MyCustomMenu
Inherits Menu
Protected Overrides Sub OnPreRender(e As EventArgs)
' don't use this:
' MyBase.OnPreRender(e)
' but leaving this blank produces NO rendered menu
End Sub
End Class
End Namespace
I have also tried the jQuery method:
$("#navlist li,#navlist li a,#navlist ul,#navlist div").removeAttr('style');
But because the .net webresource is the last thing to run, I found that jQuery line didn't work. It should, but doesn't. :(
I managed this by removing inline styles and changing some class names via jQuery. Of course you can re-style every element but it just produces a lot of unnecessary css code.
Use this, if you want to remove those inline styles from li, a, ul and divs:
$("#navlist li,#navlist li a,#navlist ul,#navlist div").removeAttr('style');
Second you can change those class names e.g.:
$("#from-this-element").removeClass(.remove-me).addClass('.new-class');
And I think it's the best way to use this script after the page has loaded.
using xpath or css : How to get something which is selected on page using following html code.
in following code, Element1 is selected on page and I wanted to find name of element that is selected on page.
<div id="idc" class="tre">
<ul id="idCatT_srt_ul" class="abc">
<li class="treN treB treSelected" title="Element1 title">
<span class="spclass">Element1</span>
</li>
</ul>
</div>
Guessing that you're looking for the <li> that contains selected you can do that with Xpath or CSS selectors like this:
XPath: (if I remember right...)
//*[contains(#class,"selected")]
CSS Selectors:
.treSelected