...

View Full Version : Need help with html page!



dtakias
12-21-2009, 02:00 AM
Hello everyone

I run into an incompatibility with the design of a web page and don't know how to solve it. The page loads fine with Firefox but not with IE7.

The top right bar is moved over to another position! When I try to check it with dreamweaver it says about the problem but I do not know how to correct it!

I attach one of the html files to see for yourselves.

Any help would be really appreciated and Merry Christmas to everyone ... :)

Excavator
12-21-2009, 02:15 AM
Hello dtakias,
We would really need to see how your styling that html. Show us kanes_style.css also.
You can just quote it here in the forum, might be easier.

When quoting code in the forum, please use the code tags, [code][/code] - available with the # button in the post edit window.
This will wrap your code in a scroll box which greatly helps the readability of your post.

dtakias
12-21-2009, 10:33 AM
Thank you Excavator!

Please see below.


/* Credit: http://www.templatemo.com/ */

* {padding: 0; margin: 0; border: 0;}
/*footer*/ html {height: 100%;}
body {
/*footer*/ height: 100%;
margin:0;
padding:0;
line-height: 1.5em;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
background: #ffffff repeat-x;
}
a:link { color: #202080; text-decoration: none}
a:visited { color: #202080; text-decoration: none}
a:hover { color: #00d2ff; text-decoration: none}

#templatemo_container {
width: 800px;
margin: auto;
background: #FFFFFF;
}
#templatemo_header {
clear: left;
height: 100px;
background: url(images/headers_01.gif) no-repeat;
}
#templatemo_content {
width: 800px;
}
#templatemo_left_column {
background: #ffffff url(images/800x600_02.jpg) no-repeat;
float: left;
width: 200px;
min-height: 400px;
}
#template_far_right_column{
background:#FFFFFF url(images/800x600_02.jpg) no-repeat;
float:left;
width:100px;
min-height:400px;
}
#template_far_right_column_two{
background:#FFFFFF url(images/new_bar.gif) no-repeat;
float:left;
width:200px;
min-height:600px;
}
#templatemo_top_column {
background: #ffffff url(images/headers_02.gif);
float:none;
width: 800px;
min-height:51px;
}
#templatemo_top_column ul {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
color:#202080;
padding:6px;
margin:0;
white-space:nowrap;
}
#templatemo_top_column ul li{
display:inline;
padding-left:2em;
padding-right:2em;
color:#202080;
padding-top:16px;
}
#templatemo_right_column {
float: left;
width: 500px;
min-height: 600px;
color:#0000FF
}
#templatemo_right_column_two {
background:url(images/yeargroups.gif) no-repeat;
float: left;
width: 400px;
min-height: 600px;
color:#0000FF
}
#template_golden{
background:url(images/golden.gif) no-repeat;
float:left;
width:500px;
min-height:600px;
}
#template_groups{
background:url(images/square.gif) no-repeat;
float:left;
width:600px;
min-height:600px;
}
#template_calendar{
background:url(images/calendar.gif);
float:left;
width:500px;
min-height:600px;
}
#templatemo_footer {
/*clear:left;*/
height:35px;
width: 800px;

/*padding: 0px;
padding-top:6px;*/
}
#templatemo_site_title {
padding-top: 60px;
padding-left: 80px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 28px;
color: #FFFFFF;
}
#templatemo_site_slogan {
padding-top: 10px;
padding-left: 80px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
color: #FFFFFF;
}
.templatemo_line {
clear: left;
height: 3px;
background: #00d2ff;
}
.templatemo_pic {
float: right;
margin-left: 10px;
border: 1px solid #000000;
}
.section_box {
margin: 10px;
padding: 10px;
border: 2px solid #AACCAA;
background: #DDF2DD;
color: #008000;
}
.section_box2 {
clear: left;
margin-top: 10px;
padding: 10px;
border: 1px solid #CCCCCC;
background: #F8F8F8;
color: #666666;
}
.text_area {
margin: 10px;
}
.publish_date {
margin-top: 5px;
color: #999999;
font-size: 11px;
font-weight: bold;
}
.title {
padding-bottom: 16px;
font-size: 16px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
color: #202080;
}
.calendar_title{
padding-bottom:16px;
padding-top:20px;
font-size:16px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
color:#202080;
}
.subtitle {
padding-bottom: 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color:#202080;
}
.subtitle_bold {
padding-bottom: 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight:bold;
color:#202080;
}
.calendar_subtitle {
padding-bottom: 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color:#202080;
word-spacing:30px;
line-height:30px;
}
/* Menu Credit: http://www.dynamicdrive.com/style/ */
.glossymenu{
list-style-type: none;
margin: 5px;
padding: 0px;
width: 185px;
border: 0px solid #00d2ff;
}
.glossymenu li a{
background: #00d2ff url(images/button_default.gif) repeat-x center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:14px;
color:white;
display: block;
width: auto;
padding: 6px;
padding-left: 14px;
text-decoration: none;
}
.glossymenu_two{
list-style-type: none;
margin: 5px;
padding: 0px;
width: 800px;
border: 0px solid #202080;
}
.glossymenu_two li a{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#202080;
text-decoration:none;
}
.glossymenu_two li a:hover{
color:#00d2ff;
}
* html .glossymenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url(images/button_default.gif);
color: #00d2ff;
}

/* start footer code */



/*html

{}*/



/*body

{

height: 100%;

}*/



#nonFooter

{
position: relative;

min-height: 100% !important;

height: 100%;
}



* html #nonFooter

{
height: 100%;
}



#content

{
padding-bottom: 40px;
}



#footer

{
height: 35px;

clear: both;

position: relative;

/*margin-left: auto;

margin-right: auto;*/

margin-top: -70px; /*same as height! with a - in front*/

padding-bottom: 35px;

margin-left: auto; margin-right: auto;
background-image: url(images/footer.gif);
background-repeat: no-repeat;
background-position: center;

} .titleCopy {
padding-bottom: 16px;
font-size: 24px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
color: #202080;
line-height: 260%;
}

Excavator
12-21-2009, 11:12 AM
Hello dtakias, First off there are some errors in your markup. The validator finds them and they are easily fixed. See the links about validation in my sig below.

I like to comment the closing divs so they are easier to identify when your layout fills with content later on. Makes life a lot easier when you come back to work on it a year later too!

Try it like this -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to the Kanes Hill Website</title>
<meta name="keywords" content="free website templates, CSS templates, download HTML page, templatemo.com" />
<meta name="description" content="templatemo 004 - free CSS website template" />
<link href="kanes-style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style1 {font-size: 12px}
-->
</style>
</head>

<body>
<div id="nonFooter">
<div id="content">
<div id="templatemo_container">
<div class="templatemo_line"></div>
<div id="templatemo_header">
</div>

<div class="templatemo_line"></div>

<div id="templatemo_content">

<div id="templatemo_top_column">
<ul class="glossymenu_two">
<li><a href="index.html">Home</a></li>
<li><a href="ournews.html">Our News</a></li>
<li><a href="ourlearning.html">Our learning</a></li>
<li><a href="ourschool.html">Our School</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
<!--end top_column--></div>

<div id="templatemo_left_column">
<ul class="glossymenu">
<li><a href="newsletters.html">Newsletters</a></li>
<li><a href="diary.html">Diary/Events</a></li>
<li><a href="afterschool.html">After School/Clubs</a></li>
<li><a href="schoolprofile.html">School profile</a></li>
<li><a href="latest.html">Latest Event photos</a></li>
</ul>




<!--end left_column--></div>
<div id="templatemo_right_column">
<div class="text_area" align="justify">
<img src="images/small_03.gif" alt="smallgif" align="right" />
<div class="title">After School Clubs</div>
<div class="subtitle">
<p>Daily 3.15-5.30 YMCA After School Club (Community Room)</p>
</div>
&nbsp;
&nbsp;

<div class="title">Breakfast Clubs</div>
<div class="subtitle">
<p>Daily 7.45-8.45 Breakfast Club (Community Room)</p>
</div>
</div>
<!--end right_column--></div>
<div id="template_far_right_column"></div>
<!--end templatemo_content--></div>
<!--end container--></div>
<div id="footer">&nbsp;</div>
<!--end content--></div>
<!--end nonfooter--></div>
</body>
</html>

Excavator
12-21-2009, 11:20 AM
It might require a total rewrite of your template but this is a better full height layout (http://nopeople.com/CSS/full-height-layout/index.html) than the old nonFooter method. View the source to see how it's done.

I'll have a look at your CSS sometime tomorrow if no-one else has had a go at it by then. It's 1:30am up here...

dtakias
12-21-2009, 11:31 AM
It might require a total rewrite of your template but this is a better full height layout (http://nopeople.com/CSS/full-height-layout/index.html) than the old nonFooter method. View the source to see how it's done.

I'll have a look at your CSS sometime tomorrow if no-one else has had a go at it by then. It's 1:30am up here...


Thank you so much! I would really appreciate that! I am told I need to have it fixed in a few days...

Excavator
12-21-2009, 06:47 PM
Hello dtakias,
Did you look at the revised html I posted? Your right column was dropping because it was not in the same conaining div with the other columns.

Have a look at that code I posted.

Excavator
12-21-2009, 06:56 PM
That site has the same closing div errors on every page. Did you write this or were you hired to fix it? Either way, you've got a lot to do.

Another problem is floats are not cleared. See how to clear floats here (http://www.quirksmode.org/css/clearing.html).

Probably related is the box model (http://www.w3.org/TR/CSS2/box.html)is off.
The site is set at 800px wide but there is an extra 12px in padding applied to .glossymenu_two, it's getting it from #templatemo_top_column ul.
The 800px width plus the 12px padding make the menu 812px wide and that does not fit in #templatemo_content.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum