1

I'm currently developing my site with a new layout and stuff, and after hours of fiddling around in Chromiums inspector, can't seem to pinpoint why the the content tabs won't fully stretch like in Firefox or IE9. There seems to be a small gap on the right side.

I'm still in the process of tidying the whole css so there are less conflicts, but whatever I do the tabs won't fully stretch in webkit.

Here's a testing page I've set up with the jquery tabs http://bad-good.org/index.php/Troll_2

Any ideas or workarounds? Looking forward to learning something. Cheers

mskfisher
  • 3,291
  • 4
  • 35
  • 48
Lux Delux
  • 23
  • 6
  • It seems to look the same in Firefox/Chrome/Safari for me. Can you add a screenshot of the issue comparing Firefox and Chrome? What version of Chrome are you using? – thirtydot May 01 '11 at 17:19
  • Here's a screenshot http://img708.imageshack.us/i/scrmf.jpg/ I'm using the latest Chromium nightly. But I noticed the same thing in Maxthon which is also webkit afaik and Opera. Firefox 4 and IE9 seem to display it properly – Lux Delux May 01 '11 at 17:28
  • Kaspar: I see. It does look like that in my Chrome also. I just didn't notice it before because it's only a few pixels and I'm silly. – thirtydot May 01 '11 at 17:37

1 Answers1

1

You've set the ul to width:100% which renders to 975px. The li are set to width:25% which in theory should be 243,75px... Chrome makes a floor approximation for the decimals (truncates them, so 243,75 is 243), like mentioned here.

I'd recommend changing the site's width (for example 960px) or working with fixed widths in opposition to percentages.

Community
  • 1
  • 1
Naoise Golden
  • 8,793
  • 4
  • 49
  • 65
  • Ah, I see, didn't know that :) Indeed, if I set the main wrapper width to 1000px then it stretches normally as the li is then 244px exactly. Guess I'll keep the wrapper at 1000px unless I find other problems. Cheers! – Lux Delux May 01 '11 at 20:48