HTML prob - firefox and ie...

[devi123]

Hi there,

New here and have a weensy problem. I am in the middle of putting together a site:

www.wleigh.co.uk/smarties/press_test.html

It shows up fine in firefox and safari, but the nav links on the left all spread out in IE. I have tried the margin/padding set to 0 for all css styles but no luck.

The second problem is probably a lot simpler - after they have been clicked the links no longer change when hovered over.

The css file:

http://www.wleigh.co.uk/smarties/smarties.css

Thanks for your help.

[MidiMagic]

Put the visited styles at the top of the stylesheet, with the hover ones under them.

If there is a conflict between styles, the lowest one listed in the stylesheet prevails. So the visited ones are prevailing over the hover ones because they are under them.

You are mixing styles and tag attributes. The tag attributes will override the styles.

You can not mix size attributes (width, height) with surrounding styles (margin, border, padding) on the same tag. It causes incompatibilities between IE and Firefox.

Your font size might be smaller than the smallest the font is defined, since fonts are not usually defined in pixels.

You have illegal values in the styles. They deactivate the entire style they are in.

The value 0 must NOT have a dimension suffixed to it (such as 0px).

If an object will not fit in the space allocated, the space will expand to let it fit.

Use the Error Console in the Firefox Tools menu to detect bad styles. It will list the errors after you open the page.
.

[devi123]

Thanks for your reply - it was very useful and solved the issue with the CSS link order perfectly.

I have corrected all the erros I can see in firefox console. I have changed the fonts to a 'pt' point size instead of pixels. I increased the size of the tds to see if this would help but the site still shows up wrong in IE7. I can't fix it!! It shows up fine in in Safari and firefox. New page up at the same url - any help would be great.

Thanks!

[Dannyo329]

Hey, I went on your first link and it works for me. All the navi bar is in order.
I use IE6 I think, but I don't reckon that helps that much.

Advice:
The Navi bar is great, but you can change it into a flash navi bar. It'll look great.

[blocblue]

Hi,

You said you had specified padding and margins for everything already, however I can see no evidence of this in either your source nor your stylesheet.

Whenever I create any webpage, I always have 2 stylesheets. The first sets the margins, padding and borders for all html elements to 0. This is simply to give me a common place from which to begin with all browsers. In the second stylesheet, I then continue to apply the styles I actually want, rather than the default styles, I'm presumed to want.

To fix your problem, I would be inclined to add the following:

table {
margin: 0px; padding: 0px;
}

table tr {
margin: 0px; padding: 0px;
}

table tr td {
margin: 0px; padding: 0px;
}

table tr td .links {
margin: 0px; padding: 0px;
}

If you reduce all the elements to zero margins and zero padding, it will likely look the same in both FFX and IE. However, this will also probably look naff. But, it will give you a common starting point from which to begin adding the styles to format the page as you'd like.

Also, I noticed in your source that you have given every link a separate class. Classes are meant to be shared between multiple elements, so in my styles above for example, I have given all the links a shared class name of "links". Id is the unique style indentifier. However, you can also use multiple class names for elements, for example, class="contact links".

R

[devi123]

hi r thanks for taking the time to have a look.

what i meant was i removed every instance of the offending 'px'.

So i should have my smarties.css and a blank.css which contains purely the info you posted?

If I stick it in the smarties css it seems to overwrite the align center tag I've given the main table.

Do you mean I could have something like this?:

.links
a.homepage:hover
a:press:hover
etc?

again, thanks for your time.

[devi123]

also - uploaded the blank.css and it has made no difference in ie7...not sure why this is.

thanks.