|
HTML - Html Spacing Problem
Hi Guys, I searched through older posts but I couldnt find the exact answer I was looking for.
I am redesigning a few things on my website, the page I am referring to can be seen here - http://www.adamhuckle.com/test2.htm - I would like for the two images and their corresponding text to be next to each other (as they are now) but with some spacing between them. Is it possible to insert colums parhaps? I would like them to be side by side but with some additional spacing in between. Any help is welcome. Thanks in advance! Similar TutorialsHi, i've been trying to solve a problem for the last couple of hours and it is driving me mad, I can't find any help anywhere on the web so thought I would give this a whirl! After placing an image map on my page, I added another image below it, but there is a tiny black vertical gap (black being the bg color) between them. I have tried changing the location of the <br> tag in the script, have tried aligning and pretty much everything else obvious and I have no idea how to make them touch each other. Any help would be appreciated. The page can be seen at: http://jask.freehostingcloud.com/contactjask.html the annoying gap is between the navigation bar and the largest image. This appears to only be a problem in IE (i'm running version 8 on Vista) my code (which you can ofcourse view for your selves but i'll save you the time) is - <body vlink="#ff0000" alink="#ff0000" link="#ff0000" bgcolor="black"> <CENTER> <br> <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=KF9FFNDA7HD3N&lc=GB&item_name=Jask%20First%20Edition%20Board%20Game&amou nt=19%2e90¤cy_code=GBP&button_subtype=services&shipping=4%2e90&bn=PP%2dBuyNowBF%3abtn_buynowCC _LG%2egif%3aNonHosted" target="-blank"> <img src="http://jask.freehostingcloud.com/jaskgif.gif" width="907" border="0"></a><br> <img src="http://jask.freehostingcloud.com/gobar.JPG" height="55" border="0" useMap=#purple border=0><MAP name=purple border="0"> <area shape="rect" coords="86,7,210,43" href="http://www.jaskgames.com" alt="Jask!" title="Jask!"/> <area shape="rect" coords="257,8,381,44" href="http://jask.freehostingcloud.com/aboutjask.html" alt="All about Jask!" title="All about Jask!" /> <area shape="rect" coords="427,9,586,45" href="http://jask.freehostingcloud.com/contactjask.html" alt="Contact us about Jask!" title="Contact us about Jask!" /> <area shape="rect" coords="631,8,806,44" href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=KF9FFNDA7HD3N&lc=GB&item_name=Jask%20First%20Edition%20Board%20Game&amou nt=19%2e90¤cy_code=GBP&button_subtype=services&shipping=4%2e90&bn=PP%2dBuyNowBF%3abtn_buynowCC _LG%2egif%3aNonHosted" alt="Buy your own game!" title="Buy your own game!"/><br> <TABLE background="http://jask.freehostingcloud.com/mainybar.jpg" valign="top" width="907" height="445" cellpadding="0" cellspacing="0"> <TR><td width="320" valign="top"></td> <TD valign="top"><br><br> <font face="arial" color="white"><center> <form method="post" action="http://www.emailmeform.com/fid.php?formid=706822" enctype="multipart/form-data" accept-charset="UTF-8"><b><font face="arial" color=black></font> <div style="" id="mainmsg"> </div><br><font face="arial" color=black>Your Name: </font><input type="text" name="FieldData0" size="20"><br><br><font face="arial" color=black><b>Your Email Address: </font><input type="text" name="FieldData1" size="20"><br><br></font><textarea name="FieldData2" cols="44" rows="6"></textarea><br><br><input type="text" name="hida2" value="" maxlength="100" size="3" style="display : none;"><input type="submit" class="btn" value="Send email" name="Submit"> <input type="reset" class="btn" value=" Clear " name="Clear"><br></form> <b><font face="arial" color=black><b>Thankyou for getting in touch, We will respond to you<br> shortly. Alternatively, contact us directly by email:<br> <a href="mailto:info@jaskgames.com">info@jaskgames.com</a> </b> </TD></tr> </TABLE align="left"></map> </body></html> Many thanks in advance for any help, i'm totally stuck Hi all...I amtrying to figure out why there is so much space around my form. It leaves a 1 inch space under the form...my code is below, I would like the cell of the table bel,ow the form to essentially touch the bottom of my text box...Thanks for any help! Code: <table
style="background-color: rgb(255, 255, 255); width: 780px; height: 116px; text-align: left; margin-left: auto; margin-right: auto;"
border="1" cellpadding="1" cellspacing="0">
<tbody>
<tr>
<td
style="text-align: right; background-color: rgb(192, 192, 192);"
colspan="6" rowspan="1">
<form style="width: 272px;" name="jse_Form"><big
style="font-family: Bodoni MT;"><span
style="font-weight: bold;">Search:</span></big>
<input name="d" type="text"><input
value="Go" onclick="search_form(jse_Form)" type="button">
</form>
</td>
</tr>
Hey everyone. I've sliced this psd, and uploaded all the images to a server, used border="0". When I view the html file standalone in a browser, it appears fine. When I go to insert it into my email program, the different slices at the bottom are all spaced out in weird configurations, and I cannot for the life of me figure out how to change this. I'm only a couple months in to html, so please excuse my ignorance if this is a simple fix. It's images 4-10 that are giving me problems. HTML Code: <html> <head> <title>Final Emailer</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- ImageReady Slices (Final Emailer.psd) --> <table id="Table_01" width="600" height="801" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <img src="http://i1190.photobucket.com/albums/z451/LynchPrinting1/hig%20final%20sliced%20222/Final-Emailer_01.png"></td> </tr> <tr> <td colspan="5"> <img src="http://i1190.photobucket.com/albums/z451/LynchPrinting1/hig%20final%20sliced%20222/Final-Emailer_02.png"></td> </tr> <tr> <td rowspan="4"> <img src="http://i1190.photobucket.com/albums/z451/LynchPrinting1/hig%20final%20sliced%20222/Final-Emailer_03.png"></td> <td colspan="2"> <a href="mailto:info@shorehomeguide.com"><img src="http://i1190.photobucket.com/albums/z451/LynchPrinting1/hig%20final%20sliced%20222/Final-Emailer_04.png" border="0"></a></td> <td colspan="2" rowspan="2"> <img src="http://i1190.photobucket.com/albums/z451/LynchPrinting1/hig%20final%20sliced%20222/Final-Emailer_05.png"></td> </tr> <tr> <td colspan="2"> <img src="http://i1190.photobucket.com/albums/z451/LynchPrinting1/hig%20final%20sliced%20222/Final-Emailer_06.png"></td> </tr> <tr> <td rowspan="2"> <img src="http://i1190.photobucket.com/albums/z451/LynchPrinting1/hig%20final%20sliced%20222/Final-Emailer_07.png"></td> <td colspan="2"> <a href="http://lynchprintingllc.wordpress.com/publications/home-improvement-guide/" target="blank"><img src="http://i1190.photobucket.com/albums/z451/LynchPrinting1/hig%20final%20sliced%20222/Final-Emailer_08.png" border="0"></a></td> <td rowspan="2"> <img src="http://i1190.photobucket.com/albums/z451/LynchPrinting1/hig%20final%20sliced%20222/Final-Emailer_09.png"></td> </tr> <tr> <td colspan="2"> <img src="http://i1190.photobucket.com/albums/z451/LynchPrinting1/hig%20final%20sliced%20222/Final-Emailer_10.png"></td> </tr> <tr> </table> <!-- End ImageReady Slices --> </body> I am having no luck changing the line spacing of a single paragraph. I looked online and found something on using it in a div tag: Code: div {line-height: 5px;}
but everything else is with CSS. What would be the simplest way to encode a paragraph with a smaller line space between lines? Anders Hey All.. I have a table, with two rows, and in each row i have embeded a different SWF file. The swfs (i am hoping) should end up "joined" together so it looks like only 1 animation when viewing in a browser. However, when i view in both IE and FIREFOX i get spacing inbetween the 2swfs even after setting all spacing and cellpadding of the table to "0" and verticaly aligning the TD's correctly. Im not too sure why?...any feedback would be great! hey...hope i can sort this out quickly its only a small problem.. but if you look here ... http://anastaciadreams.com/layouttest/test.html youll notice on Internet explorer theres a space in the 2 parts of the banner area, how do i remove this? I've goggled around already and implemented a few solutions, but I can't find anything that will solve it. The page I'm having problems with is he http://www.team1225.com/bio.php Towards the bottom there's a member generated bios section. Each of those green boxes should be touching like the two orange boxes are touching. That's what I'm having problems with. Firefox renders the page correctly but Internet Explorer struggles to. I've spent a couple of hours narrowing down the problem. Sorry if the html output is hard to read, its php generated. Code: <h3 class="bio" id="1bio"><p class="biot">Brian <img class="rank" src="img/prog.png"/></p></h3>
<div id="biobr" class="content">
<table border='0' cellspacing='0' cellpadding='0' width='100%'>
<tr>
<td>Pecion sdejf asdf eeeaw dfalkdfjadsa asfaf cEqasdf.</td>
<td>Pecion sdejf asdf eeeaw dfalkdfjadsa asfaf cEqasdf.</td>
</tr>
<tr>
<td>Pecion sdejf asdf eeeaw dfalkdfjadsa asfaf cEqasdf.</td>
<td>Pecion sdejf asdf eeeaw dfalkdfjadsa asfaf cEqasdf.</td>
</tr>
<tr>
<td>Pecion sdejf asdf eeeaw dfalkdfjadsa asfaf cEqasdf.</td>
<td>Pecion sdejf asdf eeeaw dfalkdfjadsa asfaf cEqasdf.</td>
</tr>
</table>
<hr align='center' style='height: 1px; overflow: hidden; line-height:1px; border-bottom: 0px; width: 80%; color: #808080;'/>
<p align='center' style='color: #808080;'><i>Comment:</i></p>
<p style='color: black; margin: 1em; border: 1px solid #808080;'>Pecion sdejf asdf eeeaw dfalkdfjadsa asfaf cEqasdf.</p>
</div>
</div>
The css for div.content is: Code: div.content {
margin: 0px auto;
background-color: white;
color: black;
width: 80%;
}
The <div id="biobr" class="content"> part is the div field that opens and closes that holds the bio for the user. This javascript action is not related my problem. If I take out all the p, div, and hr tags in that <div id="biobr" class="content"> tag it works and all the green boxes are touching under Internet Explorer. Firefox keeps working like it always does. I've seen problems discussed like this so I think there's a fix. Thanks for any help, Alex I am a flash developer and our client wants this site to be built using mainly html, I am pretty good with html but not even close to an expert. I have built a site with Flash vertical and horizontal nav bars above and beside my html content. In Firefox and Safari the site looks perfect, however in IE6 & IE7 there is about a 5 pixel gap between my vertical menu bar and the rest of my content. I have tried everything I know to correct this problem... Any Ideas? They would be greatly appreciated.... Site Link http://www.sacreative.com/education Here's a screenshot of what it's doing: I want to eliminate the spacing all together so my Flash element can sit exactly within the div. If there's a better way of positioning the Flash please tell me! Alright, so am finally trying to learn PHP...but I am using <?php include('header.html'); ?> For the header/footer...and it seems as if the problem is via html instead of the php...so I hope this posted in the right area... The code for the header is this (as you can see I sliced in Imageready): Code: <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (mkdc4header.psd) -->
<table id="HeaderTable" width="920" height="84" border="0" cellpadding="0" cellspacing="0" style="padding-left:3px; padding-bottom:0px">
<tr>
<td rowspan="4">
<img src="http://www.webmaster-talk.com/images/header_01.gif" width="70" height="84" alt=""></td>
<td rowspan="2">
<img src="http://www.webmaster-talk.com/images/header_02.gif" width="135" height="43" alt=""></td>
<td colspan="7">
<img src="http://www.webmaster-talk.com/images/header_03.gif" width="639" height="32" alt=""></td>
<td rowspan="4">
<img src="http://www.webmaster-talk.com/images/header_04.gif" width="76" height="84" alt=""></td>
</tr>
<tr>
<td>
<a href="/index.php"><img src="http://www.webmaster-talk.com/images/header_05.gif" alt="" width="87" height="11" border="0"></a></td>
<td>
<a href="#"><img src="http://www.webmaster-talk.com/images/header_06.gif" alt="" width="74" height="11" border="0"></a></td>
<td>
<a href="http://www.moizkhan.com/blog"><img src="http://www.webmaster-talk.com/images/header_07.gif" alt="" width="80" height="11" border="0"></a></td>
<td>
<img src="http://www.webmaster-talk.com/images/header_08.gif" alt="" width="121" height="11" border="0"></td>
<td>
<a href="#"><img src="http://www.webmaster-talk.com/images/header_09.gif" alt="" width="87" height="11" border="0"></a></td>
<td>
<a href="#"><img src="http://www.webmaster-talk.com/images/header_10.gif" alt="" width="85" height="11" border="0"></a></td>
<td>
<img src="http://www.webmaster-talk.com/images/header_11.gif" width="105" height="11" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="http://www.webmaster-talk.com/images/header_12.gif" width="774" height="25" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="http://www.webmaster-talk.com/images/header_13.gif" width="774" height="16" alt=""></td>
</tr>
</table>
The problem only exists in IE7 (haven't checked IE6...but I have checked in Firefox and Opera and they seem fine...so any ideas? Live Demo: http://www.moizkhan.com/mkdc4php/ I have a couple of really small spacing problems. my website is www.betdemon.com you will see from the pic that the spacing 1# on the left hand side is different to the spacing 2# on the right hand side and looks uneven. I want spacing 2# to be the same as 1# - how do i do this? Also you will see there is a gap between banners (3#) but this doesn't appear when viewing in Firefox - How can I make the gap appear? Thanks in advance Problem fixed ok, the website is http://brett.unixpod.com (its my personal website) i want the top banner to contact with the navigation bar. the problem is when i remove the padding the text goes out of line, but then the menu contacts with the picture. The css stylesheet is he brett.unixpod.com/css/home.css if you dont understand what i mean by anything, ill try to explain, for heaven sakes, im only 14 years old, im still afraid of the boogie monster!!! I am fine-tuning an existing site and have run into one of those incredibly frustrating mysterious spacing difference problems. I've searched, tweaked, tested, validated and all but sacrificed a few voodoo chickens. The top right page title on these two pages should have the same spacing, that of the first (which all other pages on the site outside the /portfolio subfolder do). For no reason that I can find, pages in the /portfolio folder have extra space at the top. I have tried using cut and paste from working pages, moving the pages between folders, everything, and the problem persists. Both pages validate as XHTML. I'm testing primarily under FF6 but the problem also shows up in IE and Chrome. This page is fine: http://www.nitropress.com/anp_portfolio.php This page has extra spacing over the page title: http://www.nitropress.com/portfolio/anp_pf_bcfile.php What am I overlooking here? AdThanksVance. Hi, Thanks in advance for your help. I'm doing a web page that I would like to be viewed on 1024 resolutions without a horizontal scrollbar. It will contain images that are exactly 980px wide. The problem is that with ie7, as soon as it contains a div or a table, no matter what I do to try to remove all padding,margins,etc.. it adds 2px for each element (I guess 1px for each side). Below is some html as an example of my problem, where I've tried to remove everything I can think of... this works fine in firefox 3 <body style="width:998px;margin-top:0;margin-left:0;margin-right:0;padding:0;"> <div style="width:100%;textalign:center"><table border="0" cellspacing="0" cellpadding="0" style="width:998px;border-collapse:collapse;padding:0;margin:0;border:0;"><tr style="padding:0;margin:0;border:0;"><td style="padding:0;margin:0;border:0;">sdfsdfd</tr></td></table><div style="width:100%> </body> Here is a simple question from a newbie that has been doggin' me. How do you create spaces in html? My entries are coming out clumped together, I have not found a good tutorial on this subject. Can anyone give an answer or recommend a link or tutorial? Thank you, Frank My html problem keeps failling, with all my image codes.. shown for 10 errors which are all for the images what's wrong? Here is the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- New Perspectives on HTML and XHTML 5th Edition Tutorial 2 Case 2 Fiddler Home Page Author: Date: 2-16-2011 Filename: home.htm Supporting files: fiddler.jpg --> <title>, ITSE 1411 Lab Project 2, Tutorial 2 Case 2, Due 02/23/2011</title> </head> <body> <div> <img src="fiddler.jpg" alt="Fiddler on the Roof" /> <hr /> <a href="home2.htm"><img src="home.jpg" alt="home" /></a> <a href="slide1txt.htm"<img src="start.jpg" alt="start" /></a> <a href="slide1txt.htm"<img src="back.jpg" alt="back" /></a> <a href="slide2txt.htm"<img src="forward.jpg" alt="forward" /></a> <a href="slide6txt.htm"<img src="end.jpg" alt="end" /></a> <br /> <a href="slide1txt.htm"<img src="thumb1.jpg" alt="slide1" style="border-width: 5" /></a> <a href="slide2txt.htm"<img src="thumb2.jpg" alt="slide2" style="border-width: 0" /></a> <a href="slide3txt.htm"<img src="thumb3.jpg" alt="slide3" style="border-width: 0" /></a> <a href="slide4txt.htm"<img src="thumb4.jpg" alt="slide4" style="border-width: 0" /></a> <a href="slide5txt.htm"<img src="thumb5.jpg" alt="slide5" style="border-width: 0" /></a> <a href="slide6txt.htm"<img src="thumb6.jpg" alt="slide6" style="border-width: 0" /></a> </div> <hr /> <div> <img src="slide1.jpg" alt="slide1" /> </div> <blockquote> <p><i>Do You Love Me?</i> sung by Deb Ingalls and Thomas Gates</p> </blockquote> </body> </html> Ok so I'm learning along the way by playing around with what my web designer started. I'm having trouble working out what part of the html does the spacing between my text and the input box. Here's what I'm stuck at: You can see how where it says 'click for more fonts' the box isn't in line with the others. Any help would be much appreciated.... I'm starting to go cross-eyed lol. Hey folks... I've searched and searched for an answer for this, but with no luck. Probably because I don't know how to exactly describe my problem. Anyway, the issue is my page is displaying differently in IE and Firefox (surprise!). The spacing between the top image and the body divs are different. I'm not sure if it's an HTML issue or a CSS one. The page in question is: http://www.project-43.com/ The CSS file is he http://project-43.com/images/style.css It displays the way I want it too in Firefox. If you look at it in IE, you'll see the top image looks short, but that is because the spacing between the left menu area and the body on the right is too big. I appreciate any pointers that you might be able to offer. Thanks! Hello Everyone: I am a novice HTML user - I use it to create a Help file (for an MS/Access database), using HTML Help Workshop. My question concerns line spacing, using the following code: <b><u>Server:</u></b> <ul> <li>First List item...</li> </ul> Using this code, there will be a blank line between "Server" and "First List item...". Is it possible to eliminate this line and have the list start in the next line after "Server"? Thanks. . . Tony N. |
|||||||