SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard Goof's Avatar
    Join Date
    Feb 2001
    Location
    Pittsburgh, PA
    Posts
    1,154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background-Image on Mozilla/Netscape

    I'm working on a site that uses table-less CSS positioning, and it all looks fine in IE, but Mozilla 1.4/Netscape won't render background images properly. I have something like:
    Code:
    #header {
      background-image: URL("nav_top_bg.gif");
    }
    This looks fine on IE, and Mozilla will use the background, but for some reason it renders it vertically offset by something like 13 pixels, so the background is misaligned with all of my other graphics. I've had problems finding this problem documented. Has anyone else had it? Does anyone know of good resources for a work-around?

    Thanks,
    Goof
    Nathan Rutman
    A slightly offbeat creative.

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Goof
    I'm working on a site that uses table-less CSS positioning, and it all looks fine in IE, but Mozilla 1.4/Netscape won't render background images properly. I have something like:
    Code:
    #header {
      background-image: URL("nav_top_bg.gif");
    }
    This looks fine on IE, and Mozilla will use the background, but for some reason it renders it vertically offset by something like 13 pixels, so the background is misaligned with all of my other graphics. I've had problems finding this problem documented. Has anyone else had it? Does anyone know of good resources for a work-around?

    Thanks,
    Goof
    Goof,
    Is your background-image meant to be repeated?

  3. #3
    SitePoint Wizard Goof's Avatar
    Join Date
    Feb 2001
    Location
    Pittsburgh, PA
    Posts
    1,154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes...it's something like a 1x30 pixel image in a 100% x 30 pixel div, so it's meant to repeat horizontally but not vertically.
    Nathan Rutman
    A slightly offbeat creative.

  4. #4
    SitePoint Addict Fire59's Avatar
    Join Date
    Aug 2003
    Location
    mn
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    after background image put in

    Code:
    background-repeat: repeat-x;

  5. #5
    SitePoint Wizard Goof's Avatar
    Join Date
    Feb 2001
    Location
    Pittsburgh, PA
    Posts
    1,154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Added the repeat-x setting, but it didn't fix the problem. For some reason Mozilla doesn't start the background at the first pixel but jumps down and tiles it incorrectly. I've posted it to www.nathanrutman.com/resume - take a look at it with IE and Mozilla/NS. It's kinda strange.

    Goof
    Nathan Rutman
    A slightly offbeat creative.

  6. #6
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The <p> tag inside the <div id="navtop"> is ending up with top/bottom margins, due to mozilla's default stylesheet. Zero them and you're away.

    I'd guess that IE uses padding for its default para spacing (which is presumably why you've explicitly zeroed the padding on all paragraphs).

    I find that whenever I try to play with padding/margins, it's worth explicity setting both, or things get lively when you go cross browser, due to differences in various browsers' default styles.

    Finally, when you run into this sort of issue, try firing up mozilla's DOM inspector (view the page, hit ctrl-shift-I) and have a look at the CSS style rules and/or computed style on the objects involved. It's a great way of figuring out how mozilla "sees" the page, and can even help when it's other browsers that have gone loopy.

  7. #7
    The doctor is in... silver trophy MarcusJT's Avatar
    Join Date
    Jan 2002
    Location
    London
    Posts
    3,509
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by blufive
    Finally, when you run into this sort of issue, try firing up mozilla's DOM inspector (view the page, hit ctrl-shift-I) and have a look at the CSS style rules and/or computed style on the objects involved. It's a great way of figuring out how mozilla "sees" the page, and can even help when it's other browsers that have gone loopy.
    Dreamweaver MX 2004 has similar functionality too. Very handy!
    MarcusJT
    - former ASP web developer / former SPF "ASP Guru"
    - *very* old blog with some useful ASP code

    - Please think, Google, and search these forums before posting!

  8. #8
    SitePoint Wizard Goof's Avatar
    Join Date
    Feb 2001
    Location
    Pittsburgh, PA
    Posts
    1,154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You guys are beautiful. Thanks! However, I took a look at Mozilla's DOM inspector and I'm not sure how it would have helped me in this case. It seemed to only show me the CSS attributes I had specified, not the defaults. Am I missing something?

    Thanks again!
    Goof
    Nathan Rutman
    A slightly offbeat creative.

  9. #9
    SitePoint Zealot
    Join Date
    Aug 2003
    Location
    Sydney
    Posts
    187
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tried background-position?

  10. #10
    SitePoint Wizard Goof's Avatar
    Join Date
    Feb 2001
    Location
    Pittsburgh, PA
    Posts
    1,154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The default margin on the P tag was the problem. Once I fixed it everything looked beautiful, both in IE and Mozilla.

    Goof
    Nathan Rutman
    A slightly offbeat creative.

  11. #11
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It seemed to only show me the CSS attributes I had specified, not the defaults. Am I missing something?
    Arg. It's not the easiest user interface to describe. If you were the other side of the room, I'd come point at things on your screen, but you seem to be a tad bit further away than that.

    Apologies if too much of this is preaching to the choir, but I reckon it's probably easier to do it all in one go.

    So, from the top:

    Once you've got the DOM Inspector up, you should have two panes below the address bar (there's an optional third browser pane at the bottom, but it doeasn't come up by default for me...)

    Select a "real" DOM node (a "body" or "p" element, rather than a text node). If you keep your browser window (still showing the site) visible to one side, note how bits of the page flash a red border as you do this. This is a good way of figuring out just which page element is misbehaving, by looking for gaps that shouldn't be there, and what element they are "inside".

    In the top left corner of the right-hand pane, you should see a line of text, saying "object - (something)" For me, on startup, it shows "Object- DOM Node".

    Just to the left of that text is a button. Click it, and you should get a drop-down list, showing six items. We're interested in two of them: CSS Style Rules and Computed Style.

    1) CSS Style Rules
    This option will split the right hand pane in two. The top half is a list of ALL the style rules being applied. For each item, it shows:
    - the rule (the CSS selector, I think)
    - the location of the rule (which style sheet it came from - anything starting "resource:///" is mozilla's built-in default)
    (plus a couple of other things, inlcuding the line number in the source file)
    If you select an individual rule, the lower right pane will show the individual declarations ("margin: 0", and so on) in that rule.
    By clicking on the "resource:///" rule(s) you can see what mozilla is applying by default.
    If you want to really show off, you can right-click on a declaration of interest and edit it to see what happens (this is a hot-edit, affecting only the in-memory copy, not the source file, so don't get too giddy)

    2) Computed Style
    This shows ALL the GENERATED style rules for the element (background, margins, font, colors, list-style, z-index, the works, even if only a single "padding: 0" declaration has been applied). Note that all colours will be rgb, and all dimensions will be in pixels, since it's all been translated from whatever units are in the CSS - this is what Mozilla is actually using to render the page, after the CSS/HTML parsers have done their thing.

    For your page, I clicked around the DOM tree, trying to work out which element was causing the gap. I narrowed it down pretty quickly to the #navtop and the <p> inside it, which had some very suspicious-looking gaps above and below them. Then I flicked over to computed style and looked at the padding and margin on those two elements. The <p> had about 13px of margin. Over to CSS Rules - your CSS had no margins specified, but moz's default HMTL style sheet was throwing in a 1em top/bottom margin. Right-click, edit, change the margin to 0, page now looks great. Problem found.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •