Template works in Chrome, not in Firefox or IE

  • My hands are in my hair right now. A few days ago my biggest problem was that the fonts wouldn’t bold in Chrome and IE, Firefox looked fine. Now, however, my theme (get_peppered, on https://www.getpeppered.com) looks all scrambled in IE and Firefox. Is this a CSS problem? I have tried to use firebug to discover problems, but don’t know what to look for.

    Thanks, Femke

Viewing 12 replies - 1 through 12 (of 12 total)

  • Have you tried validating your site pages? That might cause inconsistencies in browsers. It looks like there are some markup and CSS errors.

    Thread Starter getpeppered

    (@getpeppered)

    Thank you for your quick response. I am not sure what validating means. What kind of CSS and markup errors do you see? I have been looking at my css but can’t quite figure it out…

    Did you read the page I linked to? It explains what validating means — there are websites that check your code for errors. Looking at the results from those checkers will help you identify the errors. Some may be related to versions of html or css — and not consequential, but other error could mess up the formatting of the entire page — so it could be related to your problems.

    If you look at your opening <!Doctype html> tag it is not fully declared. Sometimes this will piss off IE and work fine in chrome.

    Try Changing the opening tag to 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    This should give you a more consistent result.

    Hope this helps.

    Thread Starter getpeppered

    (@getpeppered)

    @mat: Thanks! I changed the !doctype, but that didn’t make a difference.

    @wpyogi: I did read the page you linked to. I don’t know, though, which level of CSS I am using — I didn’t create it myself…how can I figure that out? I tried validating using CSS 2.1 and it says that there are sparse errors…but I have no clue what that means. Any words of wisdom on that?

    Whatever you did actually did fix quite a bit of the problems. I looked at the CSS and found the following things that will fix at least some of the remaining problems. In the style.css file make the following changes: 

    #tagline02 {
    float: right;
    height: auto;
    margin: -35px 0 0;  CHANGE THE 275px TO -35px
    padding: 0 50px;
    width: auto;
}
    #navigation_section .left {
    height: 51px;
    width: 660px;  CHANGE THE 630px TO 660px
}

    You should still learn enough about CSS and Validating pages to sort out errors yourself — there is tons of information and resources online — many of which are linked to in the Codex CSS section.

    Thread Starter getpeppered

    (@getpeppered)

    @wpyogi! Thank you SOOOO much, I really appreciate your help! That fixed it in Firefox and IE looks much better as well. The only problem I have now is with the bolding that doesn’t work in Chrome (it does in Firefox). I can’t see which errors in the validation would correlate with that. Also, which validation CSS level did you use?

    I just use the W3C validator. Which bold does not work? I’m using Firefox on a Mac — but if I know where the problem is I’ll look at the code and see if there are any obvious errors. Sometimes it’s as simple as a missing semi-colon!

    Thread Starter getpeppered

    (@getpeppered)

    I have Firefox on a regular computer, which is where the fonts are bold (as per my request)..Chrome doesn’t bold. I noticed in the validator that there are parse errors and from what I gathered that could be a semi-colon error…so that might have something to do with it?

    Okay, I looked at the errors in detail and found some that you should fix — the first one might be causing the bold problems.

    Line 110: In this code below, add px to the 16 — so it should be 16px/40px.

    #content_section h4 .alignright a {font:bold 16/40px "Trebuchet MS";}

    Line 185: THE fffff has to be either fff or ffffff (3 or 6, not 5)
    border:2px dashed #fffff;

    Line 209: this is coded wrong — the !important is in the wrong place.
    !important #right_section {margin:0; padding:0; width:232px; height:auto; float:right;}
    BUT using !important can be problematic — and changing this may screw up other things on your page – so don’t change it yet — or if you do, keep a back-up copy of the file before you do any changes.
    it should be:
    #right_section {margin:0 !important; padding:0 !important; width:232px !important; height:auto !important; float:right !important;}

    Lines 320 & 321: in these two lines auro is a typo — it should be auto
    .lightbox .mid {margin:0; padding:0; width:700px; height:auro;

    See if those help. But like I said, save a copy of the CSS file FIRST.

    Thread Starter getpeppered

    (@getpeppered)

    Hi WPyogi,

    I made a few changes, but the bold issue seems to be because Chrome (user agent css) actually overrides the style sheet. Do you know how to get around that?

    TNX Femke

    No, sorry I don’t know anything about Chrome. But you try looking in the Preferences or online info about it.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Template works in Chrome, not in Firefox or IE’ is closed to new replies.