1

I'm writing a JS snippet to create a series of tabs to allow a viewer to cycle through various parts of a web page instead of scrolling down to see them. The tabs are all <a> elements, encased in a <span> element each for prettifying purposes. The spans are all chucked in a <div>. No floating. The number of tabs shown depends on the page which is modified by the script, and can go up to around twenty or possibly more. In cases where there are many tabs the div needs to wrap. I accomplished this in FF by inserting a zero-width space between each span, which works quite nicely. However, webkit doesn't like this, and refuses to line-break. For aesthetic purposes the tabs really need to be scrunched up next to each other, and yet I am at a loss as to how to accomplish this in a way which works with Safari and Chrome. Any assistance would be greatly appreciated.

My code can be seen here.

Atelaes
  • 11
  • 1
  • It would help a lot if we could see the actual generated DOM/HTML that your script created and the style associated with it. – Photodeus Jul 06 '10 at 14:25
  • Unfortunately, that can be just a teeny bit tricky. The script runs on Wiktionary, the dictionary counterpart to Wikipedia. If you go to http://en.wiktionary.org/wiki/WT:PREFS, check the last checkbox entitled "Tabbed browsing of language sections" and then enter "in" in the text field at the top left you can see it. I'm sorry that I don't have a simpler way to reproduce this. – Atelaes Jul 06 '10 at 14:32
  • Accessing the actual HTML is a good way to debug and learn. You can inspect the DOM after the page has loaded to show the generated source. In Firefox I use the developer toolbar for this. AFAIK, Chrome has something for this also. I just don't remember without looking where it was. – Photodeus Jul 06 '10 at 14:38
  • Seems like the same thing is to press Ctrl+A in Firefox to select all text and then right click on it and pick "View selection source" from the context menu: http://stackoverflow.com/questions/3163455/what-is-the-difference-between-source-and-generated-source – Photodeus Jul 06 '10 at 14:48
  • Yes, I've been using Firebug in Firefox and the "developer" pane in Chrome to look at the code, but the site has a lot of material, and I couldn't think of a practical way to include it here. Basically the output looks like div span tab /span span tab /span /div. I've got a lot of styling added to it, but the only relevant (as I can see) styling is that the div has "whitespace:normal" and the spans have "whitespace:nowrap" (I only want line-breaks between the buttons, not within them). The div has no set height. – Atelaes Jul 06 '10 at 23:01

1 Answers1

0

On my website I've solved this by having the container div to have

div#container { 
  overflow: auto; 
}

and in the spans inside the div

div#container span 
{ 
  float: left; 
  display: block; 
}
Photodeus
  • 657
  • 1
  • 5
  • 18
  • hmm, how do I delete my answer, I need to check the sample code first :P – Photodeus Jul 06 '10 at 14:23
  • There should be a delete link on the lower left corner. – SLaks Jul 06 '10 at 14:26
  • Actually, I had that setup initially. The problem with that is that the div does not expand to hold floated content, and consequently can cause problems with any content which immediately follows it when it wraps. – Atelaes Jul 06 '10 at 14:27
  • Any content that follows, you mean after the div? Add a "clear: both" to that element. – Photodeus Jul 06 '10 at 14:31
  • I'm living under the assumption you want floating buttons, a bit like on my website https://popodeus.com/ If you make the browser narrower, they overflow to become multi-row. I hope I didn't misinterpret your goal. In that case I'll just delete my reply as misinformed :) – Photodeus Jul 06 '10 at 14:43
  • No, not really. I do want the buttons to overflow and become multirow if there's not enough space for them any reason. However, I don't want them to float, per the previous problem. If the buttons are floated, the div does not expand vertically, it retains its original vertical size. I then have free roaming floating buttons below the div, which wreaks havoc on non-floating content below. The problem with the "clear:both" div at the end is that there's a floating table of contents on the right, which can be quite tall. When this is the case, all of the content below gets pushed way down. – Atelaes Jul 06 '10 at 22:55
  • 1
    In case anyone was wondering, the solution I have now found is the wbr tag, which is now inserted between each span. Both Webkit and Firefox handle this just fine. – Atelaes Jul 08 '10 at 00:48