Web Analytics Made Easy -
StatCounter menu button not fully showing - CodingForum

Announcement

Collapse
No announcement yet.

menu button not fully showing

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

  • menu button not fully showing

    the menu buttons are not showing fully in IE but all seems ok in Fire Fox

    can someone please take a look at the following code and advise what could be wrong with my css code.

    Code:
    <html>
    <title></title>
    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <script TYPE="text/javascript">
    var rollOverArr=new Array();
    function setrollover(OverImgSrc,pageImageName)
    {
    if (! document.images)return;
    if (pageImageName == null)
        pageImageName = document.images[document.images.length-1].name;
    rollOverArr[pageImageName]=new Object;
    rollOverArr[pageImageName].overImg = new Image;
    rollOverArr[pageImageName].overImg.src=OverImgSrc;
    }
    
    function rollover(pageImageName)
    {
    if (! document.images)return;
    if (! rollOverArr[pageImageName])return;
    if (! rollOverArr[pageImageName].outImg)
        {
        rollOverArr[pageImageName].outImg = new Image;
        rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;
        }
    document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src;
    }
    
    function rollout(pageImageName)
    {
    if (! document.images)return;
    if (! rollOverArr[pageImageName])return;
    document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src;
    }
    </SCRIPT>
    <body bgcolor="#ffffff">
        <div class="page">
          <div align="center"><img src="logo.jpg" style="width:450; height:112; margin: 3px 50px 3px 3px;">
            <div style="display: inline; vertical-align: top;"><a href="">Home</a> | <a href="">About Us</a> | <a href="">Contact Us</a>
    
        </div>
            </div>
    
    <style>
    
    /*a {
        background-image: url('./images/mouseout.gif');
        height: 30px;
        width: 60px;
        color: #000000;
        text-decoration: none;
    }
    a:hover {
        background-image: url('./images/mouseover.gif');
    }*/
    
    .hovermenu ul{
      font: bold 12px arial;
      padding-left: 0;
      margin-left: 0;
      height: 20px;
    }
    
    .hovermenu ul li{
      list-style: none;
      display: inline;
      text-align:center;
    }
    
    .hovermenu ul li a{
         padding: 2px 0.5em;
        padding:7px;
     
         float: left;
      /*color: black;
      background-color: #92b9ee;
      text-decoration: none;
      border: 2px solid #FFF2BF;*/
        /*height:30px;  Make this match the UL height for larger sizes */
          background-color:white;
        background-image: url('./images/mouseover.gif');
        height: 20px;
        width: 100px;
        color: white;
        text-decoration: none;
    }
    
    .hovermenu ul li a:hover{
      /*background-color: #FFE271;
      border-style: outset;
      background-image: url('./images/mouseover.gif');*/
      color:white;
    }
    
    html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
      /*border-style: inset;
      background-image: url('./images/mouseover.gif');*/
      color:white;
    }
    
    </style>    
               
                <div class="hovermenu" align="center">
                    <ul>
                      <li> <a href="index.php">Home</a></li>
                      <li><a href="">menu1</a></li>
    
                      <li><a href="">menu2</a></li>
                      <li><a href="">menu3</a></li>
                      <li><a href="">menu4</a></li>
                      <li><a href="">menu5</a></li>
                      <li><a href="">menu6</a></li>
                    </ul>
    
                </div>      <table width="100%" height="325" border="0">
      <tr>
        <td width="21%">Login</td>
        <td width="79%" rowspan="2"> </td>
      </tr>
      <tr>
        <td><p>Tell A Friend</p>
    
    </td>
      </tr>
     
    </table>
           
    </div>
        <div align="center"></div></body>
    </html>
    Code:
    /*a {
        background-image: url('./images/mouseout.gif');
        height: 30px;
        width: 60px;
        color: #000000;
        text-decoration: none;
    }
    a:hover {
        background-image: url('./images/mouseover.gif');
    }*/
    
    .footerLink {
        color: #8cade4;
        text-decoration: none;
    }
    
    .footerLink:hover {
        background-color:#8cade4;
        color:white;
    }
    
    .hovermenu ul{
      font: bold 13px arial;
      padding-left: 0;
      margin-left: 0;
      height: 20px;
    }
    
    .hovermenu ul li{
      list-style: none;
      display: inline;
      text-align:center;
    }
    
    .hovermenu ul li a{
         padding: 2px 0.5em;
        padding:7px;
      text-align:center;
         float: left;
      /*color: black;
      background-color: #92b9ee;
      text-decoration: none;
      border: 2px solid #FFF2BF;*/
        /*height:30px;  Make this match the UL height for larger sizes */
          background-color:white;
        background-image: url('./images/mouseout.gif');
        height: 20px;
        width: 78px;
        color: white;
        text-decoration: none;
    }
    
    .hovermenu ul li a:hover{
      /*background-color: #FFE271;
      border-style: outset;
      background-image: url('./images/mouseover.gif');*/
      color:black;;
    }
    
    html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
      /*border-style: inset;
      background-image: url('./images/mouseover.gif');*/
      color:black;
    }
    
    body {
        background-image:url(images/bg-gradient.jpg);
        background-repeat:repeat-x;
        background-color:white;
    }
    
    .document {
        background-color: white;
        border:1px solid black;
    }
    
    .contentBit {
        border: 1px solid red;
    }
    
    td {
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:11px;
    }
    
    .servicesList li {
        list-style-image:url('images/busBullet.gif');
        /*list-style-position:outside;*/
        margin-left:0px;
        font-size:12px;
    }
    
    h2 {
        text-align:center;
        color: #fb0a03;
    }
    
    h1 {
        color: #fb0a03;
    }
    Attached Files

  • #2
    Hello jasonc310771,
    I'm sorry I don't have any time right now, I'm literally headed out the door as soon as I finish this post.
    Just a quick glance though... your button image is 30px high but you have this in your CSS -
    Code:
    .hovermenu ul{
      font: bold 13px arial;
      padding-left: 0;
      margin-left: 0;
      [COLOR="Red"]height: 20px;[/COLOR]
    }
    If that's not it, I'll can have a look at it later and I'm sure someone else here may be able to help too.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

    Comment


    • #3
      Your a and a:hover rules are commented out?

      Comment


      • #4
        Well I'm back.
        After a second look I see a bit more wrong with this than a single mistake.
        You have no DocType.
        Your embedded CSS is inside the body of the document and it belongs inside the head.

        Have a look at the links in my sig below. The ones about DocType, validation and tables.

        And try something like this for your menu -
        Code:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <style type="text/css">
        body {
        	background: #fff url(images/bg-gradient.jpg) repeat-x;
        	font: bold 13px Arial, Helvetica, sans-serif;
        }
        * {
        	margin: 0;
        	padding: 0;
        	border: none;
        }
        #page {
        	width: 800px;
        	height: 600px;
        	margin: 30px auto;
        	padding: 50px;
        	background: #ccc;
        }
        ul#hovermenu {
        	width: 90px;
        	background: #999;
            list-style-type: none;
        }
        #hovermenu a{
            display: block;
        	width: 90px;
            height: 30px;
        	text-align: center;
        	line-height: 30px;
        	background: url(mouseover.gif)
        }
        </style>
        </head>
        <body>
            <div id="page">
                <ul id="hovermenu">
                    <li><a href="">Home</a></li>
                    <li><a href="">menu1</a></li>
                    <li><a href="">menu2</a></li>
                    <li><a href="">menu3</a></li>
                    <li><a href="">menu4</a></li>
                    <li><a href="">menu5</a></li>
                    <li><a href="">menu6</a></li>
                </ul>
            <!--end page--></div>
        </body>
        </html>
        Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
        Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

        Comment


        • #5
          great thanks much sorter, but how do i get the menus items to get in the same line, showing right to left. not underneath one another.

          Comment


          • #6
            Goodmorning jasonc310771,
            For a horizontal menu you would float the li.
            Like this -
            Code:
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Untitled Document</title>
            <style type="text/css">
            body {
            	background: #fff url(images/bg-gradient.jpg) repeat-x;
            	font: bold 13px Arial, Helvetica, sans-serif;
            }
            * {
            	margin: 0;
            	padding: 0;
            	border: none;
            }
            #page {
            	width: 800px;
            	height: 600px;
            	margin: 30px auto;
            	padding: 50px;
            	background: #ccc;
            }
            ul#hovermenu {
            	background: #999;
                list-style-type: none;
            }
            #hovermenu li {
            	float: left;
            	margin: 0 2px 0 0;
            }
            #hovermenu a{
            	display: block;
            	width: 90px;
            	height: 30px;
            	text-align: center;
            	line-height: 30px;
            	background: url(mouseover.gif)
            }
            </style>
            </head>
            <body>
                <div id="page">
                    <ul id="hovermenu">
                        <li><a href="">Home</a></li>
                        <li><a href="">menu1</a></li>
                        <li><a href="">menu2</a></li>
                        <li><a href="">menu3</a></li>
                        <li><a href="">menu4</a></li>
                        <li><a href="">menu5</a></li>
                        <li><a href="">menu6</a></li>
                    </ul>
                <!--end page--></div>
            </body>
            </html>
            I'm sure you will want to do some sort of hover effect on those buttons also. Have a look at how some menu examples are built here - http://nopeople.com/design/CSS%20tips/index.html - view the source to see how they are done.
            Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
            Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

            Comment


            • #7
              great thanks for all that, yeah i think i will do something like that with them, just looking at it how would i get the whole menu to be centred. i have tried to add in margin 0px auto; for the li and the ul but did not seem to work.

              thanks again for your help so far.

              Comment


              • #8
                Originally posted by jasonc310771 View Post
                great thanks for all that, yeah i think i will do something like that with them, just looking at it how would i get the whole menu to be centred. i have tried to add in margin 0px auto; for the li and the ul but did not seem to work.

                thanks again for your help so far.
                Centered menu examples on that page I linked too.

                margin:0 auto; is not what you want on your li since your menu is made up of 7 li's and you can't very well center them all and still have a horizontal menu. To center the ul, it needs a width.

                To center an element we need 3 things:
                1. a DocType
                2. an element with a width
                3. left/right margins of that element set to auto
                Last edited by Excavator; Apr 6, 2009, 06:20 PM.
                Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
                Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

                Comment

                Working...
                X