Forums

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

Home › Forums › CSS › IE layout issues.

  • This topic is empty.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • September 19, 2012 at 7:10 am #39918
    patamcollins
    Member

    Hi folks, first time poster. Completely new to CSS. Got myself in a bit of a pickle. Volunteered to re-do a website for a friends parents company not long ago, thinking “how hard can it be?” Having not done any coding since learning HTML in highschool this was a big mistake. Anyways I am now neck deep in this, do not know what I am doing and cannot just pull out.

    the site: http://lynnvalleymfg.com/home/

    Anyways enough background, my issue is that my layout is being messed around by IE. Issue #1 is the elements of my header are being pushed all around in IE 8. Doesn’t have any problem in any other browser. Issue#2 is there is a horizontal bar running across the page mid-way that for some reason is linking to the last item on my nav menu. This is appearing in both IE 8 and 9 but not chrome or firefox (dunno about safari or opera haven`t checked) Anyways the site is live and I just wanted to wash my hands of this whole damn thing asap, so pleease help meeee.

    September 19, 2012 at 9:45 am #110354
    jkinney768
    Participant

    For Issue #2, you have a border-top on your `

    `. If you take that out, the horizontal bar should go away.
    September 19, 2012 at 7:22 pm #110411
    patamcollins
    Member

    Thank you for the prompt response jkinney, I’ll try that tomorrow when I go in to work on it.

    September 19, 2012 at 8:31 pm #110414
    TheDoc
    Member

    1) `` is not a real element. Change it to `

    ` if that’s the term you’d like to use. The same should be applied to ``.

    Fixing the above might solve all of your IE issues.

    September 20, 2012 at 2:48 pm #110448
    patamcollins
    Member

    thank you TheDoc,I did what you recommended defining this with the “div=id”, and removed the border-top on my footer as jkinney768 suggested. These worked as temporary work arounds, however on another forum I’ve found that likely the issue has to do with the inability of IE 8 to see HTML5. The solution that was recommended to me was to use something called the HTML5shim/shiv (located @ http://code.google.com/p/html5shiv/). After reviewing a bit more it seems that this indeed would solve my various IE spawned design issues (such as the transparency value not being read) However I have no idea how to insert the HTML5shim into my code. Even after downloading the file and reading the readme I’m still quite confused. If anyone would be capable of providing me a step-by-step geared towards newbies at how to do so I would be very much appreciative.

    Thank you

    September 20, 2012 at 2:58 pm #110449
    Senff
    Participant

    The quick and dirty way:

    1) Drop the shiv file (html5shiv.js) in the wp-includes/js folder

    2) Open wp-content/themes/fiver/header.php and add the following code somewhere before the CSS call (so maybe, right after the line with <HEAD>):



    <--![endif]-->

    And check if that works.

    Adding the HTML5 Shiv will not make IE magically show all kinds of CSS3 effects like shadows and rounded corners, though. It will only make IE “recognize” HTML5-based tags such as HEADER, FOOTER, SECTION, etc. instead of ignoring them or treat them as inline elements.

    For the record, the subject of this thread is incorrect. It’s not IE messing with your layout, it’s you messing with IE. :)

    September 20, 2012 at 3:33 pm #110452
    TheDoc
    Member

    Sorry, I saw an html5 js file and just assumed you were including the shiv already.

    You would still need to make the changes that I mentioned earlier, though. Can’t use elements that don’t exist!

    September 20, 2012 at 4:04 pm #110453
    patamcollins
    Member

    Thanks for the advice!

    September 20, 2012 at 4:23 pm #110454
    Senff
    Participant

    @TheDoc: you actually can, all browsers will handle something like <TROGDOR> just fine. For IE you need an extra script of course (document.createElement(‘trogdor’);), but I’m just being a wiseass here — you CAN use elements that don’t exist. That’s exactly what the HTML5shiv enables for IE. ;)

    September 20, 2012 at 4:26 pm #110456
    TheDoc
    Member

    But you *shouldn’t*, being the important thing to take away.

    September 20, 2012 at 5:40 pm #110457
    Senff
    Participant

    Hm, not sure. Personally, I wouldn’t have a problem if someone would use a tag like <CTA> (for example) for a CTA box. I’m not 100% sure if that’s ok technically, etc, but what’d be wrong about it from a semantic point of view?

    Not trying to argue, just discussing where we should draw the line creating our own tags/code.

    September 21, 2012 at 1:10 am #110476
    kevinvance
    Participant

    Hi guys, was reading through the thread, just wanted to jump in.
    RE: Creating your own tags: @Senff, it’s a Web Standards issue more than anything. Doing that kind of stuff willy nilly might not be a big deal to you in your own markup, but it’s not good for the web overall.

    In the case of the HTML5shiv, yeah it’s enabling the use of elements that particular browser wouldn’t support otherwise, but it’s with a purpose, and the tags being enabled are part of an agreed upon standard that we all share. IMO, we shouldn’t ever create tags just for ourselves like that.

    September 21, 2012 at 5:31 am #110491
    Senff
    Participant

    @kevinvance: agreed! However, it’s also an opportunity (?) to move the web forward. If you take SASS for example, that’s something that the community created because CSS doesn’t support nesting, and there was a need for it. I’ll be very surprised if that type of thing will NOT be included in regular CSS in a few years.

    If there would be a need for a new tag, let’s say <CTA> for argument’s sake, and more and more people would use it, then it might be a good starting point to get it included in the spec — again, because there’s clearly a need for it.

    Now of course this is very idealistic and simplistic, and I wouldn’t recommend to just throw in new tags whenever, but I hope you see what I mean. :)

    September 21, 2012 at 12:11 pm #110511
    kevinvance
    Participant

    In the case of Sass, it’s a tool that was built that *compiles* to standards compliant CSS. So pretty different.
    I do see where you’re coming from, with moving the web forward if there is a legit need for something. I just don’t agree that it should start with non standards-compliant markup in any one person’s text editor and project.

    Again, I do see where you’re coming from, though.

    Have a great weekend, man!

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