Odd little image margin in FF

Zonglars · #1 Jul 24th, 2007, 00:01

Strange, i know, a glitch in firefox of all things!

I've notice that when firefox renders my images, theres an extra 5-10px on the bottom of the image, which makes the outline bigger and therefore pushes my JS menu down a little too much, so when you try to go onto the menu, you often have to race to it before it disappears, which can be quite annoying. I've tried setting margin and padding to 0 in css, but it's not working.

i've attached a screenshot of what i'm talking about; FF on the left, IE on the right, you'll see what i'm talking about.

Marc · #2 Jul 24th, 2007, 08:03

Try this in your stylesheet...

Quote:

* {margin:0; padding:0;}

Unless you already have it of course! But it is a strange one, as it is usually IE that does that.

Ryan Fait · #3 Jul 24th, 2007, 13:50

Unfortunately, margin/padding won't work for this. You need to set the image to a block element (which can cause other problems).

Code: Select all

<img src="this.jpg" class="block" alt="image" />


<style type="text/css">
  img.block {
    display: block;
  }
</style>

I think this is the only way to get rid of the space, but I'm not 100% sure.

Marc · #4 Jul 24th, 2007, 15:13

I just noticed that, Ryan. Mabey i should read the post more thorough next time.

Zonglars · #5 Jul 24th, 2007, 16:42

Quote:

Originally Posted by Ryan Fait

Unfortunately, margin/padding won't work for this. You need to set the image to a block element (which can cause other problems).

Code: Select all

<img src="this.jpg" class="block" alt="image" />
<style type="text/css">
  img.block {
    display: block;
  }
</style>

I think this is the only way to get rid of the space, but I'm not 100% sure.

nope, unless there's something you can add so they display adjacent to each other

Marc · #6 Jul 24th, 2007, 16:47

can you add this and see?

Quote:

white-space: nowrap;

Zonglars · #7 Jul 24th, 2007, 18:02

nope, nothing, ah well, thankfully i recently added an actual link to the menu sections so that they take you to an index page.

karinne · #8 Jul 24th, 2007, 18:05

Yeah ... Ryan's fix should work. Did you add the class="block" to the images in the question?

How about a link then so we can test stuff on our end

Zonglars · #9 Jul 24th, 2007, 20:48

yes, and here (css for page, css for menu)

might just be the JS for the menu

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Web page margin	dhall	Website Planning	1	Sep 2nd, 2007 04:23
Margin different in IE and Firefox when using float	cyberseed	Web Page Design	8	Apr 17th, 2007 14:55
Why am I getting a margin when not specified	AdRock	Web Page Design	4	Mar 14th, 2007 22:06
margin?	nasumaru	Web Page Design	14	Jan 30th, 2007 21:52
Margin top IE	csa	Web Page Design	5	Apr 6th, 2006 03:45

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Odd little image margin in FF