Member Avatar for tefflox

Please visit http://listenlight.net/02/contents in IE and / or Opera. You will find the "archive | notes" links are scrolled off to the right, when they should be right under the rose-colored bars. Also, the same type of links are in the poem pages when they should be on the bottom of the page, as they seem to be working right at http://listenlight.net/02/bramhall

How do I fix this problem. I get a lot of IE viewers, so it needs a quick rememdy. Thank you. :-)

  • 4 Contributors
  • 8 Replies
  • 107 Views
  • 4 Weeks Discussion Span
  • Latest Post Latest Post by bryan110

Dani AI

Generated

Quick diagnosis: the links running off to the right are a classic sign of using positioned elements in a layout without accounting for how positioning removes elements from the normal flow. As spotted, an absolutely positioned info block is very likely the trigger; as warned, absolute positioning for whole-page layout can be brittle across resolutions; and ’s suggestion to preserve vertical spacing with a top offset is a pragmatic workaround but not always the most robust fix.

Safer, more maintainable approaches

  • Prefer flow-based layout (avoid positioning elements simply to push other content down). For a modern sticky footer or page shell, use Flexbox so header, content and footer behave predictably:
html, body { height:100%; margin:0; }
.page { min-height:100%; display:flex; flex-direction:column; }
.content { flex:1; }   /* grows to fill available space */
.footer { /* sits at bottom when content is short */ }
  • To pin something to the viewport bottom (always visible), use position:fixed; bottom:0; left:0; width:100%. To pin to the bottom of a specific container, give the container position:relative and the child position:absolute; bottom:0; left:0; right:0;.

Making each div act like its own “page”

  • Wrap the stage in a positioned container and absolutely size child panels to full area; toggle display or z-index to show one at a time:
.container { position:relative; }
.panel { position:absolute; top:0; left:0; right:0; bottom:0; }

Troubleshooting checklist

  • Ensure a standards DOCTYPE so browsers use consistent layout rules (MDN: Doctype).
  • If you must use absolute positioning, make sure the intended parent is position:relative so offsets are calculated against it (MDN: position).
  • Look for un-cleared floats or any element with fixed width larger than its container; use dev tools to inspect computed sizes.
  • For legacy IE quirks, prefer flow solutions or provide targeted fallbacks.

These steps explain why the quick fixes in the thread worked and offer robust replacements that scale across browsers and resolutions.

Recommended Answers

All 8 Replies

Member Avatar for katarey

Hi there,

hay put this code and your problem will solve :)
will work with IE, FireFox, Opera i have tested,
you can see here :


please let me know if you got any prob. with this ;)

<!--Head/CSS is same as you have already -->
<body>
<table width="80%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
    <td><span style="text-align:left;"><a href="/02/yu"><big>Tim Yu</big></a></span></td>
    <td><span style="text-align:left;"><a href="/02/bramhall"><big>Allen Bramhall</big></a></span></td>
    <td><span style="text-align:left;"><a href="/02/moore"><big>Katrinka Moore</big></a></span></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><span style="text-align:left;"><a href="/02/bach"><big>Glenn Bach</big></a></span></td>
    <td><span style="text-align:left;"><a href="/02/switaj"><big>Elizabeth Switaj</big></a></span></td>
    <td><span style="text-align:left;"><a href="/02/shippy"><big>Peter Jay Shippy</big></a></span></td>
  </tr>
  <tr>
    <td colspan="4">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="4" class="light">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="4" class="dark">&nbsp;</td>
  </tr>
</table>
<table width="80%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><p style="text-align:right; font-size:85%;"><br style="line-height:50px" />
        <a href="/02/archive">archive</a> | <a href="/02/notes">notes</a></p></td>
  </tr>
</table>
</body>

Rahul Dev Katarey

Member Avatar for tefflox

thanks for helping, but I don't want the contents flush at the top, I want to preserve the initial break. Can you tell me why the "archive | notes" part of your solution doesn't scroll off to the right?

Member Avatar for tefflox

Is there a way to make <div> sections absolute, so that each div class or is like it's own page?

also, how do i position something absolutely on the bottom of the page?

Member Avatar for katarey

Dear tefflox


Please have a look at do you want this?
Absolute position is not good idea because there are many users have deferent resolution

Rahul

Member Avatar for FC Jamison

Well...if you want to keep the 382px space using the code supplied by katarey, give the table an id (let's call it "names") and then set a top margin in the css.

#names { margin-top: 382px; }
Member Avatar for katarey

Dear tefflox


Please have a look at do you want this?
Absolute position is not good idea because there are many users have deferent resolution

Rahul

yes i also add padding for this :)

<div style=" padding-top:382px; width:80%;">

rahul

Member Avatar for bryan110

Hi,

I think your problem is in the id="info" of the <div>
it' in the
div#info {position: absolute; top: 520px; right: 25%; }
where you have to change it , change the top.
I hope this is what you want.

Good Luck,

Bryan.

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.