Member Avatar for Veneficus

I am SICK and TIRED of having this stupid issue. I have a very simple page. A background image which fits the entire browser with:

position: absolute;
top:0px;
left:0px;
width:100%;
height:100%;
z-index:0;

And I also have a blasted table which has two lines and a small image. The problem is that when I re-size the page, HUGE white regions appear to the right and the bottom! Why does this happen?! Here is the code for the table. Please tell me how should I get around this without breaking anything.

#text
{
	position:absolute;
	z-index:2;
	font-family:Times New Roman;
	font-size:32px;
	color:#FFF;
	top:auto;
	text-align:center;
	width: 100%;
	border: 5px hidden;
	overflow: hidden;
}

Thanks,
C

  • 2 Contributors
  • 3 Replies
  • 63 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by ko ko

Dani AI

Generated

Quick diagnosis and concrete fixes built from the thread: the nasty right/bottom whitespace is usually caused by one or more of these things — invalid HTML (the table in post #3 is malformed and uses deprecated presentational attributes), browser default page margins, and layout elements that are forced to full size while inner spacing (cell spacing, padding, borders or images) makes the overall box wider/taller than the viewport. was right to call out resetting defaults, but that alone won't fix malformed markup or deprecated attributes.

Concrete steps (in order)

  1. Fix the HTML: make sure the table has proper opening/closing tags and header cells live inside a row. Remove deprecated attributes like align, cellspacing and hspace; use CSS instead. Validate the page with the W3C HTML validator if unsure.
  2. Use a safe full-bleed background method rather than a manually positioned element. Prefer the CSS background shorthand with background-size: cover or a fixed positioned element that uses inset/transform so it never forces extra width (see MDN on background-size).
  3. Make the overlay container responsive and constrained so spacing inside it cannot push page width beyond the viewport. Example approach:
/* centered overlay that cannot create horizontal overflow */
.overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  max-width: 90vw;
  box-sizing: border-box;
  padding: 1rem;
  text-align: center;
}
  1. Replace cellspacing with border-spacing (or use border-collapse) and ensure images inside the table scale down (img { max-width: 100%; height: auto; }).

Debugging tips: use browser devtools to inspect computed widths and the element that exceeds documentElement.clientWidth. Temporarily outline elements or toggle overflow to find the offender. References: MDN on background-size (background-size), table semantics (table element), and the W3C validator (W3C Validator).

Recommended Answers

All 3 Replies

Member Avatar for ko ko

Post HTML.

Member Avatar for Veneficus

Post HTML.

<table align="center" cellspacing="50px" id="text" hspace="0px"/>
<th>You are now on the About page. </th>
<tr><td>Some descriptive text to be inserted here in order to give information  </td></tr>
<tr><td><a href="index.htm"/> <img src="_images/Cross.jpg" width="80" height="80"/></td></tr>
</table>
Member Avatar for ko ko

Reset the margin and padding.

body {
    margin: 0;
    padding: 0;
}

This one is universal format. It will set margin and padding to '0' for all HTML elements.

* {
    margin: 0;
    padding: 0;
}
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.