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
    Mar 2009
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts

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

    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>
    Last edited by petalmax; 01-19-2012 at 06:43 AM. Reason: problem has been resolved

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,694
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    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;
    }
    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
    New Coder
    Join Date
    Mar 2009
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I really appreciate your reply Excavator. I implemented both of your suggestions one at a time, but without success. Any other thoughts?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,694
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    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;
    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

  • Users who have thanked Excavator for this post:

    petalmax (01-19-2012)

  • #5
    New Coder
    Join Date
    Mar 2009
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.


  •  

    Tags for this Thread

    Posting Permissions

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