Cross-Browser difficulties...

I cant seem to get my coding right for the header section - although I have goggled my problem.
in Firefox it stays left and in IE it reads margins differently.
it's most likely to be my dumb coding but help would be appreciated.

Here is the page i am having difficulty with: click here

and the css for paragraphs and headings......

Code: Select all

#heading
{
text-decoration: underline;
text-size: 150%;
text-align: center;
font-family: verdana;
display: block;
margin-top: 15em;
position: fixed;
color: white;
border: none;
}

#paragraph
{
font-family: verdana;
padding: 0.2em 1em;
position: fixed;
display: block; 
background-color:#111;
color: white;
text-decoration: none;
width: 50em;
margin-left: 5em;
margin-top: 17.5em;
border: 4px double #fff;
}

Thanks,
Dapandyman.
(Note: the paragraphs are fine.)

Alright i've been looking at your code and i've some suggestions. Firstly, you've made an id (which is unique and can only be used once per page) for paragraphs. You'll probably have more than one paragraph on your page so you should either do one of the following:

1) Make the default paragraph have all your css settings so that you dont have to keep specifying;

Code: Select all

<p id="whatever>

you'll just have to say

Code: Select all

<p>

and it will already have your style settings. To do that, in the css, change

Code: Select all

#paragraph {

to

Code: Select all

p {

2) Make

Code: Select all

#paragraph

into

Code: Select all

.paragraph

so that will make it a re-useable class. and in the html you say

Code: Select all

<p class="paragraph">

instead of

Code: Select all

<p id="paragraph">

Now also, in the html, you've added a background colour to the body. If you plan on having the body always black, then it'd be better to put that into your body tag in the css like so;

Code: Select all

body {
background-color: #000;
background-image: url(sunset.jpg);
background-repeat : no-repeat;
}

I hope this is useful for you for now. I'm looking into your original problem now.

Alright, in your html, you've specifed that the unordered list has an id of 'navlist' but you have no css for it. You've applied your list settings to the overall container, and in that case, giving your unordered list it's own id is irrelevant.

Actually, now that I look at this, your problem is that your not using divs correctly, and your using em to align everything where you want it on the page, like you've got a paragraph that is 17em from the top of the page, em is relevant to the persons text size, so if they have it set really large, your page will look so messed up. Stop using em to align things, use divs to structure it all the then set things like margins of paragraphs inside a div, to align things properly.

Does that help at all ?

Yeah - thanks a lot, excellent advice
I'm gonna fix everything now
Thanks,
Dapandyman.

Your very welcome ! If you still have trouble after fixing it all up, post up again with your new code and i'll have another look !

You might find my article about CSS shorthand useful. It's a link at the bottom of the sticky in this forum.

i give it a look now
cheers