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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Location
    Vancouver, BC
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Ah! Last button in my horizontal menu moves to the next line when re-sizing window

    Hi everyone, just started learning HTML/CSS. (My background is database dev.)

    I made a horizontal menu but the last item which contains a button and image will move to the next line when re-sizing the window. I can't seem to troubleshoot it myself after 2 days. I will be forever grateful to the person who can resolve this for me!

    Cheers,
    Lana

    My HTML code:

    Code:
    <div id="body">
    	
    	<div id="page">
    		
    		<!-- ==== START GLOBAL HEADER ==== -->
    	
    		<div id="globalheader">
    			<ul id="globalnav">
    				<li><a href="index.html"><img src="images/mtlogo-54x22.png"></a></li>
    				<li><a href="bio.htm">Bio</a></li>
    				<li><a href="news.html">News</a></li>
    				<li><a href="resume.html">Resume</a></li>
    				<li><a href="photos.html">Photos</a></li>
    				<li><a href="videos.html">Videos</a></li>
    				<li><a href="contact.html">Contact</a></li>
    				<li><a href="links.html">Links</a></li>
    				<li><button id="soundbutton" title="play" onclick="togglePlayPause()"><img id="playpause" src="images/speakerwhite-on-28x26.png"></button></li>  
    			</ul>
    		</div>
    And here's the CSS code:

    Code:
    #globalheader { 
    	background-color: transparent;
    	width: 990px;
    	height: 35px;
    	margin-left:auto;
    	margin-right:auto;
    	border-style: solid;
    	padding: 0 0 0 0;
    	margin-bottom: 20px;
    
    	-moz-border-radius:5px;
    	-webkit-border-radius:5px;
    	border-radius:5px;
    
        	-moz-box-shadow: 0px 3px 3px #cecece;
    	-webkit-box-shadow: 0px 3px 3px #cecece;
    	box-shadow: 0 3px 3px #8b8b8b;
    }
    
    
    
    #globalnav {
    	width: 990px;
    	height: 35px;
    	margin: 0 0 0 0; /* DO NOT REMOVE! This rids the default margins. */
    	padding: 0 0 0 0; /* DO NOT REMOVE! This rids the default padding. */
    	list-style: none;
    	font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; 
    	font-size: 13px;
    	text-shadow: 0 -1px 0px #202020;
    	overflow: hidden; /* optional */
    }
    
    
    #globalnav li { 
    	float: left;
    	height: 35px;	
    	width: 11%;
    	border-right: 1px solid #57627C;
    
    	/* gradient generator used: http://www.colorzilla.com/gradient-editor */
    
    	background: rgb(83,112,181);
    	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUzNzBiNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjOTU5ZWM0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNDYlIiBzdG9wLWNvbG9yPSIjNDY1NzdmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTMlIiBzdG9wLWNvbG9yPSIjMjYzOTUxIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzA2MWMyZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    	background: -moz-linear-gradient(top, rgba(83,112,181,1) 0%, rgba(149,158,196,1) 0%, rgba(70,87,127,1) 46%, rgba(38,57,81,1) 53%, rgba(6,28,45,1) 100%);
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(83,112,181,1)), color-stop(0%,rgba(149,158,196,1)), color-stop(46%,rgba(70,87,127,1)), color-stop(53%,rgba(38,57,81,1)), color-stop(100%,rgba(6,28,45,1)));
    	background: -webkit-linear-gradient(top, rgba(83,112,181,1) 0%,rgba(149,158,196,1) 0%,rgba(70,87,127,1) 46%,rgba(38,57,81,1) 53%,rgba(6,28,45,1) 100%);
    	background: -o-linear-gradient(top, rgba(83,112,181,1) 0%,rgba(149,158,196,1) 0%,rgba(70,87,127,1) 46%,rgba(38,57,81,1) 53%,rgba(6,28,45,1) 100%);
    	background: -ms-linear-gradient(top, rgba(83,112,181,1) 0%,rgba(149,158,196,1) 0%,rgba(70,87,127,1) 46%,rgba(38,57,81,1) 53%,rgba(6,28,45,1) 100%);
    	background: linear-gradient(to bottom, rgba(83,112,181,1) 0%,rgba(149,158,196,1) 0%,rgba(70,87,127,1) 46%,rgba(38,57,81,1) 53%,rgba(6,28,45,1) 100%);
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5370b5', endColorstr='#061c2d',GradientType=0 );
    }
    
    
    #globalnav li:not(:last-child):hover {
        
    	/* We use inset to create inner glow when hovering */
    
    	background: rgb(83,112,181);
    	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUzNzBiNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMzQzYTc3IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNDYlIiBzdG9wLWNvbG9yPSIjMjAzYzdjIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTMlIiBzdG9wLWNvbG9yPSIjMGIyOTRmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMTgyYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    	background: -moz-linear-gradient(top, rgba(83,112,181,1) 0%, rgba(52,58,119,1) 0%, rgba(32,60,124,1) 46%, rgba(11,41,79,1) 53%, rgba(0,24,43,1) 100%);
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(83,112,181,1)), color-stop(0%,rgba(52,58,119,1)), color-stop(46%,rgba(32,60,124,1)), color-stop(53%,rgba(11,41,79,1)), color-stop(100%,rgba(0,24,43,1)));
    	background: -webkit-linear-gradient(top, rgba(83,112,181,1) 0%,rgba(52,58,119,1) 0%,rgba(32,60,124,1) 46%,rgba(11,41,79,1) 53%,rgba(0,24,43,1) 100%);
    	background: -o-linear-gradient(top, rgba(83,112,181,1) 0%,rgba(52,58,119,1) 0%,rgba(32,60,124,1) 46%,rgba(11,41,79,1) 53%,rgba(0,24,43,1) 100%);
    	background: -ms-linear-gradient(top, rgba(83,112,181,1) 0%,rgba(52,58,119,1) 0%,rgba(32,60,124,1) 46%,rgba(11,41,79,1) 53%,rgba(0,24,43,1) 100%);
    	background: linear-gradient(to bottom, rgba(83,112,181,1) 0%,rgba(52,58,119,1) 0%,rgba(32,60,124,1) 46%,rgba(11,41,79,1) 53%,rgba(0,24,43,1) 100%);
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5370b5', endColorstr='#00182b',GradientType=0 );
    }
    
    
    #globalnav li:not(:last-child):active {
    
    	/* When the user clicks the button, we simply change the box inset (compared to the "hover") */
    
    	background: rgb(83,112,181);
    	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUzNzBiNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMzQzYTc3IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNDYlIiBzdG9wLWNvbG9yPSIjMjAzYzdjIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTMlIiBzdG9wLWNvbG9yPSIjMGIyOTRmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMTgyYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    	background: -moz-linear-gradient(top, rgba(83,112,181,1) 0%, rgba(52,58,119,1) 0%, rgba(32,60,124,1) 46%, rgba(11,41,79,1) 53%, rgba(0,24,43,1) 100%);
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(83,112,181,1)), color-stop(0%,rgba(52,58,119,1)), color-stop(46%,rgba(32,60,124,1)), color-stop(53%,rgba(11,41,79,1)), color-stop(100%,rgba(0,24,43,1)));
    	background: -webkit-linear-gradient(top, rgba(83,112,181,1) 0%,rgba(52,58,119,1) 0%,rgba(32,60,124,1) 46%,rgba(11,41,79,1) 53%,rgba(0,24,43,1) 100%);
    	background: -o-linear-gradient(top, rgba(83,112,181,1) 0%,rgba(52,58,119,1) 0%,rgba(32,60,124,1) 46%,rgba(11,41,79,1) 53%,rgba(0,24,43,1) 100%);
    	background: -ms-linear-gradient(top, rgba(83,112,181,1) 0%,rgba(52,58,119,1) 0%,rgba(32,60,124,1) 46%,rgba(11,41,79,1) 53%,rgba(0,24,43,1) 100%);
    	background: linear-gradient(to bottom, rgba(83,112,181,1) 0%,rgba(52,58,119,1) 0%,rgba(32,60,124,1) 46%,rgba(11,41,79,1) 53%,rgba(0,24,43,1) 100%);
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5370b5', endColorstr='#00182b',GradientType=0 );
    }
    
    #globalnav li a {	
    	float: center;
    	color: white; 
    	text-decoration: none; 
    	text-align: center; 
    	display: block; 
    	line-height: 35px;
    	padding: 0 0 0 0;
    	margin: 0 0 0 0;
    	outline: none; 
    }
    
    
    #globalnav li:first-child {	
    
    	/* Rounded corner for the first item. Shorthand: Top left, Top right, Bottom right, Bottom left. We also remove the borders, since they don't need them. */
    
    	width: 12%;
    	-moz-border-radius: 5px 0 0 5px;
    	-webkit-border-radius: 5px 0 0 5px;
    	border-radius: 5px 0 0 5px;
    }
    
    
    #globalnav li:last-child {
    
    	/* Rounded corner for the last item. Shorthand: Top left, Top right, Bottom right, Bottom left. We also remove the borders, since they don't need them. */
    	
    	width: 10%;
    	-moz-border-radius:0 5px 5px 0;
    	-webkit-border-radius:0 5px 5px 0;
    	border-radius:0 5px 5px 0;
    	border-right: none;
    }
    
    
    #globalnav li:first-child a img {
    	
    	/* The first child image - the logo - has to be centered. Because of the image dimensions, we manually need to shift it a bit. */
    	
    	vertical-align: middle; 
    	border: none;
    }
    
    #soundbutton {	
    	
    	background-color: transparent; 
    	border: none;
    	margin: 3px 0 0 20px;
    }

  • #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 lanacaralee,
    I'm not having any luck recreating your issue. Using the code snippet you've provided, there is no float drop.

    Can you link us to the test site?
    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


  •  

    Posting Permissions

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