CODEWITHSUNDEEP
htmlcsscross-browser
padarom
padarom

Reputation: 3648

Inconsistent spacing in different browsers

I need to create a simple calendar design. The problem is, that I cannot change the HTML markup, which is created from a PHP script. The calendar is created as an unordered list, where each li-tag represents one day.

From left to right, these are Google Chrome, Mozilla Firefox and Internet Explorer:

Google Chrome Mozilla Firefox Internet Explorer

I want each of them to look like the Chrome-example (I will remove the unnecessary border to the right afterwards). I have tried a lot of things to solve this, a negative margin for instance - Which of course changed the look in Chrome. According to this article it is caused by spaces, tabs and linebreaks between the li-tags, which is only half the truth.

I figured out, that the creating script returns the list without any spaces in between. This however is only true for the days, not the heading - Don't ask why, I don't know either... See the code below for an example.

<li class="day first">Mo</li>
<li class="day">Tu</li>
<li class="day">We</li>
<li class="day">Th</li>
<li class="day">Fr</li>
<li class="day">Sa</li>
<li class="day">Su</li><li class="first outofrange">&nbsp;</li><li class="outofrange">&nbsp;</li><li class="outofrange">&nbsp;</li><li class="outofrange">&nbsp;</li><li class="outofrange">&nbsp;</li><li class="outofrange">&nbsp;</li><li class="past">1</li><li class="first past">2</li><li class="past">3</li><li class="past">4</li><li class="past">5</li><li class="past">6</li><li class="past">7</li><li class="past">8</li><li class="first past">9</li><li class="past">10</li><li class="past">11</li><li class="past">12</li><li class="past">13</li><li class="past">14</li><li class="past">15</li><li class="first past">16</li><li class="past">17</li><li class="past">18</li><li class="past">19</li><li class="past">20</li><li class="past">21</li><li class="past">22</li><li class="first past">23</li><li class="past">24</li><li class="past">25</li><li class="today">26</li><li class="future">27</li><li class="future">28</li><li class="future">29</li><li class="first">30</li><li class="outofrange">&nbsp;</li><li class="outofrange">&nbsp;</li><li class="outofrange">&nbsp;</li><li class="outofrange">&nbsp;</li><li class="outofrange">&nbsp;</li><li class="outofrange">&nbsp;</li></ul></div></div>

Mozilla Firefox, Take two

This is the second Firefox example, without the space between the days. As you can see, it solved the problem, but as there's still space between the heading, it's not perfect. It doesn't work for Internet Explorer however, no matter whether I have spaces or not, it still has the offset between each element.

Here's a JSFiddle-Exampe of my code. Remember, I cannot change the HTML markup!

I hope you can help me to make them look consistent.

Upvotes: 1

Views: 880

Answers (3)

web-tiki
web-tiki

Reputation: 103780

If you can't change the html at all, one solution would be to use floats instead of inline-block elements so that the margin between all elements doesn't depend on font-size or spaces in the html markup.

I tested this DEMO in the latest versions of IE, FF and chrome and they have the same rendering.

.calendario ul li {
    float:left;
    list-style-type:none;
    ...
}

To prevent layout issues, you also need to clear the floats. In the demo I use a pseudo selector on the <ul> element :

.calendario ul:after{
    content:'';
    display:block;
    clear:both;
}

Upvotes: 2

thomaux
thomaux

Reputation: 19718

There's no need to resort to a <table> unless you were to be warped back into time and somehow ended up in the 90ies.

The issue you're having here is caused by displaying elements inline. It does not matter whether it's inline-block or not. You could compare elements that are displayed inline as words, and as with words there are spaces between them.

A simple solution is to set the font-size of your containing element to 0 and then override this in the elements where you want to display text. You have already set the font-size for these latter elements, so you could solve this simply by adding

font-size: 0px;

To the calenderio class.

Edit: In case the browser sets a minimum font size (which IMHO is plain stupid), you can solve this by checking the accepted answer on this other SO question. It's a hack for a buggy implementation of the browsers, but should you encounter issues with setting font-size to 0, then at least you could patch the browsers behaviour.

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324640

You still have spaces between your list items for the headings. Remove those too.

That said, you can maintain some vestige of reasonable layout of your source code with this trick:

<li class="day first">Mo</li
><li class="day">Tu</li
><li class="day">We</li
> ...

Notice how I'm putting the whitespace inside the closing tag? This is perfectly valid (if a bit unorthodox) and allows you to "have no space on the page" and "have readable HTML" at the same time!

EDIT: If JavaScript is an option, try this:

function stripWhitespace(node)
{
    // note: only applies to first-level children, not descendants
    var n = node.childNodes, l = n.length, i;
    for( i = l-1; i >= 0; i--)
    { // work in reverse because `childNodes` is live
        if( n[i].nodeType == 3 && n[i].nodeValue.replace(/\s/g,'') == "")
        {
            node.removeChild(n[i]);
        }
    }
}

Call that function and pass it your <ul> element. The spaces between <li>s will be removed.

Upvotes: 0

Related Questions