Member Avatar for OsaMasw

Every time when I design a website I say who cares about IE , but that's not a professional way to design
so I need help in making my design comaptible with all browsers
this design in chrom and firefox
53f1b261927ecccc0dff023ac4c27f0f

but in IE its looks like

ef88efcec644c2ec62b503af50378cb2

full code for the page I cannot embed because its too long
so visit this site to see it live

Edited by pritaeas because: Moved.
  • 2 Contributors
  • 4 Replies
  • 224 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by OsaMasw

Dani AI

Generated

Short, practical follow-ups that build on what posted and found.

Browsers differ on newer layout features, so pick a baseline that always works and enhance from there. If the layout is flowing text (newspaper style) a JavaScript columnizer will reproduce that effect reliably in older IE; if it’s a grid of cards, prefer a flex/grid implementation with a simple float fallback for legacy browsers. (caniuse.com)

Use feature detection rather than browser sniffing. Feature queries (@supports) let you apply modern CSS only where it’s understood, and tools like Modernizr add helpful classes you can target in CSS/JS for fallbacks. That approach avoids fragile version checks and keeps the site maintainable. (developer.mozilla.org)

Two small, actionable examples you can apply right away:

  • CSS strategy: give every item a float-based rule as the baseline, then enable flexbox for capable browsers with an @supports block so modern browsers get the nicer layout without breaking older ones.
/* baseline for old browsers */
.item { float:left; width:20%; box-sizing:border-box; }

/* enhanced for modern browsers */
@supports (display: flex) {
  .container { display:flex; flex-wrap:wrap; }
  .item { float:none; width:calc(20% - 10px); }
}
  • If you need true multi-column flow in old IE, use a JS polyfill like Columnizer to split content at runtime instead of relying on newer CSS only. Initialization is simple (jQuery + columnizer). ()

Final checks and policy: ensure a valid HTML5 doctype and that pages are not forced into an old document mode (X-UA-Compatible), test in IE’s dev tools or BrowserStack, and consider whether supporting very-old IE versions is still worth the cost—Microsoft has retired legacy IE and prefers Edge/IE mode for enterprise compatibility. (blogs.windows.com)

Recommended Answers

All 4 Replies

Member Avatar for Member #671080

It looks fine in IE10.
There are lots of CSS hacks to fix most of the 'inconsistencies' of previous versions of IE. If you do a search for ie css hacks you'll find a host of possibilities.
You may want to decide which previous version of IE you want your sites to be viewable on as each version seems to need it's own hacks.

Member Avatar for OsaMasw

its working on IE 10 but its lack somtimes :(, hope I find an easy way to solve this

Member Avatar for Member #671080

I had a look at your CSS file and you are using lots of CSS3 properties.
The spacing isue you have is because you are using:

-moz-column-count:5; /* Firefox */
-webkit-column-count:5; /* Safari and Chrome */
column-count:5;

Looking at the property description on W3Schools (they do still have some usefull info) it shows the browser compatibility.

Note: The column-count property is not supported in Internet Explorer 9 and earlier versions.

Edited by Member #671080
Member Avatar for OsaMasw

WAW thats great to know thanks to inform this.I'll try to find alternative solution for IE .

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.