...

View Full Version : Alignment issue in IE8



wldrumstcs
12-09-2009, 07:02 PM
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:


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;
}

Excavator
12-09-2009, 10:09 PM
Hello wldrumstcs,
A bit of divitis (http://www.apaddedcell.com/div-itis) there with the ul in the div in the table. Have a look at what the validator finds - http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.myfsjournal.com%2Ftest.php%23
See the links about validation in my sig below ...also the link about tables.


...

wldrumstcs
12-09-2009, 10:35 PM
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:


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;
}

Excavator
12-09-2009, 10:46 PM
Nesting ul's (http://simplebits.com/notebook/2003/10/19/styling-nested-lists/)can get a little confusing. Try it like this -
<!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>

wldrumstcs
12-09-2009, 10:55 PM
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!

frankle
12-10-2009, 06:22 AM
Try replacing in your first line css with this, not sure just try:



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



Regards.

wldrumstcs
12-10-2009, 07:10 AM
Still no luck. I just can't figure out why this isn't working.

wuyoo020
12-10-2009, 08:02 AM
Try replacing in your first line css with this, not sure just try:
FF11 RMT (http://www.rmt-link.jp/)
AION RMT (http://www.kiraku-rmt.jp/)

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

twiducut
12-10-2009, 10:30 AM
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 | (http://calculettepretimmobilier.com/)Calcul emprunt pret immo | (http://calculettepretimmobilier.com/)Taux interet calculette credit immobilier (http://calculettepretimmobilier.com/)

abduraooft
12-10-2009, 10:42 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum