The process of enriching an ASP.NET hyperlink by making it both bold and under

I'm currently working on a webpage in asp.net. I have two hyperlinks and I want to make them active by applying a style sheet that makes them bolder and underlined, but for some reason it's not working.

Here is the HTML:

<li style="margin-left: 10px">
      <asp:Literal ID="ltrlRegions" runat="server" Text="<%$ Resources: HRGELoggedOutMaster, Language %>"></asp:Literal>:
    </li>
    <li class="active1"> <asp:HyperLink ID="Lang1HyperLink" runat="server" /></li>
    <li><asp:HyperLink ID="Lang2HyperLink" runat="server" /></li>

and here's the style sheet:

<style>
        .active1{
            font-weight: bold;
        }

    </style>

and this is how I'm attempting to do it using code behind:

if (Page.CurrentLanguage == 1)
            {
                Lang2HyperLink.CssClass = "active1";
                Lang2HyperLink.Font.Bold = true;
                Lang2HyperLink.Font.Underline = true;              
            }
            else
            {
                Lang1HyperLink.CssClass = "active1";
                Lang1HyperLink.Font.Bold = true;
                Lang1HyperLink.Font.Underline = true;               
            }

With this code, the text becomes underlined but not bold.

Here is the resulting HTML output:

<li class="active1"> <a id="ctl00_ctl00_languageSwitcher_Lang1HyperLink" href="/AllVacancies.aspx?lang=2">Рус</a></li>

<li class="active1"><a id="ctl00_ctl00_languageSwitcher_Lang2HyperLink" class="active1" href="/AllVacancies.aspx?lang=1" style="font-weight:bold;text-decoration:underline;">Eng</a></li>

Can someone please suggest how to resolve this issue?

Answer №1

Avoid manually setting style properties in the codebehind if you are already using CssClass. Simply update your CSS:

.active1
{
    font-weight: bold;
    text-decoration: underline;
}

Then, you can just apply the CssClass in the codebehind like this:

if (Page.CurrentLanguage == 1)
{
    Lang2HyperLink.CssClass = "active1";             
}
else
{
    Lang1HyperLink.CssClass = "active1";          
}

Also, check for the presence of the "Active1" class on your <li> element:

<li class="active1">

This could be a mistake or may lead to confusion. It's recommended to remove it.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Locating elements with Selenium and C# in PageFactory to determine their presence on a webpage

Looking for help with migrating my selenium scripts to PageFactory and facing an issue with determining if an element exists on the page. My current approach is as follows: public bool IsElementExist(string element) { try ...

Creating an HTML layout that consists of three image elements placed over a single background image with each image

In my HTML code, I am utilizing multiple div elements. Each div is designated to hold an image with dimensions of 1600*750. Within each div, there is a fixed image that repeats across all the divs by using a specified class. Here are the details for each f ...

Enhance your webpage design with stylish CSS formatting using Bulma cards

My HTML output is as follows: https://i.stack.imgur.com/aBdEF.jpg It seems that the footer is not matching up with the cards... The CSS component I am using looks like this: .card-equal-height { display: flex; flex-direction: column; height: 100%; ...

Converting XML to HTML with the help of XSLT transformation customization

I need assistance in adjusting the XSLT 1.0 transform within the provided xsl file to create an HTML version of the table coded in the attached XML file. The generated HTML output file should display the table from the XML file with alternating row backgro ...

Basic title in material-ui navigation bar

I was hoping to display a simple label on the right side of the AppBar. Currently, I am using the iconElementRight prop and inserting a disabled flat button: <AppBar iconElementRight={<FlatButton label="My Label" disabled={true}/>} /> Thi ...

Tips for adjusting the font size of a Chip using Material-UI

I am using a widget called Chip const styles = { root:{ }, chip:{ margin: "2px", padding: "2px" } } const SmartTagChip = (props) =>{ const classes = useStyles(); return( <Chip style={{color:"white&q ...

Using md-chips and md-select together in multi select mode

I'm having trouble generating md-chips when selecting multiple values from an md-select. Does Md-chips only work with autocomplete analyzers and input fields? <md-chips ng-model="launchAPIQueryParams.type"> <md-select name="launchCalTy ...

The incorrect display of right-to-left text is indicated by a number followed by a dash and

Help needed with code <p> Code Help 01-01-1034-100100 </p> The output is currently displaying the number right to left (با کدنوسازی 01-01-1034-100100). I want it to display as 01-0 ...

Retrieving specific data from an SQL database using PHP

My goal is to create a select form with fields populated from an SQL database containing a table of stores. I used a method to retrieve distinct store names and populate the select tool with them. echo '<select name="StoreName" />'."\ ...

Background image of HTML Iframe element does not display - Inline style block

https://i.stack.imgur.com/JW26M.png After setting the iframe's innerHTML using this line of code: iframedoc.body.innerHTML = tinyMCE.activeEditor.getContent(); The styles for the elements within the iframe are contained in an inline style block. Ho ...

Has the querystring hack become outdated?

For a long time, I have been adding a query string to my CSS link whenever I made changes that needed to be reflected on client machines: <link href="/Resources/styles/styles.css?v=1" rel="stylesheet" /> Lately, I've noticed that Chrome seems ...

The submit button remains unresponsive, yet upon removing its JavaScript code, it functions smoothly

This is the content of my index.html file. It contains JavaScript code. However, there seems to be a problem with the JavaScript validation as the Submit button does not perform any action when clicked. Surprisingly, when I remove the JavaScript code, the ...

Storing subclasses in a unified table using EF Core and enabling dynamic loading capabilities at runtime

In my project, I have created custom classes such as BarcodeDevice and LightDevice, which are all based on a common base class named Device. Here are the specific requirements that need to be addressed: All these custom classes should be stored in a singl ...

Unable to return to the initial page in Selenium using C#

I recently posted a query about my difficulty in returning to the original page after closing an Iframe modal. I attempted to resolve this issue with the following code: driver.SwitchTo().DefaultContent(); string currentWindow = driver.CurrentWindowHandl ...

Creating Transparent Rounded Backgrounds in Google Chrome Packaged Apps: Achieving the same look as Google Hangout app

Looking at the screenshot below, it is evident that the Hangout app has a fully transparent design with background shadow effect applied to it. I have tried various methods in vain, such as applying CSS styling to the "html" and "body" tags of the page, a ...

Using Angular JS to dynamically load an HTML template from a directive upon clicking a button

When a link is clicked, I am attempting to load an HTML template. A directive has been created with the templateUrl attribute to load the HTML file. Upon clicking the link, a function is called to append a custom directive "myCustomer" to a pre-existing di ...

Arranging text and images strategically

I am trying to position an image and text within separate containers using div. The desired layout is to have the img floated left and the text centered on the page, but I am having trouble achieving this. Each element has its own div. Can you provide as ...

The div is struggling to contain the image, can anyone assist with this issue?

Greetings all! I am a beginner with CSS and currently working on my website. You can check it out at this link. I am facing an issue where the image on my site is not fitting properly and it keeps repeating. Can anyone guide me on how to fix this using CS ...

Utilizing Xpath and CssSelectors for identical tags, attributes, and elements

Creating Selenium tests for multiple buttons with identical code: <div class="item"> <div class="head"> <a class="title caps_style primary-color-text"href="https://www.www.www/link/link-link-complex-api-testing" target="_blank">Ra ...

Displaying an array of data from a list of arrays in AngularJS' session storage

Whenever a button is clicked, the data will be pushed into an array list and stored in session storage. var data = [ 'name':"name", 'id'=1 ]; var arrayList = new Array; arrayList.push(data); sess ...