Button Padding

[Pmaurer]

Argh, I would like to get rid of this annoying padding around the buttons that I put into the site...and i can't find the right padding code line in the style.css sheet of my template! I really either just want it gone or at least to make the padding black.

[marathoner]

You've got some pretty confusing CSS going on there, dude.

This is caused due to the default border around your button images...so you would need to style the IMG in your menu to have a border of 0px.

The border colors appear to be at:
a:link
#nav li a:hover

Just a suggestion...try FF with the Web Developer addon...this will allow you to see and alter CSS dynamically on your screen and see instant results (it also does many other useful things). This allows you to play with the CSS until you get it the way you want it before making changes to the actual CSS file.

[Pmaurer]

Well, when i change those color lines, nothing happens ......aaaand i can't find the addon with the FF you were talking about

[Ruud]

Personally I like Firebug more. (I use them both)

Here are the developers websites:

Firebug: http://www.getfirebug.com/
Web Developer: http://chrispederick.com/work/web-developer/

Ruud

[Pmaurer]

okay, thanks! that definitely helped! But, one more problem. I got the buttons to just be black, how i want them, but now when i try the site in IE, all of them are PURPLE................................................

[Ruud]

okay, thanks! that definitely helped! But, one more problem. I got the buttons to just be black, how i want them, but now when i try the site in IE, all of them are PURPLE................................................

This is from your CSS (last line) seen with firebug 

Code:

#nav li a:link,#nav li a: visited {color:#fd15da;}

Remove the whitespace between a: and visited AND set the correct color. (#fd15da is purple, #000000is black)

Ruud

[Pmaurer]

Ugh, I did exactly what you said and it still is showing up as that stupid purple in IE :,(.

[Ruud]

Try moving them around a bit.

IE (and CSS) also have some issues in what order the rules are set.

Look here: http://www.w3schools.com/CSS/css_pseudo_classes.asp for some info on the ordering of a:something rules.

Ruud

[Pmaurer]

hmm, i tried moving that nav li ........  line around to different areas, to no avail....i dont understand where it could possibly be finding the purple color code in the file when there literally is no purple code.....

[Ruud]

The withe hoover now works in Firefox.

I found something (google) on a IE/CSS bug with an image within an A link.

The solution should be to tell IE not to use borders, the a:something rule should handle that.
 

Code:

img {border:0 none;}

[edit] other option:

Code:

#nav li a:link img,#nav li a:visited img {color:#000000;}

[edit 2] next possible solution:

Code:

img  {border: 1px solid #000000;}
A:visited img    {border: 1px solid #000000;}
A:active img  {border: 1px solid #000000;}
A:hover img    {border: 1px solid #000000;}

(note the use of border instead of color)

Welcome to the wonderful world of CSS 

Ruud

[BerndJM]

Hi,

i dont understand where it could possibly be finding the purple color code in the file when there literally is no purple code

you cannot find the purple code, because this is the Standard HTML behavior:
non visited image-links have a blue border - visited image-links have a purple border
You have to tell the browser (via css) - overwrite this standard - either to use no border or the color you wish (see also the last post from RuudE)

Regards Bernd

[Pmaurer]

I tried this:
#nav li a:link, #nav li a:visited {color: #000000;img {border: 0 none;}
I also tried it in the other lines, but you weren't very specific as to where to actually put that img line into the code, any ideas? thanks!

[BerndJM]

Just one idea:

write correct CSS-Syntax

Code:

#nav li a:link, #nav li a:visited {color: #000000;img {border: 0 none;}

will never be interpretet correctly by any browser
Maybe you want this:

Code:

#nav li a:link, #nav li a:visited {color: #000000;}
img {border: 0 none;}

Regards Bernd

[Pmaurer]

!!! 
thanks! looks beau-t-ful.

[Ruud]

Code:

img {border:0 none;}

Is a line itself. It tells the browser not to use any border around images.

These things are best learned by googeling and just trying.
Currently I am googeling, but unable to try and give a "tested" answer.

My previous post now has 3 options, I think the third one makes the most sense now.

For the rest: try things, by trying - learn about CSS, and you will solve it.

Ruud

[Ruud]

!!! 
thanks! looks beau-t-ful.

Cool, now I can go to sleep 

Cheers

Ruud