Problem with CSS positioning

Discussion in 'HTML' started by Guest, Nov 12, 2004.

  1. Guest

    Guest 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
     
    Guest, Nov 12, 2004
    #1
    1. Advertising

  2. <> 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
     
    Matthias Gutfeldt, Nov 12, 2004
    #2
    1. Advertising

  3. Guest

    Guest Guest

    "Matthias Gutfeldt" <> wrote in message
    news:...
    > <> 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/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
     
    Guest, Nov 12, 2004
    #3
  4. <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
     
    David Dorward, Nov 12, 2004
    #4
  5. On Fri, 12 Nov 2004 17:38:30 GMT, <<M>> <> 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.
     
    Michael Winter, Nov 12, 2004
    #5
  6. Guest

    Guest Guest

    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
     
    Guest, Nov 12, 2004
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Daan
    Replies:
    3
    Views:
    653
  2. Christoph Blank

    Problem with css positioning

    Christoph Blank, Oct 6, 2003, in forum: HTML
    Replies:
    0
    Views:
    397
    Christoph Blank
    Oct 6, 2003
  3. Susanne Kaufmann

    CSS positioning problem

    Susanne Kaufmann, Oct 7, 2004, in forum: HTML
    Replies:
    1
    Views:
    415
    brucie
    Oct 7, 2004
  4. Alexander Nagelmann

    CSS positioning problem IE 6.0/7 // FF 1.5

    Alexander Nagelmann, Apr 14, 2006, in forum: HTML
    Replies:
    2
    Views:
    464
    Jim Moe
    Apr 15, 2006
  5. Anon

    CSS Positioning Problem

    Anon, May 5, 2006, in forum: HTML
    Replies:
    1
    Views:
    417
Loading...

Share This Page