nowrap problem with ul li div td tag in menu - RESOLVED

petalmax · 01-18-2012, 02:24 AM

Does anyone know how to prevent this menu from wrapping when the window size gets smaller? I used a ul li code for a small bit of drop down info under one menu item and now it folds up upon itself if the window is made smaller. The other pages are fine. I've spent hours researching solutions via google and nothing so far has worked.

Here's the website: http://www.maryclareleonard.com/

Here's partial CSS code from the top:

Code:

body { background: #eeecdf url(images/bg_main.jpg) 0 0 repeat; font-size:13px; line-height:20px; color:#000000; font-family: arial, sans-serif; }
h1 {font-family: Verdana,Arial,Geneva,Helvetica; font-size:40px; text-transform:uppercase; color:#1D6BB3; padding-bottom:0px; padding-top:30px; border:0px solid #000000;}
td.nav {text-transform:uppercase; color:#1D6BB3; font-size:15px; font-weight:bold; font-family:Verdana,Arial,Geneva,Helvetica; text-align:center; white-space:nowrap; }
div.nav {text-transform:uppercase; color:#1B75BB; font-size:15px; font-weight:bold; font-family:Verdana,Arial,Geneva,Helvetica; text-align:center; white-space:nowrap;}

.drop-down-css {
width:100%;
margin:0 auto;
vertical-align:text-middle;
}
 
.drop-down-css li {
float:left;
display:inline-block;
list-style-type:none;
position:relative;
margin:0 10px;
overflow:hidden;
}
 
.drop-down-css li:hover {
overflow:visible;
}
 
.drop-down-css li ul {
position:absolute;
display:block;
left:0px;
top:20px;
margin:0;
width:180px;
padding:0;
background-color:#f2f1f9;
padding:0 10px 5px 10px;
border-radius: 20px;
}
 
.drop-down-css li ul li {
float:none;
margin:0;
display:block;
}

Here's partial html from the top:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>
                        Mary Clare Leonard ~ writer
    </title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<meta name="description" content="Offical Website of Mary Clare Leonard" />
	<meta name="keywords" content="mary leonard,writer,mary clare leonard,teacher,writing,books,chapbook, 
	author, writing as meditation, journalism, teaching, teaching adolescents, publications, Bard College, 
	Twenty First Century Flint, Red Ochre Lit, Red River Review, Two River Publications, A Girl, Pudding House Publications, 
	The Sweet and Low Down, Antrim House Publications, The Jerusalem Report, articles, literary coach, humor, reviews, poet, " />
	<meta name="robots" content="NOODP">
   
	
<script language="JavaScript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

<link rel="stylesheet" type="text/css" href="mcleonard.css" />	
</head>
<body>


<div align="center">
		<h1>Mary Clare Leonard</h1>
	</div>
<div class="nav"><center>
<div class="drop-down-css">
	<ul>
				  <li> &bull; <a href="index.html">Home</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				    <ul>
<li><p class="small">Contact Mary Leonard<br>(845) 853 - 5270 <br>
        <a href="mailto: mail@maryclareleonard.com"> mail@maryclareleonard.com</a></p></li>
        </ul></li>
   
					<li> &bull; <a href="journalism.html">Journalism</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
					<li> &bull; <a href="teaching.html">Teaching</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
					<li> &bull; <a href="teachingadolescents.html">Teaching adolescents</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>

					<li> &bull; <a href="writingasmeditation.html">Writing as meditation</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
					<li> &bull; <a href="publications.html">Publications</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
		</ul>		
	</div>
	<br><br>
	</div>

Excavator · 01-18-2012, 09:14 AM

Hello petalmax,

Code:

.nav {
    color: #1B75BB;
    font-family: Verdana,Arial,Geneva,Helvetica;
    font-size: 15px;
    font-weight: bold;
    min-width: 1220px;
    text-align: center;
    text-transform: uppercase;
}

or

Code:

.drop-down-css li {
    display: inline-block;
/*float: left;*/
    list-style-type: none;
    margin: 0 10px;
    overflow: hidden;
    position: relative;
}

petalmax · 01-18-2012, 03:17 PM

I really appreciate your reply Excavator. I implemented both of your suggestions one at a time, but without success. Any other thoughts?

Excavator · 01-18-2012, 04:07 PM

It appears 1220px is not wide enough for IE.
IE7 and earlier need the float to make that work so the second suggestion is not very backward compatable.

Instead of that min-width, try adding width: 1230px;

petalmax · 01-19-2012, 05:34 AM

Evcavator, This has worked. However, I don't use IE. I checked it in firefox, safari, and chrome. To further check, I then removed the, white-space:nowrap; and the menu continued to stay in-line when the window size was decreased. But, I did put it back for good measure. Awesome! Thank you.