Member Avatar for Danthon

After some years form the creation of my internet site I have decided to correct a little paging problem that i left unresolved for a lot of time (one time it wasn't so important...).

The site is created in xhtml e css and the problem is to equalize the length of the page (pratically the height) for all the browser, to better manage the space for the advertising banner.

I have tried to divide the page in variuos div setting the various heights with height and min-height but I can't make it uniform for a problem of the paypal cart code, I think.

I have tried to insert the central column in a table setting the height of the td but the problem stay.

For better understaning the problem I inserted an adsense banner on the right: if you open the page with firefox and then with explorer you will see that the end of this banner finish next to a different text line in the central column, and this make me difficult to manage the space in the bottom.

If you can help me to get, pace after pace, an optimal solution fully compatible with all the browser, that doesn't use hack and is validated in Wc3, I would be very grateful to you.

This is the address of a sample page:

http://www.idee-regalo.biz/regalo-animali.html

Thank you all.

__________________
You have never see like these? ( on german)

  • 3 Contributors
  • 3 Replies
  • 98 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Danthon

Dani AI

Generated

posted a sample page and asked for a cross-browser way to make the page columns line up. did not see the problem in his environment and correctly pointed out that different browsers render boxes and fonts differently. Below is a short, practical checklist and three standards-based fixes that avoid hacks and validate cleanly.

Use this quick diagnostic checklist first:

  • Open developer tools in two different browsers and compare the computed box model (width, padding, border, margin) and computed font metrics for the same elements.
  • Temporarily assign contrasting background colors to each column to see actual boundaries.
  • Add a small CSS reset or normalize.css to remove user-agent defaults, and use box-sizing: border-box globally to make widths predictable (box-sizing docs).

Three practical, standards-compliant fixes (pick one based on target browser support):

  • Faux columns (broadest compatibility): apply a vertically repeating background on the wrapper to visually create equal-height columns. Works in every browser and is validation-friendly. See .

  • CSS table layout: make the wrapper act as a table and the columns as table-cells so they stretch to the same height:

    .wrapper { display: table; width: 100%; }
.col   { display: table-cell; vertical-align: top; }
.sidebar { width: 300px; }

    This is valid CSS and works in older browsers without hacks.

  • Flexbox (modern): simplest for responsive designs and consistent stretching:

    .wrapper { display: flex; align-items: stretch; }
.main    { flex: 1 1 auto; }
.sidebar { width: 300px; }

If a third-party widget injects styles or an iframe, wrap it in a container and reset margins/padding on that wrapper. Only use JavaScript height-matching as a last resort. Validate the final markup with the W3C validator and test in the specific browser versions you need to support.

Recommended Answers

All 3 Replies

Member Avatar for kanaku

I don't see any problems. :(

Member Avatar for MidiMagic

These are fundamental differences in the way IE and Firefox render items. These are some of the differences between IE and Firefox:

- FF places surrounding styles (margins, borders, padding) outside defined widths and heights. IE crams them inside the defined sizes. This makes some things fit differently. The fix is to place only zero surrounding styles in the same tag or style containing size styles.

- FF throws away the entire style if it contains either of the following:
--- A zero value with a unit of measure (e.g. 0px, 0%, opt)
--- A nonzero value without a unit of measure (e.g. 12) on certain styles.

- IE treats images differently than it treats other box objects.

- Each IE font rendering is one pixel higher and wider than the corresponding FF font.

- IE and FF render borders differently.

- IE and FF have different defaults on how to vertically place text inside td tags.

- IE and FF behave differently when content does not fit inside a defined space.

- IE and FF place margins and padding differently with hr tags.

Member Avatar for Danthon

it's a nice problem!

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.