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 5 of 5
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    43
    Thanks
    4
    Thanked 2 Times in 2 Posts

    CSS menu inconsistencies

    Hey all, first post, so here goes...

    I've got a CSS menu for my website. It works as expected in FF, Opera, Safari and Chrome. In Internet Explorer it fails to display correctly and looks an absolute mess.

    Because I'm running XP, I can't test it in the IE9 Beta.

    To view the page please visit it in FF & then in IE8 to see the problem. Site URL:

    http://www.unibloggr.co.uk

    The only page uploaded is index.php, so the links are not supposed to work.

    As you will see, in IE8, the menu font style and sizes change when moused over, as well as the menu actually extending past the table it is placed in.

    I need to know how to make the IE8 menu conform with how it appears in every browser I've tested it in.

    The code is as follows.

    The menu_style.css file:
    Code:
    .clearit {
    	margin: 0;
    	padding: 0;
    	height: 0;
    	clear: both;
    }
    .bubplastic.horizontal {
    	width: 100%;
    	height: 27px;
    	margin: 0;
    	padding: 0;
    	background: #FFFFFF url(images/bg-bubplastic.gif) top left repeat-x;
    }
    .bubplastic.horizontal ul {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	
    }
    .bubplastic.horizontal ul li {
    	float: left;
    	margin: 0;
    	padding: 0;
    	background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat;
    	
    }
    
    .bubplastic.horizontal ul li a {
    	display: block;
    	height: 27px;
    	padding-left: 34.1px;
    	float: left;
    	font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
    	font-size: 11px;
    	color: #242525;
    	text-decoration: none;
    	
    }
    .bubplastic.horizontal ul li a:hover {
    	display: block;
    	height: 27px;
    	padding-left: 34.1px;
    	float: left;
    	font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
    	font-size: 11px;
    	color: #FFFFFF;
    	text-decoration: none;
    	
    }
    
    .bubplastic.horizontal ul li a span.menu_ar {
    	display: block;
    	float: left;
    	height: 22px;
    	padding-top: 5px;
    	padding-right: 34.1px;
    	background: transparent url(images/bg-bubplastic-button.gif) top right no-repeat;
    	cursor: pointer;
    	
    }
    .bubplastic.blue ul li a:hover,
    .bubplastic.blue ul li.highlight a  {
    	background: transparent url(images/bg-bubplastic-h-blue.gif) top left no-repeat;
    	color:#fff;
    	font-size:11px;
    }
    .bubplastic.blue ul li a:hover span.menu_ar,
    .bubplastic.blue ul li.highlight a span.menu_ar {
    	background: transparent url(images/bg-bubplastic-h-blue.gif) top right no-repeat;
    	color:#fff;
    	font-size:11px;	
    }
    #test li {
    	display: block;
    	border: solid 1px red;
    }
    And the page code...
    Code:
    <html>
    <head style="height: 100%;">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel='stylesheet' type='text/css' href='menu/menu_style.css'>
    <title>Generic title</title>
    </head>
    
    <body class="bodybackground" style="height: 100%;">
    <center>
    <table width="979" border="0" cellpadding="0" cellspacing="0" style="height: 100%;" vspace="0">
      <tr>
    <td height="102" valign="top"><img src="images/header.png" width="979" height="102" alt="cheap discount websites copy writing"/><BR></td>
      </tr>
        <tr>
          <td height="42" bordercolor="#FFFFFF" bgcolor="#FFFFFF">
          <div class="menu bubplastic horizontal blue" style="size:auto;">
    	<ul>
    		<li class="highlight"><span class="menu_r"><a href="index.php" target="_self"><span class="menu_ar">Homepage</span></a></span></li>
    		<li><span class="menu_r"><a href="about.php" target="_self"><span class="menu_ar">About Us</span></a></span></li>
            <li><span class="menu_r"><a href="signup.php" target="_self"><span class="menu_ar">Signup</span></a></span></li>
            <li><span class="menu_r"><a href="blogofthemonth.php" target="_self"><span class="menu_ar">Thing of the Month</span></a></span></li>
    		<li><span class="menu_r"><a href="whyus.php" target="_self"><span class="menu_ar">Why Choose</span></a></span></li>
    		<li><span class="menu_r"><a href="faq.php" target="_self"><span class="menu_ar">FAQs</span></a></span></li>
    		<li><span class="menu_r"><a href="help.php" target="_self"><span class="menu_ar">Help/Support</span></a></span></li>
    		<li><span class="menu_r"><a href="contact.php" target="_self"><span class="menu_ar">Contact Us</span></a></span></li>
    	</ul>
    	<br class="clearit" />
    </div>
    </td>
        </tr>
        <tr>   
        <td height="403" bordercolor="#FFFFFF" bgcolor="#FFFFFF">Here is some text.</td>
      </tr>
      <tr valign="baseline">
       <td  valign="bottom" bordercolor="#FFFFFF" bgcolor="#FFFFFF"><center>
          <span class="normaltext">Design Copyright 2010.</span> - <span class="links"><a href="terms.html">Terms and Conditions</a></span> - <span class="links"><a href="privacy.html">Privacy Policy</a></span> - <span class="links"><a href="contact.php">Contact Us</a></span></center></td>    
      </tr>
    </table>
    </center>
    </body>
    </html>
    Any ideas/suggestions will be greatly appreciated!
    Last edited by Stubworth; 11-15-2010 at 11:59 PM.

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,032
    Thanks
    15
    Thanked 240 Times in 240 Posts
    You need a doctype statement at the top of your page. IE will absolutely not display these correctly without one. If it still doesn't display correctly you may need other code such as the csshover.htc.

  • #3
    New Coder
    Join Date
    Nov 2010
    Posts
    43
    Thanks
    4
    Thanked 2 Times in 2 Posts
    Added the doctype to the page, that's fixed the menu. But now the 100% table is messed up.

    Any thoughts how adding doctype info would have broken that?

  • #4
    New Coder
    Join Date
    Nov 2010
    Posts
    43
    Thanks
    4
    Thanked 2 Times in 2 Posts
    Fixed.

  • #5
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    Please remember to place your problem as resolved.


    Steps:
    go to your first post and hit edit> go advanced>select the resolved prefix in-front-of your title
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • Users who have thanked Chris Hick for this post:

    Stubworth (11-15-2010)


  •  

    Posting Permissions

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