The text refuses to line up correctly

I am having trouble aligning my text to the right:

    #login_status
    {
           font-size: 1.2em;
           text-align: right;
           display: block;
           float:right;

    }

Here are the relevant CSS styles:

    #logo 
    {
           position: absolute;
           top: 15%;
           margin-left: 1em;
    }

    #login_status
    {
           font-size: 1.2em;
           text-align: right;
           display: block;
           float:right;

    }

    #header_container
    {
        background: #7fc041;
        height: 7.4em;
        left: 0;
        right: 0;
        position: fixed;
        width: 100%;
        top: 0;
    }

    #header_text 
    {
        margin-left: 9.75em;
        font-size: 2em;
        color: White;
        font-style: italic;
    }

Here are the HTML and server controls used:

<div id="header_container">        
    <div id="header">
        <div id="headerBar">
            <img src="images/logo.png" id="logo"/> 
            <span id="header_text">Scrum Reports</span>
      <asp:LoginStatus ID="LoginStatus1" runat="server" CssClass="login_status" />
        </div>
    </div>
</div>

Answer №1

Although I am not an expert in asp.net, I noticed that you are using #login_status with text-align: right and CssClass="login_status", which appears to be generating the output

<div class="login_status">

Therefore, you may want to consider changing #login_status to .login_status, or assigning it an id instead of a class since the styles seem to be correct.

http://jsfiddle.net/ExplosionPIlls/mzUTW/

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

There seems to be a hitch in the functioning of the JavaScript codes

I'm having trouble calculating the amount using jQuery. Could someone please review my code and let me know what's wrong? Here are my Javascript and jQuery codes: After making changes: $(document).ready(function() { $('.home_banner&ap ...

Material UI defaults remain unchanged despite any emotional influence

I'm currently experimenting with custom styling on a MaterialUI Typography component using the code snippet below: const StyledTitleTypography = styled(Typography)` color: 'black'; font-weight: 'bold'; `; <StyledTitleTypogr ...

BeautifulSoup - Struggling to retrieve tbody element

Having trouble accessing a table nested deep inside multiple layers? I'm relatively new to utilizing Beautifulsoup and have been practicing with some basic examples. However, I've hit a roadblock as I can't seem to locate the "div" tag with ...

When the page loads in the React platform, a section of the footer unexpectedly overlaps with another component

After working on this section some time ago, I returned to find a strange behavior that I couldn't fix by changing the CSS or wrapping components in divs. If you want to see the issue, check out this screenshot: issueReact To view the code where the ...

Hide custom video controls from view

For a while, I was able to hide the controls on my page using position:absolute; and bottom:-36px, which made them pop up when hovering over the player. Recently, however, I noticed that I can now scroll down to see them. How can I maintain the slide-up ef ...

Leveraging HTML and PHP for integrating date and mobile number functionalities

I am a beginner in HTML and PHP. I have encountered an issue where the data displayed shows as "0000-00-00" for dates and if the mobile number entered is less than 9 characters, it displays the same numbers repeatedly. However, when I enter 10 digits for t ...

Creating a Dynamic Navigation Bar using React and NextJS

How can we implement a Responsive Menu with React and NextJS? The magic happens when the user clicks a button, triggering the inclusion of the "open" class within the "menu" class. The rest is taken care of by the CSS styles. Illustrative code snippet: . ...

Checking for validation in the datePicker input field

I have a textbox field labeled "Expires on" and I am currently utilizing the DatePicker feature. $("#sfExpiresOn").datepicker({ dateFormat: "yy-mm-dd", changeMonth: true, changeYear: true, ...

The issue of bootstrap-multiselect being clipped under a kendo window has been causing

I am encountering an issue with my kendo window while using the bootstrap multiselect dropdownlist inside it. When I try to select something from the dropdown list, the dropdown-menu is getting clipped under the window and I cannot see all the options. Ev ...

What could be the reason for the lack of response from the jquery element on an

Recently, I've been working on a jQuery project with sticky headers. However, when I tested it on my iPad, I noticed a slight delay and the header jumping around the page. I'm wondering if this issue can be resolved within the code itself or if ...

Utilizing hyperlinks within NicEdit content and managing events with jQuery

I am using nicEdit, a rich editor, on my website to insert hyperlinks into the content. While I can successfully add hyperlinks using the setContent() method after initializing nicEdit, I am facing issues with handling click events for hyperlinks that have ...

Utilizing Javascript for altering HTML elements

It seems this issue is quite puzzling and I believe another perspective could be beneficial in identifying the problem. Despite my efforts, I am unable to understand why the "Energy Calculator" does not return a value when submitted, whereas the "Battery C ...

Having trouble with Javascript/jQuery not functioning in IE8?

My current project involves a website that functions smoothly in Chrome, but encounters issues with running JavaScript/jQuery scripts in IE8. Even a simple alert on page load fails to execute. Admittedly, my approach is a bit messy as I have mixed CSS an ...

How can we ensure that the borders of a text field automatically adjust to fit the dimensions of the text field using CSS?

I've encountered an issue with the borders of text fields while working on a project involving CSS/HTML. The problem is that in the browser, the borders appear shorter than the text fields. Initially, I attempted to adjust the border size to match th ...

Creating a dynamic visual experience with Angular 2: How to implement multiple font colors

I have a text area which is connected to one string, with the default text color set to white. <textarea style="background-color: black;color:#fff;" [(ngModel)]="outputText"></textarea> The connected string contains multiple variables. retur ...

How can the target pseudo-class be utilized to replace the 'active' state on navigation across several pages effectively?

Within a large application, I am managing a micro site and looking to implement tertiary navigation with an active state for pages. This involves inserting a single html blob into multiple pages. My goal is to use an active class to highlight the page in ...

I'm using SASS in my project, can you provide guidance on customizing the UI with @aws-amplify/ui

I've recently taken over a Next.js (React) project from another developer and they've used .scss files (SASS) for styling. The specific project I'm working on can be found here https://github.com/codebushi/nextjs-starter-dimension My task n ...

Having trouble generating an HTML table from JSON data using JavaScript

My attempt to generate a table with data from an external .JSON file using JavaScript is not working as expected. Everything worked fine when the data was hardcoded into the .JS file, but once I tried to fetch it externally using "fetch", the details do no ...

In the Firefox browser, tables are shown with left alignment

I recently designed a responsive HTML newsletter with all images neatly wrapped in tables. My goal was to ensure that on smaller screens, the tables stack on top of each other for better readability, while on wider displays, they appear side by side in a r ...

Embed watermark on the Username and Password fields of asp:Login control

Seeking help to watermark the Username and Password fields of asp:Login controls using jQuery, I have attempted different methods to reference the control ID: $('#<%=ClientID.Login1_UserName %>').watermark('watermark', 'User ...