15 {{ upvoteCount | shortNum }}
15 {{ upvoteCount | shortNum }}

CSS Not Rendering Correctly In IE 8

by Kirk Ward
12 replies
  • WEB DESIGN
    • |
I have a Wordpress website and have added several CSS tags that are similar to the <h1> tag. I use <ph1> etc. to differentiate them as my personal headline tags.

Everything looks fine in Firefox, but the tags are ignored in IE8. What I done did wrong?

The site is at Bean Counters Cookbook | Just another promotion to help you build your local accounting pracitce

Thanks in advance
#correctly #css #rendering
  • Profile picture of the author Niche Kid
    Hi Kirk,

    Using tags like that sounds a bit odd to me. I think the best idea is to use standard tags (eg <span style="">) and set the style to that, then it will work across browsers.

    cheers,
    Simon
    Signature
    {{ DiscussionBoard.errors[4505765].message }}
  • Profile picture of the author Kirk Ward
    Thanks Simon ...

    The tags had been working as they seemed to come across as regular tags when I was using them in my other Wordpress sites. This is the first time they have rendered like this. I thought it was something to do with the new theme.

    Can I use a span to call the tag? I don't know css. This was really just a copy and paste of the h1, h2, h3, etc., tags, with the parameters changed. (The h tags are used elsewhere by the theme, so I did not alter them, merely cloned and modified.)

    cheers, etc.,
    Kirk
    Signature
    "We are not here to sell a parcel of boilers and vats, but the potentiality of growing rich beyond the dreams of avarice."

    Dr. Samuel Johnson (Presiding at the sale of Thrales brewery, London, 1781)
    {{ DiscussionBoard.errors[4506686].message }}
  • Profile picture of the author Tomos Wyn
    As far as I know there isn't such a html tag as the <ph*> ones your using - what your looking for is the <h1> - <h6> tags.

    Running your website through the HTML validator:

    Code:
    http://validator.w3.org/check?uri=http%3A%2F%2Fbeancounterscookbook.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
    It throw several errors, For example the <ph6> tag your using has the error:

    Line 112, Column 5: Element ph6 not allowed as child of element div in this context. (Suppressing further errors from this subtree.)
    If you want to differentiate these tags, why not add a class or id to them? SO they look like so:

    HTML Code:
    <h3 id="yourID"> </h3>
<h3 class="yourClass"> </h3>
    and in your CSS you target it like so:

    Code:
    h3#yourID {
font-size:20px;
color:red;
}

h3.yourClass {
font-size:20px;
font-color:green;
}
    Hope this helps.
    {{ DiscussionBoard.errors[4506869].message }}
  • Profile picture of the author Kirk Ward
    I knew there wasn't any such thing as the ph tag. Not being a css coder, I figured the same code that worked for the h tag would work for a "made up" ph tag. Shows what old fogey's get for thinking.

    Anyhoo, how would I code the span so that I don't have to retype all the style that I was putting into that ph thing I made up?

    What do I put in the style.css and what do I put in the style="" of the span?

    Edit: That's an oops. I started typing from the email notification without reading the post just above. Sorry. I'll be back in a little bit.
    Signature
    "We are not here to sell a parcel of boilers and vats, but the potentiality of growing rich beyond the dreams of avarice."

    Dr. Samuel Johnson (Presiding at the sale of Thrales brewery, London, 1781)
    {{ DiscussionBoard.errors[4506932].message }}
    • Profile picture of the author omavo
      I think bcos you are a little new to CSS, it may be difficult getting your question across.

      To help out, I will like to know exactly what you want to achieve with the span element.

      Do you want all occurrence of a <span> tag rendered in a particular style or just some particular <span>?
      {{ DiscussionBoard.errors[4507000].message }}
  • Profile picture of the author Kirk Ward
    I am using Wordpress themes that have formatted the h tags to coordinate with their theme's style. I don't want to mess with the h tags because they are coordinated.

    But, I do want to add some product pitch pages and squeeze pages that have more impact. And, on those pages, I want to have some really bold, stand-out headlines, sub-heads, etc.

    If I was using a squeeze page theme, or using html only, that probably wouldn't be a problem. But this ain't that, so I'm looking for a way to have shortcuts that I can use for my headlines and sub heads.

    I'm thinking that the ID and Class parameters that Tomos described may be the best way, because then I would still have h tags on the page which would be recognized by "The Big G," where that ph tag junk I created wouldn't.

    What's your take on that? Is there a simpler way?
    Signature
    "We are not here to sell a parcel of boilers and vats, but the potentiality of growing rich beyond the dreams of avarice."

    Dr. Samuel Johnson (Presiding at the sale of Thrales brewery, London, 1781)
    {{ DiscussionBoard.errors[4507303].message }}
  • Profile picture of the author espe
    Its because IE sucks,

    A good place to start is CSS Tutorial
    and don't worry that much about IE because most people use Chrome or Firefox
    {{ DiscussionBoard.errors[4507325].message }}
    • Profile picture of the author seosoldier
      Originally Posted by espe View Post

      Its because IE sucks,

      A good place to start is CSS Tutorial
      and don't worry that much about IE because most people use Chrome or Firefox
      I hate IE too but when you're trying to make money in IM you cannot throw out a whole segment of people just becuase you don't like their browser! ;-D
      Signature
      > My Promise To You: I will never promote any offer I do not truly believe to be 100% worth buying and using!
      https://bestwaterfilter.us
      {{ DiscussionBoard.errors[4544363].message }}
  • Profile picture of the author Kirk Ward
    Hi Espe,

    Unfortunately, I'm not in the IM market and while 51% of my visitors use Firefox, and 11% use Chrome, 35% still use IE in one form or another. So I have to pay attention to them.

    I tried going through several CSS tutorials, but my understanding was very low level.

    Thanks
    Signature
    "We are not here to sell a parcel of boilers and vats, but the potentiality of growing rich beyond the dreams of avarice."

    Dr. Samuel Johnson (Presiding at the sale of Thrales brewery, London, 1781)
    {{ DiscussionBoard.errors[4508024].message }}
    • Profile picture of the author jimbob
      Here's what I'd do:

      Start with just one of the tags which is causing an issue, such as the ph6 tag 'Tired of giving away calendars?'.

      1. Change it from ph6 to h2, and remove that <center> tag
      2. Give it a class of redHeadline, i.e. <h2 class="redHeadline">
      3. Replace ph6 in your stylesheet with:
      Code:
      h2.redHeadline {
font-size: 22px;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-weight: bold;
text-align: center;
color: #9D0000;
}
      4. See how it looks.

      HTH

      James
      Signature

      James Simpson

      {{ DiscussionBoard.errors[4508158].message }}
  • Profile picture of the author Kirk Ward
    Thanks JimBob,

    I'll be trying that.

    I just finished getting the content up for the pitch, so I'll start working to straighten out the css as soon as I finish my "mid-afternoon snack before Dearly Beloved catches me in the kitchen" break.
    Signature
    "We are not here to sell a parcel of boilers and vats, but the potentiality of growing rich beyond the dreams of avarice."

    Dr. Samuel Johnson (Presiding at the sale of Thrales brewery, London, 1781)
    {{ DiscussionBoard.errors[4508212].message }}
  • Profile picture of the author Kirk Ward
    Okay, it took me a few days of fighting alligators while trying to drain the swamp, but I got it done, and it looks great.

    Since I was used to the ph2 thingys, I just made that the class, as such ...

    Code:
    h2.ph2 {
font-size: 22px;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-weight: bold;
text-align: center;
color: #9D0000;
}
    and called it with ...

    <h2 class="ph2">
    Signature
    "We are not here to sell a parcel of boilers and vats, but the potentiality of growing rich beyond the dreams of avarice."

    Dr. Samuel Johnson (Presiding at the sale of Thrales brewery, London, 1781)
    {{ DiscussionBoard.errors[4543401].message }}

Trending Topics