Member Avatar for rfrapp

Hello, my website looks perfectly fine on my iPad (which I created it on) however some of the divs such as for comments overlap other divs. I'm not sure why that is. Also, once you login, the header of the website gets cut off. I think this is due to some sort of CSS error, but I'm not sure. The link to my website is: rfrapp.netau.net/mywebsite/index.php. You can use "admin" and "password" to login in the user login section. Thank you in advance for your assistance. I can provide code for any pages on request.

  • 2 Contributors
  • 1 Reply
  • 123 Views
  • 46 Minutes Discussion Span
  • Latest Post Latest Post by ushajase

Dani AI

Generated

A quick diagnosis based on the thread: the layout problems are coming from manual vertical positioning and from floats that aren’t being contained. noticed a positioned rule on the main content that shifts it vertically. When an element is moved with position offsets it leaves the normal document flow, so nearby blocks can overlap and a header can appear “cut off” even though it still exists in the DOM.

Fixes that produce stable results across devices:

  • Stop using large negative/absolute offsets to position major page regions. Let blocks flow naturally and use margins or padding to create space. If a sticky header is required, give the header a fixed/sticky position and reserve its height on the page so content isn’t hidden underneath.
  • Ensure floated elements are contained by their parent. A common, robust approach is a clearfix on the parent or using overflow: auto (or hidden) to make the parent expand to the floated children.
  • Check stacking context and z-index for the header. A header with no positioning can be obscured by a positioned sibling that overlaps it.

Helpful snippet (apply to the parent that should contain floated children):

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Troubleshooting workflow: open desktop DevTools, toggle responsive/iPad view, inspect computed styles for the header and main wrapper, disable any large top/absolute offsets to see how the flow restores, and watch for floats left uncleared. References that explain these behaviors: MDN — position, MDN — overflow, and a practical clearfix guide from CSS-Tricks.

Member Avatar for ushajase 
#content {
    background-color: #000000;
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
    float: right;
    padding: 5px;
    position: relative;
    top: -587px;
    width: 765px;
}

replace this style... you have to set top:-587..

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.