CODEWITHSUNDEEP
htmlcss
John Smith
John Smith

Reputation: 6197

HTML list falls apart with chrome

The following code runs well with firefox, but falls apart with chrome:

http://jsfiddle.net/4tYfY/4/

<body>
    <div id="footer"><ul>
<li class=""><a href="rolunk">1</a></li>
    <li class=""><a href="hotelek">2</a></li>
    <li class=""><a href="apartmanok">3</a></li>
    <li class=""><a href="impresszum">4</a></li>
    </ul>
<div class="clearfix"></div></div>
</body>

.clear, .clearfix{clear:both;}

#footer
{
    background-image: url('../images/footerLoopBg.png');
    height: 70px;
    line-height: 70px;
    text-align: center;
    vertical-align: middle;
    font-family: georgia;
    font-size: 1.1em;
    width: 100%;
}

#footer ul li
{
    display: inline-block;
    padding: 0px;
}
#footer ul li a
{
    color: #DB9FBD;
}
#footer li:after
{
    content: '|';
    padding: 5px;
    color: #DB9FBD;
}
#footer li:last-of-type:after {
    content: "";
}

Upvotes: 0

Views: 103

Answers (6)

enguerranws
enguerranws

Reputation: 8233

The problem in your code is that the last li element still have an :after pseudo-element. So, even if that after element has no more "|", it still is an element width a padding of 5px.

In order to fix it : 

#footer li:last-of-type:after {
  display: none;
}

Upvotes: 1

DevelopmentIsMyPassion
DevelopmentIsMyPassion

Reputation: 3591

You dont need to change css. There is nothing wrong in your css. There is something wrong in your html. See code below

<body>
<div id="footer">
    <ul>
        <li class="">   <a href="rolunk">1</a></li>
        <li class="">   <a href="hotelek">2</a></li>
        <li class="">   <a href="apartmanok">3</a></li>
        <li class="">   <a href="impresszum">4</a></li>
    </ul>
    <div class="clearfix"></div>
</div>

Check this fiddle here. I have not changed any css.

Upvotes: 1

DaniP
DaniP

Reputation: 38252

The problem here is when you remove the content for the last item:

#footer li:last-of-type:after {
  content: "";
}

In a better way try this:

#footer li:last-of-type:after {
  display:none;
}

The demo http://jsfiddle.net/4tYfY/24/

Upvotes: 1

Orville Patterson
Orville Patterson

Reputation: 524

I found that two things work for this fix you can add:

    #footer ul li 
       { 
         vertical-align: top;
       }

or remove

content: "";

Upvotes: 1

letmedoit
letmedoit

Reputation: 120

DEMO 

#footer ul li
{
    display: inline;
    padding: 0px;
}

Upvotes: 1

drip
drip

Reputation: 12943

Add:

#footer ul li { vertical-align: top;}

Demo

Upvotes: 1

Related Questions