|
HTML - Image Spacing Problem
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!!! 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 i want to move and image up at least -2px is that possible in html or css? thanx in advance... Im trying to create a simple thing for my business. What im trying to do is have the image of each of my employees and under it have their name and other info. I want the images side by side with some space and able to put their info under it. Can someone help me with a html code? thanks! Hi everyone, I'm very new to html and I'm trying to create a landing page for my website. I've cut an image into 5 peices and converted it to html through photoshop. The only problem is that there are unwanted spaces between in ever row of the picture. The link is: http://thomasfoolery.com.au/landing-page/ At the top you will find the raw code spat out by hotoshop. Under it is the cleaned up version with the proper links added to the images. You will see that there are spaces in between the rows. I would REALLY appreciate anyones help!!! Thanks 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 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 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 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 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! Problem fixed 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! 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 an image depicting the trouble I'm having: I want to make a table, consisting of many cells. These cells would be fixed, and *very different* in sizes. It's easy to make a no-space table when all the images are exactly the same size, but when you have images with a variety of sizes, the table doesn't fit perfectly. Basically I want to create a collage of images with overlay text on each image. My idea was that I could create a table, and each cell (td) would have a background which is the image. Then I could just type in that cell, so the text would be over the image. Then I'd do this for every one of my images, and a collage would be formed. The problem is, the table makes large white spaces wherever the image sizes don't match! How do I get rid of these spaces, or is there an entirely different code/approach I should be using? Thanks! Here is my current code: HTML Code:
<html>
<head>
<style type="text/css">
table.nospace {
padding: 0; margin: 0;
border-collapse: collapse;
}
table.nospace tr {
padding: 0; margin: 0;
}
table.nospace td {
padding: 0; margin: 0;
}
</style>
</head>
<body>
<TABLE class="nospace" width="2040px" height="2000px" cellspacing="0px" cellpadding="0px">
<TR>
<td valign="top">
<table><tr>
<TD WIDTH="800px" HEIGHT="800px" BACKGROUND="image.jpg" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>text</FONT></h1>
</TD></tr></table>
</td>
<td valign="top">
<table><tr>
<TD WIDTH="700" HEIGHT="497" BACKGROUND="image" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>Text</FONT></h1>
</TD></tr></table>
</td>
<td valign="top">
<table><tr>
<TD WIDTH="700" HEIGHT="467" BACKGROUND="image.jpg" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>Text</FONT></h1>
</TD></tr></table>
</td>
</TR>
</TABLE>
</body>
</html>
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! 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. 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. Alright i'm having a little trouble. When I add stuff to the side boxes, they are farther down then i want them to be, here is a pic: I'm wanting to move it up some, but I don't know how, I have been trying for a long time though. Here is the HTML Code: Code: <div class="box2 margin1"> <div class="tail-right"> <div class="corner-right-bottom"> <div class="corner-left-bottom"> <div class="corner-right-top"> <div class="corner-left-top"> <div class="indent"> <h3><span><span>Partners</span></span></h3> <div class="indent2"> <center><a href="http://www.elitepvpers.de"><img src="http://img230.imageshack.us/img230/2364/31421454.png" border="0"></a></center> <center><a href="http://www.4botters.com"><img src="http://img814.imageshack.us/img814/2599/88029646.png" border="0"></a></center> <div id="vent"><div style="font-weight: bold; font-size: 12px; text-align: center;"><a href="ventrilo://94.75.238.76:4696/servername=EQGVent" style="text-decoration: none;"></a></div></div> </div> </div> </div> </div> </div> </div> </div> </div> Here is the CSS: Code: .box2 {background:#bec2c5 url(images/box2-bottom-tail.gif) bottom repeat-x;}
.box2 .tail-right {background:url(images/box2-right-tail.gif) right repeat-y;}
.box2 .corner-right-bottom {background:url(images/box2-corner-right-bottom.gif) right bottom no-repeat;}
.box2 .corner-left-bottom {background:url(images/box2-corner-left-bottom.gif) left bottom no-repeat;}
.box2 .corner-right-top {background:url(images/box2-corner-right-top.gif) right top no-repeat;}
.box2 .corner-left-top {background:url(images/box2-corner-left-top.gif) left top no-repeat; width:100%;}
.box2 .indent {padding:4px 6px 6px 4px;}
.box2 .indent2 {padding:15px 12px 0px 6px;}
Any help will be greatly appreciated. Thank you. In static FBML (which takes HTML) how do you decrease the spacing after the </p> tag? I have a heading and a subheading that and am separating the two via </p> but the spacing is too much. I can increase, but can't decrease it. |
|||||||