please help on css layout

[geyids]

Hi Forums
I have been making a website but I'm abit stuck. I have attached the files that I have made but the page doesn't show as good on Firefox like on IE6. I have made the side menu which I have never made again and thats my big problem. Please help me on this field.
Regards John

[karinne]

A link would be preferable to get immediate help.

[geyids]

oh good Idea. here is the link and this is the css file. Please help and don't mind the text and the links. I just wanted to fix the layout first

[moojoo]

1. Always design for Firefox then fix for IE. Will save you lots of headaches.

2. Use conditional comments and IE specifc CSS for IE fixes only.

Code: Select all

<!--[if lte IE 7]>
<link rel="stylesheet" href="css/ieHacks.css" media="screen" type="text/css" />
<![endif]-->

Now on to your problem.

try chaning this

Code: Select all

p {
    padding: 0 0 1.4em;
    font: 1em/1.4em arial,sans-serif;
    text-indent: 0;
}

to

Code: Select all

p {
    padding: 0 0 1.4em 140px;
    font: 1em/1.4em arial,sans-serif;
    text-indent: 0;
}

currently you only have the padding set to top, right, bottom.

Cheers.

[karinne]

Originally Posted by moojoo

try chaning this

Code: Select all

p {
    padding: 0 0 1.4em;
    font: 1em/1.4em arial,sans-serif;
    text-indent: 0;
}

to

Code: Select all

p {
    padding: 0 0 1.4em 140px;
    font: 1em/1.4em arial,sans-serif;
    text-indent: 0;
}

currently you only have the padding set to top, right, bottom.

Cheers.

Or top, left/right, bottom

When only 3 values are given for the margin and padding properties is assigns them as TOP LEFT/RIGHT BOTTOM

[moojoo]

Yes but in this case it was applying the incorrect value. I should word things better. Worked 28 hours in the last 2 days.. I am frizzled.

[geyids]

I have added the 140px and its fine in firefox and worse in IE. is this going to help?

Code: Select all

<!--[if lte IE 7]>

I didn't understan on the top, right, bottom thing. Whats that?

[1840dsgn]

When you write this:

padding: 2px 5px 3px;

it will add 2px padding to the TOP, 5px to LEFT and RIGHT, and 3px to BOTTOM

Also yes that conditional comment will work fine. You need to create a stylesheet for IE that changes the necessary formatting to make it work in IE browsers. So you will have more than one stylesheet.

I've just written an article on conditional comments

You can read it here...

mike

[geyids]

thanks. and how do you link the two style sheets on the same html file?

something link

Code: Select all

<link rel="stylesheet" type="text/css" href="style.css" />

[stupid dog]

hey 1840 thanks

I've been working with NS, FF and IE all open, and getting everything 'ok' between the 3, accepting the fact that all will have to be a little off.

I'll use your tip of the conditional statement make an IE hack stylesheet instead.

I wonder, if all designers just stopped hacking for IE, and web pages were broken on IE, and we put in a statement to use NS or FF if you wanted to view the page correctly - would that ever force IE to changes its ways? oh well, wishful thinking....

[1840dsgn]

Well on my blog...

if viewed in IE6 I have a button appear sayng upgrade to IE7, and another saying best viewed in Firefox.

if viewed in IE7 it only shows the Firefox button.

and in firefox it don't show either - thats me doing my bit to promote firefox!

[Lchad]

Mike you're such a rebel!!! :sneaky2:

[1840dsgn]

haha well people need to be told don't they!