Welcome to WebmasterWorld Guest from 54.196.175.173

Forum Moderators: not2easy

Message Too Old, No Replies

CSS in IE6 for PC will NOT behave

i'm going CRAZY!

     

alarix

8:58 pm on Mar 27, 2003 (gmt 0)

10+ Year Member



I'm working on a site that works great on Mac NN (7) and IE (5) in OS9 and OSX and also is fine in PC NN (except 4) and PC IE 5. it even works in AOL except a BODY background image that won't show up (but I suspect that's AOL's annoying image compression scheme)

But in PC IE 6 my formatting goes nuts.

on PC IE 6.0.2 it does one thing, on 6 in windows 2000 it does another, on 6 in windows NT it does something else.

I was going to put in the code. But since I've tried literally about 20 variations on it, and no matter what I do, IE6 screws it up, I don't see the point. And yes, my code validates. My CSS also validates, although with minor warnings.

So I'll ask more generally, is there some problem with CSS in IE6 on PC that I should know about? In general it seems to have a mind of its own when interpreting positioning and padding, while the other platforms handle what I'm doing just fine.

If I'm allowed to post a link, let me know and I will.

SethCall

9:42 pm on Mar 27, 2003 (gmt 0)

10+ Year Member



just checkin: are you using a doctype?

DrDoc

10:08 pm on Mar 27, 2003 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



...and if you are, is it a Strict or Transitional? No DOCTYPE, or using Transitional, will cause IE6 to behave like IE5.5... You mention testing in IE5, but have you tested in IE5.5 too?

Can you describe more what exactly is the problem. Is it width/height, positioning, floating layers... or what? I'm sure we'll be able to narrow it down for you. Just be patient :)

alarix

10:24 pm on Mar 27, 2003 (gmt 0)

10+ Year Member



here's the doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

i should mention i'm pretty new at this CSS stuff :) and no, have not tested 5.5 since I don't have any access to it at the moment ... (i know, download ....)

specifics:

i have images in the background
on top of them are text, or in some cases text using a clip: rect with overflow: scroll

like so:
HTML--------------------

<td>
<img src="pic.gif" class="inTheBack">
<div class="contentHeader">
contains either plain text (with span styles) or nested divs with scrolling clipped rect text
</div>
</td>

CSS---------------------

.inTheBack {
position: absolute;
z-index: 2;
}

.contentHeader {
position:relative;
left:25px;
top:20px;
z-index: 30;
width:320px;
height: 340px;
text-align: left
}

the main problem in general seems to be that despite being "stuck" inside a TD, my image moves left or right "outside" of the TD boundaries, while the text stays inside it

it has occurred to me that putting divs in a td is maybe not the best way to go, but like i said, i'm new .... :)

it just now occurs to me that the image has a position of absolute, the div is relative, and the TD is nothing. maybe there' s something there .....

more info?

DrDoc

10:43 pm on Mar 27, 2003 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



First, change the Doctype to Strict :)
... and we'll go from there ;)

SuzyUK

10:57 pm on Mar 27, 2003 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



alarix are you trying to make that text overlap the image?
(re: "intheback" for the classname)

if so you could set the image as a background image as that to the cell (no-repeat and postion from the top/left as required.)

Then pad the text part (top and left to make it "overlap") as required

Suzy

alarix

11:06 pm on Mar 27, 2003 (gmt 0)

10+ Year Member



hmm. I'm afraid of a Strict doctype! but ok, i'll try ....

and i know about td background="someimage.gif" but when I use that the code would not validate and the td background images would not show up in AOL browsers ... or more specifically, they would not show up in AOL on mac OS X

alarix

11:07 pm on Mar 27, 2003 (gmt 0)

10+ Year Member



suzy, i think i misunderstood you. you mean to give the TD a style background image? interesting.

SuzyUK

11:10 pm on Mar 27, 2003 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Yes alarix that's what I meant

example:
CSS:


.inTheBack {
background-image: url(pic.gif);
background-repeat: no-repeat;
width: 320px;
height: 340px;
vertical-align: top;
}

.contentHeader {
padding-top: 25px;
padding-left: 20px;
}

HTML:


<td class="inTheBack">
<div class="contentHeader">
contains either plain text (with span styles) or nested divs with scrolling clipped rect text
</div>
</td>

Suzy
<oops> missed a closing tag..</oops>

alarix

11:57 pm on Mar 27, 2003 (gmt 0)

10+ Year Member



the background image works great! not sure about on the PC yet, waiting for a response ....

however, I also tried very quickly the STRICT doctype and wrreaked havoc on my tables! sigh. all the TDs have some padding now or something that I have no idea how to get rid of .... but ONLY in netscape 7 mac

i have toi take a break, but will be back.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month