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 10 of 10
  1. #1
    Regular Coder
    Join Date
    Jul 2009
    Location
    Chicago, IL
    Posts
    169
    Thanks
    26
    Thanked 3 Times in 3 Posts

    Alignment issue in IE8

    Hi guys. I have a CSS/javascript dropdown menu that works beautifully in any browser. However, I cannot for the life of me figure out why, in IE8, the "Food*" link isn't centered in its column. In all other browsers I have tested, it is centered like it should be. It's off to the left for some reason. I created a page that exemplifies my issue:

    http://www.myfsjournal.com/test.php

    And here is my CSS:
    Code:
    ul, li{list-style:none;}
    .dropDownMenu{
    	padding-bottom:20px;
    	height:0px;
    	width:150px;
    }
    
     .dropDownMenu li {
    	float:none;
    	width:150px;
    }
     .dropDownMenu li a{
    	display:block;
    }
    
     .subDropDownMenu li:hover ul, li.over ul {
    	display:block;
    }
    
     ul .subDropDownMenu {
    	border:solid 1px #004A66;
    	background:#FFFFFF;
    	position:relative;
    	width:150px;
    	padding:0px 0px;
    	clear:both;
    	z-index:100;
    	display:none;
    }
     ul .subDropDownMenu li{
    	background:none;
    	display:block;
    	float:none;
    	border:0;
    	height:auto;
    	line-height:normal;
    	border-bottom:solid 1px #004A66;
    }
     .subDropDownMenu li a{
    	background:none;
    	display:block;
    	float:none;
    	padding:6px 6px;
    	margin:0;
    	border:0;
    	height:auto;
    	line-height:normal;
    }
     .subDropDownMenu li a:hover{
    	background:#5195CE;
    	color:#FFF;
    }
    Last edited by wldrumstcs; 12-09-2009 at 09:56 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello wldrumstcs,
    A bit of divitis there with the ul in the div in the table. Have a look at what the validator finds - http://validator.w3.org/check?verbos...%2Ftest.php%23
    See the links about validation in my sig below ...also the link about tables.


    ...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Jul 2009
    Location
    Chicago, IL
    Posts
    169
    Thanks
    26
    Thanked 3 Times in 3 Posts
    Hey Excavator - great links. I'm still kinda confused why this isn't working with the changes I made. I'm not sure if I know why I am getting those invalid markup errors. I changed my test.php around to get rid of the div. Why am I still getting those errors? Sorry, I'm pretty bad with CSS. I'm a veteran of tables Here's my new CSS:
    Code:
    ul, li{list-style:none;}
    .dropDownMenu{
    	padding-bottom:20px;
    	height:0px;
    	width:150px;
    }
    
     .dropDownMenu li {
    	float:none;
    	width:150px;
    }
     .dropDownMenu li a{
    	display:block;
    }
    
     .subDropDownMenu li:hover ul, li.over ul {
    	display:block;
    }
    
     ul .subDropDownMenu {
    	border:solid 1px #004A66;
    	background:#FFFFFF;
    	position:relative;
    	width:150px;
    	padding:0px 0px;
    	clear:both;
    	z-index:100;
    	display:none;
    }
     ul .subDropDownMenu li{
    	background:none;
    	display:block;
    	float:none;
    	border:0;
    	height:auto;
    	line-height:normal;
    	border-bottom:solid 1px #004A66;
    }
     .subDropDownMenu li a{
    	background:none;
    	display:block;
    	float:none;
    	padding:6px 6px;
    	margin:0;
    	border:0;
    	height:auto;
    	line-height:normal;
    }
     .subDropDownMenu li a:hover{
    	background:#5195CE;
    	color:#FFF;
    }

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Nesting ul's can get a little confusing. Try it like this -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title>F.S. Journal</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="A journal to help you keep track of your sensitivities to certain foods" />
    <meta name="keywords" content="food,sensitivity,journal,digestion,diet,crohns,colitis,ibs,ulcers,ibd,sickness" />
    <link href="style.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript">
    function showlayer(layer)
    {
    	var myLayer = document.getElementById(layer);
    	if(myLayer.style.display=="none" || myLayer.style.display=="")
    	{
    		myLayer.style.display="block";
    	} 
    	else 
    	{
    		myLayer.style.display="none";
    	}
    }
    
    </script>
    </head>
    <body>
    <table width="100%" border="0">
      <tr>
        <th width="5%" scope="col"></th>
    
        <th width="13%" scope="col" align="center"><a href="date.php" title="Sort by date">Date</a></th>
        <th width="21%" scope="col" align="center"> 
        
          <ul class="dropDownMenu" >
            <li><a href="#" onclick="javascript:showlayer('subLayer')" title="Sort by food">Food*</a>
            <ul class="subDropDownMenu" id="subLayer" onmouseout="showlayer('subLayer');">
              <li><a href="link.php" title="Sort by food name">Sort by food name</a></li>
              <li><a href="link.php" title="Sort by food rating">Sort by food rating</a></li>
    
            </ul>
    </li>
          </ul>
        </th>
        <th width="22%" scope="col" align="center"><a href="link.php" title="Sort by restaurant/brand">Restaurant/Brand*</a></th>
        <th width="13%" scope="col" align="center"><a href="link.php" title="Sort by sensitivity">Sensitivity*</a></th>
        <th width="21%" scope="col" align="center">Notes</th>
        <th width="5%" scope="col" align="center"></th>
    
      </tr>
    </table>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Jul 2009
    Location
    Chicago, IL
    Posts
    169
    Thanks
    26
    Thanked 3 Times in 3 Posts
    Still the same issue. I hate Internet Explorer. At least my code passes the markup validator with your correction. I'm appreciating the help though!
    Last edited by wldrumstcs; 12-09-2009 at 10:00 PM.

  • #6
    New Coder
    Join Date
    May 2009
    Posts
    74
    Thanks
    0
    Thanked 7 Times in 7 Posts
    Try replacing in your first line css with this, not sure just try:



    ul, li{list-style:none; margin:0;}



    Regards.

  • #7
    Regular Coder
    Join Date
    Jul 2009
    Location
    Chicago, IL
    Posts
    169
    Thanks
    26
    Thanked 3 Times in 3 Posts
    Still no luck. I just can't figure out why this isn't working.

  • #8
    Banned
    Join Date
    Dec 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try replacing in your first line css with this, not sure just try:
    FF11 RMT
    AION RMT

    ul, li{list-style:none; margin:0;}
    Last edited by wuyoo020; 12-10-2009 at 07:05 AM.

  • #9
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is, in my opinion, the most interesting part:
    CSS Code:

    //If first time key in date run statement
    if(first == 0){
    ++first;//Track if is the first record key in
    items[i] = new Item(itemNumber, itemDesc, sellPrice, quantity);
    }
    //Else continue key in record
    else{
    entries = items[0].getEntries();//Get number of entries entered
    for(j=0; j<entries; ++j){

    duplicate = items[j].equals(itemNumber, itemDesc, sellPrice, quantity);//Check for duplication of entries

    if(duplicate == true) {
    Print.duplicateError();
    --i;
    --looping;
    break;
    }
    }
    if(duplicate == false)//else save record
    items[entries] = new Item(itemNumber, itemDesc, sellPrice, quantity);
    }
    ______________________________
    Taux calculette pret immobilier | Calcul emprunt pret immo | Taux interet calculette credit immobilier

  • #10
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Quote Originally Posted by wldrumstcs View Post
    Still no luck. I just can't figure out why this isn't working.
    Can't you make a good drop down effect using purely unordered lists? You shouldn't use tables in this case. The article at http://htmldog.com/articles/suckerfish/dropdowns/ would help you.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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