4 replies [Last post]
sjscabert
Offline
newbie
Last seen: 13 years 4 weeks ago
Timezone: GMT-5
Joined: 2007-11-01
Posts: 3
Points: 0

The following layout emulates a sort of range gauge:

Progressbar Demo

.rgOuter { border:1px black solid; margin-left:10%; margin-right:10%; background-color:#888 }
.rgInner {position:relative; width:100%; background:#AAA; }
.rgUnused {position:absolute; left:0px; background:#0F0 }
.rgUsed {position:absolute; left:0px; background:#808 }

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

This works well - tooltips and all - without a DOCTYPE. But with a DOCTYPE (loose or strict), a small gap appears at the right side of the bar. Any ideas why?

Thanks in advance,

Shawn Bertrand
Tyco Electronics Corporation

Katie
Katie's picture
Offline
Enthusiast
Seattle, WA
Last seen: 5 years 3 weeks ago
Seattle, WA
Timezone: GMT-8
Joined: 2006-08-06
Posts: 357
Points: 2

Shawn, I saw no difference

Shawn,

I saw no difference when I added a doctype. I'm using FireFox2. What browser were you testing in?

To get your code validated, here's how I coded the start of your document. Validation really is important for consistent rendering.

Progressbar Demo

Blog: Pew Pew Laser Blog
Online File Storage: DropBox
Daily Deals on Local Activities: Groupon

sjscabert
Offline
newbie
Last seen: 13 years 4 weeks ago
Timezone: GMT-5
Joined: 2007-11-01
Posts: 3
Points: 0

Reproducible in IE 6/7

With your validation above my body, it indeed shows that gap. Maybe there is some setting in IE I don't know about that controls rendering?

Thanks in advance,

Shawn

DanA
DanA's picture
Offline
Elder
Last seen: 10 years 29 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Is it a rounding error? Did

Is it a rounding error?
Did you try to set hasLayout in .rgOuter by adding height:1%; ?

sjscabert
Offline
newbie
Last seen: 13 years 4 weeks ago
Timezone: GMT-5
Joined: 2007-11-01
Posts: 3
Points: 0

That did it!

Yes, I needed the "height:1%" to ensure the gap was filled in.

Thanks for the help!

All the best,

Shawn