Positioning Problem With Thin Lines

[ProblemHelpPlease]

Does anyone know if their is a problem with browsers displaying thin graphics (10px height by 900px width) using divs in css.I have a graphic set to display 70px from the top of the page and 15px from the left, and it works perfectly on IE7 on XP but on IE7 on Vista its displays 80px from the top instead.All other divs using the same coding display ok on both systems its just when I use thin graphics that I have the problem.

[jlhaslip]

Post a link or your code, please.

[ProblemHelpPlease]

css file

.purplebar { position:absolute; left:25px; top:80px; z-index:2; }

html code

<div class="purplebar"><img src="purplebar.gif" width="900" height="10" alt="" border="0"></div>

[jlhaslip]

top:80px;

That'll do it.And the code you provide is a small part of the page. There may be other influences acting on the element, but we don't know what because the code is such a small part of the page..Ensure you have a Strict Doctype for IE to be in Standards Compliant Mode.If you still have the same issue, post a link or a complete code inside bbcode code tags.Thanks.

[ProblemHelpPlease]

I made an error in my first post I meant to say that the grpahic should be 80px from the top as per the code and it is displaying 70px from the top on vista with IE7 but 80px with XP and IE7I can't post the complete code as it is several thosuand lines long and I can't link to the page for security reasons.I was asking the question incase anyone was aware of a particular error with certain browsers that causes this issue.It is just puzzling why only thin graphics have this problem. If I make the same graphic 50 px in height without changing any other code then it works perfectly, and all other items on the page use the same css positioning and work ok.I had a similar problem with safari which nobody else seemed to know about and that turned out to be a problem with the browser that was fixed in version 3, but this seems that it is more related to vista than the browser.If I look at the div with the dev toolbar then it is in the right place (80px from the top) but the grpahic starts 10px down inside the div, so the css seems ok and is in the correct position, its the graphic that is in the wrong place inside the div, how is this possible?Think I might be locating the problem (not the solution yet) if i make the graphic 100 height instead of 10 height then it moves back to the top of the div rather than sitting in the middle of the divUPDATE: changed the graphic to 25px height and it now sits at the top of the div and because the extra 15px is hidden behind another graphic it looks ok on the screen so this should work as a solution to the problem. It stil doesnt explain why a 10px height graphic doesnt work though. Anyone got any ideas?

[jlhaslip]

Just wondering if there is a Margin or padding on a containing element.Check by using the Firefox Add-on 'firebug' or the Web Developer's Extension would be the way i would do that.Too bad the page can't be linked here.

[ProblemHelpPlease]

Just wondering if there is a Margin or padding on a containing element.Check by using the Firefox Add-on 'firebug' or the Web Developer's Extension would be the way i would do that.Too bad the page can't be linked here.

The div is inside another container div that juat has postitoning on it, no padding or margin elements. All of the other divs are within the container div as well so I would of expected them all to behave the same.The fact it works on xp and not on vista whilst both using the same fully updated browser is confusing. If it was a case of it not working on firefox then I would understand but to have the same browser and different operating systems is the odd bit.I have recreated the same problem on a new page Thin Line Problem The top image is not in the div correctly , but the thicker bottom image is.I would be interested to know if the top img is aligned correctly within its div or not and what browser you are viewing on. I have been using the dev toolbar to show the outline of the div for viewing in IE.

[ProblemHelpPlease]

I would really appreciate it if anyone viewing this could have a look at the problem mentioned in this post at this link and tell me what browser and operating system you are using and if you have the same problem or not.I don't want to spend time trying to fix an issue if it is only occuring on my PC.

[jlhaslip]

80 px and 180 px to the top of each line.Linux Ubuntu and Firefox 3

[ProblemHelpPlease]

80 px and 180 px to the top of each line.Linux Ubuntu and Firefox 3

Looks like it must be vista with ie7 only then. Still can't work out why its doing it, suggests a browser problem rather than a coding issue.Thanks for looking

[ProblemHelpPlease]

I've added a border to the divs so that anyone can see if they have the problem mentioned in this post on their pc without needing to measure anything.If someone with Vista and IE7 could have a look at this link and see if the top purple bar is aligned to the top of the div as it should be or if it is sat in the middle of the div.