0

Ok i have a list of HTML nodes which should be inline with no spacing between them. The problem is, that the nodes are written from a CMS and therefore will come with all sorts of linebreaks and spaces. Therefore I'm removing the spaces with JS using the method descibed in this question. The problem is, however, that in IE (not 9) the white spaces isn't part of the childrens list of the parent node, rendering the method useless in IE. However IE 7 (or at least IE 9 emulating IE 7) ignores the linebreaks, so that one is in the clear. That leaves IE 8 as the troublemaker. I discovered that the line break is actually a part of the outerHTML and that a simple reset of the outerHTML did the trick - like so:

node.outerHTML = node.outerHTML

However this will reset the node intirely and therefore removing all events and other settings on the node, which isn't really any good.

So my question is now: Is there a way to remove that linebreak from the nodes outerHTML whitout resetting the node? I've tried with zoom: 1, but to no avail. Hope anyone has any experience with this.

The HTML is more or less like this:

<div class="items">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

but it doesn't have to be <div> it should be able to handle any tag. The CSS is pretty simple and goes something like this:

.items { white-space: nowrap; }
.items .item { display: inline-block; background: red; height: 150px; width: 180px; }

and IE (6-7(8)) style is like this:

.items .item { *display: inline; *zoom: 1; }

i know that it is possible to "remove" that space via CSS like this:

.items { word-spacing: -0.33em; letter-spacing: -0.33em; }
.items .item { word-spacing: normal; letter-spacing: normal; }

but I find this to be an ugly hack that sometimes screw things up. So since I'm already manipulating the elements via JS, then I just hoped to remove the spaces via JS.

A little preview of what i meen:

No spacing should appear between the squares http://tokimon.dk/stackoverflow/display-inline-spacing.png

Community
  • 1
  • 1
Tokimon
  • 4,072
  • 1
  • 20
  • 26

2 Answers2

0

Sounds like an IE box model problem. Do you have this meta tag in your HEAD?

<meta http-equiv="X-UA-Compatible" content="IE=8" />
stef
  • 14,172
  • 2
  • 48
  • 70
  • Sorry m8. I already have in the section. It seems as general IE problem, but i really have no clue why the space is eliminated in IE 6+7. And just for the record i use the HTML5 doctype. – Tokimon Jan 03 '11 at 10:00
0

From quick test, what you want can be achieved with pure CSS - just have all "items" float:

.items .item { float: left; background: red; }

Updated test case: http://jsfiddle.net/yahavbr/jBH5D/4/

Shadow The GPT Wizard
  • 66,030
  • 26
  • 140
  • 208
  • Yeah i know... But then i have to specify a width for the container, to prevent the items from wrapping underneath each other, which i hoped to avoid. – Tokimon Jan 03 '11 at 15:46
  • @Tokimon you can easily set width using client side code according to current document width if you want it relative or something like that. – Shadow The GPT Wizard Jan 03 '11 at 15:58
  • i know.. but then i have to recalculate the width each time a node is added or removed. kinda sucks and is resource consuming :) – Tokimon Jan 05 '11 at 15:24