What are some other options to using position: absolute when working within an inline position:relative?

I've been struggling with this problem for some time now and just can't seem to find a solution.

The issue involves a series of position: relative spans enclosing text, along with a position: absolute span set to right: 0;. I expected the second span to stick to the right side of the first span, regardless of whether the first span breaks into two lines. Unfortunately, I have only managed to achieve this in Safari.

You can view an example here: .

After coming across this page: , it appears that while the technique is technically correct, it is not well-supported. My goal is to have each / remain at the end of each li even if it spans multiple lines.

Any suggestions or ideas? Thank you.

htmlcsscross-browsercss-position

Answer №1

Your header may be too small because of the width specified. Removing the width could potentially resolve the issue, as demonstrated by viewing in FF 3.6.

#header {
    float: left;
    margin-right: 48px;
    margin-top: 26px;
    /*width: 334px;*/
}

Alternatively, consider adding white-space: nowrap to your list items (li) for a different approach.

li {
    color: #888888;
    list-style-type: none;
    white-space: nowrap;
}

Update:

You may want to try this updated solution...

.slash {
    color: #BBBBBB;
    padding: 0 2px 0 19px;
}

.header {
    background-color: yellow;
    border: 1px solid red;
}

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

Restore font-weight if a different list item is chosen

I previously inquired about setting the font-weight to bold on a text element when selected. Thanks to @Eric, this has been successfully implemented! However, I am facing an issue where clicking on one text makes it bold, and then clicking on another text ...

javascripthtmlcss

What is the best way to ensure that only one of two textboxes is filled out in an HTML form?

Looking to create 2 fields that are mutually exclusive. One will be a FileField and the other a TextBoxField. Is there an HTML form template available for this specific scenario? I've scoured the web but haven't come across one yet. Apologies ...

htmldjango

Choose the checkbox if the tablerow includes specific text

I am working with a table that has two columns. The first column consists of checkboxes and the second column contains attribute names. My goal is to select the checkboxes next to a cell that includes specific text. Below is the structure of my table: &l ...

jqueryhtmljquery-uihtml-table

The issue with Angular-gettext is that it fails to update dynamically generated strings in the code

Whenever I try to set the language using the code gettextCatalog.setCurrentLanguage(langString);, it doesn't seem to affect my side-nav menu. My side menu has two possible states: expanded or collapsed, and I use ng-include to control its content base ...

javascripthtmlangularjsangular-gettext

Failed to add a new entry to the Sharepoint 2013 List

Having trouble saving an item to a SharePoint list using Knockout.js and REST. In my Ajax POST request, I've used ko.toJSON but the entry doesn't show up in the SharePoint list. It's possible that I'm passing the wrong parameter value. ...

jqueryhtmlajaxknockout.jssharepoint-2013

Tips for adjusting CSS font sizes within a contenteditable element?

I am looking to develop a compact HTML editor using JavaScript that allows me to customize the font-size of selected text with a specific CSS value. The documentation states that the FontSize command is used like this: document.execCommand("FontSize", fal ...

javascripthtmlcontenteditable

React Transition for Mui Menu

I'm having trouble implementing a Mui menu on my website and adding a transition effect from the right side. Here is the code I have tried: <Menu transitionDuration={1} open={Open} onClose={Close} MenuListProps={} className="nav"> ...

cssreactjsmaterial-uimenu

Encountered a problem with Vuetify's sass variables

I am currently working on my Vuetify3 project where I need to customize a select dropdown from a library to match the style of Vuetify's select dropdown perfectly. After inspecting Vuetify's select box, I decided to replicate its styles by using ...

cssvue.jssassvuetify.jsvuetifyjs3

When writing CSS, ensure there is no space between selectors and classes of elements

Can you explain the distinction between using a css selector (like p) and assigning a class to an element (.cat)? p.cat{ } Vs. p .cat{ } Appreciate your help! ...

csscss-selectors

What is the best way to transfer variables between HTML and PHP?

Greetings! I have a quick query: What is the best practice for transferring variables while developing on your website? - get method, post method, session, cookies, hidden fields, etc. ...

phphtmlvariableswebparameter-passing

Height problem with Semantic UI cards in Chrome on Windows

Encountering an issue specific to Chrome on Windows where the height of my .card elements is not displaying correctly. The height appears to be either too much or too little, causing the problem shown in the screenshot below. This issue seems to be isolate ...

cssgoogle-chromeflexboxsemantic-ui

Being required to design a distinct div for every article I am extracting from the API

In the midst of developing a website for my college project, I have successfully configured my news API to pull and display data using JavaScript. Currently, I am faced with the challenge of having to create separate div elements each time I want to add n ...

javascripthtmlcss

Guide on implementing themes to HTML within the append() function

I am currently working on a project where I need to dynamically add HTML tags using JavaScript. However, I have noticed that the themes or styles are not being applied to the newly added elements within the append method. In my HTML file, I am using jQue ...

javascriptjqueryhtmlcssjquery-mobile

Include an arrow in a personalized horizontal scroll bar using Angular and HTML

After styling a horizontal scrollbar for my chartjs graph, I attempted to add arrows using material icons like <mat-icon>keyboard_arrow_left</mat-icon>. However, I am struggling to align them next to the left and right of the scrollbar. Can any ...

htmlcssangularchart.jsscrollbar

Pagination functionality in TablePress allows for improved organization and

Currently, I am utilizing the TablePress plugin on my WordPress website and I am aiming to achieve a pagination layout similar to this illustration: . How can I modify the pagination to display the text 'page 1 of X' instead of 'previous&apo ...

htmlcsswordpressdatatable

Animation not fluid with ReactCSSTransitionGroup

Currently, I am in the process of developing an image carousel that showcases images moving smoothly from right to left. However, despite its functionality, there seems to be a slight jaggedness in the animation that I can't seem to resolve. Interesti ...

javascriptcssreactjsanimationreactcsstransitiongroup

Retrieve PHP variable from a PHP CSS file

I'm facing an issue where I am unable to retrieve a PHP variable from a CSS file that is loaded in this manner from my index.php: <link href="css/style.php" rel="stylesheet"> Within the style.php file, the code looks like this: <?php heade ...

phpcssvariables

Display line numbers in HTML/CSS cellsorIncor

Attempting to include row numbers in HTML/CSS. Below is the HTML code with React populating the rows: <table className="table table-striped"> <thead> <tr> {/*<th>ID</th>*/} ...

htmlcssreactjs

Looking to adjust the fill pattern dynamically

I previously implemented this code: Is there a way to modify the fill image on my 3 buttons to display in 3 distinct colors instead? ...

javascripthtmlcanvasfill

Responsive div that reacts to scrolling

I am looking for a div that can dynamically change its position as I scroll up or down the page. For example, it could start 30px from the top but then move to 100px as I scroll down further. This div will be located on the right-hand side of my page, clo ...

javascriptjqueryhtmlcss