Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Problem with CSS positioning

Reply
Thread Tools

Problem with CSS positioning

 
 
Guest
Posts: n/a
 
      11-12-2004
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


 
Reply With Quote
 
 
 
 
Matthias Gutfeldt
Guest
Posts: n/a
 
      11-12-2004
<> wrote:
> 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

 
Reply With Quote
 
 
 
 
Guest
Posts: n/a
 
      11-12-2004
"Matthias Gutfeldt" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> <> wrote:
> > border-right-color: rgb(0,;

> ^^^^^^^
> 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/T...ters/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


 
Reply With Quote
 
David Dorward
Guest
Posts: n/a
 
      11-12-2004
<M wrote:

> 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


--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
 
Reply With Quote
 
Michael Winter
Guest
Posts: n/a
 
      11-12-2004
On Fri, 12 Nov 2004 17:38:30 GMT, <<M>> <(E-Mail Removed)> wrote:

[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.

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
 
Reply With Quote
 
Guest
Posts: n/a
 
      11-12-2004
Hey, thanks to the three of you (Matthias, David and Michael) for the
assist.

David and Matthias wrote:
> > border-right-color: rgb(0,;


> 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



 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS Positioning Problem Anon HTML 1 05-05-2006 02:58 PM
CSS positioning problem IE 6.0/7 // FF 1.5 Alexander Nagelmann HTML 2 04-15-2006 07:11 PM
CSS positioning problem Susanne Kaufmann HTML 1 10-07-2004 08:16 PM
Problem with css positioning Christoph Blank HTML 0 10-06-2003 05:27 PM
CSS positioning: 3px problem Daan HTML 3 09-21-2003 10:31 PM



Advertisments