A bit of HTML help

[brisk]

http://www.onefootinthegroove.net/test/index2.php

See the left gradient thats hanging down from the navbar? It is currently in a table, but the fucker doesn't attach itself properly to the navbar image above it. I know that there is some white underneath the image (which I will remove afterwards) but there is still a gap which kills the balance of the site for me.

I'm not a web expert as you can probably guess, and this is the first real site i've built in Dreamweaver. Suggestions on how I can fix this are most welcome (and excuse my n00bness in advance - i'm a designer, not a web-coder heh)

[dzjepp]

Looks like a decent site as it is

[brisk]

Oh, and i'm guessing its an IE issue as it looks fine in Firefox.

[DiscoDave]

I haven't done any website coding for about 4 yers but to me the gap seems part of the image

[brisk]

And another question:

I have a v small bg image which creates the interlace effect you see. However, I have a problem with normal images which aren't transparent and show this interlacing underneath (even if I use a transparent gif)

Is that something else which can be overcome?

[brisk]

I haven't done any website coding for about 4 yers but to me the gap seems part of the image

Yeah as I mentioned, the gap is there. But if you use IE, the gap between the top navbar and the left gradient is bigger (probably due to the table). This is what I want to fix.

[DiscoDave]

My apologies, my brother has asked for you to try this:

Steve says:
Tell him to find this line
Steve says:
<td width="198" height="49" valign="top"><p> </p>
Steve says:
And remove '<p> </p>'
Steve says:
it's 2 lines below the navbar image

[brisk]

Done, but it didn't work

[PhoeniX]

As your using CSS for the rest, why not use CSS rather than tables?

[MKJ]

well fisrt off get rid of any inline css. it looks sloppy and its really annoying to read the code properly

[4days]

if you're going to use a table, why not stick the whole thing in there (the image map as well)?

other than that, what pho said and what mkj said.

[brisk]

My CSS knowledge starts and ends with assigning colors and text sizes

I'm using cutenews as my news script, which is then embeded into a table using dreamweavers "add code block" function. I've also got a .inc file which is called within the page (for the playlist on the right)

[MKJ]

ok what we got here is what we oldskoolers ( :icon32: ) call 'The Dreamweaver Space'.

on line 90 you got the img src 'navbar.gif' followed by the imgmap block. while you cant see if, theres an invisible trailing space after the />. the same for line 91 , 92 and 93.
its not really a space, but a linefeed char created by your editor which IE faulty picks up on. fix this by using (and yes it looks very sloppy in the code..)

Code: Select all

 line 90:

<img src="http://www.onefootinthegroove.net/test/images/navbar.gif" width="800" height="50" border="0" usemap="#Navbar" /><map name="Navbar" id="Navbar"></map><table width="800" height="574" border="0" cellpadding="0" cellspacing="0">

instead of your nicely used

Code: Select all

line 90:

<img src="http://www.onefootinthegroove.net/test/images/navbar.gif" width="800" height="50" border="0" usemap="#Navbar" />

line 91:

<map name="Navbar" id="Navbar">

line 92:

  </map>


line 93:

  <table width="800" height="574" border="0" cellpadding="0" cellspacing="0">

this should fix it.
trust IE to punish you for using a clean formatted html file
this problem occurs mostly with tables btw, divs wont fuck you up like this

[MKJ]

My CSS knowledge starts and ends with assigning colors and text sizes

I'm using cutenews as my news script, which is then embeded into a table using dreamweavers "add code block" function. I've also got a .inc file which is called within the page (for the playlist on the right)

aye., but at least keep all css in the head if youre not going to use an external css file. never add new css styles in the body

[dmmh]

m8, some suggestions:

- replace every <br> with </br>, faulty syntax
- officially there is no 'height' property for the table element
- replace <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> with <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- get acustomed to NOT using inline CSS, either import or use an extrenal CSS file

run your site through the validator here:

http://validator.w3.org/check?uri=http% ... ype=Inline

[MKJ]

sander, please. he's using xhtml 1.0 trans. dont tell him to replace it with html 4

and the
<br />'s are fine. its the correct syntax

true about the css (like i said) and height props though
oh and the validating through w3 ofcourse. bordercolor is css, not html, for instance

[brisk]

this should fix it.
trust IE to punish you for using a clean formatted html file
this problem occurs mostly with tables btw, divs wont fuck you up like this

yes! you da man.

[dmmh]

most likely none of this will fix your error, but first things first: syntax

[brisk]

OK now I want to fix this CSS issue.

Here is the css/html I use in my news script:

Code: Select all

<style type="text/css">
<!--
.Date {	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.Title {	font-size: 12px;
	font-weight: bold;
	color: #333333;
}
.Main {	font-size: 12px;
	color: #333333;
}
-->
</style>
<table width="515" height="113" border="0" cellpadding="0" cellspacing="1">
  <tr>
    <td height="14" bgcolor="#C2C2C2"><div><span class="Date">{date}</span></div></td>
  </tr>
  <tr>
    <td height="14" bgcolor="#ebebeb"><div><span class="Title">{title}</span></div></td>
  </tr>
  <tr>
    <td height="74" bordercolor="1"><div>
      <p><br />
        <span class="Main" style="text-align:justify; padding:0; margin-top:3px; margin-bottom:5px;">{short-story}</span></p>
      <p> </p>
    </div></td>
  </tr>
</table>

I'm guessing I need to delete the CSS from here and just use it in my head instead?

[dmmh]

sander, please. he's using xhtml 1.0 trans. dont tell him to replace it with html 4

and the
<br />'s are fine. its the correct syntax

true about the css (like i said) and height props though
oh and the validating through w3 ofcourse. bordercolor is css, not html, for instance

- its fine if he uses xhtml, IF he would know HTML all the way, which he doesnt
- where did I say he had to replace <br/>'s? I said he had to replace <br> for </br>, not to replace <br/> for </br>, huge difference

proper linebreak tag is: </br>
this is standard
<br/> is less worse then <br>, but </br> is what it should be

take some more refreshing courses

[brisk]

My CSS in my head is a fucking mess anyway. I will clean that and get rid of layers that aren't even used anymore.

[dmmh]

OK now I want to fix this CSS issue.

Here is the css/html I use in my news script:

Code: Select all

<style type="text/css">
<!--
.Date {	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.Title {	font-size: 12px;
	font-weight: bold;
	color: #333333;
}
.Main {	font-size: 12px;
	color: #333333;
}
-->
</style>
<table width="515" height="113" border="0" cellpadding="0" cellspacing="1">
  <tr>
    <td height="14" bgcolor="#C2C2C2"><div><span class="Date">{date}</span></div></td>
  </tr>
  <tr>
    <td height="14" bgcolor="#ebebeb"><div><span class="Title">{title}</span></div></td>
  </tr>
  <tr>
    <td height="74" bordercolor="1"><div>
      <p><br />
        <span class="Main" style="text-align:justify; padding:0; margin-top:3px; margin-bottom:5px;">{short-story}</span></p>
      <p> </p>
    </div></td>
  </tr>
</table>

I'm guessing I need to delete the CSS from here and just use it in my head instead?

yeah, put it all into a txt file, rename the extention to .css and inbetween your <head></head tags do:

<link href="http://www.onefootinthegroove.net/your_file_name.css" rel="stylesheet" type="text/css">

advantage: youll only have to change one file to change the entire look of the site, whereas inline css would force you to modify all files using it

[MKJ]

sander, please. he's using xhtml 1.0 trans. dont tell him to replace it with html 4

and the
<br />'s are fine. its the correct syntax

true about the css (like i said) and height props though
oh and the validating through w3 ofcourse. bordercolor is css, not html, for instance

- its fine if he uses xhtml, IF he would know HTML all the way, which he doesnt
- where did I say he had to replace <br/>'s? I said he had to replace <br> for </br>, not to replace <br/> for </br>, huge difference

proper linebreak tag is: </br>
this is standard
<br/> is less worse then <br>, but </br> is what it should be

take some more refreshing courses

qwll if hes going to use the validator he might as wlel go xhtml to ensure compatibility its jnot like its 10 times difficult.
i kinda assumed you made a typo and meant br/ shouldve been replaced with /br

i also would like to know where you got </br> from, since w3 doesnt say anything about that (mayhap about <br> </br> ), but since a br is always empty the logical syntax would be <br />, never just </br>
</ implies ending an element; since it was never opened it would be incorrect..

[edit] better yet:

Line 89 column 113: character "<" is the first character of a delimiter but occurred as data.

...lt="News" width="800" height="242" /></ br>

w3c errors on </br>


even better yet

Definition and Usage
The <br> tag inserts a single line break.

The <br> tag is an empty tag (means that it has no end tag - the following is wrong: <br></br>).

In XHTML the <br> tag must be properly closed, like this: <br />.

i do this stuff on a daily basis sir. i think a refreshing course would be moot

[dmmh]

sander, please. he's using xhtml 1.0 trans. dont tell him to replace it with html 4

and the
<br />'s are fine. its the correct syntax

true about the css (like i said) and height props though
oh and the validating through w3 ofcourse. bordercolor is css, not html, for instance

- its fine if he uses xhtml, IF he would know HTML all the way, which he doesnt
- where did I say he had to replace <br/>'s? I said he had to replace <br> for </br>, not to replace <br/> for </br>, huge difference

proper linebreak tag is: </br>
this is standard
<br/> is less worse then <br>, but </br> is what it should be

take some more refreshing courses

qwll if hes going to use the validator he might as wlel go xhtml to ensure compatibility its jnot like its 10 times difficult.
i kinda assumed you made a typo and meant br/ shouldve been replaced with /br

i also would like to know where you got </br> from, since w3 doesnt say anything about that (mayhap about <br> </br> ), but since a br is always empty the logical syntax would be <br />, never just </br>
</ implies ending an element; since it was never opened it would be incorrect..

[edit] better yet:

Line 89 column 113: character "<" is the first character of a delimiter but occurred as data.

...lt="News" width="800" height="242" /></ br>

w3c errors on </br>


even better yet

Definition and Usage
The <br> tag inserts a single line break.

The <br> tag is an empty tag (means that it has no end tag - the following is wrong: <br></br>).

In XHTML the <br> tag must be properly closed, like this: <br />.

i do this stuff on a daily basis sir. i think a refreshing course would be moot

yes, always mix those 2 up rofl
sorry about that folks lol
but <br> is really really wrong, which was the real point of my post

no: <br>
yes: <br/>

[dmmh]

OK now I want to fix this CSS issue.

Here is the css/html I use in my news script:

Code: Select all

<style type="text/css">
<!--
.Date {	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.Title {	font-size: 12px;
	font-weight: bold;
	color: #333333;
}
.Main {	font-size: 12px;
	color: #333333;
}
-->
</style>
<table width="515" height="113" border="0" cellpadding="0" cellspacing="1">
  <tr>
    <td height="14" bgcolor="#C2C2C2"><div><span class="Date">{date}</span></div></td>
  </tr>
  <tr>
    <td height="14" bgcolor="#ebebeb"><div><span class="Title">{title}</span></div></td>
  </tr>
  <tr>
    <td height="74" bordercolor="1"><div>
      <p><br />
        <span class="Main" style="text-align:justify; padding:0; margin-top:3px; margin-bottom:5px;">{short-story}</span></p>
      <p> </p>
    </div></td>
  </tr>
</table>

I'm guessing I need to delete the CSS from here and just use it in my head instead?

yeah, put it all into a txt file, rename the extention to .css and inbetween your <head></head tags do:

<link href="http://www.onefootinthegroove.net/your_file_name.css" rel="stylesheet" type="text/css">

advantage: youll only have to change one file to change the entire look of the site, whereas inline css would force you to modify all files using it

remove the
<style type="text/css">
<!--
parts though