Only hompepage rendered correctly?

Question

I work for more than 6 months on a MVC project and all that time i've got the same problem with html css: The homepage rendered correctly. example: http://prntscr.com/tucp1

All other pages have some white space between words. example: http://prntscr.com/tucui Part of HTML:

<div class="search right">
    <div class="nav">
        <ul>
            <li><a>Nav1</a></li>
            <li><a>Nav2</a></li>
            <li><a>Nav3</a></li>
        </ul>
    </div>

Part of my Css:

.nav ul li {
line-height: 27px;
display: inline;
float: left;
list-style-type: none;

.nav ul li a {
color: #424242;
padding: 0 10px;
font-weight: bold;
}

And yesterday i figured out that i dont have float left on li. I was testing on inner page so i eazy found the problem... Does anyone know how can only hompepage rendered correctly , some explanation?

It's impossible for us to say anything without seeing the HTML — , Feb 23 '13 at 15:06

score 1 · Accepted Answer · edited May 23 '17 at 12:04

1

Inline list items are white-space dependent (just like inline-block elements) - meaning your mark up needs to be like this instead:

<div class="search right">
<div class="nav">
    <ul>
        <li><a>Nav1</a></li><li><a>Nav2</a></li><li><a>Nav3</a></li>
    </ul>
</div>

To get rid of the spaces between them.

Read this answer for more info: Best way to manage whitespace between inline list items

edited May 23 '17 at 12:04

Community

1
1

answered Feb 23 '13 at 15:17

Adrift

58,167
12
92
90

anyway best option is float:left to remove the spaces as i see? – Mirko Mukaetov Feb 23 '13 at 15:29

Only hompepage rendered correctly?

1 Answers1