CSS issue (I think)... doing my head in.

[mac-man]

Hi

Could somebody have a quick look at tehse 2 sites

http://www.amusica.co.uk

http://www.pedigreecharm.co.uk

They were created by a third party (who is no longer contactable).

The Amusica site looks fine in Firefox and IE. The Pedigree Charm one has an issue with the type styles in that the text displays larger in IE than it does in Firefox.

From what I can see they both use the same basic type styles, but I wonder if the Amusica site has had a fix applied somewhere to make the text content look the same in both browsers. If there is one I can't find it.

Any ideas please?

[Duncan Rounding]

Try this....

The font-size set in the css (actinic.css line 1) for:
p, table , td , th
on the first site it is:
font-size: 11px;
in the second it is not set.

You can debug most css issues by using Firefox with the Firebug add-in.

[leehack]

Using firebug can give you a real time view of the code being applied to the various areas of your site. It looks like Firefox is being told x-small as the font size, i suspect IE is not recognising that. Font size is generally controlled from within site options, there is rarely a need to enter directly into the CSS to change things. Check those settings and ensure if there has been some changes directly into the css, that all styles are closed correctly.

[pinbrook]

out of interest what equivilent to firebug is there for ie8.

i spend ages yesterday doing some css in FF, and at the end of the day remembered ie8 and found my site was completely borked.

what browser do we now need to work with first to ensure there aren't to many cross browser issues

[leehack]

I always work in the latest IE, so at the very least I see the site as the masses do while building. IE8, 7 & 6, Firefox, Safari, Chrome and Opera are what I check on. Once working fine in IE8, I find that IE6 and Chrome/Opera are the worst culprits.

[Sean Williams]

..... remembered ie8 and found my site was completely borked.

Love it

This is a first for me - never heard of it.
bork: Irreversibly damaged
Bork: is a level 267 Ork summoned by Surok Magis in the Chaos Tunnels: The Hunt for Surok miniquest. You need a Slayer level of 44 to kill him and can battle him once per day

Although I prefer the second, I imagine you meant the first

[fergusw]

what browser do we now need to work with first to ensure there aren't to many cross browser issues

There are no short-cuts here Jo that I have found, unfortunately. Experience designing in CSS regularly quickly teaches you to code your CSS to be cross-browser compliant and to avoid those CSS practices that cause the most headaches.
Even with this experience we still have to always check our CSS work in IE,FF,Opera,Safari,Chrome etc

[mac-man]

Try this....

The font-size set in the css (actinic.css line 1) for:
p, table , td , th
on the first site it is:
font-size: 11px;
in the second it is not set.

You can debug most css issues by using Firefox with the Firebug add-in.

Thanks. Hopefully that will sort it.
My CSS and HTML skills are a bit limited TBH.

[pinbrook]

There are no short-cuts here Jo that I have found

Too true.. however before i wasted too much time repairing the css, quite by accident i decided to work on my pc rather than my laptop. Laptop was a mess, pc was fine - both IE8. i've had others check this out (in the other place) and no -one yet gets my mess, so i'm crossing fingers

[mac-man]

Try this....

The font-size set in the css (actinic.css line 1) for:
p, table , td , th
on the first site it is:
font-size: 11px;
in the second it is not set.

You can debug most css issues by using Firefox with the Firebug add-in.

Hmmm.... tried implementing this but failed miserably. The 2 CSS files seem quite different so I'm stuck as to what controls what. I was unsure as to what to edit... tried a few things but nothing worked.

[IanSaunders]

Download Firefox (if you're not already using it) http://www.mozilla-europe.org/en/firefox/

install the firebug add-in https://addons.mozilla.org/en-US/firefox/addon/1843

view your page in the browser

right click on the offending part and select 'inspect element'

the right hand panel will show you all the css styles applied to that element, and where the styles come from.

[mac-man]

Download Firefox (if you're not already using it) http://www.mozilla-europe.org/en/firefox/

install the firebug add-in https://addons.mozilla.org/en-US/firefox/addon/1843

view your page in the browser

right click on the offending part and select 'inspect element'

the right hand panel will show you all the css styles applied to that element, and where the styles come from.

Thanks Ian

Firebug shows that one of the sites has a pixel height for the text (amusica). When I try to add an 11px font size to the other it has no effect.

This is on the left hand menu items.

[jont]

what browser do we now need to work with first to ensure there aren't to many cross browser issues

The layouts I build by hand I test in FF and IE6 with the occasional double check in IE7, IE8 and Chrome which I tend to find fall in line if FF and IE6 are working. For me IE8 pretty much follows FF but this obviously depends on how you set the CSS up from the start.

[jont]

This is on the left hand menu items.

You need to be adding the font size to

a.product_section:link {
color: #000000;
text-decoration: none;
}

a.product_section:hover {
color: #003300;
text-decoration: none;
}

a.product_section:link {
color: #000000;
text-decoration: none;
}

a.product_section:hover {
color: #003300;
text-decoration: none;
}

[jont]

Chris - you also have the actinic.css and theme.css being called twice. Check in the <head> and ensure on the one reference is there.