css div and span display differently in browsers. How to unify?

StackOverflow https://stackoverflow.com/questions/10925475

Domanda

I have a CSS file that displays correctly in FF12, but it is different in Safari and Chrome.

IF IMAGES DON'T LOAD, VIEW A LIVE DEMO at http://beattrack.net/test.php

Here is what it should and does look like in FF:

FF correct css

And here is what happens in Safari and Chrome:

Safari and Chrome difference

Here is the relavant 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>
È stato utile?

Soluzione

Although I'd recommend using an image rather than tacking on an extra .divider class, here is how I would modify 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; }​

Altri suggerimenti

Adding a width should get it to work.

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

try this:

.divider {
    position:relative;
    top: 7px;
    line-height: 19px;
    border-right: 1px solid #5CCD3E;        
    float: right;
}

Turns out it was a problem with the HTML.

When I removed the "&nbsp" from after the text, it worked great for me.

  <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'd love any feedback as to WHY that worked...

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top