-3

I would like to post the following post on stackoverflow, but I always receive this message in a red box: "Error occured submitting the question." No idea what to do to solve it, there are no boxes with some information about the mistake.

Hi,

I have been coding a site that's working great in Firefox, Chrome and Safari. But in IE, it's not showing up right at all. This is the demoversion of the website: http://demo.wiperstimes.be">Wipers Times

1: IE9 — IE11

I inserted following code for MQ in IE: But not all the MQ are working. - There's a MQ at 1024px, for a max-width of the body, but IE9-11 ignores this MQ. CSS @media screen and (min-width: 1024px) { body { width: 1024px;}

  • IE9-11 doesn't show up the right footer on a desktop screen:

  • On the homepage, there are 2 columns that has to be next to each other: HTML

CSS @media screen and (min-width: 769px) { .index_links { margin-top: 40px; padding: 0 10px 30px 10px; width:45%; float: left; background-color:#C7C7C7; } .index_rechts { margin-top: 40px; padding: 0 10px 30px 10px; width: 45%; float: right;
background-color:#C7C7C7; } }

  • Footer: The footer for small devices is showing up on desktop screens (with 'logo: display: none') HTML CSS @media screen and (min-width: 700px) { .footercolumn_logo { display: inline; padding-right: 40%; } .footercolumn { width: 17%; display: inline-block; text-align: left; margin-top: 20px; } }

1: IE6 — IE8 It looks like everything's going wrong: - The whole site is left-aligned, but it has to be center-aligned. - The header is not as long as the body. - The menu-items aren't next to each other on one line - The two footer columns are showing up on top of each other (nowhere defined)

I don't know where to start with solving these problems. Is there a mistake in the head of my HTML?

<!DOCTYPE html> <html lang="nl"> <head> <title>Wipers Times / Vakantiewoning te Ieper</title> <meta charset="utf-8" /> <meta

name="description" content="Wipers Times>

http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'> http://fonts.googleapis.com/css?family=Rufina' rel='stylesheet' type='text/css'>

</script>

8

There are multiple problems with your post:

  • Don't use Hi and Thanks; these are just noise; we like to focus on the content itself.

  • You didn't format your code blocks; see How do I format my code blocks? on how to indent the blocks so we can read them.

  • Your demo version link isn't working; better to use Markdown syntax for linking; [link text](url to link to) for the inline version. Your link is neither HTML nor Markdown.

Your post should look like:

I have been coding a site that's working great in Firefox, Chrome and Safari.
But in IE, it's not showing up right at all. This is the demoversion of the website: [Wipers Times](http://demo.wiperstimes.be)    

**1: IE9 — IE11**

I inserted following code for MQ in IE: 

    <script type="text/javascript" src="http://modernizr.com/downloads/modernizr-latest.js">

    </script>

But not all the MQ are working.

- There's a MQ at 1024px, for a max-width of the body, but IE9-11 ignores this MQ.

    **CSS**

        @media screen and (min-width: 1024px) {
        body {
        width: 1024px;}

- IE9-11 doesn't show up the right footer on a desktop screen:

- On the homepage, there are 2 columns that has to be next to each other:

    **HTML**

        <div class="index_links">
        <p></p>
        </div>
        <div class="index_rechts">
        <p></p>
        </div>

    **CSS**

        @media screen and (min-width: 769px) {     
        .index_links {
          margin-top: 40px;
          padding: 0 10px 30px 10px;
          width:45%;
          float: left;
          background-color:#C7C7C7;
        }
        .index_rechts {
          margin-top: 40px;
          padding: 0 10px 30px 10px;
          width: 45%;
          float: right;
          background-color:#C7C7C7;
        }
        }

- Footer: The footer for small devices is showing up on desktop screens (with 'logo: display: none')

    **HTML**

        <footer>
          <div class="footercolumn_logo">
            <img class="footer_logo" src="images/logo/logo_wiperstimes.png" alt=""/>
          </div>
          <div class="footercolumn">
          </div>
          <div class="footercolumn">
          </div>
        </footer>

    **CSS**

        @media screen and (min-width: 700px) {    
        .footercolumn_logo {
          display: inline;
          padding-right: 40%;
        } 
        .footercolumn {
          width: 17%;
          display: inline-block;
          text-align: left;
          margin-top: 20px;
        }
        }  

**2: IE6 — IE8**

It looks like everything's going wrong: 

- The whole site is left-aligned, but it has to be center-aligned.
- The header is not as long as the body. 
- The menu-items aren't next to each other on one line
- The two footer columns are showing up on top of each other (nowhere defined)

I don't know where to start with solving these problems. 
Is there a mistake in the head of my HTML?

    <!DOCTYPE html>
    <html lang="nl">
    <head>
    <title>Wipers Times / Vakantiewoning te Ieper</title>
    <meta charset="utf-8" />
    <meta name="description" content="Wipers Times>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
        <link rel="stylesheet" type="text/css" media="all" href="css/reset.css?css=styles/html5reset-1.6.1.v.1344884364" />
        <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Rufina' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="javascript/respond.min.js"></script>
    <script type="text/javascript" src="http://modernizr.com/downloads/modernizr-latest.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="javascript/plugins.js"></script>
    <script src="javascript/helper.js"></script>
    <script src="javascript/script.js"></script>
    <script src="javascript/responsiveslides.min2.js"></script>

     <!-- Media Queries -->
        <link  rel="stylesheet" href="css/mobile-nav.css" media="screen and (min-width: 320px) and (max-width: 768px)">

        <link  rel="stylesheet" href="css/desktop.css" media="screen and (min-width: 769px)">

        <!--[if lt IE 9]>
        <link rel="stylesheet" href="css/desktop.css" media="screen">
        <![endif]-->

        <!--[if (lt IE 9) & (!IEMobile)]>
        <script src="js/selectivizr-1.0.3.min.js"></script>
        <![endif]-->
    </head>

which would render as:

I have been coding a site that's working great in Firefox, Chrome and Safari. But in IE, it's not showing up right at all. This is the demoversion of the website: Wipers Times

1: IE9 — IE11

I inserted following code for MQ in IE:

<script type="text/javascript" src="http://modernizr.com/downloads/modernizr-latest.js">

</script>

But not all the MQ are working.

  • There's a MQ at 1024px, for a max-width of the body, but IE9-11 ignores this MQ.

    CSS

    @media screen and (min-width: 1024px) {
    body {
    width: 1024px;}
    
  • IE9-11 doesn't show up the right footer on a desktop screen:

  • On the homepage, there are 2 columns that has to be next to each other:

    HTML

    <div class="index_links">
    <p></p>
    </div>
    <div class="index_rechts">
    <p></p>
    </div>
    

    CSS

    @media screen and (min-width: 769px) {     
    .index_links {
      margin-top: 40px;
      padding: 0 10px 30px 10px;
      width:45%;
      float: left;
      background-color:#C7C7C7;
    }
    .index_rechts {
      margin-top: 40px;
      padding: 0 10px 30px 10px;
      width: 45%;
      float: right;
      background-color:#C7C7C7;
    }
    }
    
  • Footer: The footer for small devices is showing up on desktop screens (with 'logo: display: none')

    HTML

    <footer>
      <div class="footercolumn_logo">
        <img class="footer_logo" src="images/logo/logo_wiperstimes.png" alt=""/>
      </div>
      <div class="footercolumn">
      </div>
      <div class="footercolumn">
      </div>
    </footer>
    

    CSS

    @media screen and (min-width: 700px) {    
    .footercolumn_logo {
      display: inline;
      padding-right: 40%;
    } 
    .footercolumn {
      width: 17%;
      display: inline-block;
      text-align: left;
      margin-top: 20px;
    }
    }  
    

2: IE6 — IE8

It looks like everything's going wrong:

  • The whole site is left-aligned, but it has to be center-aligned.
  • The header is not as long as the body.
  • The menu-items aren't next to each other on one line
  • The two footer columns are showing up on top of each other (nowhere defined)

I don't know where to start with solving these problems. Is there a mistake in the head of my HTML?

<!DOCTYPE html>
<html lang="nl">
<head>
<title>Wipers Times / Vakantiewoning te Ieper</title>
<meta charset="utf-8" />
<meta name="description" content="Wipers Times>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
  <link rel="stylesheet" type="text/css" media="all" href="css/reset.css?css=styles/html5reset-1.6.1.v.1344884364" />
    <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Rufina' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="javascript/respond.min.js"></script>
<script type="text/javascript" src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="javascript/plugins.js"></script>
<script src="javascript/helper.js"></script>
<script src="javascript/script.js"></script>
<script src="javascript/responsiveslides.min2.js"></script>

 <!-- Media Queries -->
  <link  rel="stylesheet" href="css/mobile-nav.css" media="screen and (min-width: 320px) and (max-width: 768px)">

  <link  rel="stylesheet" href="css/desktop.css" media="screen and (min-width: 769px)">

  <!--[if lt IE 9]>
  <link rel="stylesheet" href="css/desktop.css" media="screen">
  <![endif]-->

  <!--[if (lt IE 9) & (!IEMobile)]>
  <script src="js/selectivizr-1.0.3.min.js"></script>
  <![endif]-->
</head>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .