Why do div and span display differently across browsers and how can we standardize their appearance?

My CSS file is currently displaying correctly in FF12, but the layout is different in Safari and Chrome.

If images are not loading, you can view a live demo at

This is how it should appear and does in FF:

However, this is what happens in Safari and Chrome:

Here is the relevant CSS and HTML:

<style type="text/css">
    #topbar p.infotext {
        float: left;
        padding-left: 20px;
        padding-right: 20px;
        margin-left: 15px;
        color: #D8DFEA;
    }
    #topbar a.name, #topbar a.home {
        font-weight: bold;
        margin-top: 4px;
        line-height: 32px;
        font-size: 13px;
        text-align: right;
        color: #D8DFEA;
        padding-left: 12px;
        float: right;
        text-decoration: none;
        padding-right: 0px;
    }
    .divider {
        margin-top: 7px;
        line-height: 19px;
        border-right: 1px solid #5CCD3E;        
        float: right;
    }
</style>

<html>
  <div id="topbar">
    <a class="home" href="#">Home &nbsp; <span class="divider">&nbsp;</span></a>
    <a class="name" href="#"><?php echo $first_name . " " . $last_name . " &nbsp; ";?>
    <span class="divider">&nbsp</span>
    </a>
  </div>
</html>
cssgoogle-chromebrowserdivider

Answer №1

My suggestion would be to utilize an image instead of adding an extra .divider class. However, if you still want to go that route, here is how I would adjust your markup: http://jsfiddle.net/Wexcode/z9Esg/

HTML:

<div id="topbar">
    <a href="#">
        <strong>Home</strong><span></span>
    </a><a href="#">
        <strong>Adam Wexler</strong><span></span>
    </a>
</div>​

CSS:

#topbar { text-align: right; }
#topbar a { 
    padding: 0 0 0 12px;
    vertical-align: middle;
    display: inline-block;​ }
#topbar strong, #topbar span { 
    vertical-align: middle;
    display: inline-block; }
#topbar strong { font-weight: normal; }
#topbar a:hover strong { text-decoration: underline; }
#topbar span { 
    background-color: #5CCD3E;
    height: 19px;
    width: 1px;
    margin: 0 0 0 12px; }​

Answer №2

To make it function properly, try including a specific width.

#topbar a.home, #topbar a.name {width : 70px;}

Answer №3

Give this a shot:

.separator {
    position: relative;
    top: 10px;
    line-height: 20px;
    border-left: 1px solid #FF5733;
    float: left;
}

Answer №4

It turns out the issue was related to the HTML code.

After removing the "&nbsp" directly following the text, the problem was resolved successfully.

  <div id="topbar">
    <a class="home" href="#">Home
    <span class="divider">&nbsp;</span></a>
    <a class="name" href="#">
    <?php
    echo $full_name." ".$tel;
    ?>
    <span class="divider">&nbsp;</span>
    </a>
  </div>

I am open to any feedback on the reasoning behind why this change worked...

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

What is the best way to add a border around an image along with a button using VueJS?

I am struggling to link a button and an image in VueJS to display a border around the picture. While I can successfully display the border on the button, I am unsure how to extend it to the image as well. Vue.component('my-button', 'my-img& ...

javascripthtmlcssvue.jsvuejs2

Making sure all items in the top row of Flexbox columns have the same height

Within my flex wrapper, I have multiple column components with various flex items inside. Each column displays content adjacent to each other. The challenge is to ensure that the top item in each column has an equal height, creating a row-like effect. I&a ...

htmlcssflexboxcss-grid

Adjust the CSS for the "a" tag's "title" attribute

I am using jquery.fancybox to create an image modal on my website. I have noticed that I can add a description using the title attribute. However, when the description is too long, the text is displayed on a single line and some of it disappears. How can ...

javascriptjqueryhtmlcssangularjs

Problems with spacing in Slick slider and lazyYT integration

Utilizing lazyYT helps to enhance the loading speed of YouTube videos. Once loaded, these lazyYT videos are then placed within a slick slider. However, an issue arises where the videos stick together without any margin between them. To address this problem ...

javascriptjqueryhtmlcssslider

What are the reasons behind the lack of smooth functionality in the Bootstrap 4 slider?

My customized bootstrap4 slider is functional, but lacks smoothness when clicking on the "next" and "prev" buttons. The slider transitions suddenly instead of smoothly. Any suggestions on how to fix this? Here is the code for the slider: $('.carous ...

javascripthtmljquerycssbootstrap-4

What could be causing the flexbox code to not take effect and the text to refuse wrapping?

I've been utilizing flexbox to style my content, and it worked seamlessly on the first three divs. However, when I attempted to apply the same styling to the fourth one, it didn't quite work out as planned. Despite trying options like flex-wrap t ...

htmlcssflexbox

Building a Collapseable and Non-Collapseable Bootstrap4 NavBar in ReactJS

Is there an easy solution for creating a collapsible horizontal NavBar? <Navbar inverse fixedTop fluid collapseOnSelect> <Navbar.Header> <Navbar.Toggle /> </Navbar.Header> <Navbar.Collapse> <Nav> ...

javascriptcssreactjsbootstrap-4reactstrap

What steps can I take to ensure that the text content stays within the borders and does not overlap with the photo?

click here for the image description Html <p><img src="index-foto1.jpg" align="left" width=65% style="border-radius: 10px;" margin-right: 2px> <div class="tant"><h3>More detailed inform ...

htmlcss

push one element to fit in between two adjacent elements

Is there a way to make my responsive webpage ensure that the full-screen element appears between sibling elements when viewed on mobile devices? Check it out on desktop or on mobile here. I have three (div) elements: two in one row and another in a separa ...

htmlcss

Securing Your Content - Preventing Users from Right-Clicking and Using F12 on Your Website

I am looking to disable the Right-Click function on my website or display an error message saying "Protected Content!" when someone tries to right-click. I want to prevent others from viewing my Source Code. Although I know how to disable Right-Click, I am ...

javascripthtmlcss

Personalize the breakpoints of Bootstrap 4's grid system

In my project, I am facing a situation where I need a 1280 breakpoint to switch from desktop to tablet, instead of the xl breakpoint at 1200 as defined in Bootstrap. How can I globally change the xl breakpoint in Bootstrap without recompiling from the sour ...

csstwitter-bootstrapsassresponsive-designbootstrap-4

The design does not have the capability to scroll

I am currently working on developing an application using Vaadin and Spring Boot. I have successfully set the background of my app by utilizing the following CSS code within the styles.scss file (inside myTheme as specified by Vaadin): .backgroundImage{ ...

csssassvaadin

Transforming RGBA, HSL, and HSLA color values into RGB format, or encapsulating them within a java.awt.Color instance

Seeking information on algorithms that can convert RGBA, HSL, and HSLA colors to RGB colors, or a Java library that performs this conversion and returns a java.awt.Color object. Any recommendations or assistance would be greatly appreciated! ...

javacssrgbrgbahsl

Adjusting element position while scrolling

Objective The goal is to have the page navigation display lower on the page by default. This will provide a cleaner layout as shown in the image below. Context An interactive element for navigation was implemented utilizing Headroom.js. This library d ...

javascriptjqueryhtmlcss

iPhone-compatible iFrame with adaptable webpage dimensions

While attempting to embed our page on a client's site, everything looks great in a browser and our media queries are functioning properly. However, we encountered an issue when viewing the embedded page inside an iframe on an iDevice. It seems that th ...

ioscssiframeresponsive-designmobile-safari

Header text refuses to cooperate and center itself

Struggling to find the best way to center the "Header" text while keeping the icon in place. I've tried using text-align: center;, but it's not producing the desired results. Could anyone provide guidance on how to achieve this? Thanks. IMG: ...

htmlcss

Creating head tags that are less bouncy

After running my code, I noticed that the headlines didn't transition smoothly - they seemed to jump rather than flow seamlessly. To address this issue, I attempted to incorporate fadeIn and fadeOut functions which did improve the smoothness slightly. ...

javascriptjquerycss

When a StaticFiles instance is mounted, FastAPI will issue a 405 Method Not Allowed response

Running a FastAPI application has been smooth sailing until I encountered an issue. In my current setup, the application script is as follows: import uvicorn from fastapi import FastAPI from starlette.responses import FileResponse app = FastAPI() @app.ge ...

javascriptpythonhtmlcssfastapi

Minimize the screen dimensions and adjust the margins accordingly

Having a problem with responsive margins? Take a look at this site as an example: When I shrink the screen size, the margins decrease and smoothly transition from 4 to 2 columns. In my case, it does something similar but the issue is that the margin does ...

htmlcsswordpress

Change HTML to PDF with the ability to split text at page breaks

I recently attempted to convert an HTML/CSS document into a PDF file using the pdflayer.com API. Everything seemed to be working well, but I encountered a problem with line breaks splitting lines, as shown in this photo: https://i.sstatic.net/1tqKM.jpg I ...

htmlcsspdfhtml2pdfhtml-to-pdf