Paulfp...can u help me...

  • 13 years ago

    hi Paul..i  did some work using CSS...it runs quite in IE. But coming to Firefox,lot of distrubance in the the alignment. i want you to see the difference and hepl me  to why it its coming like that.


    and also can u tell me how can i explore the differences in compatibility of different browsers.
    Thank you

    Code:
    html and CSS work


    <html>
    <head>
    <title>CSS 3D buttons</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    div#Abutton{
        margin-left:0px;
       }
    div#Abutton ul    {
           padding:0px;
           margin:0px;
           font-family:Georgia, Times New Roman, Times, serif;
           font-size:15px;
           line-height:25px;
           }
    div#Abutton li {
       list-style-type:none;
       height: 30px;
       width: 150px;
       margin: 0px;
       text-align:center;
    }
    div#Abutton li a {
       color:#ffcc00;
       height: 100%;
       width: 100%;
       text-decoration: none;
       font-weight: bold;
       background-color:#000000;/#FF9900;/
       border-style: outset;
       border-color:#CCCCCC;
       
           
    }
    div#Abutton li a:hover {
       color:#996600;
       height: 100%;
       margin-left:0px;
       width: 100%;
       text-decoration: none;
       font-weight: bold;
       background-color:#000000;/#FF9900 ;/
       border-style: inset;
       border-color:#CCCCCC;


    }
    </style>
    </head>


    <body bgcolor="#000000" leftmargin="0" topmargin="0">
    <table border="0" align="right" cellspacing="0">
     <tr>
       <td width="1000" height="97" align="right" bgcolor="#FF9900"><font size="+3" color="#0066FF" face="Bookman Old Style">
         <center>
         </center>
         </font><font size="+3" color="#0066FF" face="Bookman Old Style">      <font color="#000000">MySiteBank.com</font>      </font></td>
     </tr>
    </table>
    <br><br><br><br><br>
    <div id="Abutton">
     <ul>
       <li><a href="http://www.google.com">Google</a></li>
       <li><a href="http://www.Thummas.com">Thummas</a></li>
       <li><a href="http://www.mail.yahoo.com">Google</a></li>
       <li><a href="http://www.developerfusion.co.uk/.com">My Best Forum</a></li>
       <li><a href="http://http://www.webopedia.com/">Tech Dictionary</a></li>
       <li><a href="http://http://www.oup.com/elt/catalogue/teachersites/oald7/?cc=in">English
         Dictionary</a></li>
       <li><a href="http://www.utexas.edu/learn/flash/animation.html">Flash Guide</a></li>
     </ul>
    </div>


    </body>
    </html>



  • 13 years ago
    Firstly, add display: block; into the CSS rule which starts div#Abutton li a { - that will sort out your links being in boxes the same size. Technically IE is in the wrong here.... it dispalys it as a block element even thought you haven't asked it to, which is bad because then you leave out the rule telling it to, and other browsers that actually follow the rules end up displaying it "wrong", even though they're actually right!

    You shouldn't really be mixing CSS with old-style <font> tags etc. And cut out those tables! Old fashioned way of doing things!

    Instead of the table I have done this:

    <div style="position: absolute; right: 0; padding-right: 10px; padding-left: 50%; font-family: Bookman Old Style, serif; color: black; font-size: 25pt; background-color: #FF9900; text-align: right;">MySiteBank.com</div>

    And since that's got an absolute position, the menu then doesn't know it's there and sits right at the top, so you have to move it down a bit:

    div#Abutton{
       position: absolute;
       top: 60px;
       margin-left:0px;
      }

    The full code is:Code:
    <html>
    <head>
    <title>CSS 3D buttons</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    div#Abutton{
       position: absolute;
       top: 60px;
       margin-left:0px;
      }
    div#Abutton ul    {
          padding:0px;
          margin:0px;
          font-family:Georgia, Times New Roman, Times, serif;
          font-size:15px;
          line-height:25px;
          }
    div#Abutton li {
      list-style-type:none;
      height: 30px;
      width: 150px;
      margin: 0px;
      text-align:center;

    }
    div#Abutton li a {
      color:#ffcc00;
      height: 100%;
      width: 100%;
      text-decoration: none;
      font-weight: bold;
      background-color:#000000;/*#FF9900;*/
      border-style: outset;
      border-color:#CCCCCC;
          display: block;
           
    }
    div#Abutton li a:hover {
      color:#996600;
      height: 100%;
      margin-left:0px;
      width: 100%;
      text-decoration: none;
      font-weight: bold;
      background-color:#000000;/*#FF9900 ;*/
      border-style: inset;
      border-color:#CCCCCC;

    }
    </style>
    </head>

    <body bgcolor="#000000" leftmargin="0" topmargin="0">


    <div style="position: absolute; right: 0; padding-right: 10px; padding-left: 50%; font-family: Bookman Old Style, serif; color: black; font-size: 25pt; background-color: #FF9900; text-align: right;">MySiteBank.com</div>

    <div id="Abutton">
    <ul>
      <li><a href="http://www.google.com">Google</a></li>
      <li><a href="http://www.Thummas.com">Thummas</a></li>
      <li><a href="http://www.mail.yahoo.com">Google</a></li>
      <li><a href="http://www.developerfusion.co.uk/.com">My Best Forum</a></li>
      <li><a href="http://http://www.webopedia.com/">Tech Dictionary</a></li>
      <li><a href="http://http://www.oup.com/elt/catalogue/teachersites/oald7/?cc=in">English
        Dictionary</a></li>
      <li><a href="http://www.utexas.edu/learn/flash/animation.html">Flash Guide</a></li>
    </ul>
    </div>

    </body>
    </html>
    I noticed you haven't got a DOCTYPE or XHTML declaration.... you need to add those

    Anyway, I hope that's of some help!

  • 13 years ago

    Hello Paul,
    Thank you for your quick reply. In the ending you suggested me to use the DOCTYPE declarations. till now i didnt cared of using that declarations. I am very new to all these...After your suggestion i went through the W3.org to know the purpose of that declarations. Learned a lot.
    couple of months back you suggested me w3schools.org for learning CSS. its been helping me a lot. Thanks for that too.
    bye....

Post a reply

Enter your message below

Sign in or Join us (it's free).

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“The trouble with programmers is that you can never tell what a programmer is doing until it's too late.” - Seymour Cray