Advice wanted (IE/Firefox problem)

Jako posted this at 21:58 — 17th September 2007.

Joined: Sep 2006

Please could someone help me fix this issue i'm having;

I am trying to align text beside an image, however, IE shows the image and text properly aligned whereas Firefox doesn't.

The text should be to the bottom of the logo and next to it.

Firefox shows it above the logo !!!

I am inexperienced in CSS but am learning.

Please see:

http://www.davidian.pwp.blueyonder.co.uk

The HTML (of the image and text) is:

Quote:

Vale Royal Abbey

etc......

The CSS is:

Quote: #Logo {
height:92px;
background-color: #FFFFFF;
background-image: url("Images/ClubLogo.gif");
background-repeat: no-repeat;
margin: 0.2em 0 0 5.5em;
padding: 0 0 1em 0;
clear: left;
}

#Logo h4 {

margin: 4em 0 0 5.5em;

}
#header {

height:169px;
background-color: #FFFFFF;
background-image: url("Images/header.gif");
background-repeat: no-repeat;
padding-left:2.0em;
margin: 1em 0 0 4em;

h4 {
font-family: "Palatino Linotype";
font-size: 1.4em;
font-weight:bold;
color:#7A0002;
}
}

Please note i am not experienced so plz don't flame me - i just need some constructive advice.

TIA

Smp Business Hosting posted this at 16:53 — 18th September 2007.

They have: 60 posts

Joined: Aug 2007

This isn't the answer you are looking for but you could add the text in the logo image, change it to a foreground image and add alt text to it.

Regards, Steve

greg posted this at 17:48 — 19th September 2007.

He has: 1,581 posts

Joined: Nov 2005

It might be the "clear: left;" you have in your Logo ID

but you might have to specifically align it to the bottom

webseller2002 posted this at 00:16 — 21st September 2007.

She has: 8 posts

Joined: Sep 2007

make sure your CSS validates and if FF is showing it incorrectly then its actually IE that is wrong if you are using IE6. If you want a quick hack you can add in the CSS so that it shows correctly in FF and then do the CSS again but put a underscore in front of it so that only IE reads it

Just an example

#Logo {
height:92px;
background-color: #FFFFFF;
background-image: url("Images/ClubLogo.gif");
background-repeat: no-repeat;
margin: 0.3em 0 0 6.5em;
_margin: 0.2em 0 0 5.5em;
padding: 0 0 1em 0;
_padding: 0 1em 1em 0:
clear: left;
}