Forum Moderators: not2easy
I am trying to position a line of text on a page using the follow CSS:
#subline {
position: absolute;
left: 360px;
top: 580px;
}
The text renders fine in Firefox, Safari, and Chrome, but it appears too far to the right in IE 8 (and possibly earlier versions)
Is there anything I could add here that would persuade IE to render properly?
Thanks for any advice on this.
I'm afraid we'll need a bit more context.
IE8 should behave properly if fed valid standards compliant code
- IE8 is it in IE8 mode, or do you have it act as if it is IE7?
- Any conditional comments that would apply to IE8 as well?
- Any parents that have gained position?
- how is the size of the element determined ?
A minimal example that still exhibits the problem would be handy, see the pinned posts on how to get that.
Give a relative position to the parent of that paragraph/text and everything will be fine.
Tell me if this doesn't work
Thanks for the welcome and thanks to both for the replies.
I normally use Firefox and Safari on a mac and don't always have access to testing in IE.
I haven't used IE 8 much before and was not aware of the developer tools. So thanks for that info as well! Originally, the browser was set to IE 8 mode, but when I checked the page using IE7 and IE8 compatibility modes, I found the original problem with the horizontal position was compounded by another vertical positioning problem in those modes.
This is the first time I try to build a pure CSS layout from scratch. In the past I've always worked with pre-existing code or templates. So I have quite a bit to learn about inheritance rules and child/parent relationships.
The doctype I'm using is HTML 4.01 as noted below, and the page validates properly on the W3C markup validation service
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
I'm using internal CSS to format the page in two columns with a very basic bare bones layout. I've tried placing the text in question in a <h2> tag and also in a <p> tag. So far, there are no fonts or font sizes defined in the document, so I suppose it's relying purely on defaults.
One interesting point is that I tried replacing the internal CSS for that line with inline CSS:
<p style="position:absolute; left:360px; top:580px;"> line of text</p>
In this case the line was misplaced in firefox and safari as well, although it's position was still different from that of IE. I had to adjust the position quite a bit to get it to sit properly using the inline code. So I know that something is being inherited, but I have to figure out what it is.
dbarasuk, you are probably right about trying the relative position, but I need to figure out which item needs to be modified, and then figure out how to give it a relative position.
Well, I'm not there yet, but I'm starting to understand this problem better. Thanks for the advice. I'm going to do some research on conditional IE comments as well, as I think that could be a solution.
There is a description of the exact problem I encountered on the following page (see "Center Aligning Using the Margin Property" and "Crossbrowser Compatibility Issues"):
[w3schools.com...]
Avoiding the auto margin has given me much more control over consistent rendering of the page.
Thanks again for your input!
