Problem with CSS positioning

[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

 

[Matthias Gutfeldt]

border-right-color: rgb(0,;

^^^^^^^
This is not correct CSS!

You can check your CSS here:
<http://jigsaw.w3.org/css-validator/>. And you should make sure your
HTML is valid, of course: <http://validator.w3.org/>

And usually it's much better to post the link to your site so we can see
what is REALLY going on.


Matthias

 

[Guest]

^^^^^^^
This is not correct CSS!

I won't argue that. I'm using a WYSIWYG editor for now. Putting in the
changes, then examining the "behind the scenes" code to see what the effect
is. I suppose colour should be expressed in HEX code right? As my
understanding increases, I'll get more comfortable with handcoding,
tweaking, understanding correct code, etc.

You can check your CSS here:
<http://jigsaw.w3.org/css-validator/>. And you should make sure your
HTML is valid, of course: <http://validator.w3.org/>

I did try both sites, but the answers weren't understandable to a newbie
like like me. I've downloaded Topstyle Lite and will give that a try.

And usually it's much better to post the link to your site so we can see
what is REALLY going on.

Doh! (Slaps hisself upside the head. . .)
http://www3.telus.net/public/tao55/Toastmasters/index.htm

Links aren't live, but some have the hover effect in place. It looks fine in
my copies of Firefox and IE6 (Win98SE), but one fellow who uses Safari (Mac)
and another who uses IE6 (OS ??) report that the text boxes and the banner
image overlap. (Not sure if they meant together at the top of the page or
further down). My text boxes are absolutely positioned, so I'm not sure
what's up.)

Thanks for the guidance. . .

M

 

[David Dorward]

I suppose colour should be expressed in HEX code right?

You can use decimal RGB values for colors in CSS, but you can't provide only
half of the colour

 

[Michael Winter]

[snip]

I suppose colour should be expressed in HEX code right?

The Recommendation specifies how colours are represented (see
<URL:http://www.w3.org/TR/REC-CSS2/syndata.html#color-units>).

To summarise, there are three ways of specifying a colour code:

1) Using a predefined colour name (see
<URL:http://www.w3.org/TR/html4/types.html#h-6.5>).

2) The rgb functional notation, rgb(<red>, <green>, <blue>). The three
values are either integers between 0 and 255, or percentages (including
the symbol).

3) A three- or six-digit hexadecimal number, prefixed with a hash (#). If
you use the three-digit form, it's internally converted to the six-digit
format by duplicating each digit. For example, #7ff becomes #77ffff.

[snip]

[...] the text boxes and the banner image overlap. (Not sure if they
meant together at the top of the page or further down). My text boxes
are absolutely positioned, so I'm not sure what's up.)

I have no problems with Firefox 0.9.3, Mozilla (any), and Opera 7.54 on
XP. However, things go horribly wrong with IE6.
<URL:http://www.mlwinter.pwp.blueyonder.co.uk/ah/toast.jpg>

By the way, I wouldn't recommend creating text that can resize on hover.
In extreme cases, it can cause a page to reflow. Turning the text bold
isn't a big deal in this case, but it could be in other situations.

Mike


I'll be deleting that image on Sunday evening.

 

[Guest]

Hey, thanks to the three of you (Matthias, David and Michael) for the
assist.

You can use decimal RGB values for colors in CSS, but you can't provide

only
half of the colour

Sorry to Matthias, I didn't pick up on the significance of your statement --
I though YOU had truncated the line in your message. Not sure why I'm
missing the rest of that colour description. I'll correct it, but I don't
think it affects my main problem, right?

I have no problems with Firefox 0.9.3, Mozilla (any), and Opera 7.54 on
XP. However, things go horribly wrong with IE6.
<URL:http://www.mlwinter.pwp.blueyonder.co.uk/ah/toast.jpg>

Thanks to Michael for taking the time to upload a screenshot for me. I'm
bumfuzzled as to why my IE6 and Firefox lay it correctly, but your IE6
doesn't. Must be an OS issue since you use XP and I use Win98SE. Curiously
though, in Explorer the thumbnail preview displays it as you have posted it.
What's up with that?

My friend has since sent me a screenshot of his Safari output and it's
different again.

May have to throw my hands up in defeat on this one for now and revert to
tables. . .

By the way, I wouldn't recommend creating text that can resize on hover.
In extreme cases, it can cause a page to reflow. Turning the text bold
isn't a big deal in this case, but it could be in other situations.

Advice noted. Thx

M