Forums

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

Home › Forums › CSS › UL menu won't display in IE8. CSS or DOCTYPE issue?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • December 6, 2013 at 11:14 am #157886
    owlinargyle
    Participant

    We have a UL menu that works perfectly in IE 10, but won’t work in IE8. Here is the code: Codepen

    This is what it looks like when the site displays in IE 8.

    I’m not sure if it’s a CSS issue or an something else, as we’d recently made some changes to our site in order to conform to WCAG standards; such as adding a DOCTYPE. We’ve tried <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    and <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">.

    The browser also keeps requiring us to change it out of Compatibility settings to make various other visual settings display correctly. Such as no longer centering the entire design. (Our site is not a responsive design site.)

    I am clearing the browser cache and refreshing each time I retest my changes in the browser, but nothing I’ve tried is having any effect on the menu.

    If anyone has some insight on this, I would really appreciate it. I’m trying to fix this by COB so we don’t have to back out the changes. =(

    THANKS!

    December 6, 2013 at 12:49 pm #157894
    jkinney768
    Participant

    Why not use html5 doctype?

    Do you have a link to an actual demo of the page? CSS wouldn’t be changing your compatibility settings, usually it’s something else. I’ve had a similar issue to what you’re describing and it turned out to be an issue using Modernizr. If you have a link to a demo, that would help us be able to solve it faster.

    December 6, 2013 at 1:28 pm #157895
    owlinargyle
    Participant

    I provided a link to my code pen, because its a secure site I’m working on.

    Yeah, it’s not the DOCTYPE afterall. When I went back to my test site, it was working fine. Turned out it was how IE8 was interpreting the positioning of the DIVs that come before the UL elements, because not all of the CSS elements had been properly copied over. Apparently, my teammate was copying my code over line by line instead of copying the entire file. /eyeroll

    Anyway, it’s all worked out now. =)

    December 6, 2013 at 2:55 pm #157898
    Merri
    Participant

    My eyes paid attention to the 1px difference between #newMenu and the menu items.

    http://codepen.io/Merri/pen/rIKBz

    So I fixed that, removed “noise styles” that I considered unnecessary and also commented what everything does. Changed font-sizes to both px and rems to introduce those as a plausible solution to the font-size: 0; issue.

    Now the links determine the height of #newMenu ul and thus the height of the #newMenu as well. This makes it easier to restyle.

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