Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Can someone tell me where I am going wrong with this website
- Thread starter Coxylaad
- Start date
- Thread starter
- #2
two tips for getting them the same..... (css)
avoid the box model... unless you are experienced with it, getting this to work correctly in both browsers is a nightmare.
set your body text-size to 77%, then any text styles you define use 1.25em (for example)... this usually gets things like text and layout pretty good for me..
oh and of course, stick to standards.
HTH,
JEz
avoid the box model... unless you are experienced with it, getting this to work correctly in both browsers is a nightmare.
set your body text-size to 77%, then any text styles you define use 1.25em (for example)... this usually gets things like text and layout pretty good for me..
oh and of course, stick to standards.
HTH,
JEz
- Thread starter
- #4
- Thread starter
- #6
- Thread starter
- #8
right, i have made it work... but it has been hacked a bit...
first I got rid of the word generated HTML, whether this caused the problem i doubt, but it is bloaty and stuff..
then i put the css in the local page that i downloaded....
than i got rid of the float property on the div.mainpanel
div.mainpanel
{
width: 595px;
text-align:justify;
font-family:Tahoma;
font-size:10pt;
}
then i just checked for proper nesting (all divs pair up with a closing one...)
Thats it..
sometimes to make best use of float: is to not use it.
(or at least making use of float on one element sometimes means you dont have to use it on another..)
If you cannot make these changes i can email you the local html file for worked on...
HTH
JEz
first I got rid of the word generated HTML, whether this caused the problem i doubt, but it is bloaty and stuff..
then i put the css in the local page that i downloaded....
than i got rid of the float property on the div.mainpanel
div.mainpanel
{
width: 595px;
text-align:justify;
font-family:Tahoma;
font-size:10pt;
}
then i just checked for proper nesting (all divs pair up with a closing one...)
Thats it..
sometimes to make best use of float: is to not use it.
(or at least making use of float on one element sometimes means you dont have to use it on another..)
If you cannot make these changes i can email you the local html file for worked on...
HTH
JEz
- Thread starter
- #10
no, it is the float:left that is forcing it underneath. The float:left on the sidemenu class should put the menu along side the main panel.
as for the divs, no you didnt, but i did while i was working on it... and then just checked it in a validator which showed up a closing div that didnt have an open.
the code below should work in IE6 (which is what i tested it in).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>Peterlee Fire Company Ltd</title>
<base href=" />
<!--link rel="stylesheet" type="text/css" href="_style/main.css" -->
<style>
h1
{
font-family:Arial;
font-size:14pt;
font-weight:bold;
}
h2
{
font-family:Arial;
font-size:12pt;
font-weight:bold;
}
img.banner
{
width: 768px;
display:block;
}
div
{
display:block;
}
div.banner
{
width:769px;
}
div#container
{
width: 770px;
}
table.topmenu
{
width: 768px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
text-decoration: none;
border-collapse:collapse;
}
td.topmenu
{
font-family: Arial;
font-weight:normal;
font-size:11pt;
text-align:center;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
text-decoration: none;
background-color: #939393;
}
td.topmenu a:link, td.topmenu a:visited, td.topmenu a:active
{
background-color: #939393;
color:#333333;
text-decoration: none;
width:100%
}
td.topmenu a:hover
{
background: #939393;
color:yellow;
}
td.topmenuend
{
font-family: Arial;
font-weight:normal;
font-size:11pt;
color: #333333;
background-color: #939393;
text-align:center;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
td.topmenuend a:link, td.topmenuend a:visited, td.topmenuend a:active
{
background-color: #939393;
color:#333333;
text-decoration: none;
width:100%
}
td.topmenuend a:hover
{
background: #939393;
color:yellow;
}
td
{
font-size:10pt;
}
div.blackspacer
{
background-color: #000000;
width: 768px;
line-height: 12px;
}
div.sidemenu
{
width: 160px;
color:White;
font-family: Arial;
font-weight:normal;
text-align: center;
background-color:#800000;
float:left;
margin-right:10px;
}
div.sidemenuitem
{
width: 100%;
line-height:18pt;
border-bottom: solid 1px #000000;
padding: 0px 0px 0px 0px;
text-decoration: none;
font-size:11pt;
}
div.sidemenuitemcurrent
{
width: 100%;
line-height:18pt;
border-bottom: solid 1px #000000;
padding: 0px 0px 0px 0px;
text-decoration: none;
font-size:11pt;
background-color: #A80000;
}
div.sidemenuitem a:link, div.sidemenuitem a:visited, div.sidemenuitem a:active
{
background-color: #800000;
color: White;
text-decoration: none;
}
div.sidemenuitem a:hover
{
color: yellow;
background-color: #800000;
width: 100%;
text-decoration: none;
}
div.box1
{
width:200px;
font-size:large;
text-align:center;
float:left;
margin-right:70px;
margin-left:20px;
}
div.box2
{
float:left;
}
div.box3
{
width:270px;
font-size:10pt;
text-align:left;
float:left;
margin-left: 20px;
}
div.box3 a:link, div.box3 a:visited, div.box3 a:active, div.box3 a:hover
{
color:Black;
text-decoration:underline;
}
div.box4
{
width:260px;
color:black;
float:left;
margin-left:20px;
font-size:10pt;
}
div.box4 a:link, div.box4 a:visited, div.box4 a:active, div.box4 a:hover
{
color:black;
text-decoration:underline;
}
div.spacer1
{
float:left;
width:60px;
}
div.spacer2
{
float:right;
width:80px;
}
div.spacer3
{
float:left;
width:40px;
}
div.spacer4
{
float:left;
width:112px;
}
div.mainpanel
{
width: 595px;
text-align:justify;
font-family:Tahoma;
font-size:10pt;
}
div.divider
{
width: 570px;
}
body
{
margin:10px 10px 10px 10px;
padding:0px 0px 0px 0px;
}
</style>
</HEAD>
<body background = "_image/background.jpg">
<div id="container">
<div class="banner">
<img class="banner" src="_image/pfcbanner.gif" alt="">
</div>
<table class="topmenu">
<tr>
<td class="topmenu">
<a href="default.html"> Home </a>
</td>
<td class="topmenu">
<a href="aboutus.html">About Us </a>
</td>
<td class="topmenu">
<a href="new.html">News</a>
</td>
<td class="topmenuend">
<a href="contactus.html">Contact Us</a>
</td>
</tr>
</table>
<div class="blackspacer">.</div>
<div class="sidemenu">
<div class="sidemenuitemcurrent">
Extinguishers
</div>
<div class="sidemenuitem">
<a href='default.html'>Servicing</a>
</div>
<div class="sidemenuitem">
<a href='default.html'>Rental Plans</a>
</div>
<div class="sidemenuitem">
<a href='default.html'>Hose Reels</a>
</div>
<div class="sidemenuitem">
<a href='default.html'>Equipment Hire</a>
</div>
<div class="sidemenuitem">
<a href='default.html'>Safety Training </a>
</div>
<div class="sidemenuitem">
<a href='default.html'>Risk Assessment</a>
</div>
<div class="sidemenuitem">
<a href='default.html'>Fire Detection</a>
</div>
<div class="sidemenuitem">
<a href='default.html'>Fixed Systems</a>
</div>
</div>
<div class="mainpanel">
<h1>Extinguishers</h1>
Peterlee Fire Company can supply a full range of stored pressure factory filled extinguishers
to cover all fire types including a selection of specialist models. Each is manufactured
according to British Standards to provide maximum fire fighting capability and is labelled
with the BSI kite mark as well as full detail on the extinguisher type and fire classification
it is suitable to extinguish. <br>
<h2>What type of Fire Extinguisher do I need?</h2>
<table style="border-collapse:collapse; background-color:#FDFE96; border:solid 1px black;">
<tr>
<td style="background-color:black; color:black;">
</td>
<td>
<img style="float:left; border-left: solid 1px black; border-bottom:solid 1px black;" src="_image/EXimage1.gif" alt="">
Wood, Paper, Textiles, Fabric
</td>
<td>
<img style="float:left; border-left: solid 1px black; border-bottom:solid 1px black;" src="_image/ExImage2.gif" alt="">
Petrol, Diesel, <br> Oils
</td>
<td>
<img style="float:left; border-left: solid 1px black; border-bottom:solid 1px black;" src="_image/ExImage3.gif" alt="">
Butane, Methane, <br> Propane
</td>
<td>
<img style="float:left; border-left: solid 1px black; border-bottom:solid 1px black;" src="_image/ExImage4.gif" alt="">
Electrical Equipment
</td>
</tr>
<tr>
<td style="background-color:black; color:red; text-align:center; font-family:arial; font-weight:bold; font-size:12pt;padding-right:4px;">
Water
</td>
<td>
<img style="margin-left:25px;" src="_image/eximage5.gif" alt="">
</td>
</tr>
<tr>
<td style="background-color:black; color:#FFFFCC; text-align:center; font-family:arial; font-weight:bold; font-size:12pt;padding-right:4px;">
Foam
</td>
<td>
<img style="margin-left:25px;" src="_image/eximage6.gif" alt="">
</td>
<td>
<img style="margin-left:25px;" src="_image/eximage6.gif" alt="">
</td>
</tr>
<tr>
<td style="background-color:black; color:blue; text-align:center; font-family:arial; font-weight:bold; font-size:12pt;padding-right:4px;">
Powder
</td>
<td>
<img style="margin-left:25px;" src="_image/eximage7.gif" alt="">
</td>
<td>
<img style="margin-left:25px;" src="_image/eximage7.gif" alt="">
</td>
<td>
<img style="margin-left:25px;" src="_image/eximage7.gif" alt="">
</td>
<td>
<img style="margin-left:25px;" src="_image/eximage7.gif" alt="">
</td>
</tr>
<tr>
<td style="background-color:black; color:white; text-align:center; font-family:arial; font-weight:bold; font-size:12pt;padding-right:4px;">
CO²
</td>
<td>
</td>
<td>
<img style="margin-left:25px;" src="_image/eximage8.gif" alt="">
</td>
<td>
</td>
<td>
<img style="margin-left:25px;" src="_image/eximage8.gif" alt="">
</td>
</tr>
</table>
<br>
For more information about which extinguishers need to be placed in your
workplace <a href="contactus.html">Contact us</a> for a free survey.
<br><br>
</div>
<img style="float:left; margin-top:10px;" src="_image/Eximage12.jpg" alt="">
<table style="width:100%;float:left;margin-top:15px;margin-left:20px;margin-bottom:10px;border-top: solid 1px black;text-align:center">
<tr>
<td>
<a href="default.html"> [Home] </a>
</td>
<td>
<a href="AboutUs.html"> [About Us] </a>
</td>
<td>
<a href="News.html"> [News] </a>
</td>
<td>
<a href="ContactUs.html"> [Contact Us] </a>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</div>
</body>
</HTML>
as for the divs, no you didnt, but i did while i was working on it... and then just checked it in a validator which showed up a closing div that didnt have an open.
the code below should work in IE6 (which is what i tested it in).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>Peterlee Fire Company Ltd</title>
<base href=" />
<!--link rel="stylesheet" type="text/css" href="_style/main.css" -->
<style>
h1
{
font-family:Arial;
font-size:14pt;
font-weight:bold;
}
h2
{
font-family:Arial;
font-size:12pt;
font-weight:bold;
}
img.banner
{
width: 768px;
display:block;
}
div
{
display:block;
}
div.banner
{
width:769px;
}
div#container
{
width: 770px;
}
table.topmenu
{
width: 768px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
text-decoration: none;
border-collapse:collapse;
}
td.topmenu
{
font-family: Arial;
font-weight:normal;
font-size:11pt;
text-align:center;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
text-decoration: none;
background-color: #939393;
}
td.topmenu a:link, td.topmenu a:visited, td.topmenu a:active
{
background-color: #939393;
color:#333333;
text-decoration: none;
width:100%
}
td.topmenu a:hover
{
background: #939393;
color:yellow;
}
td.topmenuend
{
font-family: Arial;
font-weight:normal;
font-size:11pt;
color: #333333;
background-color: #939393;
text-align:center;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
td.topmenuend a:link, td.topmenuend a:visited, td.topmenuend a:active
{
background-color: #939393;
color:#333333;
text-decoration: none;
width:100%
}
td.topmenuend a:hover
{
background: #939393;
color:yellow;
}
td
{
font-size:10pt;
}
div.blackspacer
{
background-color: #000000;
width: 768px;
line-height: 12px;
}
div.sidemenu
{
width: 160px;
color:White;
font-family: Arial;
font-weight:normal;
text-align: center;
background-color:#800000;
float:left;
margin-right:10px;
}
div.sidemenuitem
{
width: 100%;
line-height:18pt;
border-bottom: solid 1px #000000;
padding: 0px 0px 0px 0px;
text-decoration: none;
font-size:11pt;
}
div.sidemenuitemcurrent
{
width: 100%;
line-height:18pt;
border-bottom: solid 1px #000000;
padding: 0px 0px 0px 0px;
text-decoration: none;
font-size:11pt;
background-color: #A80000;
}
div.sidemenuitem a:link, div.sidemenuitem a:visited, div.sidemenuitem a:active
{
background-color: #800000;
color: White;
text-decoration: none;
}
div.sidemenuitem a:hover
{
color: yellow;
background-color: #800000;
width: 100%;
text-decoration: none;
}
div.box1
{
width:200px;
font-size:large;
text-align:center;
float:left;
margin-right:70px;
margin-left:20px;
}
div.box2
{
float:left;
}
div.box3
{
width:270px;
font-size:10pt;
text-align:left;
float:left;
margin-left: 20px;
}
div.box3 a:link, div.box3 a:visited, div.box3 a:active, div.box3 a:hover
{
color:Black;
text-decoration:underline;
}
div.box4
{
width:260px;
color:black;
float:left;
margin-left:20px;
font-size:10pt;
}
div.box4 a:link, div.box4 a:visited, div.box4 a:active, div.box4 a:hover
{
color:black;
text-decoration:underline;
}
div.spacer1
{
float:left;
width:60px;
}
div.spacer2
{
float:right;
width:80px;
}
div.spacer3
{
float:left;
width:40px;
}
div.spacer4
{
float:left;
width:112px;
}
div.mainpanel
{
width: 595px;
text-align:justify;
font-family:Tahoma;
font-size:10pt;
}
div.divider
{
width: 570px;
}
body
{
margin:10px 10px 10px 10px;
padding:0px 0px 0px 0px;
}
</style>
</HEAD>
<body background = "_image/background.jpg">
<div id="container">
<div class="banner">
<img class="banner" src="_image/pfcbanner.gif" alt="">
</div>
<table class="topmenu">
<tr>
<td class="topmenu">
<a href="default.html"> Home </a>
</td>
<td class="topmenu">
<a href="aboutus.html">About Us </a>
</td>
<td class="topmenu">
<a href="new.html">News</a>
</td>
<td class="topmenuend">
<a href="contactus.html">Contact Us</a>
</td>
</tr>
</table>
<div class="blackspacer">.</div>
<div class="sidemenu">
<div class="sidemenuitemcurrent">
Extinguishers
</div>
<div class="sidemenuitem">
<a href='default.html'>Servicing</a>
</div>
<div class="sidemenuitem">
<a href='default.html'>Rental Plans</a>
</div>
<div class="sidemenuitem">
<a href='default.html'>Hose Reels</a>
</div>
<div class="sidemenuitem">
<a href='default.html'>Equipment Hire</a>
</div>
<div class="sidemenuitem">
<a href='default.html'>Safety Training </a>
</div>
<div class="sidemenuitem">
<a href='default.html'>Risk Assessment</a>
</div>
<div class="sidemenuitem">
<a href='default.html'>Fire Detection</a>
</div>
<div class="sidemenuitem">
<a href='default.html'>Fixed Systems</a>
</div>
</div>
<div class="mainpanel">
<h1>Extinguishers</h1>
Peterlee Fire Company can supply a full range of stored pressure factory filled extinguishers
to cover all fire types including a selection of specialist models. Each is manufactured
according to British Standards to provide maximum fire fighting capability and is labelled
with the BSI kite mark as well as full detail on the extinguisher type and fire classification
it is suitable to extinguish. <br>
<h2>What type of Fire Extinguisher do I need?</h2>
<table style="border-collapse:collapse; background-color:#FDFE96; border:solid 1px black;">
<tr>
<td style="background-color:black; color:black;">
</td>
<td>
<img style="float:left; border-left: solid 1px black; border-bottom:solid 1px black;" src="_image/EXimage1.gif" alt="">
Wood, Paper, Textiles, Fabric
</td>
<td>
<img style="float:left; border-left: solid 1px black; border-bottom:solid 1px black;" src="_image/ExImage2.gif" alt="">
Petrol, Diesel, <br> Oils
</td>
<td>
<img style="float:left; border-left: solid 1px black; border-bottom:solid 1px black;" src="_image/ExImage3.gif" alt="">
Butane, Methane, <br> Propane
</td>
<td>
<img style="float:left; border-left: solid 1px black; border-bottom:solid 1px black;" src="_image/ExImage4.gif" alt="">
Electrical Equipment
</td>
</tr>
<tr>
<td style="background-color:black; color:red; text-align:center; font-family:arial; font-weight:bold; font-size:12pt;padding-right:4px;">
Water
</td>
<td>
<img style="margin-left:25px;" src="_image/eximage5.gif" alt="">
</td>
</tr>
<tr>
<td style="background-color:black; color:#FFFFCC; text-align:center; font-family:arial; font-weight:bold; font-size:12pt;padding-right:4px;">
Foam
</td>
<td>
<img style="margin-left:25px;" src="_image/eximage6.gif" alt="">
</td>
<td>
<img style="margin-left:25px;" src="_image/eximage6.gif" alt="">
</td>
</tr>
<tr>
<td style="background-color:black; color:blue; text-align:center; font-family:arial; font-weight:bold; font-size:12pt;padding-right:4px;">
Powder
</td>
<td>
<img style="margin-left:25px;" src="_image/eximage7.gif" alt="">
</td>
<td>
<img style="margin-left:25px;" src="_image/eximage7.gif" alt="">
</td>
<td>
<img style="margin-left:25px;" src="_image/eximage7.gif" alt="">
</td>
<td>
<img style="margin-left:25px;" src="_image/eximage7.gif" alt="">
</td>
</tr>
<tr>
<td style="background-color:black; color:white; text-align:center; font-family:arial; font-weight:bold; font-size:12pt;padding-right:4px;">
CO²
</td>
<td>
</td>
<td>
<img style="margin-left:25px;" src="_image/eximage8.gif" alt="">
</td>
<td>
</td>
<td>
<img style="margin-left:25px;" src="_image/eximage8.gif" alt="">
</td>
</tr>
</table>
<br>
For more information about which extinguishers need to be placed in your
workplace <a href="contactus.html">Contact us</a> for a free survey.
<br><br>
</div>
<img style="float:left; margin-top:10px;" src="_image/Eximage12.jpg" alt="">
<table style="width:100%;float:left;margin-top:15px;margin-left:20px;margin-bottom:10px;border-top: solid 1px black;text-align:center">
<tr>
<td>
<a href="default.html"> [Home] </a>
</td>
<td>
<a href="AboutUs.html"> [About Us] </a>
</td>
<td>
<a href="News.html"> [News] </a>
</td>
<td>
<a href="ContactUs.html"> [Contact Us] </a>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</div>
</body>
</HTML>
Ok, reverse to begining. First step to proper coding is proper doctype. That will ensure your page will look the same (or at least as close to that as it can) on all browsers. Pick one of these:
Valid Doytypes
Come back with the findings after that.
Valid Doytypes
Come back with the findings after that.
- Thread starter
- #13
I personally use XHTML 1.0 Strict which is the strictest. The easiest (allows for most freedom with tags) and still acceptable should be HTML4.01 Transitional. It depends on what you are producing. Do you have:
1. All tags and attributes in lower case?
2. All empty tags (like <img>, <br>, <hr>) closed?
3. All styling done with CSS?
If you answered yes on all questions, go with xhtml. If not, go with html4
1. All tags and attributes in lower case?
2. All empty tags (like <img>, <br>, <hr>) closed?
3. All styling done with CSS?
If you answered yes on all questions, go with xhtml. If not, go with html4
Vragabond - The doctype that is there is produced by Dreamweaver... full doctype declarations are usually only applied when using a strict doctype.
I also use XHTML strict, but for 4.01 transitional the doctype being abbreviated shouldnt cause a problem...
BTW, when i say usually here, I mean in practise. It is technically correct to have a full doctype according to the w3c.
I also use XHTML strict, but for 4.01 transitional the doctype being abbreviated shouldnt cause a problem...
BTW, when i say usually here, I mean in practise. It is technically correct to have a full doctype according to the w3c.
jez, I know you are trying to help but sometimes it is not good to give advice when you don't know if it holds true or not. Correct (valid and complete) doctype will switch your browser's behaviour from quirks to standards-compliant mode. For FF, there isn't much difference, for Opera there's a huge improvement for the better and for IE there's a considerable improvement. The list I gave in the link features all valid and complete doctypes you can use on the website. If the one used is not on the list, it is considered invalid or incomplete and does absolutely nothing. It does not matter that DreamWeaver applies that -- DW is a WYSIWYG html editor, no more. It is not authority in HTML. The doctype it produces is incomplete and as such completely useless. That said, the valid list of doctypes I provided stands.
Vragabond - point taken.
I was simply pointing out that there was already a doctype, whether right or wrong which was put there by an editor.
I know how bad the HTML of DW is, my point was that it would be easy to assume that since there was one, that it would be correct especially as an expensive piece of software put it there.
I was simply pointing out that there was already a doctype, whether right or wrong which was put there by an editor.
I know how bad the HTML of DW is, my point was that it would be easy to assume that since there was one, that it would be correct especially as an expensive piece of software put it there.
- Thread starter
- #18
- Status
Similar threads
- Locked
- Question
- Locked
- Question