another IE8, firefox markup problem

[Jeff]

hi

this markup create a tiny space between this markup and the rest of the
content on the page. the space is maybe 3 px height.

The problem occur because the inner div override the outer div, with that I
mean that the content of inner div flows over the outer div.

The problem occur first when I add second picture the inner div, with only 1
image the space isn't there...

The width of the images is 113px, and height:31px;

The background-color:Lime is just for debuging, to show how large the inner
div is. it looks like below the images the div have 3 px padding, it is this
padding which create the space problem..

another problem:
not sure if margin-top:76px is any good but I want the inner div to be
placed to the bottom right of the outer div...

<div style="width:960px; height:108px;
background-image:url('Images/Background/helloworld.jpg');">
<div style="float:right; background-color:Lime; margin-top:76px;">
<a href="Pages/Default.aspx"><img src="Images/test1.png"
style="border-style:none;" /></a>
<a href="Pages/Default.aspx"><img src="Images/test2.png"
style="border-style:none;" /></a>
</div>
</div>

any suggestions?

 

[Guest]

hi

this markup create a tiny space between this markup and the rest of the
content on the page. the space is maybe 3 px height.

The problem occur because the inner div override the outer div, with that I
mean that the content of inner div flows over the outer div.

The problem occur first when I add second picture the inner div, with only 1
image the space isn't there...

The width of the images is 113px, and height:31px;

The background-color:Lime is just for debuging, to show how large the inner
div is. it looks like below the images the div have 3 px padding, it is this
padding which create the space problem..

another problem:
not sure if margin-top:76px is any good but I want the inner div to be
placed to the bottom right of the outer div...

<div style="width:960px; height:108px;
background-image:url('Images/Background/helloworld.jpg');">
    <div style="float:right; background-color:Lime; margin-top:76px;">
        <a href="Pages/Default.aspx"><img src="Images/test1.png"
style="border-style:none;" /></a>
        <a href="Pages/Default.aspx"><img src="Images/test2.png"
style="border-style:none;" /></a>
   </div>
</div>

any suggestions?

Try to remove space and line breaks between tags within the div
container

....margin-top:76px;"><a....</a><a...</a></div>....

Hope this helps

 

[Jeff]

Try to remove space and line breaks between tags within the div
container

....margin-top:76px;"><a....</a><a...</a></div>....

I thought that wouldn't fix the problem, now I'm in full surprise as it
actually fixed the problem.

cheers

 

[Guest]

Try to remove space and line breaks between tags within the div
container

...margin-top:76px;"><a....</a><a...</a></div>....

I thought that wouldn't fix the problem, now I'm in full surprise as it
actually fixed the problem.

cheers  

Great! Glad you got that working, I think the problem is because of
the space (a space for a letter) and if font size is big you see that
as a space between the images. You can also try to set font-size (e.g.
font-size: 1) to see if it helps.

Cheers