Member Avatar for jules214

Hi all,

sorry for the title, couldn't think.

Basically, i can't figure out an issue with my CSS on NN for one particular thing.

The main page area (which has 'test' in it a lot) has an image in a table column to the left of the section, which is repeat-y and is meant to move down the page with the text. This works fine in IE, but in NN it only registers the first time.

I'm sure i'm missing something really simple, but could anyone point out what.

Thanks,

Jules

  • 2 Contributors
  • 2 Replies
  • 85 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by jules214

Dani AI

Generated

Brief summary and practical follow‑up based on the thread: solved the issue by removing the fixed, tiny height on the left table cell so the repeat‑y graphic could tile down the full height of the content; noted no difference in his quick check. The underlying rule is simple and browser‑independent: a background image repeats only inside the element's computed box. If that box is constrained (for example, a hardcoded height or an HTML height attribute on the td), the image will only tile inside that limited area.

Consolidated tips and safe fixes:

  • Remove any hardcoded height="13" (or height:13px) on the td and let the cell grow (use height:auto or min-height if a minimum is desired).
  • Prefer applying the background with CSS on the td (or a wrapper div) using background-repeat: repeat-y; background-position: left top;.
  • Avoid height:100% unless all ancestor elements (html, body, table, tr) have explicit heights set — percentage heights depend on parent heights. See MDN on height for details.
  • Use browser developer tools to inspect the computed height of the cell and to verify the background is applied to the expected element.

Example CSS (apply to the left column element):

td.leftCol {
  background: url('left-repeat.gif') repeat-y left top;
  height: auto;
  vertical-align: top;
}

For modern layouts, consider replacing table framing with CSS layout (flex/grid) and placing the repeating graphic on a container element; this avoids many table‑specific quirks. For reference on background tiling and CSS heights, see MDN documentation: background-repeat and height.

Recommended Answers

All 2 Replies

Member Avatar for peter_budo

Did you found your problem with CSS?

Can't see any difference between IE and NN

Member Avatar for jules214

Hi, yeah, sorry, problem resolved...

the left table column had a fixed height which was that of the .gif (ie: 13px) and it should have been fluid at 100%.

Thanks for looking though, and sorry i didn't post to say it had been resolved.

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.