Link to home
Start Free TrialLog in
Avatar of shampouya
shampouya

asked on

How do I stop this border from altering my image position?

I have three square images on the top left of my webpage. When I hover over each one, I get a white border, which is good, but I noticed that the border pushes the image to the right when I hover over it. How do I prevent that?

my webpage
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

In the W3C box model http://www.w3.org/TR/CSS2/box.html , borders along with padding and margins are on the outside of the content box.  If you add a border, it increases the size of the element.  If you want your box to not move, make the 'normal' image have a border the same color as the background and change the color when you mouseover it.

Also, your page does not have a proper DOCTYPE which means it will render in 'Quirks' mode and not 'Standards' mode.  In IE this means that a number of things do not work properly.  Also, when you add the DOCTYPE, it must be the very first thing on the page or IE will ignore it.  No comments or anything else are allowed before the DOCTYPE.  http://www.w3.org/QA/2002/04/valid-dtd-list.html
you can put in a div tag and position it using ABSOLUTE attribute

http://www.wickham43.net/divboxes.php
Try this:

.colormenudiv {
position: absolute;
margin-left: 5px;
margin-top: 5px;
}

Open in new window


And good luck with your homework ;) LOL...
ASKER CERTIFIED SOLUTION
Avatar of Kim Walker
Kim Walker
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of shampouya
shampouya

ASKER

Ok I added a transparent 1px border to each and that border now turns white when I hover over it, but is there a way I can keep that border white once it is selected? I tried this and it didn't remain white once selected:

#purpleSquare:hover{border-color: #FFFFFF;}
#purpleSquare:active{border-color: #FFFFFF;}
#blueSquare:hover{border-color: #FFFFFF;}
#blueSquare:active{border-color: #FFFFFF;}
#redSquare:hover{border-color: #FFFFFF;}
#redSquare:active{border-color: #FFFFFF;}

Open in new window

'active' is only good for the time that you have the mouse button down.  Nothing more.  If you want to change the border color on click, you have to use javascript.  Info and examples here: http://www.w3schools.com/jsref/prop_style_bordercolor.asp
And a:active isn't supported by old browsers. I recommend using Javascript or Server-side code (like in a session or website cookie) to make the link active. Because when you refresh the page the link will be normal instead of active state.

Made a basic Javascript example for you, it adds a active class to the clicked link and is also cross-browser compatible:

<!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" />
<title>Active link</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">
.menu .active {
	color:#ff0000;
}
</style>
</head>

<body>
<ul class="menu">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
</ul>
<script type="text/javascript">
$('.menu a').click(function(){
  $('.menu a').removeClass('active');
  $(this).toggleClass('active');
});
</script>
</body>
</html>

Open in new window

Meet the power of the jQuery library.
Ok one more question, I figured out a workaround to get the selected color to have a white border. But once I select a color, the hover feature doesn't seem to work. Try for yourself below. Do you know why?

my webpage
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
thanks