Hello,
I've got an issue when displaying a page in IE. In Firefox there don't seem to be any issues, but yet in IE the second paragraph is aligned all weird. However, if I refresh the page the text aligns itself correctly and does so until I restart my computer or what. Even emptying my cache won't show the problem again. I've no idea what I'm doing wrong as it's appearing correctly when I refresh the page and that.
Here is the coding. It's two paragraphs using css drop shadows.
.shadow { position:relative; display:block; color:#fff; }
.shadow span { position:absolute; display:block; top:0px; }
.shadow:before { display:block; padding:1px; content: attr(title); color:#666; }
.main {position: absolute; left: 16px; right: 2px; font-size: 10pt}
.par {position: absolute; text-align: right; left: 60px; right: 50px; font-size: 10pt; line-height: 170%}
.text1 {position: absolute; left: 1px; top: 1px; color: #000000}
.shadow1 {position: absolute; color: #FFFFFF}
</style>
</head>
<body>
<div class="main">
<p class="text1">Presenting proof positive that </p>
<p class="shadow1">Presenting proof positive that </p>
</div>
<br><br><br><br>
<div class="par">
<p class="text1"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/subheaderb.png"><br>In a private back-room, </p>
<p class="shadow1"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/subheader.png"><br>In a private back-room, </p>
</div>Odd -- I didn't think IE even supports :before -- <!-- m --><a class="postlink" href="http://www.quirksmode.org/css/beforeafter.html">http://www.quirksmode.org/css/beforeafter.html</a><!-- m -->
Which version of IE are you using?I'm using IE 7. This was the only cross browser solution I could think off for a drop shadow. I can't explain this issue at all, it works when I refresh the page. If it works then.. should work when I first initally launch the page.Have you validated your coding, and checked to make sure your file sizes are OK? It could be that it is taking a long time for the CSS/images to load. Clicking on "refresh" would load this from the cache, leaving only the "unloaded" content to be pulled in by the browser.
KDLAI did use the validated tool in the CSS section and it gave me an error with <HTML><BODY>... saying there was an error with the H coming after <. So that kind of left me scratching my head.
I was wondering if it could be a load issue, but didn't think anymore about it. I shall try to better optimize the images and that within the document and see if that changes anything.I experimented with this and I have no idea what effect you are after. Can you explain what you are trying to do?Re validator: If you selected the "direct input" option, and copied the whole document into the textbox, then you'll get weird errors like that.WebJoel: I'm just trying to do a text drop shadow and align one paragraph to the left. Then align the second paragraph to the right moved in a bit.
Re validator: I just uploaded the .php file and got the weird error.
I've got an issue when displaying a page in IE. In Firefox there don't seem to be any issues, but yet in IE the second paragraph is aligned all weird. However, if I refresh the page the text aligns itself correctly and does so until I restart my computer or what. Even emptying my cache won't show the problem again. I've no idea what I'm doing wrong as it's appearing correctly when I refresh the page and that.
Here is the coding. It's two paragraphs using css drop shadows.
.shadow { position:relative; display:block; color:#fff; }
.shadow span { position:absolute; display:block; top:0px; }
.shadow:before { display:block; padding:1px; content: attr(title); color:#666; }
.main {position: absolute; left: 16px; right: 2px; font-size: 10pt}
.par {position: absolute; text-align: right; left: 60px; right: 50px; font-size: 10pt; line-height: 170%}
.text1 {position: absolute; left: 1px; top: 1px; color: #000000}
.shadow1 {position: absolute; color: #FFFFFF}
</style>
</head>
<body>
<div class="main">
<p class="text1">Presenting proof positive that </p>
<p class="shadow1">Presenting proof positive that </p>
</div>
<br><br><br><br>
<div class="par">
<p class="text1"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/subheaderb.png"><br>In a private back-room, </p>
<p class="shadow1"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/subheader.png"><br>In a private back-room, </p>
</div>Odd -- I didn't think IE even supports :before -- <!-- m --><a class="postlink" href="http://www.quirksmode.org/css/beforeafter.html">http://www.quirksmode.org/css/beforeafter.html</a><!-- m -->
Which version of IE are you using?I'm using IE 7. This was the only cross browser solution I could think off for a drop shadow. I can't explain this issue at all, it works when I refresh the page. If it works then.. should work when I first initally launch the page.Have you validated your coding, and checked to make sure your file sizes are OK? It could be that it is taking a long time for the CSS/images to load. Clicking on "refresh" would load this from the cache, leaving only the "unloaded" content to be pulled in by the browser.
KDLAI did use the validated tool in the CSS section and it gave me an error with <HTML><BODY>... saying there was an error with the H coming after <. So that kind of left me scratching my head.
I was wondering if it could be a load issue, but didn't think anymore about it. I shall try to better optimize the images and that within the document and see if that changes anything.I experimented with this and I have no idea what effect you are after. Can you explain what you are trying to do?Re validator: If you selected the "direct input" option, and copied the whole document into the textbox, then you'll get weird errors like that.WebJoel: I'm just trying to do a text drop shadow and align one paragraph to the left. Then align the second paragraph to the right moved in a bit.
Re validator: I just uploaded the .php file and got the weird error.