Why do my link colors not work in FF or IE? 1

[okpeery]

This is my first site done entirely without tables or Dreamweaver or images to make rounded corners. I thought I passed a major milestone but apparently I am just embarking on one. My site works fine in Safari. In FF and IE the default link colors appear. It should be black and in hover orange. I also don't know how to achieve the desired spacing with CSS so I have <br> tags in the html. I would like to separate content and layout so any advice would be appreciated.

http://www.jean-jacquesgallery.com/resume2

 

[Foamcow]

a {
    text-decoration: none;
}

There is no color specified for links so they will appear as the default colour (normally blue).

a:hover
        		{
        		color: [b]#orange;[/b]
        		}

You don't need the "#" character before the colour name.
Use the # when specifying a colour in hex.

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2

 

[Foamcow]

Actually, you have specified a colour for a:link
but again you have used the # character before the colour name.
Get rid of that and it works.

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2

 

[Foamcow]

Sorry, forgot the spacing bit...

Use padding and margins to control spacing between elements.

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2

 

[okpeery]

Thanks Foamcow, it works better now. I know I can use margins and padding to space things out but I need a little more direction. Instead of the 2 <br> tags to get more space between the <p> and the <h2> what would I put in the css instead to achieve the same spacing more or less?

I want the <p> to be close to the <h2> tag above it. I think of the h2 and paragraph below as being together. i want more spacing before the next <h2> and <p>. Does this make sense?

 

[Foamcow]

Rather than give you specifics I'll point you in the right direction

Well you could set a top margin on the <h2> or a bottom margin on the <p>.

For example:

h2 { 
   margin-top:2em; 
}

Use a relative unit such as em or % and the space will scale with the font size.

Likewise to set the spacing between the <h2> and the following element (be that a <p>, a <ul> or whatever).

h2 { 
   margin-top:2em; 
   margin-bottom:0;
}

Or in short(ish)hand

h2 {
   margin:2em 0 0 0;

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2

 

[Foamcow]

In your case it looks like you need to adjust padding rather than margins.

Tip: It's always a good idea to specify margin and padding so that you get all browsers on a level playing field. You see, some will apply more padding and margins to some elements than other browsers.
I always start my stylesheets with

* {
   margin:0;
   padding:0;
}

That sets the margin and padding of every element to 0 before I start. That way I know that it will be 0 in IE, 0 in Firefox, 0 in Safari... etc.

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2