Announcement

Collapse
No announcement yet.

Absolute positioning in xhtml and html strict ?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Absolute positioning in xhtml and html strict ?

    I am having a problem using css absolute positioning with "xhtml 1 transitional" or "html 4 strict".

    See the code below, there is no DOCTYPE declaration, and things work fine. This snippet of code shows up in IE 6 as seen in attachment 1 (below):
    Code:
    <html>
     
    <head>
     
    <style type="text/css">
    body {background-color: #000000}
    img.1 {position: absolute; top: 100px; left: 150px}
    img.2 {position: absolute; top: 100px; left: 300px}
    img.3 {position: absolute; top: 100px; left: 450px}
    </style>
     
    </head>
     
    <body>
     
    <img src="http://www.notreal#1.gif" class="1" />
    <img src="http://www.notreal#2.gif" class="2" />
    <img src="http://www.notreal#3.gif" class="3" />
     
    </body>
     
    </html>
    Here is where the problem starts, see the code below, I have added the proper DOCTYPE declaration, and things go haywire. This snippet of code shows up in IE 6 as seen in attachment 2 (below). Anybody know how to make this work? I have checked all over the W3C and Google...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html>
     
    <head>
     
    <style type="text/css">
    body {background-color: #000000}
    img.1 {position: absolute; top: 100px; left: 150px}
    img.2 {position: absolute; top: 100px; left: 300px}
    img.3 {position: absolute; top: 100px; left: 450px}
    </style>
     
    </head>
     
    <body>
     
    <img src="http://www.notreal#1.gif" class="1" />
    <img src="http://www.notreal#2.gif" class="2" />
    <img src="http://www.notreal#3.gif" class="3" />
     
    </body>
    What I am really trying to do is position the images correctly and then center them all (as a whole). And I don't know how to do that either? Any help? I think <div's> are going to come into play here, but I don't know how...
    Attached Files
    Last edited by free thinker; Wed 31 Aug '05, 11:34am.

  • #2
    4.1.3 Characters and case
    In CSS2, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [A-Za-z0-9] and ISO 10646 characters 161 and higher, plus the hyphen (-); they cannot start with a hyphen or a digit. They can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".
    Try (img.a, img.b, img.c) instead of (img.1, img.2, img.3), I think it works.

    Comment


    • #3
      Originally posted by tantei3
      4.1.3 Characters and case


      Try (img.a, img.b, img.c) instead of (img.1, img.2, img.3), I think it works.
      DUDE !!!

      You are absolutely right. For some reason, it's got be ID (not class or name) and the IDs only function when assigned an alphabetic value.

      You are the man !!!

      Comment

      widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
      Working...
      X