Pixel Positioning

Forum Moderators: not2easy

Message Too Old, No Replies

Pixel Positioning

StoutFiles

6:29 pm on Mar 8, 2010 (gmt 0)

I have a page with just an image and I need to place text on the image at exact spots. However, Firefox and IE aren't getting along as usual...IE takes the text and moves it 2-3px down compared to Firefox. Anyway to make them do the same thing?

Code:

<html>
<head>

<style type="text/css">
* {
padding: 0;
margin: 0;
border-collapse: collapse;
}

img
{
border-style: none;
padding: 0px;
margin: 0px;
}
</style>

</head>
<body bgcolor="000000">

<img src="print_page.png">


<DIV STYLE="position:absolute; top:146px; left:640px; width:200px; height:10px">
<FONT SIZE="2" FACE="Verdana" COLOR="000"><b>Example text</b></FONT>
</DIV>

</body>
</html>

Demaestro

7:42 pm on Mar 8, 2010 (gmt 0)

This may help, you can try wrapping it in a container div who's position is set to relative and has no margin.

<div id="container" STYLE="position:relative; margin:0px;>
<img src="print_page.png">


<DIV STYLE="position:absolute; top:146px; left:640px; width:200px; height:10px">
<FONT SIZE="2" FACE="Verdana" COLOR="000"><b>Example text</b></FONT>
</DIV>

</div>

StoutFiles

8:12 pm on Mar 8, 2010 (gmt 0)

Same result. I've noticed the image is...fuzzier in Firefox than in IE. The lines on the form are slightly thicker on Firefox and it may be throwing off the placement. The pixels could be fine, but the image might not be.

Demaestro

10:26 pm on Mar 8, 2010 (gmt 0)

I used to often see "fuzzier" images in FF, I never resolved what it was though. I haven't noticed it as much lately, only when I reduce text size really small.

I wonder if setting the border="0" and margin:0 padding:0 on the image itself would help.

It could be that IE put a border on it but only shows it when wrapped in an <a> tag.

I am guessing now though.

Something I do sometimes is use firefox developer toolbar addon and use the outline feature to outline problem elements. Sometimes you see the outline a few pixels off due to padding or margins.

drhowarddrfine

1:03 am on Mar 9, 2010 (gmt 0)

It's not IE and FF not getting along, it's IE, period. You will never get IE to attempt to perform like other far more modern browsers, such as FF, without a doctype. Add this to your first line of markup:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Then let's see where we stand but never, ever trust IE to do anything right.

drhowarddrfine

1:50 am on Mar 9, 2010 (gmt 0)

I rewrote your markup for this century but I don't think this is doing what you want. Note the change in the doctype:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head> 

<style type="text/css"> 
div{
    position:absolute;
    top:146px;
    left:640px;
    width:200px;
    height:10px;
    font-size:2em;
    font-family: Verdana;
    color:#000
}
</style>

</head>
<body>

<img src="1.gif">

<!--Text to position--> 
<div>
<b>Example text</b>
</div>

</body> 
</html>

StoutFiles

3:16 am on Mar 9, 2010 (gmt 0)

I've given it the loose doctype since I originally posted, I'll try the strict later.

Demaestro

2:55 pm on Mar 9, 2010 (gmt 0)

Stout,

You can always use JS to reposition the image after page load.

a little JS at the end of the page that reads

If IE:
->set height = (height - 2)
->set width = (width - 2)

Or what ever values get it where you want.

Demaestro

4:25 pm on Mar 9, 2010 (gmt 0)

Sorry I meant

If IE:
->set top = (top - 2)
->set bottom = (bottom - 2)

drhowarddrfine

6:59 pm on Mar 9, 2010 (gmt 0)

I've given it the loose doctype since I originally posted, I'll try the strict later.

The loose doctype is only there to satisfy the validator since you are using old, deprecated markup. Changing it to strict won't change how the page is rendered.