Member Avatar for OsaMasw

Hello there,
after weeks of works and test the project on different web browsers I noticed that my site not working propably on IE9 and its totally missed up :(, how can I fix this problem
test this link

  • 3 Contributors
  • 9 Replies
  • 193 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by OsaMasw

Dani AI

Generated

Good catch by on the stray closing tag and the float/clearing tip from — that explains why the header fell apart. For the remaining IE layout/CSS3 problems the highest‑value checks are: make sure the page is rendering in standards mode, and confirm the browser isn’t being forced into an older IE document mode. A minimal, correct starting header looks like this (doctype first; X‑UA‑Compatible early in head):

<!DOCTYPE html>

<!-- inside <head> and as high as possible -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

(developer.mozilla.org)

Use Internet Explorer’s F12 developer tools to see the active Document Mode and the console, and to inspect the login box’s computed styles (display/visibility/opacity/transform/position/z-index). Toggle Document Mode to reproduce the bug (IE7/8 vs IE9). A couple of quick, practical techniques that help reveal invisible/layouted-off elements:

/* temporary visual debug */
* { outline: 1px dashed red !important; }

/* modern clearfix (preferred to inserting empty <div> elements) */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

(learn.microsoft.com)

Notes on CSS3 features and fallbacks: border-radius and box-shadow are supported in IE9 and later, so if those effects are missing while testing in “IE9” it usually means the browser is actually rendering in an older mode or the stylesheet isn’t loading. Conditional comments (an IE‑only stylesheet technique suggested earlier) target IE9 and older only — they were removed in later engines — so prefer feature detection (Modernizr) and build‑time tooling (Autoprefixer) or targeted polyfills for legacy IE. For projects that must support IE8/older, options include CSS3PIE or image fallbacks, but those come with caveats (performance, path/behavior quirks). (developer.mozilla.org)

Practical prioritization: confirm <!DOCTYPE html> + X‑UA‑Compatible, open F12 and check Document Mode, inspect computed styles for the login element and its ancestors (overflow/z‑index/position), and then apply feature detection or selective fallbacks only for truly legacy targets. If the login element is still missing after those checks, the computed‑style screenshot and the minimal HTML/CSS snippet that reproduces the issue will make a targeted fix straightforward.

Recommended Answers

All 9 Replies

Member Avatar for JorgeM

You'll need to be more specific as to what is not working. Keep in mind that CSS3 modules are all not yet supported across all common browsers. What CSS3 property are you having trouble with?

Member Avatar for AleMonteiro

OMG, it's really really messed up.

I think you'll need to go in steps, fixing a thing each time.

The first thing that I noted is a HTML markup error, there's a </div> that has no begining tag, after the <div id="headerWrapper"> closing tag.

Member Avatar for OsaMasw

I fixed all html markup errors but I think its the header which missed up everything

Member Avatar for AleMonteiro

After <div id="nav" style="float: right;"></div>
Insert <div style="clean: both;"></div>

Member Avatar for JorgeM

Should be clear instead or clean, i beleive.

<div style="clear: both;"></div>

Member Avatar for AleMonteiro

JorgeM, yes, you're right =)
My mistake

Member Avatar for OsaMasw

Great, thanks JorgeM and AleMonteiro , that solved the header issue, still the login box which is not appear at all.
, I have an idea, if I create a css style only for IE to arrange other elements in screen could that solve my other design problems ? and which attribute can I use ? I really love border-raduis and box-shadow .

Member Avatar for AleMonteiro

Yes, it's a good idea to have a style sheet only for IE in your case.

You can do it like this:

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

Take a look at this site for more info: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

Member Avatar for OsaMasw

Thanks for help, I'll start to create new css for idiot "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.