Block borders.

By Aran Deltac on 22 Feb 2005 at 21:19 UTC

OK, I've made myself a new theme and I'm running in to an unpredictable problem. I've tried troubleshooting it buy modifying html, styles, showing/hiding various blocks, and moving around the blocks. Check out my blocks at:

http://www.electroniclife.org/

You'll see that the "Who's online" block title is missing it's top border. I just checked this in IE and it looks fine, so it appears to only be a problem in firefox. ;-{

When I move around the blocks the missing border becomes missing on different blocks and occasionally a blocks gets an extra white border. I've tried just taking out the block html and going through it line by line and everything looks fine.

This is probably just an HTML problem... but, I don't have any better place to post and who knows, maybe the drupal.css file is interfering or it is drupal in some unlikely way.

Any ideas mucho appreicated.

Thanks,

Aran

Comments

Mad

Aran Deltac commented 22 February 2005 at 21:34

It went away and I didn't do anything. Its till there tho, if I move around the blocks it comes back. Oh, poor me, this sucks.

--
http://www.electroniclife.org/

Welcome to CSS Hell!

kbahey commented 22 February 2005 at 21:42

Welcome to CSS Hell!

You must have been a bad boy in a past life, and paying for it by doing cross-browser CSS.

--

2bits.com
Baheyeldin.com

--
Drupal performance tuning and optimization, hosting, development, and consulting: 2bits.com, Inc. and Twitter at: @2bits
Personal blog: Ba

Ya, but...

Aran Deltac commented 22 February 2005 at 21:52

I've been doing CSS since CSS was CSS. I've always figure out how to fix these stupid problems. Plus, I thought firefox was the bomb and now IE is working better than it. Boooooh... does anyone have a tissue for me?

--
http://www.electroniclife.org/

DOM Inspector

tangent commented 22 February 2005 at 22:14

Have you tried browsing the page with Mozilla Dom Inspector? It can easily tell you what styles are applied to the DOM and helps easily troubleshooting these kinds of issues.

It installs as an optional developer extension with Firefox IIRC.

Mozilla rounding errors

Steven commented 23 February 2005 at 00:37

The problem you're experiencing is caused by Mozilla's buggy rounding of decimal coordinates. You probably have a height or padding or margin specified in ems or another fractional unit. Mozilla will occasionally misalign an item 1 pixel down or right, which is what you're experiencing.

The only way to fix it is to tweak the item's margin with a negative fractional number until the problem is gone. I had the same issue trying to get Bluebeach's tabs to look correct regardless of the browser's text size.

--
If you have a problem, please search before posting a question.

Thank you

Aran Deltac commented 9 March 2005 at 21:58

Thank you thank you thank you thank you thank you. You rock. Thanks.

--
http://www.electroniclife.org/

Not again!

Aran Deltac commented 10 March 2005 at 19:05

OK, check this out:

http://www.electroniclife.org/node/99

The block and white stones on the board will randomly seperate by a single pixel. I've tried messing with the margin's and was able to fix this somewhat, but by reducing the margin of the image to -1px it made the top row of stone under-lap the second row. AUGH

It works great on IE, just firefox that is having this issue. I've been through all the stylesheets and changed all em's to px's. Didn't help.

At a loss... anyone?

--
http://www.electroniclife.org/

Drupal.css

slower commented 10 March 2005 at 20:10

If you install the Web Developer extension in Firefox, you can dynamically modify the CSS for a page. Taking your idea, I cleared the entire drupal.css stylesheet, and your top border problem vanished. Try it out.

--
India Ink Web Design