DOCTYPE, Browser Compatibility, or CSS issue? - CSS-Tricks

This topic is empty.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
December 17, 2013 at 2:23 pm #158544

owlinargyle
Participant

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" "http://www.w3.org/TR/html4/loose.dtd"> (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?

December 17, 2013 at 2:43 pm #158546
Alen
Participant
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
```

```
December 17, 2013 at 4:50 pm #158553
Merri
Participant
Played around with it until got it somewhat working similarly between browsers: http://codepen.io/Merri/pen/KbuHn

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.
December 18, 2013 at 8:09 am #158609

owlinargyle
Participant

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.
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

The forum ‘CSS’ is closed to new topics and replies.