I am trying to take out all white lines and spaces between the navigation bar after converting from tables, just to see if it is easier (yes I did a backup before converting).<br />
<br />
here is the code that after converting:<br />
<br />
<br />
<div class="divtitle"><br />
<br />
<a name="top"><img CLASS="imgtitle"<br />
src=http://www.webdeveloper.com/forum/archive/index.php/"images/Resume-of-scott-mercer.gif" <br />
alt="Resume of Scott Mercer" <br />
/></a><br />
<br />
<img CLASS="imgshadow"<br />
name="Top_shadow" <br />
src=http://www.webdeveloper.com/forum/archive/index.php/"images/Top-shadow.gif"<br />
/> <br />
<br />
</div> <br />
<br />
<div class="navbar"><br />
<br />
<!--Introduction button--><br />
<br />
<img CLASS="imgnavintro"<br />
src=http://www.webdeveloper.com/forum/archive/index.php/"images/Introduction_disabled.gif"<br />
alt="Introduction" <br />
/><br />
<br />
<!--End Introduction button--><br />
<br />
<br />
<!--Education button--><br />
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"Education.html"<br />
onmouseover="changeImages('Education', 'images/Education-over.gif');return true;"<br />
onmouseout="changeImages('Education', 'images/Education.gif'); return true;"<br />
><br />
<br />
<img CLASS="imgnaved"<br />
name="Education"<br />
src=http://www.webdeveloper.com/forum/archive/index.php/"images/Education.gif"<br />
alt="Education"<br />
/><br />
</a><br />
<br />
<!--End Education button--><br />
<br />
<br />
<!--Employment_history button--><br />
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"Employment_History.html"<br />
onmouseover="changeImages('Employment_history','images/Employment-history-over.gif'); return true;"<br />
onmouseout="changeImages('Employment_history','images/Employment-history.gif'); return true;"<br />
><br />
<br />
<img CLASS="imgnavemploy"<br />
name="Employment_history"<br />
src=http://www.webdeveloper.com/forum/archive/index.php/"images/Employment-history.gif"<br />
alt="Employment History"<br />
/> <br />
</a><br />
<br />
<br />
<!--End Employment_history button--><br />
<br />
<br />
<!--Personal_qualities_button--><br />
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"Personal_Qualities.html"<br />
onmouseover="changeImages 'Personal_qualities_button', 'images/Personal-qualities-over.gif'); return true;"<br />
onmouseout="changeImages 'Personal_qualities_button', 'images/Personal-qualities.gif');return true;"<br />
><br />
<br />
<br />
<img CLASS="imgnavper"<br />
name="Personal_qualities_button"<br />
src=http://www.webdeveloper.com/forum/archive/index.php/"images/Personal-qualities.gif"<br />
alt="Personal Qualities"<br />
/><br />
</a><br />
<br />
<br />
<!--End Personal_qualities_button--><br />
<br />
<br />
<!--References_button_button--><br />
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"References.html"<br />
onmouseover="changeImages('References_button', 'images/References-over.gif'); return true;"<br />
onmouseout="changeImages 'References_button', 'images/References.gif'); return true;"<br />
><br />
<br />
<img CLASS="imgnavref" <br />
name="References_button" <br />
src=http://www.webdeveloper.com/forum/archive/index.php/"images/References.gif" <br />
alt="References" <br />
/><br />
</a><br />
<br />
</div><br />
<br />
<!--End References_button_button--><br />
<!--End All buttons--><br />
<br />
<!--Start Page width spacer--><br />
<br />
<br />
<div class="divnavspacer"><br />
<img class="imgnavspacer"<br />
src=http://www.webdeveloper.com/forum/archive/index.php/"images/Page_width_spacer.gif"<br />
/><br />
<br />
</div><br />
<br />
<!--End Page width spacer--><br />
<br />
<br />
<br />
<div class="curve"><br />
<br />
<img class="imgcurve" <br />
src=http://www.webdeveloper.com/forum/archive/index.php/"images/Curve-under-buttons.gif"<br />
/><br />
<br />
</div><br />
<br />
Please find attached the after conversion screendump<!--content-->This is what it looks like before converting (see Attachment). This is in table format and this is how I want it to look<br />
<br />
Thanks in advance for helping<!--content-->You appear to be using xhtml, which will add 'spaces' if they appear in the script.<br />
Change containers containing images:<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"References.html"><img class="imgnavref" name="References_button" src="images/References.gif" alt="References" /></a><br />
Add to css: img {vertical-align: bottom;}<br />
If this doesn't solve the problem a full script/link would be helpful.<br />
CLASS should be lowercase.<!--content-->Add to css: img {vertical-align: bottom;} <br />
<br />
That fixed half the problem. Thanks a millon<br />
<br />
I still have a problem with spaces left and right of the navigation buttons (see attachment)<br />
<br />
I desided that if vertical align fixes the problem verticaly, I thought that text-align would fix it horizontaly. but not so<br />
<br />
anyway thanks for your help<!--content-->Join all the A and IMG tags into one line.<!--content-->That did not work, and I am not surprised either. with HTML only one space in text will show in browser but not more then one unless you use a <br /> tag, <br> tag or whatever, but not in between tags<!--content-->You do not "convert" from tables to divs.<br />
<br />
You start over by writing semantically meaningful markup.<!--content-->smercer wroteThat did not work, and I am not surprised ... either. <br />
It works on the meager snippet of code you gave. You are apparently using xhtml where 'spaces' are important.<br />
If you are not prepared to give the css then further help is pure guesswork.<!--content-->your right again Fang. See Attachment<br />
<br />
thanks again everyone including Fang<!--content-->This is what it looks like now. I have put in a background that hides the obvious but the background is out of place and can be seen where it should not be. I would like the navigation buttons together with out the space in between.<!--content-->I've made a few shanges to index.html<br />
Added a DTD, changed a few entities(special characters), removed some hidden characters added by your editor, added script attribute type, and added some css.<br />
Your page is now html valid, and if you make a few minor changes to your css, valid css.<br />
I tested the layout with 1280.css and apart from a small black line at the end of the first image(background image?), there are no problems.<br />
<br />
Try to do the layout without tables and use one css, not one for each screen size.<!--content-->Thanks Fang,<br />
<br />
You did an amazing job. I got the black line out with photoshop.
<!--content-->
<br />
here is the code that after converting:<br />
<br />
<br />
<div class="divtitle"><br />
<br />
<a name="top"><img CLASS="imgtitle"<br />
src=http://www.webdeveloper.com/forum/archive/index.php/"images/Resume-of-scott-mercer.gif" <br />
alt="Resume of Scott Mercer" <br />
/></a><br />
<br />
<img CLASS="imgshadow"<br />
name="Top_shadow" <br />
src=http://www.webdeveloper.com/forum/archive/index.php/"images/Top-shadow.gif"<br />
/> <br />
<br />
</div> <br />
<br />
<div class="navbar"><br />
<br />
<!--Introduction button--><br />
<br />
<img CLASS="imgnavintro"<br />
src=http://www.webdeveloper.com/forum/archive/index.php/"images/Introduction_disabled.gif"<br />
alt="Introduction" <br />
/><br />
<br />
<!--End Introduction button--><br />
<br />
<br />
<!--Education button--><br />
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"Education.html"<br />
onmouseover="changeImages('Education', 'images/Education-over.gif');return true;"<br />
onmouseout="changeImages('Education', 'images/Education.gif'); return true;"<br />
><br />
<br />
<img CLASS="imgnaved"<br />
name="Education"<br />
src=http://www.webdeveloper.com/forum/archive/index.php/"images/Education.gif"<br />
alt="Education"<br />
/><br />
</a><br />
<br />
<!--End Education button--><br />
<br />
<br />
<!--Employment_history button--><br />
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"Employment_History.html"<br />
onmouseover="changeImages('Employment_history','images/Employment-history-over.gif'); return true;"<br />
onmouseout="changeImages('Employment_history','images/Employment-history.gif'); return true;"<br />
><br />
<br />
<img CLASS="imgnavemploy"<br />
name="Employment_history"<br />
src=http://www.webdeveloper.com/forum/archive/index.php/"images/Employment-history.gif"<br />
alt="Employment History"<br />
/> <br />
</a><br />
<br />
<br />
<!--End Employment_history button--><br />
<br />
<br />
<!--Personal_qualities_button--><br />
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"Personal_Qualities.html"<br />
onmouseover="changeImages 'Personal_qualities_button', 'images/Personal-qualities-over.gif'); return true;"<br />
onmouseout="changeImages 'Personal_qualities_button', 'images/Personal-qualities.gif');return true;"<br />
><br />
<br />
<br />
<img CLASS="imgnavper"<br />
name="Personal_qualities_button"<br />
src=http://www.webdeveloper.com/forum/archive/index.php/"images/Personal-qualities.gif"<br />
alt="Personal Qualities"<br />
/><br />
</a><br />
<br />
<br />
<!--End Personal_qualities_button--><br />
<br />
<br />
<!--References_button_button--><br />
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"References.html"<br />
onmouseover="changeImages('References_button', 'images/References-over.gif'); return true;"<br />
onmouseout="changeImages 'References_button', 'images/References.gif'); return true;"<br />
><br />
<br />
<img CLASS="imgnavref" <br />
name="References_button" <br />
src=http://www.webdeveloper.com/forum/archive/index.php/"images/References.gif" <br />
alt="References" <br />
/><br />
</a><br />
<br />
</div><br />
<br />
<!--End References_button_button--><br />
<!--End All buttons--><br />
<br />
<!--Start Page width spacer--><br />
<br />
<br />
<div class="divnavspacer"><br />
<img class="imgnavspacer"<br />
src=http://www.webdeveloper.com/forum/archive/index.php/"images/Page_width_spacer.gif"<br />
/><br />
<br />
</div><br />
<br />
<!--End Page width spacer--><br />
<br />
<br />
<br />
<div class="curve"><br />
<br />
<img class="imgcurve" <br />
src=http://www.webdeveloper.com/forum/archive/index.php/"images/Curve-under-buttons.gif"<br />
/><br />
<br />
</div><br />
<br />
Please find attached the after conversion screendump<!--content-->This is what it looks like before converting (see Attachment). This is in table format and this is how I want it to look<br />
<br />
Thanks in advance for helping<!--content-->You appear to be using xhtml, which will add 'spaces' if they appear in the script.<br />
Change containers containing images:<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"References.html"><img class="imgnavref" name="References_button" src="images/References.gif" alt="References" /></a><br />
Add to css: img {vertical-align: bottom;}<br />
If this doesn't solve the problem a full script/link would be helpful.<br />
CLASS should be lowercase.<!--content-->Add to css: img {vertical-align: bottom;} <br />
<br />
That fixed half the problem. Thanks a millon<br />
<br />
I still have a problem with spaces left and right of the navigation buttons (see attachment)<br />
<br />
I desided that if vertical align fixes the problem verticaly, I thought that text-align would fix it horizontaly. but not so<br />
<br />
anyway thanks for your help<!--content-->Join all the A and IMG tags into one line.<!--content-->That did not work, and I am not surprised either. with HTML only one space in text will show in browser but not more then one unless you use a <br /> tag, <br> tag or whatever, but not in between tags<!--content-->You do not "convert" from tables to divs.<br />
<br />
You start over by writing semantically meaningful markup.<!--content-->smercer wroteThat did not work, and I am not surprised ... either. <br />
It works on the meager snippet of code you gave. You are apparently using xhtml where 'spaces' are important.<br />
If you are not prepared to give the css then further help is pure guesswork.<!--content-->your right again Fang. See Attachment<br />
<br />
thanks again everyone including Fang<!--content-->This is what it looks like now. I have put in a background that hides the obvious but the background is out of place and can be seen where it should not be. I would like the navigation buttons together with out the space in between.<!--content-->I've made a few shanges to index.html<br />
Added a DTD, changed a few entities(special characters), removed some hidden characters added by your editor, added script attribute type, and added some css.<br />
Your page is now html valid, and if you make a few minor changes to your css, valid css.<br />
I tested the layout with 1280.css and apart from a small black line at the end of the first image(background image?), there are no problems.<br />
<br />
Try to do the layout without tables and use one css, not one for each screen size.<!--content-->Thanks Fang,<br />
<br />
You did an amazing job. I got the black line out with photoshop.
![Smile :) :)](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/1f642.png)
![Big Grin :D :D](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/1f600.png)
![Cool :cool: :cool:](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/1f60e.png)