Is this page OK in your browser .. and some general advice please

[wbmkk]

Hello

www.williebee.co.uk/brian44.html

Can some kind folk on this forum please have a look at the link shown and advise me on a few things please. I am still a newbie regarding html, css etc and have just completed a basic web design course. This page will be the backbone of my site, so I obviously want to sort out any problems, before using it as a template.

Are there any problems with ‘other browsers’ ?

(I don’t have access to any apple machines to test it myself)

Is the page centralized in other browsers, as it is with Firefox

I tried to view the page on IE, but there is a red band below the bottom row of boxes, about 20px high. Why is this ? In Firefox, this is not there, instead, the blue gap at the bottom is equal to all other gaps, making page look ‘kind-of’ neat and tidy. (pure luck probably !)

I know there are bugs and hacks etc, but I really don’t know enough about them, so haven’t used any. Are there any I should be adding.

Is the colour scheme all right ?

If you could change two things about this … what would they be

I’m starting an Illustrator course tomorrow, so will be doing a proper title then.

By the way ..

It was the teacher who provided me with the javascript, which she said was needed for my side menu. (Why it was needed .. I don’t know and I suppose as long as it works, why do I need to know)

I could have used one of the freely available menu codes available, but I wanted to do everything myself.

Also, she provided the javascript for the clock, but I might dump that idea. It seems some computers do not show it, with some kind of ActiveX message popping up. That would only put viewers off. If it was just blank, I wouldn’t mind, but seems that &nbsp thing is required. And, I see now, one browser shows it in big writing (Firefox) but IE shows it small, with a red border. Puzzled I certainly am.


Many many thanks for any input !

@charset "utf-8";
/* CSS Document */
*{
margin:0;
padding:0;}

body{
background-color:black;
font-family:Helvetica, Arial, sans-serif;
}


#header{
	width:960px;
	height:120px;
	background-color:#372b8c;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 24px;
	color: #FFFFFF;
	font-weight: bold;
	
}

#heading_wrap{
width:602px;
height:70px;
position:relative;
left:276px;
top:10px;
} 

#container{
	width:960px;
	   /*    height = 792  */
	height:792px;
	background-color:red;
	margin:0px auto;
}

#leftnav{
width:198px;
height:670px;
float:left;
background-color:#EFC552;

border-top:2px solid black;
border-right:2px solid black;

}

#contents{
background-color:#787fcd;
border-top:2px solid black;
width:760px;
position:relative;
float:right;
}




.boxey{
	width:224px;
	height:140px;
	text-align:center;
	background:url(../images2/grad2.gif);
  float: left;
	margin-top: 22px;
	margin-right: 0px;
	margin-left: 22px;
	}

.bottom{
margin-bottom:22px;
}

.boxeyindent{
	width:224px;
	height:140px;
	text-align:center;
	background:url(../images2/grad2.gif); 
	float: left;
	margin-top: 22px;
	margin-right: 0px;
	margin-left: 145px;
}
  
/*  format writing in the box  */
.boxey h1{
color:#192182;
padding-top:10px;


}

.boxey h2{
color:#192182;

/* next 4 lines an experiment    <<<<<  */
/*
margin-top:10px;
margin-left:35px;
width:150px;
background-color:#FFEACE;
border:1px solid #bc8f12;
*/
}

.boxey h3{
color:#192182; 

margin-top:5px;
}

.boxey p{
color:red;
margin-top:5px;
}

.boxey p a{
color:red;
}







/*  ------ end of writing style ------    */


/* --- menu style rules --- */

#navmenu {

width:196px;
float:left;
margin-top:20px;
}

#navmenu ul{
list-style-type:none;
padding:0px;
}

#navmenu ul li{
width:160px;
height:25px;
border-top:3px solid black;
border-left:3px solid black;
border-right:3px solid black;
margin-top:0px;
margin-left:15px;
}

.last{
border-bottom:3px solid black;
}

.penult{
margin-bottom:30px;
border-bottom:3px solid black;
}

.lastfly{
border-bottom:3px solid black;
}

#navmenu ul li a, #navmenu ul li span{
display:block;
width:160px;
height;25px;
line-height:25px;
color:white;
text-align:left;
font-weight:bold;
font-size:0.8em;
background-color:#192182;
/*
background-image:url(../images2/menu3colors.gif);
background-repeat:repeat-x;
background-position:0px 0px;
*/
text-decoration:none;
z-index:3;
}

#navmenu ul li a:hover, #navmenu ul li span:hover{
display:block;
width:160px;
height:25px;
line-height;25px;
color:white;
text-align:left;
font-weight:bold;
font-size:0.8em;
background-color:#bc8f12;
/*
background-image:url(../images2/menu3colors.gif);
background-repeat:repeat-x;
background-position:0px -40px;
*/
text-decoration:none;
}




#navmenu ul li ul{
position:relative;   
width:160px;  /* fix here attempted */
margin-left:185px;  

/* next three values were -22  -39  none  */

top:-28px; 
left:-40px;
display:none;
z-index:99;
}

#navmenu ul li ul li{

height:25px;
border-top:3px solid black;
border-left:3px solid black;
border-right:3px solid black;
margin-top:0px;
z-index:3;
}

#navmenu ul li:hover ul{  /*  ???  */
display:block;
}

#navmenu ul li ul li a{
display:block;
width:160px;
height:25px;
line-height:25px;
color:white;
text-align:left;
font-weight:bold;
font-size:0.8em;
background-color:#bc8f12;
/*
background-image:url(../images2/menu3colors.gif);
background-repeat:repeat-x;
background-position:0px -40px;
*/
}

#navmenu ul li ul li a:hover{
display:block;
width:160px;
height:25px;
line-height:25px;
color:#192182;
text-align:left;
font-weight:bold;
font-size:0.8em;
background-color:#eed07c;
/*
background-image:url(../images2/menu3colors.gif);
background-repeat:repeat-x;
background-position:0px -80px;
*/
}

/*  trial for heading, but wrong image  
h1 {
background:url(../images2/menu3colors.gif);
font-size:0px;
border:1px solid red;
text-indent:-100000px;
height:100px;
width:300px;
*/
}

#clock{
margin-right:80px;
border:1px solid red;
margin-top:4px;
color:#ffeace;
font-size:16px;
font-weight:bold;
}

/* tab style rules atart here */

/* this is div for the tabbed menu */
#wrap{
/* 755 for 5 tabs   or  604 for 4 tabs*/
width:604px;
height:40px;
margin:0 auto;

z-index:100;
margin-left:77px;
margin-top:-42px;
}

#wrap ul {
margin:0px;
padding:0px;
list-style-type:none;
}

#wrap li{
width:150px;
height:40px;
display:inline;
float:left;
}

#wrap a{
display:block;
width:150px;
height:40px;
text-align:center;
color:#192182;
font-weight:bold;
line-height:40px;
text-decoration:none;
background-image:url(../images2/tabfeint.gif);
outline:none;
}

#wrap a:hover{
display:block;
width:150px;
height:40px;
color:white;
font-weight:bold;
background-image:url(../images2/tabmedium.gif);
}

/* footer section styles */

#footer{
width:100%;
text-align:center;
background-color:#192182;
height:30px;
color:#ffeace;
line-height:30px;}

/* general style rules for elements etc */

.clear{
clear:both;}

 

[wwag]

Too Busy

Hi, my recommendations that you lose the blocks in the middle and find a cleaner color scheme. It looks way too crazy right now.

Good luck.