Please help me with css code!

**evan5** · 11-22-2008 01:37 PM

Hey fellas, I got another wee problem with IE and FIrefox css coding

In my Css sheet I have the code for regular:
a:link {color

ink}
a:visited {color

ink}
a:hover {color:black}
a:active {color

ink}

a
{
float:center;
width:6em;
height:2em;
text-decoration:none;
color

ink;
padding:5px 6px;
border-right:0px solid white;
border-left:0px solid white;
}

a:hover {background-color

ink; height: 3px;}

Problem is, I have a nice pink border around images when you hover your mouse above them, it looks really hot in IE, but firefox.....not so much...damn you firefox!! anyway, instead of the complete border coming up around the image like in IE, in firefox, it has this weird like, 1/3 of way border, and then it stops. I use div.img for those pics, and this is the css code I have, maybe there are errors in it

div.img
{
margin: 3px;
border: 1px;
height: auto;
width: auto;
float: center;
text-align: center;
}

div.img img
{
display: inline;

border: 3px solid #ffffff;
}

div.img a:hover img
{
border: 3px solid black;
}

In the html page, my code for images looks like this:
<div class="img">
<a href="abc.html">
<img src="website pics/pic/picture.jpg" alt="Enter" width="200"
height="200" /></a>
<a href="abc.html">
<img src="website pics/pic/picture.jpg" alt="Enter" width="200"
height="200" /></a>
<div class="desc">Picture Description</div>
</div>

I think I'm doing something wrong, it works good in IE, but firefox is getting messed up a little sumtin. This is really peeving me, all you CSS wizs please help!!!!!!!!!!

**coothead** · 11-23-2008 05:51 AM

Hi there evan5

I think I'm doing something wrong...

That is certainly true.

You are using IE as your guide when coding, big mistake.

This page looks perfect in Internet Explorer but when I load it in Firefox it gets it all wrong.

Always code for a compliant browser, Opera, Safari or Firefox, and then tweak the code for the non-compliant IE browsers.

Here is the your code reworked...

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css">
div.img  {
    text-align:center;
 }
div.img img {
    width:200px;
    height:200px;
    border: 3px solid #fff;
 }
div.img a {
    display:block;
    width:206px; 
    height:206px;
    padding:6px;
    margin:auto;
    text-decoration:none;
 }
div.img a:hover {
    background-color:#ffc0cb;
 }
div.img a:hover img {
    border:3px solid #000;
 }
</style>

</head>
<body>

<div class="img">

<a href="abc.html"><img src="http://www.coothead.co.uk/images/ball_shad.jpg" alt="Enter"></a>
Picture Description

</div>

</body>
</html>

Note:-
As you were advised by Major Payne here about color names, I have changed pink to #ffc0cb.

coothead

**evan5** · 11-23-2008 07:13 PM

Coothead..i love you!
That code works really well, except I am having one small issue with it.

I try to have 2-3 pictures in a row, like the ones below would be next to each other:

<div class="img">
<a href="abc.html">
<img src="website pics/pic/picture.jpg" alt="Enter" width="200"
height="200" /></a>
<a href="abc.html">
<img src="website pics/pic/picture.jpg" alt="Enter" width="200"
height="200" /></a>
<div class="desc">Picture Description</div>
</div>

And I am having trouble with this part you gave me:

div.img a {
display:block;
width:206px;
height:206px;
padding:6px;
margin:auto;
text-decoration:none;
}

It works good, now the borders are complete(firefox and IE), but they only appear 1 at a time, or one, each row,

with the display:block; code, it makes them be one per row, but fixes the border in firefox, but when I change display:block; to display:inline;, it goes back to 2 pics per row(how I want it), but makes the border screwed up again.( the wierd 1/3 of the way border)

How would I go about fixing this lil problem, I feel like I almost got it, it might be somthing minor I hope??

THanks again coothead, you da man

**coothead** · 11-24-2008 03:39 AM

Hi there evan5,

for more than one image I would suggest that you use a list element, ul, to position them.

Here is an example...

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css">
ul.img  {
    width:654px;  /*this value is equal to 'li' width times 3 */
    margin:0 auto;
    padding:0;
    list-style-type:none;
    text-align:center;
 }
ul.img  li {
    width:218px; /* this value is equal to the total 'a' width */
    float:left;
 }
ul.img img {
    width:200px;
    height:200px;
    border: 3px solid #fff;
 }
ul.img a {
    display:block;
    width:206px; 
    height:206px;
    padding:6px;
    margin:auto;
    text-decoration:none;
 }
ul.img a:hover {
    background-color:#ffc0cb;
 }
ul.img a:hover img {
    border:3px solid #000;
 }
</style>

</head>
<body>

<ul class="img">

<li>
<a href="abc.html"><img src="http://www.coothead.co.uk/images/ball_shad.jpg" alt="Enter"></a>
Picture Description
</li>

<li>
<a href="abc.html"><img src="http://www.coothead.co.uk/images/ball_shad.jpg" alt="Enter"></a>
Picture Description
</li>

<li>
<a href="abc.html"><img src="http://www.coothead.co.uk/images/ball_shad.jpg" alt="Enter"></a>
Picture Description
</li>

</ul>

</body>
</html>

coothead

**evan5** · 11-24-2008 03:09 PM

Thank you so much for the help Coothead! that worked really well, ur da best man!

I put the code into my external CSS sheet instead of the header, would I still need the two meta tags you gave me in the header?

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

I dont have any of the "content-type" meta tags yet in any of my pages, should I put that meta in to all pages?

THanks again for all the help, I real appretiate it.

**coothead** · 11-24-2008 03:19 PM

Hi there evan5,

...should I put that meta in to all pages?

It is considered good coding practice to use those two metatags.

coothead

**evan5** · 11-24-2008 05:09 PM

oh ok, i will put them in then, thanks

I came up against a small delema with having word links under the pics:

<ul class="img">
<li><a href="link.html">
<img src="website pics/pic/pic.jpg" alt="Enter" width="200"
height="200" /></a></li>
<li><a href="link.html">
<img src="website pics/pic/pic/pic.jpg" alt="Enter" width="200"
height="200" /></a></li>
<div class="desc"><a href="link.html">Link</a></div>
</ul>

I have a link under the row of two pictures, but since it is in the list, it is getting screwed up , when i put it out of the list, it is still messed up, IDK what <div> elements to give to it in css, i just want the letters "link" to turn pink when you hover over them, do you have any suggestions coothead?

**coothead** · 11-25-2008 12:58 PM

Hi there evan5,

does this help...

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css">
ul.img  {
    width:654px;  /*this value is equal to 'li' width times 3 */
    margin:0 auto;
    padding:0;
    list-style-type:none;
    text-align:center;
 }
ul.img  li {
    width:218px; /* this value is equal to the total 'a' width */
    float:left;
 }
ul.img img {
    width:200px;
    height:200px;
    border: 3px solid #fff;
 }
ul.img a {
    display:block;
    width:206px; 
    height:206px;
    line-height:40px;
    padding:6px;
    margin:auto;
    text-decoration:none;
 }
ul.img a:hover {
    background-color:#ffc0cb;
    color:#ffc0cb;
 }
ul.img a:hover img {
    border:3px solid #000;
 }
</style>

</head>
<body>

<ul class="img">

<li>
<a href="abc.html">
<img src="http://www.coothead.co.uk/images/ball_shad.jpg" alt="Enter">
Picture Description
</a>
</li>

<li>
<a href="abc.html">
<img src="http://www.coothead.co.uk/images/ball_shad.jpg" alt="Enter">
Picture Description
</a>
</li>

<li>
<a href="abc.html">
<img src="http://www.coothead.co.uk/images/ball_shad.jpg" alt="Enter">
Picture Description
</a>
</li>

</ul>

</body>
</html>

coothead

**evan5** · 11-25-2008 01:39 PM

yeap. now it works , thanks man!

**coothead** · 11-25-2008 02:01 PM

No problem, you're very welcome.

Thread: Please help me with css code!

Thread Tools

Display

Please help me with css code!

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions