Margin different in IE and Firefox when using float

cyberseed · #1 Apr 17th, 2007, 10:35

I am trying to get a set of images with a rollover to sit in a container div with a margin of 20px on the right of each block. The problem is when I add float left the margin adds itself to the container block in IE but not FF. Any help, yes please! Note the container should be 400px and is being pushed out to 420px!!!

The css is:

Code: Select all

body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 color: #000000;
 background-color: #FFFFFF;
}
#thumbcontainer {
 height: 200px;
 background-color: #999999;
 width: 400px;
}
#ruller {
 background-color: #FFCC66;
 width: 400px;
}
/* The position has to be absolute or the margin doubles in IE  */
#thumbcontainer a {
 background-color: #FFFFFF;
 border: 1px none #CCCCCC;
 display: block;
 height: 94px;
 width: 180px;
 text-align: center;
 margin: 0px 20px 20px 0px;
 padding-top: 10px;
 padding-bottom: 10px;
 float: left;
}
#thumbcontainer a:hover {
 background-color: #CCCCCC;
 border: 1px none #CCCCCC;
}

Html is:

HTML: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>div gallery 02</title>
<link href="css/global.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="thumbcontainer"><a href="#"><img src="../shared_images/piglets_02.jpg" alt="" width="94" height="94" border="0" /></a><a href="#"><img src="../shared_images/piglets_02.jpg" alt="" width="94" height="94" border="0" /></a></div>
<div id="ruller">400 px</div>
</body>
</html>

Lchad · #2 Apr 17th, 2007, 11:47

This is a screenshot of your code in FF. Is the wrong?

cyberseed · #3 Apr 17th, 2007, 12:05

Quote:

Originally Posted by Lchad

This is a screenshot of your code in FF. Is the wrong?

No thats what I want its what IE does to it
Thanks for the interest - I still feel a bit stupid when it comes to css layouts! And the difference in IE and FF frustrates me greatly!

Lchad · #4 Apr 17th, 2007, 12:18

It's exactly the same in IE7. So is IE 6 the cause of the problem?

cyberseed · #5 Apr 17th, 2007, 13:28

Yes I am using IE6

karinne · #6 Apr 17th, 2007, 13:47

Change your width in #thumbcontainer a { ... } to width: 170px;

cyberseed · #7 Apr 17th, 2007, 14:21

Quote:

Originally Posted by karinne

Change your width in #thumbcontainer a { ... } to width: 170px;

Thanks Karinne but I want the rollover space to be 180px just dont want the extra margin on the container that appears (in IE6) when you add float. I have the thing working inside a table but I am trying to be progressive and use divs where possible.

karinne · #8 Apr 17th, 2007, 14:32

try this

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>div gallery 02</title>
<style type="text/css">
body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 color: #000;
 background-color: #fff;
}
#thumbcontainer {
 height: 200px;
 background-color: #999;
 width: 400px;
}
#ruller {
 background-color: #fc6;
 width: 400px;
}
/* The position has to be absolute or the margin doubles in IE  */
#thumbcontainer a {
 background-color: #fff;
 display: block;
 height: 94px;
 width: 180px;
 text-align: center;
 margin: 0 20px 20px 0;
 padding: 10px 0;
 float: left;
}

#thumbcontainer a.last {
 margin-right: 0;
}

#thumbcontainer a:hover {
 background-color: #ccc;
}</style>

</head>
<body>
<div id="thumbcontainer"><a href="#"><img src="../shared_images/piglets_02.jpg" alt="" width="94" height="94" border="0" /></a> <a href="#" class="last"><img src="../shared_images/piglets_02.jpg" alt="" width="94" height="94" border="0" /></a></div>
<div id="ruller">400 px</div>
</body>
</html>

cyberseed · #9 Apr 17th, 2007, 14:55

Thats fantastic Karinne ta very much. Did not know you could give a class to a link like that. It works in IE6 and FF !!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Strange margin display in firefox only	hhelen	Web Page Design	1	Apr 28th, 2008 15:36
Float problem with Firefox	Emzi	Web Page Design	10	Apr 4th, 2008 12:02
Float: Left with firefox	magnetica	Web Page Design	2	Aug 24th, 2007 16:55
Margin area not tranparent in Firefox (works fine in IE6)	Breazile	Web Page Design	2	Nov 6th, 2005 17:09
site ok in Firefox, not in IE : float problem??	bbbobo	Web Page Design	1	Sep 30th, 2005 08:16

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Margin different in IE and Firefox when using float