Member Avatar for sm3truckin

The "Blog Archive" widget in my Blogger nav bar has the first ~2 letters cropped off when viewed in IE7.0. any idea how to fix this?? (http://truckinthroughlife.blogspot.com)

the cropping's consistent in every tier, even though the position/padding's obvs different. also, changing css for .widget-list or .widget-content padding/margin/position has no effect

Also, on a related note, why would the grey post count number after each label go to a 2nd line in IE?

Firefox, obviously superior, renders everything with perfect spacing :)

  • 4 Contributors
  • 6 Replies
  • 138 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Quick, practical diagnostics for the IE7 cropping that reported. The symptom (first letters clipped across every tier) plus 's note that the archive arrows are missing and 's observation that the archive container is involved all point to a layout/box-model interaction in IE7 rather than a font problem. Known IE7 quirks to check: hasLayout, floated containers, list-style/background-image spacing, and overflow/white-space handling.

Steps to reproduce/test and quick fixes to try:

  • Visually outline the archive list boxes (temporarily add an obvious border or background) to see which element is clipping text. That shows whether the anchor, li or wrapper is the culprit.
  • Force IE's layout on the inline text element (often fixes clipping):
.widget-archive li a {
  display: inline-block;
  zoom: 1;
}
  • Prevent the post-count from wrapping to a second line by keeping it inline:
.widget-archive .count {
  white-space: nowrap;
  display: inline-block;
  margin-left: 6px;
}

Other targeted checks and notes tied to earlier replies: 's float suggestion is valid — remove or temporarily disable floats on parents to see if the letters reappear. If the arrow graphics are provided via a missing background image (as flagged), the missing image can change expected padding; try disabling the image rule or switching to list-style-type:none to test spacing changes. Because traced the behavior to the archive container, inspect padding/overflow on that parent — overflow:hidden or a too-small width often causes clipping.

If a browser-specific override is needed, use an IE7-only stylesheet via conditional comments to avoid affecting other browsers. Also follow 's practical advice: keep id/class naming consistent (lowercase) and ensure selectors exactly match the markup to avoid selector mismatches between browsers.

Recommended Answers

All 6 Replies

Member Avatar for MidiMagic

I noticed that the arrow point images are not appearing. Where do those come from, and what kind of file are they?

Member Avatar for 0Superman5

The "Blog Archive" widget in my Blogger nav bar has the first ~2 letters cropped off when viewed in IE7.0. any idea how to fix this?? (http://truckinthroughlife.blogspot.com)

the cropping's consistent in every tier, even though the position/padding's obvs different. also, changing css for .widget-list or .widget-content padding/margin/position has no effect

Also, on a related note, why would the grey post count number after each label go to a 2nd line in IE?

Firefox, obviously superior, renders everything with perfect spacing :)

Are any of your paragraphs or page headers set to float? I ran into an issue a while back where I had floating parahraphs and headers. IE shifted the last two letters of the paraghrapgh down onto its own line. Taking off the float property solved the problem.

Member Avatar for sm3truckin

I noticed that the arrow point images are not appearing. Where do those come from, and what kind of file are they?

The arrows are internal to the Blogger widget, one of the main reasons this is complicated. I assume that the image file is somewhere central to Blogger, but I don't have access to it. To date, I haven't seen a blogger-powered blog with archive arrows different from that ...

Member Avatar for sm3truckin

Are any of your paragraphs or page headers set to float?

I checked, and no paragraph/headers float. The navigation bar itself is set to float (left), but I don't think that's what you're referring to, right?

Member Avatar for FC Jamison

I have isolated the problem to the container

<div id='ArchiveList'>

I did not see any css associated with this id...but there is some script that affects is at the bottom of the code at line 1915.

I hope that at least gives you a starting point.

Member Avatar for MidiMagic

Watch using mixed case in ids and classes. IE gets confused with this. Until they fix this, all ids and classes should be entirely lower case.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.