Hello everyone I trust you are all doing well...

I have a small issue I was hoping someone here could assist with. Well it's kind of a big issue considering this is totally out of nowhere and the site was fine last week...

So, I was about to start with some site improvements from home when I navigated to the website to check it out to get ideas/impressions...

It seems that the div's I used to contain product specs have ceased to scroll! Now it was like last week that I was working on it a bit from work and I am absolutely positive this wasn't the case at that time.

Now the work computers are on Win2000 (not sure the exact version of IE on those machines...) whereas my computer here is Vista with IE7.

Anyways this is quite a major problem because as you could have guessed all my table cells are grosely stretched to accomodate the text that was previously hiding within a scroller.

This seems to have only affected my divs although I have also noticed that some text I had within table cells have become "centered" instead of aligned left.

It seems to me like the divs aren't reading the styles properlyor something. It has been too long since I was into web design so I'm a little rusty on my own.

So any help anyone can give me in this regard would be great.

Here is a link to see for yourself (please feel free to tell me it's just my machine!!!)
http://visionrv.com/index.html

Try a link or two under the heading "New Units" and have a look at the text adjjascent to the RV pics...centered for some reason.

To see what I'm talking about in regards to the divs try a link or two under the heading "Used Units". You'll see how everything is out of whack!

Thanks!

Before you go into your code, could it be something simple like a difference in screen resolution settings on the different machines? That is, is it cropping the images off or is it showing them whole? Is it possibly that it's just not scrolling because it doesn't have to?

Originally Posted by serandfae

Before you go into your code, could it be something simple like a difference in screen resolution settings on the different machines? That is, is it cropping the images off or is it showing them whole? Is it possibly that it's just not scrolling because it doesn't have to?

Nope, it's not a resolution thing. I'm quite certain that the site was fine in IE7 previously.

I've also since been back to work and I checked the site out there and it was fine (Win200 and IE6) so I breathed a sigh of relief there...

It's not an image issue, since they are just thumbnails and the columns are being strethced WAY longer than they are. (from the text.)

If someone with IE7 could do me a favor and click here http://visionrv.com/usedunits/usedclass_a.htm
and see if there are scrolling boxes to the right of the images (or if the cells have just stretched to fit the text), I would sure appreciate it.

Thanks again!

Originally Posted by iseethemtoo

If someone with IE7 could do me a favor and click here http://visionrv.com/usedunits/usedclass_a.htm
and see if there are scrolling boxes to the right of the images (or if the cells have just stretched to fit the text), I would sure appreciate it.

Just checked it in IE7; the text stretches and does not scroll.

Originally Posted by serandfae

Just checked it in IE7; the text stretches and does not scroll.

Yes this is the problem.

The stretched cells you see actually have divs within them which are styled by an external css file. These divs appear as intended in earlier explorers but apparently they have stopped working.

The divs are being styled by an external css file.

They are supposed to have a fixed height that would cause any text that exceeded that height to begin a scrolling frame.

It used to work and now it doesnt. Anyone have any ideas?

At 1024 x768 this page http://visionrv.com/usedunits/usedclass_a.htm

looks the same in ff2.0 and ie7. There is no scroll. A logo on the left side text on the right. The logo floats to the center, the text to the top.

Originally Posted by colbyt

At 1024 x768 this page http://visionrv.com/usedunits/usedclass_a.htm

looks the same in ff2.0 and ie7. There is no scroll. A logo on the left side text on the right. The logo floats to the center, the text to the top.

Yea and it definitely works in IE6.

Can anyone think of what might be my issue here?

I don't see from your source code how or if you are defining the height of your cells, but you can use the CSS max-height property to do so. Try an inline style="max-height: 200px;" in the tr tag (the value can also be a percentage of the parent element).

Originally Posted by serandfae

I don't see from your source code how or if you are defining the height of your cells, but you can use the CSS max-height property to do so. Try an inline style="max-height: 200px;" in the tr tag (the value can also be a percentage of the parent element).

I have the height fixed at 96 pix both inline and using it's id "unititems" in css.

Oh, yeah, forgot to add this: Use the CSS overflow property and define your individual cells by it.

Example: .unititems{overflow: scroll;}

Otherwise, no matter what dimensions you make the cell, extra content from those dimensions will balloon it out.

Don't know why I didn't post that before; I must need more coffee.

Originally Posted by serandfae

Oh, yeah, forgot to add this: Use the CSS overflow property and define your individual cells by it.

Example: .unititems{overflow: scroll;}

Otherwise, no matter what dimensions you make the cell, extra content from those dimensions will balloon it out.

Don't know why I didn't post that before; I must need more coffee.

Ufortunately that doesn't seem to help. It adds scrollbars to the side and bottom of the cell but the content is still stretching it and the scrollbars aren't useable.

Maybe it would help if I provided some of my code to give a better idea.

Here is an examply of one of my divs:

<div id="unititems" height="96">
<span class="header">1997 Allegro Star - Model 310<br></span>
<span class="stocknumbers">MA7726A</span><br>
- 31 ft.<br>
- Chev 454 - Gasoline<br>
- 65,080 kms<br>
- Roof A/C<br>
- Awning<br>
- AM/FM stereo w/CD<br>
- TV antenna<br>
- 2 TV's<br>
- Microwave<br>
- Double door fridge<br>
- Stove/oven<br>
- Furnace<br>
- DSI water heater<br>
- Power converter<br>
- GEnerator<br>
- Roof rack & ladder<br>
- Spare tire<br>
- Driver's side door<br>
- Electric mirrors<br>
- Boat hitch<br>
</div>

This is from my css stylesheet:

#unititems {
position: relative;
overflow: auto;
width: 318 px;
height: 96 px;
scrollbar-arrow-color:F7F84F;
scrollbar-base-color:1A651C;
scrollbar-track-color:5EA860;
}

Thanks in advance for any help as I am stumped.

What happens if you change the value of overflow in your id style rule to scroll, rather than auto?

Originally Posted by serandfae

What happens if you change the value of overflow in your id style rule to scroll, rather than auto?

A scrollbar appears on the right side and the bottom of the cell but it is unuseable and the content is still stretching the cell.

Well, two things I always do when I'm debugging: Run it through W3C's validator, correct any errors, check again, then comment out things to isolate what's going on. In your case, though it's a stretch, I'd try commenting out those spans within your div and see what happens.

This one puzzles me. My spider senses say conflicting styles, but I'd need the sheets to verify that.

Originally Posted by serandfae

Well, two things I always do when I'm debugging: Run it through W3C's validator, correct any errors, check again, then comment out things to isolate what's going on. In your case, though it's a stretch, I'd try commenting out those spans within your div and see what happens.

This one puzzles me. My spider senses say conflicting styles, but I'd need the sheets to verify that.

Thank you.

A lot of stuff came up in that validator. I'll sift through it and see what I can come up with.

Ok so I validated the markup and still no solution.

Basically my problem can be summed up into one question.

How can you define a fixed size for a div?

Because no matter what I try the text is always dictating it's size.

Remove the spaces between 318px; and 96px;

That will fix it.

This:

#unititems { /* Styles the divs */
position: relative;
overflow: auto;
width: 318 px;
height: 96 px;
scrollbar-arrow-color:F7F84F;
scrollbar-base-color:1A651C;
scrollbar-track-color:5EA860;
}

Should look like this:

#unititems { /* Styles the divs */
position: relative;
overflow: auto;
width: 318px; /* No Space between 318 and px; */
height: 96px; /* No Space between 96 and px; */
scrollbar-arrow-color:F7F84F;
scrollbar-base-color:1A651C;
scrollbar-track-color:5EA860;
}

Originally Posted by rion

Remove the spaces between 318px; and 96px;

That will fix it.

This:

#unititems { /* Styles the divs */
position: relative;
overflow: auto;
width: 318 px;
height: 96 px;
scrollbar-arrow-color:F7F84F;
scrollbar-base-color:1A651C;
scrollbar-track-color:5EA860;
}

Should look like this:

#unititems { /* Styles the divs */
position: relative;
overflow: auto;
width: 318px; /* No Space between 318 and px; */
height: 96px; /* No Space between 96 and px; */
scrollbar-arrow-color:F7F84F;
scrollbar-base-color:1A651C;
scrollbar-track-color:5EA860;
}

You sir, are a King among men.

Thank you so much that seemed to fix it.

The bars don't seem to be taking the colors but who really cares.

You're welcome!

If my memory serves me right, the scroll bar color is browser specific. I'm not sure which browsers support it. But I do believe the # is required for the color.

scrollbar style changing is specific to Internet Explorer and yes, the # is required