Jump to content

Active Link Seems To Resize

pagallery

By pagallery
in CSS

Recommended Posts

pagallery Newbie

pagallery

Posted
Posted

I have created a number of button type links and whenever the link is active the button height seems to get bigger with everything else on the page shifting down. The top of the button doesn't move, the text doesn't move, just the space below the text.I've tried setting the height and the top and bottom borders in the active state but it doesn't seem to make any difference, although by now I've tried so many things I've lost track.It is happening wherever I have created this button effect, not just on the horizontal and vertical "buttons" but on one-offs as well. It is happening in all the DIVs where I have used this type of code. If I haven't set up the button effect, I'm not getting the resizing.Here's the code I'm using - can anybody make any suggestions as to what is causing the resizing? Thanks

#navigation { 	padding-top: 0; 	padding-right: 0;	padding-bottom: 0;	padding-left: 0; 	}  #navigation a, #navigation a:link, #navigation a:visited {	display:block;	width:11em; /* watch this - in IE if it is too wide, it can throw just text from the last button so that it appears in both the button and outside */	height:2em; /* this sets up the size of the menu buttons */	background: #d7e7ef; /* mans shadow */	border-top:.25em solid #ffffff; 	border-left:.25em solid #dddddd; /* pale grey */	border-bottom:.25em solid #dddddd; /* pale grey */	border-right: .25em solid #dddddd; /* pale grey */	/* this border treatment makes it look like a button */	margin-top:.1em; /* Use margin-top not margin-bottom as this can cause problems further down the line in Opera.  This spaces the buttons from the previous DIV */	padding-top: .6em;  /* this spaces the button text vertically within the button */	text-align:center;	text-decoration:none;	font-size: x-small;	font-weight: bold;	color:#000000;	overflow:hidden; /* move text to the vertical centre. Add overflow:hidden for IE if the text is large enough to cause IE to increase the vertical height of the button.*/	float:left;	margin-right: 0.25em;/*this turns the vertical set of buttons to a horizontal set */	}			 #navigation a:hover {color:#ffffff; /*	white */					  background:#005aaa; /* shefford blue */					  border-top:.25em solid #dddddd; /* pale grey */					  border-left:.25em solid #000000; /* black */					  border-bottom:.25em solid #000000; /* black */					  border-right:.25em solid #000000; /* black */					   } #navigation a:active {color:#ffffff; /*	white */	}

Link to comment
Share on other sites
pagallery Newbie

pagallery

Posted
  • Author
Posted

Here's a link to a demo of what is happeningLink to demoI've also put the code from the base template below (which started life as a Dreamweaver supplied template).The resizing occurs in the vertical and horizontal links which look a bit like buttons (DIV id=navigation and div id=sidebar1). No resizing occurs in DIV id=footer

<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="../stylesheets/main.css" rel="stylesheet" type="text/css" /><!--[if IE]><style type="text/css"> /* place css fixes for all versions of IE in this conditional comment */ #sidebar1,  #sidebar2, #largesidebar1 { padding-top: .1em; } #mainContent #header { zoom: 1; padding-top: .05em; }/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */</style><![endif]--></head><body><div class="container">	<div id="headbar1">HEADER IMAGE TO GO HERE</div>		<div id="headbar2">	   HEADER TOPIC LINKS GO HERE   </div>	<br class="clearfloat" /><!-- End of the header set up -->      	<div id="address"><a name="Top" id="Top"></a>	 CONTACT DETAILS GO HERE   </div>	 <div id="navigation">   		<a href="../html/buttondemo.html" title="Home">Home</a>		<a href="../html/linkdemo.html" title="About us">About us</a>		<a href="../html/linkdemo.html" title="Treatments">Treatments</a>		<a href="../html/linkdemo.html" title="First Appointment">What to expect</a>		<a href="../html/linkdemo.html" title="Fees & Hours">Fees & Hours </a>				<a href="../html/linkdemo.html" title="Contact us">Contact us</a>				<br class="clearfloat"  />    </div>  	 	<div id="sidebar1">		<a class="imgbutton" href="../html/linkdemo.html"><img src="../images/Newsletter.gif" alt="Newsletter" width="99" height="146" /></a> 		<a class="button" href="../html/linkdemo.html" title="Newsletters">View our newsletters</a></p>					   <!-- end #sidebar1 -->   </div><!-- TemplateBeginEditable name="Main Content" -->	<div id="mainContent">	   <h1> MAIN CONTENT</h1>	   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. </p>	   <p>Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. </p>	   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis.</p>	   <!-- end #mainContent -->	</div>	<!-- TemplateEndEditable -->	<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->	 <br class="clearfloat" />      <div id="footer">	<a href="../html/buttondemo.html" title="Home">Home </a>	<a href="../html/linkdemo.html" title="Directions">Directions </a>	<a href="../html/linkdemo.html" title="Links">Links </a>	<a href="../html/linkdemo.html" title="Privacy Policy">Privacy Policy </a>	<a href="../html/linkdemo.html" title="Terms of Use">Terms of Use </a>	<a href="../html/linkdemo.html" title="Sitemap"> Sitemap</a>  <!-- end #footer --></div></div></body></html>

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...