Not working in ME IE

[hugeknot]

Hi
My website address is
http://www.musicollaborate.com

I learned html and made this site from an open access css design.
I use Mozilla Firefox and for the last three months I assumed that all was well!

A member wrote and told me that he cannot read anything while he is viewing the page with an internet explorer browser. yes, I tried this and the whole thing is a mess. It should have a dark blue background and a groovey logo at the top of all the main pages.

here is my css:
/* ----- BASIC ELEMENTS AND FONTS ----- */


html, body {
color: #fff;
font-size: 11px;
font-family: 'Tahoma';
background: #000033 url(assets/logo7.JPG)top right no-repeat;
margin:0;
padding:0;
height:100%;
width:99%;
}

.clear {
clear: both;
height:30px;
}

p {
margin: 10px 30px 10px 30px;
}

.date {
color:#ffd502;
text-decoration:overline;
font-size:10px;
padding: 10px 0 20px 0;
}

#content_footer p {
margin: 10px 30px 10px 30px;
padding-top: 20px;
font-size:10px;
text-align:left;

}

.login_box p {
margin:0px 10px 20px 25px;
font-size:9px;
color:#fff;
text-transform: uppercase;
}
.content_box p {
margin: 10px 5px 10px 0px;
color:#ddd;
font-size:10px;
text-align:justify;
}
.content_box_large p {
margin: 10px 5px 10px 0px;
font-size:11px;
text-align:justify;
}

.content_box_large p2 {
margin: 20px 30px 30px 10px;
font-size:12px;
text-align:left;
}

.content_box_large p3 {
margin: 20px 30px 30px 10px;
font-size:11px;
text-align:left;
color:#ffd502;
font-weight:bold;
}

.content_box_photo h3 {
margin: 0px 0px 10px 45px;
}

#content_footer p {
margin: 10px 0px 10px 60px !important;
margin: 10px 0px 10px 85px;
font-size:10px;
text-align:justify;
}

.red {
color:red;
}

.yellow {
color:#ffd502;
font-weight:bold;
}

h1 {
font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
font-size:30px;
text-transform:uppercase;
font-weight:normal;
margin: 0px 0px 0px 0px !important;
margin: 10px 0px 0px 0px;
color:#fff;
}

h2 {
font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
font-size:20px;
margin: 0px 50px 10px 30px !important;
margin: 0px 30px 10px 30px;
font-size:12px;
text-transform:uppercase;
color:#fff;
font-weight:normal;
}

h3 {
margin: 0px 20px 10px 0px;
text-transform:uppercase;
font-size:12px;
color:#fff;
}

a {
text-decoration: none;
color:#ffd502;
}



/*----- MENU ----- */

#nav_list {
margin: 0;
padding: 0;
width: 150px;
list-style: none;
overflow: hidden;
}

#nav_list li {
margin: 15px;
width: 160px;
overflow: hidden;
text-transform: uppercase;
font-size:14px;
font-weight:bold;
}

#nav_list a {
color:#fff;
}

.li_nav_body a {
display: block;
width: 160px;
height: 20px;
background: url(assets/nav_body.png) no-repeat;
padding-left: 15px;
line-height:20px;
}

.li_nav_footer a {
display: block;
width: 160px;
height: 21px;
background: url(assets/nav_body.png) no-repeat;
background-position: 0 0px;
padding-left: 15px;
line-height:21px;
}

.li_nav_body a:hover {
background-position: 0 -20px;
color:#016001;
}

.li_nav_footer a:hover {
background-position: 0 -20px;
color:#016001;
}

.li_active a:active {
background: url(assets/nav_body.png) no-repeat;
background-position: 0 -40px;
color:#fff;
}

/*----- LAYOUT ----- */

#container {
width:100%;
background: url(assets/sidebar_body.png) 30px 0px repeat-y !important;
background: url(assets/sidebar_body.png) 60px 0px repeat-y;
min-height:100%;
height:100%;

}


#menu_header {
width:140px;
height:232px;
text-align:left;
float:left;
margin:0 0 0 40px;
}

#menu_left {
width: 140px;
min-height: 100%;
margin:0 0 0 30px;
float: left;
background: url(assets/sidebar_body.png) repeat-y;
}

.login_box {
width: 150px;
float:left;
margin:0 0 0 10px;
}

#head {
width: 790px !important;
width: 820px;
height: 180px;
float:left;
text-align: right;
}


#content {
width: 840px;
text-align: justify;
float: left;
margin:0 0 0 20px;
background: url(assets/sidebar_body.png) 10px 0px repeat-y !important;
background: url(assets/sidebar_body.png) 20px 0px repeat-y;
}

.content_box {
width: 120px;
margin:0px 0px 0px 30px;
float: left;
}

.content_box_large {
width: 280px;
margin:0px 0px 0px 20px;
float: left;
}

.content_box_photo {
width: 200px;
margin:0px -150px 0px 10px;
float: right;
}

#content_footer {
background: url(assets/sidebar_body.png) 30px 0px repeat-y !important;
background: url(assets/sidebar_body.png) 60px 0px repeat-y;
width:100%;
clear:both;
margin-bottom:-70px;
height:50px;
}

table {
margin:0 0 4px 0;
padding:0;
line-height:1.3em;
border-collapse:collapse;
border:1px solid #CCCCCC;
background: url(assets/form.jpg) repeat;
color:white;
}


/*----- IMAGES ----- */

a img{
border: none;
}

img.left,img.center,img.right {
padding: 0px;
border: 0px;
}

img.left {
float: left;
margin: 10px;
background:#fff;
}

img.right {
float: right;
margin: 0px;
}

/*----- FORM ----- */

input {
border-top: 1pt solid #cccccc;
border-bottom: 1pt solid #cccccc;
border-right: 1pt solid #cccccc;
border-left: 1pt solid #cccccc;
font: normal 10px tahoma;
width:115px;
color: #666666;
margin:0px 0px 5px 0px;
}

textarea.sidebar {
border-top: 1pt solid #cccccc;
border-bottom: 1pt solid #cccccc;
border-right: 1pt solid #cccccc;
border-left: 1pt solid #cccccc;
font: normal 10px tahoma;
width:115px;
height:80px;
color: #666666;
margin:5px 0px 25px 25px;
}

input.sidebar {
border-top: 1pt solid #cccccc;
border-bottom: 1pt solid #cccccc;
border-right: 1pt solid #cccccc;
border-left: 1pt solid #cccccc;
font: normal 10px tahoma;
width:115px;
color: #666666;
margin:0px 0px 5px 25px;
}

input.button_sidebar {
border-top: 1pt solid #cccccc;
border-bottom: 1pt solid #cccccc;
border-right: 1pt solid #cccccc;
border-left: 1pt solid #cccccc;
font: normal 10px tahoma;
width:119px;
color: #666666;
margin:0px 25px 5px 25px;
}

input.button_content {
border-top: 1pt solid #cccccc;
border-bottom: 1pt solid #cccccc;
border-right: 1pt solid #cccccc;
border-left: 1pt solid #cccccc;
font: normal 10px tahoma;
width:119px;
color: #666666;
margin:5px 0px 5px 0px;
}



/*----- Hoverbox Code - get code found at http://host.sonspring.com/hoverbox/ ------*/

.hoverbox
{
cursor: default;
list-style: none;
}

.hoverbox a
{
cursor: default;
}

.hoverbox a .preview
{
display: none;
}

.hoverbox a:hover .preview
{
display: block;
position: absolute;
top: -33px;
left: -45px;
z-index: 1;
}

.hoverbox img
{
background: #fff;
color: inherit;
vertical-align: center;
width: 110px;
height: 110px;
margin: 0px;
padding: 0px;
border-style: none;
border-width: 0px;
}

.hoverbox li
{

color: inherit;
display: inline;
float: left;
position: relative;
}

.hoverbox .preview
{
border-color: #000;
width: 200px;
height: 150px;
}

.hoverbox2
{
cursor: default;
list-style: none;
}

.hoverbox2 a
{
cursor: default;
}

.hoverbox2 a .preview
{
display: none;
}

.hoverbox2 a:hover .preview
{
display: block;
position: absolute;
top: -33px;
left: -45px;
z-index: 1;
}

.hoverbox2 img
{
background: #fff;
color: inherit;
vertical-align: center;
width: 140px;
height: 90px;
margin: 0px;
padding: 0px;
border-style: none;
border-width: 0px;
}

.hoverbox2 li
{

color: inherit;
display: inline;
float: left;
position: relative;
}

.hoverbox2 .preview
{
border-color: #000;
width: 400px;
height: 150px;
}

*******************************
I hope someone can help and it is not too difficult!
I don't mind if you want to talk to me like an idiot!

Cheers
Hugeknot:cool:

[hugeknot]

I ran a css check on this file and made a few adjustments where I placed "background-color: #000033;" after every colour variable except those in the menu area which I specified "inherit".

I also created a #head command in the "BASIC ELEMENTS AND FONTS" section and altered the body command to just focus on the background colour.

And hey, guess what? It worked, I opened the page in IE and there was my beautiful background colour.... but all the layout is shot!!

my adjusted css is:http://www.musicollaborate.com/stylesheet2.css
and the page that is using it is: http://www.musicollaborate.com/index.articles2.html

ANY HELP WOULD BE APPRECIATED:)

[Kravvitz]

Please make sure that your (X)HTML and CSS are valid.
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

[hugeknot]

Hi Dudes
I seriously need more help with this.
I put my home page through the html validator and found something like 90 errors!
Just a few were about my own html input, but the majority were due to the script I got from my affiliate partners. I managed to sort some of these out, but I am scared to change too much of their scripts in case I don't get paid or I violate their policies.

I am thinking that maybe I need another DTD
here is my current one:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

It seems like the script in some of my adverts would be ok in an HTML rather than xhtml.

Regards
Hugeknot

[karinne]

Please make sure that your (X)HTML and CSS are valid.
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

+1

and what is <p2>!?!?

HTML elements (http://www.w3.org/TR/html4/index/elements.html)
HTML attributes (http://www.w3.org/TR/html4/index/attributes.html)

[hugeknot]

OK
I have been working on this all day
I have focussed on this page
http://www.musicollaborate.com/index.articles2.html

I have got the errors down from 60 to 4!

Now my fingers are sore...
I come back here and someone is asking "What is <p2>?" that is a left over from previous style sheet where I needed a "p" text to align right!!

Can anybody offer something useful?

The invitation to treat me like an idiot is now closed!

[Pegasus]

From the looks of the errors I get when I run the new page through the validator, you've got some tags closed in the wrong order.

No one's treating you like an idiot. We're helping you learn. Those 90 errors could have been part of the problem, but without having them ironed out, it's hard to say.

Okay, what I'm seeing with the CSS validator is that you have errors with your layout definitions. http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.musicollaborate.com%2Fstylesheet2.css&usermedium=all

I'm not sure exactly what the problem is, but you might want to go back over your CSS and make sure that you have the proper distances and that nothing is overlapping.

Peg

[hugeknot]

Hey Thanks PEG

It is just that I thought the invitation to talk to me like an idiot was a bad idea after all.

Well I have visited a great site: www.cssplay.co.uk

I borrowed some css script from a number of examples and created my site from scratch.

It is still not perfect in IE, the text is too far up the page and I can't get my logo, but at least it is the right colour and the layout isn't too bad.

It has been a long day so I am going to validate the css and xhtml tomorrow.

But seriously, what do we do if an affiliate partner or link exchange gives us some html that invalidates the page? Should we demand STRICT code? my view is that it is OK to have a few pages that are not strictly there! As long as the colours and structure is an approximation.

By the way, that <p2> code I used, may seem strange to you lot, but it worked!!

regards and thank for you efforts

[Kravvitz]

But seriously, what do we do if an affiliate partner or link exchange gives us some html that invalidates the page? Should we demand STRICT code? my view is that it is OK to have a few pages that are not strictly there! As long as the colours and structure is an approximation.
You could ask nicely for it. Why don't you just fix it yourself? Copy-and-pasting code that you know is invalid or deprecated into one of your pages is silly.

By the way, that <p2> code I used, may seem strange to you lot, but it worked!!
That may work in some browsers, however, I expect there are some where it may not work how you expect it to.

[Pegasus]

Hugeknot, you could use HTML4.01 transitional. That would cover both your code and your affiliate's code. Or it should. At least, for now, anyway. The other option would be to rewrite the code so that it validates without losing the link.

Peg

[hugeknot]

Yeah thanks Peg

I have validated my home page:
http://www.musicollaborate.com/index2.html
and my Pro-request page:
http://www.musicollaborate.com/index.pro-request.html

It was the transitional DTD that did the trick.

I checked my css as well:
http://www.musicollaborate.com/stylesheet1.css

I got it down to two errors! The two errors are the bugs for IE6 and IE7.
and the "overflow-y" command.

I checked the pages in IE and they are still not right; there is no logo in the head and the "adsie" with my "AD sense" scrolls with the "Page" - it should be fixed.

[hugeknot]

Hi
Yeah I fixed it myself
Thanx