Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2012-03-14
10
Medium Priority
?
230 Views
Last Modified: 2012-03-14
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
0
Comment
Question by:shampouya
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
  • +2
10 Comments
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 37722240
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
0
 
LVL 15

Expert Comment

by:Ess Kay
ID: 37722383
you can put in a div tag and position it using ABSOLUTE attribute

http://www.wickham43.net/divboxes.php
0
 
LVL 12

Expert Comment

by:Tony van Schaik
ID: 37722489
Try this:

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

Open in new window


And good luck with your homework ;) LOL...
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 22

Accepted Solution

by:
Kim Walker earned 1000 total points
ID: 37722525
Since your background color is changeable, giving them a border to match the background may be complicated. You could give them a transparent border the same width as the white border.
border: solid 1px transparent;

Open in new window

0
 

Author Comment

by:shampouya
ID: 37722638
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

0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 37722795
'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
0
 
LVL 12

Expert Comment

by:Tony van Schaik
ID: 37722823
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.
0
 

Author Comment

by:shampouya
ID: 37723501
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
0
 
LVL 84

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 1000 total points
ID: 37723555
For some reason, the jQuery is writing the border value a different way that is over-riding the 'hover'.  You can see it in Firebug.  

And <input> and <select> tags do not have 'innerHTML'.  Only elements that have start and end tags like <p> </p> have 'innerHTML'.
0
 

Author Closing Comment

by:shampouya
ID: 37723558
thanks
0

Featured Post

[Webinar] Lessons on Recovering from Petya

Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

722 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question