Member Avatar for jpl80

Hello. I've tested my site in many platforms and only seem to have a bug in Safari on Mac OS X. I was hoping somebody could take a look at my page and tell me what I've done wrong or a hack that could fix it?

Thank you so much.

  • 2 Contributors
  • 3 Replies
  • 139 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by jpl80

Dani AI

Generated

Brief diagnostic and practical options that apply to the float/wrap issue described by (and illustrated in ' screenshot). The root cause is almost always a layout that depends on implicit wrapping around a floated image; different rendering engines will place the adjacent block-level box either beside or below that float unless the layout is made explicit.

Floats are removed from normal flow and affect how following boxes are placed; when widths, display types or formatting contexts are left implicit you can get browser differences. See the spec and a solid explainer here: CSS2.1 float rules and MDN float overview.

Three practical approaches that avoid brittle behavior:

  • Use inline-block for the nav so it will sit beside a floated image and align reliably.

    nav {
display: inline-block;
vertical-align: top;
width: 220px; /* explicit width prevents falling below the float */
}

  • Use a modern layout (flexbox) on the parent container for predictable side-by-side placement across modern browsers.

    .container { display: flex; align-items: flex-start; }
.container img { margin-right: 10px; }

  • Create/clear block formatting contexts where appropriate (clearfix or overflow:auto) if you need the parent to contain floats cleanly; see this common clearfix pattern: CSS-Tricks clearfix.

Debug checklist: confirm a standards doctype (quirks mode changes layout), set explicit widths where boxes must sit side-by-side, add temporary backgrounds/borders to visualize box extents, and inspect computed widths in the browser dev tools. Reducing the layout to a minimal test case often reveals whether a margin, width or display value is forcing a block under the float.

Recommended Answers

All 3 Replies

Member Avatar for MattEvans

I see the main bar on the left looking a bit strange using Opera 9 under Linux Mandrake. The picture attached shows how I see that region.

I can't really help you with hacks, But I'd advise the use of tables for tabular parts of a layout =P.

Is that the same problem you were having in Safari?

EDIT: Post up a screenshot of how that region should look, or even how the whole page should look. It will help anyone who checks the link for you to look for differences.

ftoperabug.jpg 38.59 KB
Member Avatar for jpl80

Yes, that is the problem I'm having. I really try to avoid using tables for layout. Anyone other ideas?

Member Avatar for jpl80

Yes, that is the problem I'm having. I really try to avoid using tables for layout. Anyone other ideas?

I fixed it. I simply floated the nav bar to the right. I didn't think I had to do that because the image was floating left. So, I assumed the nav bar would stay to the right of the image. This was the case in IE and FF but not Opera and Safari.

Thanks,

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.