css site bulit but doesnt work in older versions of browser

a few thing to do.

style the site so it looks good in FF, Safari.
then use conditional statements to create styles for specific browsers. More simple layout... or create a whole new style sheet to target IE6.

or, if you're like me...
block access to the website for everybody with IE. This isnt what most people do, and is counter-productive. I just dont give a *beep*.

If the site breaks in IE6, you really should try and figure out why, then fix it.

A perfectly valid website that breaks in IE6 ? Where have I heard that before ?

Unfortunately, around 5-10% of people(!) use IE6 - this percentage is significantly greater in some countries (say, India >_<).

IE6 will break suddenly, sometimes for no apparent reason at all - however, the most common reason for content "breaking up" in IE6 is because it needs more width than you think it should. If you have any container divs, etc., try increasing their widths - but its impossible to say anything without looking at the code.

While I'm usually for progressive enhancement, when it comes to MSIE6, I'll side with CupidsToejam and go for graceful degradation.

Conditional commenting is the way to go.

PS. try this software called MultipleIEs - it does exactly what its name implies - then you can test on IE6/7/8.

Hi CupidsToejam & Debayan Gupta

Thank you for your responses and i will indeed investiage conditional comments and check out MultipleIES. however i have a link to my site below. the most frustrating thing is i believe its a simple site, and not even my hover buttons work in ie7 or 6, nor in safari. When you mouse over the video clips you are supposed to see a yellow border. The site only works fully in ie8 and FF 3.6.8.

http://www.webster12345.zxq.net/home.html

my css page is located

http://www.webster12345.zxq.net/style.css

Validate your markup.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.webster12345.zxq.net%2Fhome.html

Outline doesn't work on IE6.

Use a border. Just put a "display:block" on the "a" tag, and use a transparent border, and change the colour on hover.

Why are you using so many classes with similar functions ?
Inherit from multiple classes - it'll reduce your code significantly.

I've edited your html a bit :

	<div class="float">
		<a href="videos/intro.wmv"><img src="image/VIDEO-IMAGES.jpg" alt="introduction video clip" width="320" height="256"/></a>
		<p>Lorem ipsum dolor sit amet</p> 
	</div> 
 
	<div class="float right"><a href="&amp;"><img src="image/VIDEO-IMAGES2.jpg" width="320" height="256" alt="Overview of the health check process video clip"/></a> 
		<p>Lorem ipsum dolor sit amet</p> 
	</div> 

CSS :

.float {float:left;margin:0px 0px 50px 50px}/*default - left*/
.right {float:right;margin:0px 50px 50px 0px}/*make it ".float .right" if you want to*/
.float a {display:block;height:256px;border:4px transparent solid;}
.float a:hover {border-color:orange}

Validate.

Hi Debayan Gupta

Thanks for your reply, its much appreciated. i'm afraid im still quite new to css and not very confident, but learning all the time thanks to people like yourself. I guess i have many classes again because im not confident about what im doing, but have taken onboard your advice and will experiment at a less critical time. At the momment, i need to try and get this site working in as many browsers as possible. May i just clarify my understanding about your comments. Sorry if i have misunderstood you here....

With regard to the css should i change this

.float-left {
	width: 320px;
	margin-left: 50px;
	float: left;
	height: 256px;
	margin-bottom: 50px;
}
 
to this 
 
.float-left {
	width: 320px;
        float:left;margin:0px 0px 50px 50px;
        height: 256px;
 
}
 
and then should i change this 
 
.float-right a:hover {
 
outline: 4px solid #f90;
}
 
 
with 
 
 
.float-right a:hover
{border-color:orange;
 
}
 
and this 
 
a {
	color:#000;
	font-family: Verdana, Geneva, sans-serif;
 
}
to this 
 
a {
	color:#000;
	font-family: Verdana, Geneva, sans-serif;
        display: block;	
}

1. First, correct your html code - there are many other problems, but to get this to work, you MUST remove the double a-tag - see below :

<div class="float-left"><a href="%"><a href="videos/intro.wmv"><img src="image/VIDEO-IMAGES.jpg" alt="introduction video clip" width="320" height="256"/></a> 
  <p>Lorem ipsum dolor sit amet</p> 
</div> 

See the first a-tag ? The one with href="%" ? Remove it, So that the code becomes :

<div class="float-left"><a href="videos/intro.wmv"><img src="image/VIDEO-IMAGES.jpg" alt="introduction video clip" width="320" height="256"/></a> 
  <p>Lorem ipsum dolor sit amet</p> 
</div> 

2. CSS - Replace these lines :

.float-left {
	width: 320px;
	margin-left: 50px;
	float: left;
	height: 256px;
	margin-bottom: 50px;
}
 
.float-right {
	width: 320px;
	margin-right: 50px;
	float: right;
	height: 256px;
	margin-bottom: 50px;
}
 
.float-right a:hover {
	outline: 4px solid #f90;
}
 
.float-left a:hover {
	outline: 4px solid #f90;
}

with these lines :

.float-left, .float-right {float:left;margin:0px 0px 50px 50px}
.float-right {float:right;margin:0px 50px 50px 0px}
.float-left a, .float-right a {display:block;height:256px;border:4px transparent solid}
.float-left a:hover, .float-right a:hover {border-color:orange}

Please validate your code !

Make sure you remove those extra "" (!) tags and all the other invalid stuff.

Valid code is better code.

But it's not a "perfectly valid" website at all. The HTML is replete with html syntax errors and very bad coding practices. It would be simplest to tear it down and rebuild from scratch after learning how to code html correctly.

In my defense, I wrote that _before_ any link/code was posted.

This website is certainly _not_ a shining example of valid code - however, IE6 _is_ known for its ability to take good code and reduce it to scrap.

Hi all

I will make some changes and validate the code, in my defense, im using dreamweaver

I can see when i validate the site, i get a bunch of errors liek this ' BR" undefined '

Does this mean i have to close the tag with a . The validation service says im using XHTML 1.0 Strict. According to my research you need to close tags when using xhtml, but not when using html only.

Sorry im a bit of a novice so not sure if im 100% right on this.

Well, but that's not a defence, it is an admission of guilt...

Mind you it has a decent text editor and as long as you stick to that it's merely far too expensive for a text editor. Letting it layout your code or using the so-called "WYSIWYG" feature on the other hand, is a sin against the web. "WYSIWYG" is a snare and a delusion on the web, because there is no "WYG", there are any number of things you get.

Coding html with a layout in mind is, actually, merely a way to make things much much more complicated than they should be, and for very little if any benefit.

I don't think "making some changes" will really help. What you need is to start over with proper methods. That involves taking some time to learn what good code is and what the best practices are. There is no shortcut to this, really.