First Template Page check

[liunx]

Heya... the page (<!-- m --><a class="postlink" href="http://www.eurorider.se/testserver/se/index1.php">http://www.eurorider.se/testserver/se/index1.php</a><!-- m -->)

not sure if this is the correct subject for this thread. But it is not a site review, yet, and would just like to read some opinions if this is a good acceptable start to develop other pages from this template.

There is only one bug as I can see and it is the footer. When you resize it to a smaller window so you get the vertical scroll, and then scroll to the right then you see the fotter is cut off.
... not a bug but the page does exactly not fit in a 800x600 screen resolution monitor but fits nicely in a 1024 at least. I thought there would be too much hazzle for the browsers to work with this minimum-width thing.

Otherwise think if the swedish text as another Lorem ipsum text upgrade

Here is the content of the css file for easier preview

HTML {height:100%}
BODY {
/*background-color: #BCDADC; */
background-color: #9CCECE;
font: normal 10pt verdana,arial;
color:#000080;
margin:0px;padding:0px; height:100%;
}
A {text-decoration:none; color:#3366FF; font-weight:bold;}
A:hover {text-decoration:underline;}

/* MENY */

#TopborderLeft {
position:absolute;
top:0px; left:-2px;
width:234px; height:57px;
margin:0px; padding:0px;
background:url(../images/menu/topborderleft.gif) no-repeat;
}
#Topborder {
position:absolute;
top:0px; left:232px;
width:670px; height:57px;
margin:0px; padding:0px;
background:url(../images/menu/topbordermitt.gif);
}
IMG#Cornerlogo {
position:absolute;
top:0px; left:0px;
}
#Stars {
position:absolute;
top:175px;
left:0px;
width:147px; height:143px;
background:url(../images/menu/bg_stars.gif)
}
#Stars IMG {position:absolute; top:32px; left:32px}
#Meny li#StarsMargin {padding-top:180px !important; padding-top:160px;}

#Meny {
margin:3px 0px;
height:565px;
border:solid #113 0px;
background:url(../images/menu/bg_menu.jpg);
padding:0.1em 0px;
}
#Meny A, #Meny A:visited {
width:100%;
display:block;
color:#000080;
font-weight:600;
}
#Meny A:hover {
color:#0000C4;
text-decoration:none
}
#Meny li {
behavior:url(images/menu/CSSNavIEHover.htc); }
#Meny ul {
display:block;
margin:1em 0px;
padding:0px 1ex;
width:11em;
}
#Meny li {
display:block;
list-style-type:none;
padding:0.2em 1ex;
}
#Meny li:hover #Meny li.hover {
background:#FFFFFF;
}
#Meny ul.sub1, #Meny ul.sub2, #Meny ul.sub3 {
position:absolute;
z-index:1;
margin:-0.7em 0px 0px 10em; /* avst閷竏 till Subruta */
border:solid #A4C5C7 1px;
padding:1em 0.5em;
background:#B8D5D7 url(../images/menu/menubgstar.gif) no-repeat center;
display:none;
}
#Meny ul.root li:hover ul.sub1, #Meny ul.root li.hassubhover ul.sub1 {
display:block;}
#Meny ul.sub1 li:hover ul.sub2, #Meny ul.sub1 li.hassubhover ul.sub2 {
display:block;}
#Meny ul.sub2 li:hover ul.sub3, #Meny ul.sub2 li.hassubhover ul.sub3 {
display:block;}

#Meny li.hassub {
background:url(../images/menu/menustar.gif) no-repeat 95% 50%;}
#Meny li.hassub:hover, #Meny li.hassubhover {
background:url(../images/menu/menustar1.gif) no-repeat 95% 50%;}

/* MENY end */

/* PAGE TEMPLATE */

* html #wrapper {height:100%}
#wrapper {
min-height:100%;
width:850px;
}
#Header {
height:65px;
}
#Left {
float:left;
display:inline;
margin-top:-24px;
width:165px;
height:568px;
}

#Main {
position:relative;
margin-left:170px;
width:675px;
}
#Right {
float:right;
width:150px;
}
#Content {
width:500px;
margin-right:150px;
}
H3 {
text-align:center;
font-size:1.3em;
font-weight: bold;
}



/* PAGE TEMPLATE end */


#clearfooter {
clear:both;
height:35px;
overflow:hidden;
}
#footer {
position:absolute;
height:54px; width:100%;
margin-top:-54px;
color:#738586;
background:url(../images/menu/footerbg.gif) repeat-x;
}
#footWrap {width:850px; text-align:center}
#footLeft {float:left; margin:-12px 0 0 100px; line-height:1em}
#footMid {float:left; margin-left:85px;}
#footer H5 {margin:20px 0 0 0; font-size:1em; line-height:1.3em}
#footer A {color:#738586; text-decoration:none}
#footer A:Hover {color:#586667;}
#creator {margin-top:-7px;}

#footRight {
float:right;
width:130px; height:54px;
margin-top:-37px;
font-size:0.65em;

background:url(../images/menu/footerright.gif)
}




/* PAGE TEMPLATE end */Siddan,
Just a few comments then...
I think it looks really good. Nice design.
However... <A href=http://www.webdeveloper.com/forum/archive/index.php/"#" style="cursor:hand"><DIV ID="TopborderLeft"></DIV></A>
<DIV ID="Topborder">
<IMG src=http://www.webdeveloper.com/forum/archive/index.php/"images/menu/topborderendstar.jpg" align="right" border="0" hspace="0" vspace="0" alt=""></DIV>
</DIV>
You can't put 'a' tags around a div. There are ways to do that though - you could use javascript to make the div 'clickable' or you could put object tags around the div.
Also, why not take the deprecated tags out? 'align', 'border', 'hspace' and 'vspace' really shouldn't be there.
One other thing is the big use of javascript for the image rollovers. It's not so important as the images are not really essential, but you might be better doing those rollovers with CSS...
I hope this helps.Hi Bon, thanks for the reply.

You were right about image on the top. I have removed the uneccessary tags and the linking of the whole DIV. Just found another solution to make the logo clickable. I just put another transparent gif over it and linked that one instead.

About the menu hover images... I can纾