Need some help please. FF and IE differences.

  • quickfix

    (@quickfix)


    19 years ago

    I’ve been editing the default Kubrik theme to fit my own design and I’m running into some display differences between FF and IE. All I’ve really done is change the CSS with header.php file. Take a look at my site and code to see what I’m talking about:

    Site: http://www.danallison.com

    Code:

    body { background: url(“<?php bloginfo(‘stylesheet_directory’); ?>/images/scan_bg.gif”); } <?php /* Checks to see whether it needs a sidebar or not */ if ((! $withcomments) && (! is_single()) && (! is_page())) { ?>

    #page { background: url(“<?php bloginfo(‘stylesheet_directory’); ?>/images/container_bg.gif”) repeat-y top; border: none; } <?php } else { // No sidebar ?>

    #page { background: url(“<?php bloginfo(‘stylesheet_directory’); ?>/images/container_bgwide.gif”) repeat-y top; border: none; } <?php } ?>

    #header01 { background: url(“<?php bloginfo(‘stylesheet_directory’); ?>/images/test01.jpg”) no-repeat bottom center; }

    #header02 { background: url(“<?php bloginfo(‘stylesheet_directory’); ?>/images/header02.gif”) no-repeat bottom center; }

    #footer { background: url(“<?php bloginfo(‘stylesheet_directory’); ?>/images/kubrickfooter.jpg”) no-repeat bottom; border: none;}

    /* Because the template is slightly different, size-wise, with images, this needs to be set here
    If you don’t want to use the template’s images, you can also delete the following two lines. */

    #header01 { margin: 0 !important; margin: 0 0 0 1px; padding: 1px; height: 198px; width: 758px; }

    #header02 { margin: 0 !important; margin: 0 0 0 1px; padding: 1px; height: 8px; width: 758px; }

    #headerimg01 { margin: 7px 9px 0; height: 192px; width: 740px; }

    #headerimg02 { margin: 7px 9px 0; height: 32px; width: 740px; }

    /* END IMAGE CSS */

    /* To ease the insertion of a personal header image, I have done it in such a way,
    that you simply drop in an image called ‘personalheader.jpg’ into your /images/
    directory. Dimensions should be at least 760px x 200px. Anything above that will
    get cropped off of the image. */

    /*

    #headerimg01 { background: url(‘<?php bloginfo(‘stylesheet_directory’); ?>/images/personalheader.jpg’) no-repeat top;}

    */

    </style>

    <?php wp_get_archives(‘type=monthly&format=link’); ?>

    <?php wp_head(); ?>
    </head>
    <body>

    <div id=”page”>

    <div id=”header01″>
    <div id=”headerimg01″>
    <h1>“><?php bloginfo(‘name’); ?></h1>
    </div>
    </div>
    <div id=”header02″>
    <div id=”headerimg02″>
    <div class=”description”><?php bloginfo(‘description’); ?></div>
    </div>
    </div>

    In IE the second header displays the way I want (I think I need to adjust my bg image as the border scanline it of a pixel), but in FF the secind header is lost behind the first header.

    Does anyone see a problem with my setup and code? Thanks for your help in advance.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter quickfix

    (@quickfix)

    19 years ago

    nobody?

    chuckblue

    (@chuckblue)

    19 years ago

    we were all asleep… I am somewhat awake now.

    Lets see. I like the header pic. But I am someone who likes snow in pictures, not in real life.

    The categories are easy to find, but the sub-categories sort of blend in with the background. My eyes anyway.

    Otherwise I find the text easy to read.

    Thread Starter quickfix

    (@quickfix)

    19 years ago

    Thanks for the comments Chuck, but I’m looking for help on some display/format problems.

    Basically I want what shows up in IE to show up in FF.

    (if I had a dime for everytime I said that, I’d be poor)
    😀

    Thread Starter quickfix

    (@quickfix)

    19 years ago

    oops double post

    vkaryl

    (@vkaryl)

    19 years ago

    Generally you’re better off to make display right in a standards compliant browser first (that is, FF, Moz, or Opera from a pc standpoint) and then tweak IE into line…. unfortunately there really isn’t a one size fits all set of fixits for IE’s multitude of display stupidities.

    Have you tried looking at the css info in the codex? http://www.tamba2.org.uk/wordpress/graphicalcss/align/index.html

    rwatkins

    (@rwatkins)

    19 years ago

    Hey,

    The reason you are seeing what you are seeing seems to be because of height: 8px to #header02.

    Try changing it to:

    #header02 { margin: 0 !important; margin: 0 0 0 1px; padding: 1px; height: 32px; width: 758px; }

    That displays the grey line on my Firefox (although it is still missing the border from the top – height: 40px displays that but with a bit of weirdness still in Firefox). The reason why IE displays it “correctly” is because it makes the boxes expand should their contents be larger, however firefox makes things overflow and thus you were only seeing an 8px high image instead of one that is 32px high.

    Something to work with, anyway.

    Rob

    Thread Starter quickfix

    (@quickfix)

    19 years ago

    Hey thanks rwatkins… I got it to work. I changed the height to 38 and it looks just the way I want it… in FF and IE no less.

    Thanks for your help everyone. Maybe next time I’ll be more thorough when editing my code.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Need some help please. FF and IE differences.’ is closed to new replies.