RunningAHEAD - Topic: New Style Sheets on Firefox

wyerock

posted: 2/26/2009 at 10:06 PM
modified: 4/16/2009 at 9:24 PM

I noticed an issue with the new style sheets on Firefox when you have a page that is too wide for the current window. When you scroll over to the right, the white portion of the background ends and you end up with a blue background on the portion of the page that you had to scroll to see. Basically, the white portion of the background is only as wide as the window, rather than the width of the rendered page. This doesn't occur on IE. I only noticed it when viewing log summary pages with graphs in a small window (or non widescreen computer). Pic of problem: RA Screenshot

eric :)

posted: 2/26/2009 at 11:15 PM

I really hate style sheets. Why can't we go back to the good old table layouts? They work beautifully but now they're out of fashion. I'll have to see what's going on there.

noonito

posted: 3/1/2009 at 10:47 AM
modified: 3/1/2009 at 10:53 AM

I seem to be having the same problem, but it shows up on on the New Workout page. The page always ends up really wide, so I have to scroll over to the right to enter information. It seems to be related to the "course" drop down menu. I have attached a screenshot. This happens on Firefox 3.0.6, Windows XP, but not on IE. Thanks for a great site, Eric.

noonito

posted: 3/31/2009 at 11:02 AM

Ok, this is weird. On my home computer, the New Workout page shows up as shown in the image above. At work, it looks normal. The setup is almost exactly the same - Firefox 3.0.8, Windows XP service pack 3, etc. What's going on?

s.crissman

posted: 3/31/2009 at 12:13 PM

Do you have an entry in your routes and/or equipment drop-down that is named odd? Perhaps you have a bunch of spaces at the end of it or something, and the control is being re-sized to fit it? Just something to look at. If you are the only one seeing it, which you seem to be, it might be your data, rather than the sheet.

noonito

posted: 4/4/2009 at 5:59 PM

I figured out the problem. I was also noticing the same issue on my Mac. It turns out that it is an issue with the Helvetica font on the Mac. I had also installed this font on my Windows PC. Disabling the Helvetica font worked. I wonder if other Mac users are having this problem, or if my font was corrupted somehow.

wyerock

posted: 4/16/2009 at 9:15 PM
modified: 4/16/2009 at 9:28 PM

Eric, I figured out the problem I was seeing where the white background is only as wide as the window, leaving a blue background when you scroll to the side. Can you add a line to the styles.css to force Firefox to draw the background color all the way?

div.PageBody { clear: both; background-color: White; overflow: auto; }

I tested this on a local copy of the page and it fixes the problem. Normally overflow is to control the scrollbars, but it apparently behaves oddly or has a different default setting on Firefox than on IE.

Dutchie42

posted: 5/5/2009 at 11:20 PM

I have this problem in the forums, but only on my Vista laptop/tablet. It looks normal on my work computer (XP). It's a bit annoying when reading to have to scroll to the right and back again. Any suggestions how to fix this?

Dutchie
Run the day, or the day runs you.

eric :)

posted: 5/6/2009 at 1:51 AM

I would like to have this fixed too (I hate CSS). I tried wyerock's suggestion (thanks!). It fixes the problem but introduced another. Instead of having the horizontal scrollbar on the browser, it is moved to one of the HTML elements. The problem is that I am using a fixed width div. When the content within this div is wider than its parent, it bleeds out. I would like to find a way to have a fixed width div that will expand automatically to contain the child elements. Are there any CSS gurus here?

wyerock

posted: 7/7/2009 at 12:07 AM
modified: 7/9/2009 at 1:45 PM

Really, any CSS gurus out there? This issue still bugs me a lot and interferes with looking at summary pages when I'm not on a widescreen monitor, and really affects the iPhone.

~~Eric, what browser was it causing scrollbars to show up on? I never saw that problem when I was experimenting. Perhaps it's something we can set on a per-browser basis?~~

MTA:

Quote from eric :) on 5/6/2009 at 1:51 AM:

I would like to have this fixed too (I hate CSS). I tried wyerock's suggestion (thanks!). It fixes the problem but introduced another. Instead of having the horizontal scrollbar on the browser, it is moved to one of the HTML elements.

Whoops, it looks like you changed your stylesheets since I looked at them last. I've been experimenting, but I don't have enough CSS knowledge to fix it. The problem is that div.ContentBody renders to the width of the window rather than the width of its content (a form and table. The white background of the div stops and the rest of the graphs flow out onto the blue background of body.PageBody. The div can be forced to a fixed width, but that would look silly on log summaries that aren't wider than the browser window.

Any one understand how to make that div wider or understand why it doesn't know how wide the table inside it is?

Penny_A

thumbs up!

posted: 7/9/2009 at 10:39 PM

Are the div tags absolute positioned, or relative...

Are the contents "float left" (or right....)

Parent divs do not always "grow" to accomodate the floating children

2010 Goals
1. get to and maintain 20 MPW
2. sub 50 min Crazy Legs 8k -- April 10 (so close! 50:13... next year)
3. sub 30 min 5k
4. improved time in Madison half marathon -- May 10

New Style Sheets on Firefox (Read 961 times)