PDA

View Full Version : Whats wrong with this HTML?


kevin11951
January 6th, 2011, 07:20 AM
I am trying to design a small ad, and Firefox won't work:

http://hosting.kviero.com/ads/design_and_hosting/

There are supposed to be three images that aren't there...

Here is the code:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type" />
<title>Design and Hosting</title>
<style type="text/css">
#logo {
background-image: url(http://hosting.kviero.com/ads/design_and_hosting/design_and_hosting.png);
background-repeat: no-repeat;
background-position: center center;
}
#design {
background-image: url(http://hosting.kviero.com/ads/design_and_hosting/features.jpg);
background-repeat: no-repeat;
background-position: center center;
}
#hosting {
background-image: url(http://hosting.kviero.com/ads/design_and_hosting/vpn.jpg);
background-repeat: no-repeat;
background-position: center center;
}
#table {
border: 1px solid #999999;
}

</style>
</head>
<body>
<table
style="text-align: left; width: 800px; margin-left: auto; margin-right: auto;"
id="table" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="vertical-align: top; height: 100px;" id="logo"><br />
</td>
</tr>
<tr>
<td style="vertical-align: top;"><br />
<hr style="width: 100%; height: 2px;" /></td>
</tr>
<tr align="center">
<td style="vertical-align: top;"><span
style="font-weight: bold; color: red;">Now Available!</span><br />
<br />
<table
style="text-align: left; width: 95%; margin-left: auto; margin-right: auto; font-weight: bold;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="vertical-align: top; text-align: center;"><small>Kviero-IT
and OliveTree Services have teamed up to bring you an <br />
interesting new service; we will design your website for you from the <br />
bottom up, and then we will host it for you as well. <br />
</small></td>
</tr>
</tbody>
</table>
<small><span style="font-weight: bold;" /></small> </td>
</tr>
<tr>
<td style="vertical-align: top;"><br />
</td>
</tr>
<tr>
<td style="vertical-align: top;">
<table
style="text-align: left; width: 95%; margin-left: auto; margin-right: auto;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="vertical-align: top; width: 120px;" id="design"><br />
</td>
<td style="vertical-align: top; width: 5px;"><br />
</td>
<td style="vertical-align: top;"><small><span
style="font-weight: bold;"><br />
Design</span></small><br />
First we will learn what your business or service is, and design a <br />
website theme around that.&nbsp; Then we will write all content needed
to <br />
make your site attract the most number of users possible.<br />
<br />
</td>
</tr>
<tr>
<td style="vertical-align: top;" id="hosting"><br />
</td>
<td style="vertical-align: top;"><br />
</td>
<td style="vertical-align: top;"><small><span
style="font-weight: bold;"><br />
<br />
Hosting</span></small><br />
Second, we will setup a domain name for you, and setup a "Virtual
Server" to host your website for you.<br />
<br />
<br />
</td>
</tr>
</tbody>
</table>
<br />
</td>
</tr>
<tr align="center">
<td style="vertical-align: top;"><span style="font-weight: bold;">In
the end, you get a fully functioning website without ever lifting a
finger.</span><br />
</td>
</tr>
<tr>
<td style="vertical-align: top;"><br />
<hr style="width: 100%; height: 2px;" /></td>
</tr>
<tr style="font-weight: bold;">
<td style="vertical-align: top;">
<table
style="text-align: left; width: 95%; margin-left: auto; margin-right: auto;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="vertical-align: top;"><small>Hosting Packages
Available</small><br />
</td>
</tr>
</tbody>
</table>
<br />
</td>
</tr>
<tr>
<td style="vertical-align: top;">
<table
style="text-align: left; margin-left: auto; margin-right: auto;"
border="1">
<tbody>
<tr>
<td> <br />
</td>
<td align="center"><b>Starter</b>
</td>
<td align="center"><b>Advanced</b>
</td>
<td align="center"><b>Premium</b>
</td>
</tr>
<tr>
<td align="center"><b>Storage Quota</b>
</td>
<td align="center">20GB
</td>
<td align="center">250GB
</td>
<td align="center">Unlimited
</td>
</tr>
<tr>
<td align="center"><b>No. of Mailboxes</b>
</td>
<td align="center">20
</td>
<td align="center">250
</td>
<td align="center">Unlimited
</td>
</tr>
<tr>
<td align="center"><b>No. of Databases</b>
</td>
<td align="center">20
</td>
<td align="center">250
</td>
<td align="center">Unlimited
</td>
</tr>
<tr>
<td align="center"><b>No. of Web Sites</b>
</td>
<td align="center">20
</td>
<td align="center">250
</td>
<td align="center">Unlimited
</td>
</tr>
<tr>
<td align="center"><b>Cost per Month</b>
</td>
<td align="center"><b>$5.99/month</b>
</td>
<td align="center"><b>$7.99/month</b>
</td>
<td align="center"><b>$9.99/month</b>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><br />
</td>
</tr>
<tr>
<td style="vertical-align: top;">
<table
style="text-align: left; width: 95%; margin-left: auto; margin-right: auto;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="vertical-align: top;"><small><span
style="font-weight: bold;">Contact Us</span></small><br />
</td>
</tr>
</tbody>
</table>
<br />
</td>
</tr>
<tr>
<td style="vertical-align: top;">
<table
style="text-align: left; width: 95%; margin-left: auto; margin-right: auto;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="vertical-align: top;">If
you would like to order our services, you may fill out our order form
at
any time.&nbsp; Please visit the site below for more information:<br />
<br />
<a href="http://www.kviero.com/hosting">http://www.kviero.com/hosting</a><br />
</td>
</tr>
</tbody>
</table>
<br />
</td>
</tr>
</tbody>
</table>
</body>
</html>
Spr0k3t
January 6th, 2011, 07:38 AM
You should always single or double quote the url("");
anystupidname1
January 6th, 2011, 07:49 AM
Run it through here:
http://validator.w3.org/
kevin11951
January 6th, 2011, 08:26 AM
You should always single or double quote the url("");

Fixed, but still no cigar


Run it through here:
http://validator.w3.org/

It comes up as XHTML 1.0 Strict...
aytech
January 6th, 2011, 08:37 AM
It comes up as XHTML 1.0 Strict...

Add declaration if you need it to be anything else..
kevin11951
January 6th, 2011, 08:59 AM
Add declaration if you need it to be anything else..

no, xhtml is right
fatality_uk
January 6th, 2011, 09:16 AM
<br />
<br />
</td>
</tr>
</tbody>
</table>
<br />
</td>
</tr>
<tr align="center">
<td style="vertical-align: top;"><span style="font-weight: bold;">In
the end, you get a fully functioning website without ever lifting a
finger.</span><br />
</td>
</tr>

Closed table tag and then you still have tr's below that!
And really you shouldn't be using tables for item placement. Try and get some details about css
wojox
January 6th, 2011, 09:23 AM
I see them okay.
koenn
January 6th, 2011, 01:43 PM
There seems to be a problem with the image urls (paths ? File system permissions ? Web server conf ? ... ).

I don't see the images (although I can load them in a browser if I put their urls in the address bar)

If I replace the urls, the images show up, so the syntax is probably OK.
eg, this works :

<style type="text/css">
#logo {
background-image: url(http://img218.imageshack.us/img218/8612/yodartfm.jpg);
background-repeat: no-repeat;
background-position: center center;
}
#design {
background-image: url(file:///tmp/features.jpg);
background-repeat: no-repeat;
background-position: center center;
}
#hosting {
background-image: url(file:///tmp/features.jpg);
background-repeat: no-repeat;
background-position: center center;
}
#table {
border: 1px solid #999999;
}

</style>


although, re wojox - that would suggest a browser-side issue, or a combination of webserver conf, page definition, and browser interpretation/rendering


+ what fatality_uk said: using tables for page layout is ugly, and not done. It's also hard to maintain, it's very easy to screw up when you try to modify them (which you will, sooner or later).

then again, I'm not a web developer ...
slackthumbz
January 6th, 2011, 04:00 PM
1. CSS in your head tags? NO! Stick that shizzazle in a separate file and <link rel...> it.
2. Inline CSS. BAD! Repeat after me "inline css and inline javascript are the Devil!", now stick it with the rest of the CSS in that separate file we mentioned earlier and learn to use CSS classes and id's.
3. Tables for layout. Seriously? This one of the worst practices evar for failing it hard at html. Tables are for tabulated data and NOTHING ELSE.

Learn CSS properly, have a good ol' read at http://www.w3schools.com then rewrite that line noise using divs and spans etc like the good fnord intended.
koenn
January 6th, 2011, 08:56 PM
slackthumbz, apart from repeating what had been said twice already, could you, with your leet web design skillz, explain why exactly is happening with the images, and how to fix it ?

Since style inside the page is just as valid as style in a separate css file, just telling the OP to redo everything in a different file sounds like the definition of insanity : doing the same thing over and over again, expecting a different result every time.
aaaantoine
January 6th, 2011, 09:20 PM
1. CSS in your head tags? NO! Stick that shizzazle in a separate file and <link rel...> it.


I disagree. a <style type="text/css" /> block in your page header is fine, so long as...

1. You're not reusing those styles among multiple pages (that is, the style rules you're writing are one-offs written for the page). If you decide you might reuse the class on a different page, then go ahead and move the rule to your global stylesheet.

2. You don't have a whole crap-ton of CSS in your header. Anything beyond 20 lines should probably go to a linked stylesheet.


2. Inline CSS. BAD! Repeat after me "inline css and inline javascript are the Devil!", now stick it with the rest of the CSS in that separate file we mentioned earlier and learn to use CSS classes and id's.

You'd think so, but I've had situations where the only way I could style an element just the way I wanted was to apply the style directly to it. The philosophy you should consider is this: stylesheets and <style> tags for the rules; style="" attributes for the exceptions to the rules. Granted, kevin11951's usage in the OP does not follow this philosophy...

As for the subject at hand, try single quotes like so: url('http://...')

I know in Post 4 you implied you tried double quotes, but you didn't clarify whether or not you tried single quotes.
aytech
January 6th, 2011, 09:27 PM
CSS looks ok to me, did you try placing the images in the same folder as the html file? or put it in, say "images" folder in the html file directory, then specify the path as url("images/image.jpg");
kevin11951
January 6th, 2011, 11:35 PM
Closed table tag and then you still have tr's below that!
And really you shouldn't be using tables for item placement. Try and get some details about css

How do you control item placement w/o tables?


CSS looks ok to me, did you try placing the images in the same folder as the html file? or put it in, say "images" folder in the html file directory, then specify the path as url("images/image.jpg");

Yes, that didn't work however.


I disagree. a <style type="text/css" /> block in your page header is fine, so long as...

1. You're not reusing those styles among multiple pages (that is, the style rules you're writing are one-offs written for the page). If you decide you might reuse the class on a different page, then go ahead and move the rule to your global stylesheet.

2. You don't have a whole crap-ton of CSS in your header. Anything beyond 20 lines should probably go to a linked stylesheet.



You'd think so, but I've had situations where the only way I could style an element just the way I wanted was to apply the style directly to it. The philosophy you should consider is this: stylesheets and <style> tags for the rules; style="" attributes for the exceptions to the rules. Granted, kevin11951's usage in the OP does not follow this philosophy...

As for the subject at hand, try single quotes like so: url('http://...')

I know in Post 4 you implied you tried double quotes, but you didn't clarify whether or not you tried single quotes.

I just changed it to single quotes... problem persists.
Tibuda
January 6th, 2011, 11:39 PM
You'd think so, but I've had situations where the only way I could style an element just the way I wanted was to apply the style directly to it. The philosophy you should consider is this: stylesheets and <style> tags for the rules; style="" attributes for the exceptions to the rules. Granted, kevin11951's usage in the OP does not follow this philosophy...

#ids and .classes should take care of the exceptions. The style of those exceptions should be on the stylesheet, not on the markup.
aytech
January 7th, 2011, 08:33 AM
How do you control item placement w/o tables?.

with <div>'s, then use "position" property in CSS to place them.





Yes, that didn't work however.?.


Thants strange, how do you test it? doest it work if you open the html file from the local disk? If not, try localhost first.
I'm not super-experienced in this, but the problems that are encountered when this happened usually were:

- style is not attached to the right element, e.g. element is inside another block element, like <div> and you define style for that <div> instead;
- stylesheet is not in recognizable format, e.g. sometimes when I create stylesheet in notepad, it saves by default as ASCII, then I edit it in gedit, sometimes even change encoding and it might all go sideways, I then had to open the file specifically in notepad and save as UTF-8;

Hope that'll help
~LoKe
January 7th, 2011, 08:42 AM
Maybe I'm missing something, but it looks just fine on my end?