G
Guest
I've started teaching myself CSS layout and have some questions. I'm setting
up a page using nothing but CSS rather than tables to lay the page out. The
page shows up fine in my version of IE6 and Firefox but a friend using IE6
says that some of the elements -- a graphic and a text box -- are
overlapping. Another uses Safari (Mac) and reports the sames thing. However,
another user of IE6 reports it looks fine to her.
The offending code follows:
--------------------------
..image1 {
height: 150px;
left: 17px;
position: absolute;
top: 17px;
width: 150px;
z-index: 3;
}
..text1 {
background-color: transparent;
border-bottom-color: 0,;
border-left-color: 0);
border-right-color: rgb(0,;
border-top-color: solid;
border-width: 1px;
font-family: Arial,Helvetica,sans-serif;
font-size: 14pt;
left: 200px;
line-height: 120%;
overflow: visible;
padding: 5px;
position: absolute;
top: 190px;
z-index: 3;
}
..text2 {
background-image: url(images/yellowfilter.gif);
border-bottom-color: 0,;
border-left-color: 0);
border-right-color: rgb(0,;
border-top-color: solid;
border-width: 1px;
height: 355px;
left: 20px;
overflow: hidden;
position: absolute;
text-align: center;
top: 188px;
width: 150px;
z-index: 1;
}
-----------------
I'm using absolute positioning, so what could the problem be? Why would it
show up differently in IE6 on different machines? Could the problem lie in
the HTML page vice the stylesheet?
M
up a page using nothing but CSS rather than tables to lay the page out. The
page shows up fine in my version of IE6 and Firefox but a friend using IE6
says that some of the elements -- a graphic and a text box -- are
overlapping. Another uses Safari (Mac) and reports the sames thing. However,
another user of IE6 reports it looks fine to her.
The offending code follows:
--------------------------
..image1 {
height: 150px;
left: 17px;
position: absolute;
top: 17px;
width: 150px;
z-index: 3;
}
..text1 {
background-color: transparent;
border-bottom-color: 0,;
border-left-color: 0);
border-right-color: rgb(0,;
border-top-color: solid;
border-width: 1px;
font-family: Arial,Helvetica,sans-serif;
font-size: 14pt;
left: 200px;
line-height: 120%;
overflow: visible;
padding: 5px;
position: absolute;
top: 190px;
z-index: 3;
}
..text2 {
background-image: url(images/yellowfilter.gif);
border-bottom-color: 0,;
border-left-color: 0);
border-right-color: rgb(0,;
border-top-color: solid;
border-width: 1px;
height: 355px;
left: 20px;
overflow: hidden;
position: absolute;
text-align: center;
top: 188px;
width: 150px;
z-index: 1;
}
-----------------
I'm using absolute positioning, so what could the problem be? Why would it
show up differently in IE6 on different machines? Could the problem lie in
the HTML page vice the stylesheet?
M