Member Avatar for kukula

Hi,

I made a website -->
In Chrome it looks as it should. But in Firefox and IE it crashes.

What should I change to make the website to look ok in every browser?
What I shouldn't use to avoid this kind of situation?

  • 4 Contributors
  • 6 Replies
  • 197 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by kukula

Dani AI

Generated

Chrome's rendering can be forgiving where Firefox and IE expose strict differences. and have already pointed to two likely problem areas: use of browser-specific or fragile presentation techniques, and layout that fights the normal document flow. With validation cleared, the quickest route to a stable cross-browser layout is methodical isolation and a few structural fixes.

A practical troubleshooting workflow: open each browser's inspector and compare the computed box model (width, height, padding, margin, display and position). Check the console for script or resource errors that stop layout scripts. Use a binary-disable approach on the stylesheet (turn off half the rules, narrow down to the offending block). Look for vendor-only properties or CSS3 selectors unsupported in older IE and replace them with progressive fallbacks or class-based rules. When absolute positioning is used heavily, try removing or simplifying it — layouts that rely on absolute placement are brittle across engines.

Common, low-effort fixes that often resolve these differences: ensure wrapper elements actually contain the floated/positioned children (use a clearing technique rather than relying on awkward DOM order), prefer classes for presentation instead of fragile attribute-based selectors, and normalize browser defaults to eliminate margin/line-height differences. A simple clearfix to contain floats:

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

Also force IE into standards mode when testing with the usual meta header:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Finally, favor small isolated test pages to reproduce the problem quickly, add a normalize/reset stylesheet to reduce default differences, and move away from hacks that only one engine understands. These steps usually reveal whether the issue is a single CSS rule, a structural markup problem, or a missing fallback that only Chrome was forgiving about.

Recommended Answers

All 6 Replies

Member Avatar for teedoff

You have a few coding errors you could fix first, then see how it renders.

Run your page through the validator.

Member Avatar for kukula

OK I did it. Now validator announce that everything is ok.
What now, because the website is still not working on Firefox and IE.

Member Avatar for floatingDivs

Hi kukula,

It's time to rewrite the site. You've done it using some very unsupported formats that appear to only be working with Chrome.

Example

img[height=223] { ... }

Either make sure to use pixels like this

img[height="223px"] { ... }

or try to NOT use those types of things.

Member Avatar for Biiim

OK I did it. Now validator announce that everything is ok.
What now, because the website is still not working on Firefox and IE.

Welcome to the pain of web design.

Member Avatar for teedoff

As floatingDivs said, your code structure is kind of odd.

Not sure why you need to use all that positioning at all. And you aslo placed <div id="content"> below everything, yet want this div with its backgroundimage to contain everything above it in the code, when really it should wrap around those elements.

I worked on a rework earlier, but got sidetracked and cant get back to it now. But we've given you some things to think about.

Member Avatar for kukula

Welcome to the pain of web design.

hehe, nice!


I see I have to fix me code "a little bit" ;]

Thanks for the advices.

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.