Is this web page OK on your browser

[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;}

[Andrea]

First fix your doctype - you should be using HTML strict - and you don't need this:

<?xml version="1.0" encoding="utf-8"?> 

. Then run your page through the validator and make sure there are no errors.

 

I'd ditch the clock - I don't know a computer that doesn't have one in the lower right already.

 

If you're using it at all, it's

 , not @nbsp;

 

The red bar you see in IE probably has something to do with

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

[wbmkk]

Thanks Andrea

 

I took your advice and tried to validate the code. After initially getting 1 error and several warnings, I sorted everything out. Now it gets the green flag for XHTML 1.0 Strict.

 

Yes ! I think I'll dump the clock idea.

 

Regarding the red at the bottom, why is this not showing in Firefox. I know i could remove the code from the CSS, but surely there must be something wrong .. everything fine in Firefox, but the blue margin, reduced in IE.

 

Regards !

 

Brian

[daddyalfie]

Andrea is probably correct in pointing to the background-color: red; in the CSS as the offending source of the red line in IE. Some Internet Explorer versions have some quirky interpretations of the standard box model with added margins and such. Further, I do not see ANY red on your site and so do not understand why that line is in the CSS at all!

 

I am not crazy about your color scheme. Just as a suggestion, stay all in the same color family or a more contrasting color for your boxes. I assume you intend to add some graphics to the site eventually. Right now it does not have any "Eye Candy".

 

Yes! Loose the clock It means absolutely nothing.

 

A good first effort! Continue plugging and by all means continue using this forum for answers and inspiration!

 

Alfie

[wbmkk]

Alfie

 

Thanks for your reply.

 

Yep ! I shall be ditching the clock.

 

Regarding the red, there is no reason for it at all, just that I like to color divs or put borders around them when wrinting the code, so I can see what's going on, when I look at a browser. I thought I had removed all of these, but obviously not.

 

Can you clarify a wee bit about the color scheme. This is my first proper site, apart from my home site at williebee.co.uk. This test page was just added there as a temporary measure

 

This is the color scheme I opted for, see link. Other pages will use the other shades of beige/brown

 

http://colorschemedesigner.com/#1861Es4rXebwe

 

 

Kind regards from the UK

 

Brian

[daddyalfie]

Hello Brian:

 

Sorry about the tardy reply, but I have been preoccupied with a home improvement project, now thankfully almost complete!

 

Regarding the color scheme, that is just a personal thing and you did right in choosing a palette from a good source. Perhaps try a darker version of the beige for more contrast. What do you intend putting into those boxes? Photos or graphics or text? If photos or graphics the issue goes away, if text, be sure to choose a VERY contrasting color for the text in order to be easily read, especially by people with impaired eye-sight or color blindness.

 

Using colors or borders for divs is a trick I have used myself from time to time. Just remember to remove them later!

 

As stated, just a personal issue and there is nothing "wrong" with your choice!

 

Best regards from North Carolina, USA!

 

Alfie

 

P.S. Where in the U.K. do you live? I spent two years in London during my tender youth before emigrating to the US in 1957.

Edited May 5, 2010 by daddyalfie