Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: CSS Positioning

  1. #1
    New Coder
    Join Date
    Jun 2006
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Positioning

    I'm a relative newbie with CSS (okay, I'm a CSS hack). Here's my dilemma: I'm creating a U.S. map with clickable icons (alerts) for different cities. I coded this in ASP (it connects to a SQL database), but while it works in IE10, it doesn't work in Firefox or Chrome. In Firefox and Chrome, the icons are spread across the middle of the page horizontally. So, after studying a bunch of CSS sites trying to understand how CSS positioning works, I realized I'm totally lost.

    Below is a snippet from my original code (yes, it's ugly):

    Code:
    <html>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <head>
    <meta http-equiv="refresh" content="600" />
    <title>Critical Events</title>
    <style type="text/css">
    
    A:link {text-decoration: none}
    A:visited {text-decoration: none}
    A:active {text-decoration: none}
    A:hover {text-decoration: none}
    
    
    .status {
    position:absolute;
    }
    
    #scott-a {
    top:405 px;
    left:49%;
    }
    
    #scott{
    top:405 px;
    left:50%;
    color: #ffffff;
    font-family: Verdana,Sans-serif;
    font-size: 10px;
    }
    
    </style>
    
    <table>
    
        <tr>
        <td width="1600" height="900" background="561st-map.jpg">
    
    
    <%
    If (rsvejxcritical("vejx_total")) = 0 Then
    response.write ("<img id='scott-a' class='status' src='green-t1.png'>")
    
    Else
    response.write ("<a href='' target='content'><img id='scott-a' class='status' src='red-t1.png' border='0'></a>")
    response.write ("<p class='status' id='scott'>SCOTT</p>")
    End IF
    %>
    </td>
    </tr>
    <table>
    
    I realize now that I should have used containers (DIVs?), but I'm at a loss for how to code them.  I've tried using classes and IDs:
    
    <div id="scott-a">
    <img class='status' src='green-t1.png'>
    <a href='index.html' target='_blank'>
    </div>
    <div id="scott-t">
    <img class='status' src='red-t1.png' border='0'></a>
    
    <p class='status'>SCOTT</p>
    </div>
    Any help or suggestions are greatly appreciated.

    Dale

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,441
    Thanks
    11
    Thanked 305 Times in 304 Posts
    I have no real idea, but from looking at the code:
    Code:
    End IF
    %>
    </td>
    </tr>
    </table>
    
    I realize now that I should have used containers (DIVs?), but I'm at a loss for how to code them.  I've tried using classes and IDs:
    
    <div id="scott-a">
    Is there really not a slash there, or is that a typo in your posting?

  • #3
    New Coder
    Join Date
    Jun 2006
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just a typo. Any other ideas?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •