Cross browser issues

Deliverance XXV

Hi Guys. Looking for some of your experience again...

I have fairly little knowledge of HTML and CSS and this issue just stumps me TBH.
Anyway, a site I'm messing around with now, which pretty much a edited free template, is having some cross browser issues that I was hoping you could help me out with.
I know the code is a mess, but I wanted to get the site out there, then go through the code when the site is the way I want it to be, to make it HTML standards compliant.

Site Link

Basically, in Firefox, the site is exactly the way I want it to turn out.
In IE, my main header pic is coming up which is far from my intention.
In Opera, it looks like the page is completely stretched and looks awful. Some pages work OK. This page worked when I added border width="500" to the <td class="body_content">.
I added them to every other page to no avail. This page works normally for some reason? All others are stretched.

Can anyone help? Thanks guys.

daymobrew

Look at the W3C HTML Validator errors for the home, history and contact pages.
Over 150 errors on each page - most will be very easy to fix.
Once you have those sorted, the other issues might resolve themselves, or at least improve.

Webmonkey

daymobrew wrote: »

Look at the W3C HTML Validator errors for the home, history and contact pages.
Over 150 errors on each page - most will be very easy to fix.
Once you have those sorted, the other issues might resolve themselves, or at least improve.

+1 - Most times when you get it valid, it automatically works cross browsers

Deliverance XXV

Okay, so basically I have two main issues now left which are probably simple so
excuse my simplicity.

The issues lie in IE. Firefox is perfect and looks exactly the way it should. (PIC 1)

In IE, the is an extra strip of an image under the main pic for some reason? FF & Opera both don't show this?
Secondly, is there is a purple strip around the image as a link colour? Why? When I specified it to be (blue link) (orange hover)? (PIC 2)

I got a lot of the errors down but the rest seem to spiral around small things.
Any help at all guys is much appreciated.

CuLT

Without looking too deeply into it your first problem probably lies with <td class="horizontal_column"> </td>

for the second one; purple is the default colour of visited links in IE. Best practice with images is to avoid the link highlight/hover/visited colouring altogether by setting border="0" in the image tag.

Edit: also you're using tables for layout which is poor practice (may cause you trouble down the road).

Deliverance XXV

CuLT wrote: »

Without looking too deeply into it your first problem probably lies with <td class="horizontal_column"> </td>

Yep! When I looked into the CSS code, the horizontal column had border-top-width: 15px; so I changed that to 0px and... perfect.

CuLT wrote: »

for the second one; purple is the default colour of visited links in IE. Best practice with images is to avoid the link highlight/hover/visited colouring altogether by setting border="0" in the image tag.

Even though it's avoiding the issue, it works a treat so I will use that and tackle the other issue another time.

CuLT wrote: »

Edit: also you're using tables for layout which is poor practice (may cause you trouble down the road).

It's an edited template that originally contained tables. I'm playing around
more with CSS and divs so hopefully that will give me more flexibility.
Thanks for your help

corkie

Why the double up on navigation. two links on the top off your site directed to the your blog! Graphic and text link. (If that's where you want your vistors go then maybe make that the home page?)

Why double graphic at the top of your site taking up the most important space on your site.

Simply the "header2_bg.jpg" and "header_bg.jpg" into one graphic of about max 120px in height and use that to keep your site having the same look across pages.

Just my thoughts on the site, do what works for you!

CuLT

Cool, glad that gave you the direction you needed.

King Nothing wrote: »

Even though it's avoiding the issue, it works a treat so I will use that and tackle the other issue another time.

If using the border links is a conscious design choice, then you can use CSS to specify the "visited" colour as well as the hover, etc.

A property of:

a:visited{color:#00F;}

In your CSS will set all visited links to blue.

Alternately, if you just wish to make the image links blue, you could set a class called "images" or similar like so:

.images a:visited{color:#00F;}

and specify it in the link tag around the image, like so:

<a href="http://some.url" class="images"><img src="image.png" /></a>

You can specify other attributes the same way (hover, etc) or make make them all the same colour by omitting the attribute entirely a la:

.images a{color:#00F;}

And you can mix and match classes, etc, all quite thoroughly confusing at first but it makes sense once you either do it enough or read enough about it.

Edit: and if you have a background in programming the notion of class inheritance will be familiar to you.

Edit 2: oops, looks like the web nodes are slightly out of synch (posts out of order), will have to look into that tomorrow.

Deliverance XXV

corkie wrote: »

Why the double up on navigation. two links on the top off your site directed to the your blog! Graphic and text link. (If that's where you want your vistors go then maybe make that the home page?)

Why double graphic at the top of your site taking up the most important space on your site.

Simply the "header2_bg.jpg" and "header_bg.jpg" into one graphic of about max 120px in height and use that to keep your site having the same look across pages.

Just my thoughts on the site, do what works for you!

Thanks for the suggestions Cormie. They are most welcome and I will keep
them in mind. The template came with the two spliced images and the menu in the middle and I thought it was unusual so kept with it. Still may change...
The double graphics.. no real reason yet, just a space filler but I have every intention of replacing them in the future.