HTML Help…
February 4th, 2020
I am posting it here because this is not programming… I have this code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>1st Crayford Scouts</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body leftmargin=0 topmargin=0 marginheight="0" marginwidth="0" background="images/bg.gif">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td width="50%" background="images/bg.gif" repeat="repeat"><img src="images/px1.gif" width="1" height="1" alt="" border="0"></td>
<td valign="bottom" background="images/bg_left.jpg"><img src="images/bg_left.jpg" alt="" width="17" height="16" border="0"></td>
<td valign="top">
<table width="780" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="552"><img src="images/main01.jpg" width="295" height="89"><img src="images/main02.jpg" width="257" height="89"></td>
<td width="229"><img src="images/logo.jpg" width="229" height="89"></td>
</tr>
<tr>
<td><img src="images/main03.jpg" width="295" height="187"><img src="images/main04.jpg" width="257" height="187"></td>
<td valign="top">
<table width="229" border="0" cellspacing="0" cellpadding="0">
<tr> <td valign="top"><img src="images/separator.jpg" width="229" height="1"></td>
</tr>
<tr>
<td valign="top"><a href="contacts.html" class="contacts_rollover"></a></td>
</tr>
<tr>
<td valign="top"><img src="images/separator.jpg" width="229" height="1"></td>
</tr>
<tr>
<td valign="top"><a href="beavers.html" class="beavers_rollover"></a></td>
</tr>
<tr>
<td valign="top"><img src="images/separator.jpg" width="229" height="1"></td>
</tr>
<tr>
<td valign="top"><a href="cubs.html" class="cubs_rollover"></a></td>
</tr>
<tr>
<td valign="top"><img src="images/separator.jpg" width="229" height="1"></td>
</tr>
<tr>
<td valign="top"><a href="scouts.html" class="scouts_rollover"></a></td>
</tr>
<tr>
<td valign="top"><img src="images/separator.jpg" width="229" height="1"></td>
</tr>
<tr>
<td valign="top"><a href="events.html" class="events_rollover"></a></td>
</tr>
<tr>
<td valign="top"><img src="images/separator.jpg" width="229" height="1"></td>
</tr>
<tr>
<td valign="top"><a href="aboutus.html" class="aboutus_rollover"></a></td>
</tr>
<tr>
<td valign="top"><img src="images/separator.jpg" width="229" height="1"></td>
</tr>
</table>
</td>
</tr>
</table>
<img src="images/line.jpg" height="5px" />
<div class="background">
<table border="0" cellpadding="0" cellspacing="0" width="780">
<tr valign="top">
<td width="255">
<table border="0" cellpadding="0" cellspacing="0" width="255">
<tr class="header1">
<td align="center">
<br />
The Groups
</td>
</tr>
</table>
<p class="left"><img src="images/scouts_logo.png"></p>
<br />
<p class="left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh dolor sit elit, sed diam nonummy nibh commodo consequat.</p>
<br />
<p class="left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh dolor sit elit, sed diam nonummy nibh commodo consequat.</p>
</td>
<td rowspan="2" background="images/on01.gif" width="54" valign="bottom"></td>
<td rowspan="2">
<table border="0" cellpadding="0" cellspacing="0" width="471">
<tr class="header1">
<td align="center">
<br />About 1st Crayford Scouts</p></td>
</tr>
</table>
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr valign="top">
<td> <p class="left" style="margin-left: 0px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh dolor sit elit, sed diam sit amet, consectetuer adipiscing elit, sed diam nonummy nibh dolor sit elit, sed diam sit amet, consectetuer adipiscing elit, sed diam nonummy nibh dolor sit elit, sed diam sit amet, consectetuer adipiscing elit, sed diam nonummy nibh dolor sit elit, sed diam sit amet, consectetuer adipiscing elit, sed diam nonummy nibh dolor sit elit, sed diam nonummy nibh commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh dolor sit elit, sed diam sit amet, consectetuer adipiscing elit, sed diam nonummy nibh dolor sit elit, sed diam sit amet, consectetuer adipiscing elit, sed diam nonummy nibh dolor sit elit, sed diam sit amet, consectetuer adipiscing elit, sed diam nonummy nibh dolor sit elit, sed diam sit amet, consectetuer adipiscing elit, sed diam nonummy nibh dolor sit elit, sed diam nonummy nibh commodo consequat.</p>
</td>
</tr>
</table>
</td>
</tr>
<tr valign="bottom">
<td></td>
</tr>
</table>
</div>
<table border="0" cellpadding="0" cellspacing="0" height="206" width="780" background="images/bot02.jpg">
<tr valign="bottom">
<td>
<p class="menu" align="right">
<a href="index.html">Home</a>
<a href="aboutus.html">About Us</a>
<a href="legal.html">Legal</a>
<a href="members.php">Members</a>
<a href="skills.html">Skills</a>
<a href="links.html">Links</a>
<a href="groupcalendar.html">Group Calendar</a>
</p>
</td>
</tr>
</table>
</td>
<td valign="bottom" background="images/bg_right.jpg"><img src="images/bg_right.jpg" alt="" width="17" height="16" border="0"></td>
<td width="50%" background="images/bg.gif"><img src="images/px1.gif" width="1" height="1" alt="" border="0"></td>
</tr>
</table>
</body>
</html>
and this CSS:
body {
padding-top: 10px;
padding-bottom: 10px;
margin:0px;
}
th {
color : #000000;
font-size : 11px;
font-family : Tahoma,Verdana,Arial;
}
input {
color : #000000;
font-size : 11px;
font-family : Tahoma,Verdana,Arial;
font-weight: bold;
}
.px {
padding-top : 0px;
padding-bottom : 0px;
padding-left : 0px;
padding-right : 0px;
margin-top : 2px;
margin-bottom : 0px;
margin-left : 0px;
margin-right : 0px;
}
.px5 {
padding-top : 0px;
padding-bottom : 0px;
padding-left : 0px;
padding-right : 0px;
margin-top : 5px;
margin-bottom : 0px;
margin-left : 0px;
margin-right : 0px;
}
.title02 {
color : #FFFFFF;
margin-top : 0px;
padding-bottom : 0px;
margin-bottom : -5px;
margin-left : 10px;
margin-right : 0px;
font-size : 25px;
font-family : Tahoma, Arial, Verdana;
font-weight: bold;
}
.t01 {
color : #000000;
margin-top : 5px;
padding-bottom : 10px;
margin-bottom : 0px;
margin-left : 10px;
margin-right : 10px;
font-size : 11px;
font-family : Tahoma,Verdana,Arial;
font-weight: bold;
}
.t01 a {
color : #EF6D00;
}
.t01 a:hover {
color : #C25A02;
}
.list {
color : #FFFFFF;
margin-top : 3px;
padding-bottom : 3px;
margin-bottom : 0px;
margin-left : 10px;
margin-right : 10px;
font-size : 11px;
font-family : Tahoma,Verdana,Arial;
font-weight: bold;
}
.right {
color : #FFFFFF;
margin-top : 5px;
padding-bottom : 10px;
margin-bottom : 0px;
margin-left : 10px;
margin-right : 10px;
font-size : 11px;
font-family : Tahoma,Verdana,Arial;
font-weight: bold;
}
.right a, .list a {
color : #FFFFFF;
}
.right a:hover {
color : #AAAAAA;
}
.left {
color : #000000;
margin-top : 10px;
padding-bottom : 5px;
margin-bottom : 0px;
margin-left : 25px;
margin-right : 10px;
font-size : 11px;
font-family : Tahoma,Verdana,Arial;
font-weight: bold;
}
.left b {
color : #FFFFFF;
}
.left a {
color : #FF6600;
}
.left a:hover {
color : #FF0000;
}
p {
color : #000000;
margin-top : 5px;
padding-bottom : 10px;
margin-bottom : 0px;
margin-left : 10px;
margin-right : 10px;
font-size : 11px;
font-family : Tahoma,Verdana,Arial;
}
p a {
color : #000000;
font-weight: bold;
}
p a:hover {
color : #294A7B;
}
.menu {
color : #595959;
margin-top : 10px;
padding-bottom : 0px;
margin-bottom : 0px;
margin-left : 0px;
margin-right : 15px;
font-size : 11px;
font-family : Tahoma,Verdana,Arial;
font-weight: bold;
}
.menu a {
color : #000000;
text-decoration: none;
}
.menu a:hover {
color : #595959;
}
.header1 {
font-family: verdana;
}
a.contacts_rollover { background:url("images/contacts_button.jpg") repeat 0px 0px; width: 229px; height: 30px; display: block; }
a.contacts_rollover span { display: none; }
a.contacts_rollover:hover { background: url("images/contacts_button_S.jpg") repeat 0px -30px; }
a.beavers_rollover { background:url("images/beavers_button.jpg") repeat 0px 0px; width: 229px; height: 30px; display: block; }
a.beavers_rollover span { display: none; }
a.beavers_rollover:hover { background: url("images/beavers_button_S.jpg") repeat 0px -30px; }
a.cubs_rollover { background:url("images/cubs_button.jpg") repeat 0px 0px; width: 229px; height: 30px; display: block; }
a.cubs_rollover span { display: none; }
a.cubs_rollover:hover { background: url("images/cubs_button_S.jpg") repeat 0px -30px; }
a.scouts_rollover { background:url("images/scouts_button.jpg") repeat 0px 0px; width: 229px; height: 30px; display: block; }
a.scouts_rollover span { display: none; }
a.scouts_rollover:hover { background: url("images/scouts_button_S.jpg") repeat 0px -30px; }
a.events_rollover { background:url("images/events_button.jpg") repeat 0px 0px; width: 229px; height: 30px; display: block; }
a.events_rollover span { display: none; }
a.events_rollover:hover { background: url("images/events_button_S.jpg") repeat 0px -30px; }
.background {
background:url("images/content_background.jpg");
}
a.aboutus_rollover { background:url("images/aboutus_button.jpg") repeat 0px 0px; width: 229px; height: 30px; display: block; }
a.aboutus_rollover span { display: none; }
a.aboutus_rollover:hover { background: url("images/aboutus_button_S.jpg") repeat 0px -30px; }
img {
border: none;
}
/* dock - top */
.dock {
position: relative; height: 50px; text-align: center;
}
.dock-container {
position: absolute;
height: 50px;
background: url(images/dock-bg2.gif);
padding-left: 20px;
}
a.dock-item {
display: block;
width: 40px;
color: #000;
position: absolute;
top: 0px;
text-align: center;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
border: none; margin: 5px 10px 0px; width: 100%; }
.dock-item span {
display: none; padding-left: 20px;
}
/* dock2 - bottom */
#dock2 {
width: 100%;
bottom: 0px;
position: absolute;
left: 0px;
}
.dock-container2 {
position: absolute;
height: 50px;
background: url(images/dock-bg.gif);
padding-left: 20px;
}
a.dock-item2 {
display: block; font: bold 12px Arial, Helvetica, sans-serif;
width: 40px; color: #000; bottom: 0px; position: absolute;
text-align: center;
text-decoration: none;
}
.dock-item2 span {
display: none;
padding-left: 20px;
}
.dock-item2 img {
border: none; margin: 5px 10px 0px; width: 100%; }
It works fine in Firefox on a mac, but when I get it into windows and IE, it goes wrong, this is what it looks like on Firefox on mac:
here is what it looks like on windows on IE:
So as you can see, the line on mac just separates the two images, but on IE, it puts a blue background around it, which is the same as the background. Could someone please tell me how to fix this?
Thanks in advance
Xtra
P.s. I know it is in tables, I did not code it, it is a template. I made all the images though. And some of the code.
okay have you removed coding above the <head> and below <head>
like this <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
it might help or it might not
It may be because you put:
<br>
On a differant line instead of on the same code so it joins without a gap.
@ Joker – I don’t really get what you mean…
@ rayminter – I will try what you said.
Everyone, I just need all possible suggestions I am just going to look at the validation, to see what comes up there.
try setting your image boarders to “0” (zero)
and if using percentages for table size try setting a size
what app you use to code/edit your pages ?
in dreamweaver I copy & paste problem areas into a blank doc to diagnose the problem
less code to work with that way
it looks like this
</table>
<img src="images/line.jpg" height="5px" />
<div class="background">
<table border="0" cellpadding="0" cellspacing="0" width="780">
is where the problem is
try
</table><img src="images/line.jpg" height="5px" /><div class="background"><table border="0" cellpadding="0" cellspacing="0" width="780">
above is all on the same line ^
or try removing ” /” from <img src=”images/line.jpg” height=”5px” />
there is also no “container” for tha image
it’s
table
image
table
inside the main table
try splitting the main table into 3 (or 4) cells where you can set the center cell to 5px like the image
cells
top table
line image
bottom table
bottom menu
Hey everyone, I have now put it on the web, I got it fixed from putting it all on the same line. Thank You . But now I have put it on the web and it has changed. The CSS is still the same, and you can get the updates HTML from the source of the page.
http://www.scouttest.netii.net
So could someone please tell me why it is still happening?
Website Under Review <– is all i get
Is it back up yet?
yup
there now
try setting your main table to a fixed height and width
current
<body leftmargin=0 topmargin=0 marginheight="0" marginwidth="0" background="images/bg.gif">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
new
<body leftmargin=0 topmargin=0 marginheight="0" marginwidth="0" background="images/bg.gif">
<table border="0" cellspacing="0" cellpadding="0" width="700" height="500">
is that the exact height and width of the website do you know? So I can just copy and paste it in…
is that the exact height and width of the website
it’s just a bit smaller than the site, to clamp everything together
and no mater what size the table is the content will keep it at the correct size but not let components drift apart
It has not been fixed and the page how has a scroll bar at the bottom and is a LONG way to the right. It is uploaded if you would like to see what happened. Could someone pleas now tell me what has happened and how to fix it now? Thanks.
for me it’s all the way to the left and I get no scroll bar
Yes, I just found that out as well. But I need it to be in the center of the screen. Can you help me with this?
try this
just after the body tag put a center tag
<body leftmargin=0 topmargin=0 marginheight=”0″ marginwidth=”0″ background=”images/bg.gif”>
<center>
and just before the </body> tag put a close center tag
</center>
</body>
only add the bolded tags
i’ll give you one suggeston reduce the size of images
one of the image is like 5mb and its taking long to load.
None of them are that big… I saved them ALL as jpgs to reduce the size of them.
I have uploaded what everyone said and now it is back on the center on my mac, but I do not know about windows, also if the gap is still there, like I said in my first post, could anyone help me on that as well?
Could someone please help me with the space above and below the line? I want to get rid of it… the positioning I can do afterwards. Can someone please help?