another IE8, firefox markup problem

  • Thread starter Thread starter Jeff
  • Start date Start date
J

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?
 
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 thatI
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?
Click to expand...

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

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

Hope this helps
 
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 :)
 
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  :)
Click to expand...

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
 
Back
Top