Member Avatar for adwoman

At , I have a table on my page where I copied some code for the scrolling attribute to use in my page.

I got it to fit in fairly close but can’t seem to get it to shorten to align at the bottom. For some reason, this problem seems to only show up in Internet Explorer, and not in Firefox.

A separate, but not nearly as important concern is that this scrolling table also seems to push away from the cell above, “keg selection,” by just a tiny amount. I can fix that by changing the background to burgundy, but figure it might help to know why. Especially since I see a similar thing happening on all the other pages, where across the length between the editable area near the bottom of each page and the footer graphic there is a black line, but again this only shows in Internet Explorer, and not in Firefox*!?*??!

Your help and advice would be most appreciated.

Thanks,

Susan

  • 2 Contributors
  • 1 Reply
  • 112 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by tiger86

Dani AI

Generated

A few focused checks and small CSS fixes usually clear up the IE-only misalignment described by . As pointed out, invalid markup or a non‑standards DOCTYPE can push IE into quirks mode and change how table cells and the box model are sized. The practical approach is: force consistent table spacing, make the scroller content a true block so IE does not apply baseline gaps, and explicitly anchor the scroller to the cell bottom.

Try these safe CSS rules (adapt heights to match the design):

/* remove table gaps and force bottom alignment */
table { border-collapse: collapse; border-spacing: 0; }
td { padding: 0; margin: 0; vertical-align: bottom; }

/* make the scrolling area a block and control its height */
.scroller { display: block; height: 160px; overflow-y: auto; line-height: normal; }

If the scroller must visually hug the cell bottom regardless of content height, use a positioned wrapper:

.scroller-wrapper { position: relative; height: 160px; }
.scroller { position: absolute; bottom: 0; left: 0; right: 0; overflow: auto; }

Additional diagnostic tips: open IE’s developer tools (F12) and inspect the computed box model for the offending td and its child; look for unexpected padding, margins, or a stray border. Check that inline images are display: block (inline images often cause 1px gaps) and reset margins on headings/paragraphs near the footer. Finally, replace deprecated scrolling tags (like marquee) with CSS overflow or a small JS solution for more predictable cross‑browser behavior. These steps usually eliminate the tiny offset and the thin line that appears only in IE.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.