Links inside a border

#1
vaironl

Posted 02 September 2011 - 07:47 AM

Programmer

Members
117 posts

Hello guys , Vaironl here. I'm trying to make a website for practice not to upload to the internet and I'm having a bit of trouble.

I'm trying to make a border and inside having links horizontally , but when the mouse hovers over it the background extends like if I added vertical padding . See it for yourself.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 


<html>

<head>

<title>

Test

</title>

<style type = "text/css">

body {

background-color:purple;

border:5px white solid;

}


div

{ 

position:absolute;

left:150px;

top:10px;

color:white;


}


</style>

</head>

<body>


<p><h3><a href="http://google.com">Google</a></h3></p>

<div><p><h2 class="link"><a href="test">Test</a></h2></p></div>


</body>

</html>

#2
Vaielab

Posted 02 September 2011 - 07:54 AM

Programming God

Members
547 posts

What os and browser are you using... here (ubuntu / firefox 5.0) nothing move

#3
vaironl

Posted 02 September 2011 - 07:56 AM

Programmer

Members
117 posts

Vaielab said:

What os and browser are you using... here (ubuntu / firefox 5.0) nothing move

Chrome

#4
Vaielab

Posted 02 September 2011 - 08:46 AM

Programming God

Members
547 posts

I tried it with chrome on ubuntu and windows xp, and nothing changes when I move my mouse over
Try to post an screenshot

#5
vaironl

Posted 02 September 2011 - 02:53 PM

Programmer

Members
117 posts

Vaielab said:

I tried it with chrome on ubuntu and windows xp, and nothing changes when I move my mouse over
Try to post an screenshot

Sorry for that I din't place the hover code here it is...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 


<html>

<head>

<title>

Test

</title>

<style type = "text/css">

body {

background-color:purple;

border:5px white solid;

}


#link{

a:link{color:black;

background-white;

text-decoration:none;

}

a:visited{background-color:black;

color:yellow;}

a:hover{

color:white;

border:2px solid black;

padding: 3px;

text-decoration:none;

}

a:active{

background-color:white;

color:blue;

padding:4px;

border:3px solid black;

text-decoration:none;}

}



</style>

</head>

<body>


<p id="link1"><h3><a href="http://google.com">Google</a></h3></p>


</body>

</html>

If you take the Id out it works, but i want to edit different links differently.

#6
Vaielab

Posted 02 September 2011 - 08:49 PM

Programming God

Members
547 posts

Sorry, I don't know what to say...
But under ubuntu firefox, ubuntu chrome, windows firefox & windows chrome, nothing move... the only thing that change is that the color change once it was clicked...

But I looked at your code, and you seem to use some json css... wich is very not compatible with all browser (almost no browser are compatible with it)
Insted of

#link{

a:link{color:black;

background-white;

text-decoration:none;

}

a:visited{background-color:black;

color:yellow;}

a:hover{

color:white;

border:2px solid black;

padding: 3px;

text-decoration:none;

}

a:active{

background-color:white;

color:blue;

padding:4px;

border:3px solid black;

text-decoration:none;}

}

You should use


#link a:link{color:black;

background-white;

text-decoration:none;

}

#link a:visited{background-color:black;

color:yellow;}

a:hover{

color:white;

border:2px solid black;

padding: 3px;

text-decoration:none;

}

#link a:active{

background-color:white;

color:blue;

padding:4px;

border:3px solid black;

text-decoration:none;}