Alignment issue in IE

HTML & CSS
1

Hello ,

I’ve searched up and down for this issue, which seems to be a common one but I have yet to find a solution for this.

My web page displays perfectly in Firefox and Chrome but not in IE.

Please note : am very much new to the development and still in learning curve .

Any help/ pointers would be appreciated.

Code :–

!!! 5

%html
%title
- if @channel
= @channel
- if @date
= " on #{@date}"
= " — "

%meta{charset: “utf-8”}
%link{rel: “stylesheet”, href: “/style.css”}
%link{rel: “shortcut icon”, href: “/favicon.png”}

  • if @channel
    %meta{name: ‘description’, content: “channel #{@channel} IRC chat logs”}
  • if @messages && @messages.empty?
    %meta{name: ‘robots’, content: ‘noindex’}

%script{src: “https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js”}
%script{src: “/jquery.ba-hashchange.min.js”}
%script{src: “/application.js”}

%body
%section#channels
%section#calendar
%pre.clock= Time.now.gmtime.strftime(‘%H:%M UTC’)
%pre= calendar(@channel, @date, !@channel.nil?)

  - if @channel
    %section#options
      %a{href: '#', id: 'clear_selection'}> Clear selection
      %form{action: channel_url(@channel, 'search')}
        %input{placeholder: 'Enter keywords', id: 'search-box', name: 'q', value: params[:q]}
        %input{type: 'submit', value: 'Search'}
        %a{href: '/help/search'}
          ?

  %ul
    %li{class: "#{"current" unless @channel}"}
      %a{href: '/'} Console

    - @channels.each do |channel|
      %li{class: "#{"current" if channel == @channel}"}
        %a{href: channel_url(channel)}= channel

= yield

= erb :_analytics
2

Hi, Welcome to Sitepoint :slight_smile:

I’m afraid that code means nothing to me as we only understand css and html in the css forum :slight_smile: That code looks like some asp or something similar. What we need from you is the html that the browser sees. Just view source from the browser and copy the output from there which will be vanilla html.

We also need all the css that goes with it as html without css means nothing (and vice versa).

Here are some tips on how to post your message so that we can help you quicker.

As a quick guess I would ask whether you have a current valid doctype on your page otherwise all bets are off as far as IE is concerned.

If you can post html and css (use code tags when you post code into the forum) or better still a link to the offending page would be better:)

3

Small adding:

  • The code seems to be [U]ERB[/U], a feature of the Ruby programming language.
  • The “!!! 5” in the code means: <!doctype html> = html5.
  • But indeed it doesn’t give any further information about the used html, css and javascripts, needed to analyze the problem, as Paul O’B said.
  • BTW, version 1.7.0 of jQuery is rather old. The latest stable version with support for IE<9 is vs. 1.10.2 ([U]see here[/U] for download).

While the !Doctype is html5, and IE doesn’t perform as intended, it is also important to know in what IE-version(s) the problem is occurring.
Is it IE7, IE8, IE9, IE10, or some of them, or all of them?

4

Thank you for your posts, yes it’s in ruby. Will let you know if i found any new solution. Once again Thank you