The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS DOCTYPE, Browser Compatibility, or CSS issue?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #158544

    I’m not sure if this is a DOCTYPE, Browser Compatibility, or CSS issue, but it’s driving me crazy. Maybe you guys will have some insight.

    We recently updated our website from having no DOCTYPE defined (Yikes!!) to <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""> (There’s still a lot of old code on it.)

    We have a login box at the top of the page, with a button positioned with CSS to the right of the two fields. This displays perfectly in IE8 and higher and Firefox and Chrome. This is what the CSS looks like: My Codepen

    When users view the site with browsers that are lower than IE8, the login box will appear shifted slightly to the left, overlapping the login fields, and then they aren’t able to login.

    At first to troubleshoot the issue, we’d been recommending that they clear their cache and temporarily internet files, restart their browsers, restart PCs. But this doesn’t seem to work. Choosing to upgrade their browsers to IE8 or higher is the only option that does. These users are outside of our network, so we’re nervous about recommending they make software changes to their PCs.

    Is it the DOCTYPE that’s not being recognized in IE7 or the CSS? Or maybe something else going on here?


    DOCTYPE should not be the issue. If you have to support older version of IE just use conditional tag to load separate style to fixes the alignment.

    so something like

    <!--[if IE 7 ]>
      <link href="ie-specific-style.css">

    Played around with it until got it somewhat working similarly between browsers:

    Changed styles:

    /* Login Form */
    .loginform {
      line-height: 40px;
      overflow: auto;
      text-align: right;
    .loginform ul {
      float: left;
      line-height: normal;
      list-style-type: none;
      list-style-position: outside;
      margin: 0px;
      padding: 0px;
    .loginform li{
      padding: 1px;
    #loginFormBtn {
      display: inline-block;
      *display: inline;
      vertical-align: middle;
      padding-right: 5px;
      white-space: nowrap;
    /* added one property hack to the end: */
    .loginBtn {
      *padding: 6px 7px;

    Also made the input fields accessible atleast in IE8’s IE7 mode.

    Note I also changed #loginFormBtn element into a span.


    Creating a separate IE7 stylesheet actually worked really well. But the form won’t submit. At first, I thought it was getting hung up on our mobile redirect script, but I commented that out, and it’s still not submitting the form.

    Could it be that IE7 doesn’t recognize the input button correctly? I have it defined as a Class in the from, but the Type isn’t actually defined in the CSS.

    Since that’s technically a new issue, I’m going to start it as a new thread.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.