|
HTML - Help With Getting Rid Of Image Padding
How do I fix this:
Please help! Similar TutorialsHi all -- I'm having an interesting problem. I'm designing a web page that has a navigation banner (home - programs - schedule of events - contact us - downloads) that is made up of a .png for each page (i.e. home.png, programs.png, etc). My page is 1000px wide and all of the navigation banner's images add up to 1000px wide. I'm using JavaScript to create an onMouseOver and onMouseOut effect on each of the images. The problem that I'm having occurs when I tried to add a link (either by <A HREF= or using an image map). Whenever I add a link to the image, a small (3px) area of white space shows up to the right of the image. This shifts all of my other images 3px to the right (and 3 more for each link I add to subsequent images) thus making the total width of the navigation banner over 1000px and the last image gets shoved to a new line. I can find no way to get rid of this white space other than to remove the link from the image. There is no property on the page that adds any sort of padding, margins, or borders to images or links, so I can see no property that has to be changed. Help! How do I get rid of this white space but still keep the link on the image?? [I posted this question on the Adobe forum to no avail, below is a screencap I took of the issue I'm having] Thanks in advance! //kl PS - I am using both IE8 and Chrome to view this webpage. I've set all the margins/padding/borders to 0px. Here is my CSS and the part of the code that pertains to the navigation banner. CSS: Code: <style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-image: url(images/blue.bg.png);
background-repeat: repeat;
background-color: #009;
}
.oneColFixCtr #container {
width: 1000px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColFixCtr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
body, td, th {
color: #333;
}
#main_banner2 {
margin: 0px;
padding: 0px;
height: auto;
width: 1000px;
}
-->
</style>
</head>
Nav Banner: NOTE:: below HAS to be all one paragraph because if i insert a carriage return in between images, it also adds the white space... Code: <body class="oneColFixCtr"> <!-- MAIN NAVIGATION BANNER --> <!--HOME--><img src="images/nav/home.png" alt="home" name="home" width="82" height="30" border="0" onMouseOver="document.images.home.src='images/nav/home_over.png'" onMouseOut ="document.images.home.src='images/nav/home.png'"/><!--PROGRAMS--><img src="images/nav/programs.png" width="111" height="30" border="0" name="programs" onMouseOver="document.images.programs.src='images/nav/programs_over.png'" onMouseOut ="document.images.programs.src='images/nav/programs.png'"/><!--SCHEDULE OF EVENTS--><img src="images/nav/scheduleofevents.png" width="189" height="30" border="0" name="scheduleofevents" onMouseOver="document.images.scheduleofevents.src='images/nav/scheduleofevents_ over.png'" onMouseOut ="document.images.scheduleofevents.src='images/nav/scheduleofevents.png'"/><!-- CONTACT US--><img src="images/nav/contactus.png" width="119" height="30" border="0" name="contactus" onMouseOver="document.images.contactus.src='images/nav/contactus_over.png'" onMouseOut ="document.images.contactus.src='images/nav/contactus.png'"/><!--DOWNLOADS--><i mg src="images/nav/downloads.png" width="267" height="30" border="0" name="downloads" onMouseOver="document.images.downloads.src='images/nav/downloads_over.png'" onMouseOut ="document.images.downloads.src='images/nav/downloads.png'"/><!--FACEBOOK--><im g src="images/nav/facebook.png" width="90" height="30" border="0" name="facebook" onMouseOver="document.images.facebook.src='images/nav/facebook_over.png'" onMouseOut ="document.images.facebook.src='images/nav/facebook.png'"/><!--TWITTER--><img src="images/nav/twitter.png" width="67" height="30" border="0" name="twitter" onMouseOver="document.images.twitter.src='images/nav/twitter_over.png'" onMouseOut ="document.images.twitter.src='images/nav/twitter.png'"/><!--BLOGGER--><img src="images/nav/blogger.png" width="75" height="30" border="0" name="blogger" onMouseOver="document.images.blogger.src='images/nav/blogger_over.png'" onMouseOut ="document.images.blogger.src='images/nav/blogger.png'"/><img src="images/home_banner.png" alt="home_border" width="1000" height="7" /><br /> I have a page that has an image aligned left with padding and text to the right. The text includes a bulleted list. However, the bullets are showing up misaligned with the rest of the text. Please see the attached screenshot. I had a similar problem when I tried to wrap text that included a bulleted list in <blockquote> tags. Thanks! Hi. For some strange reason, in my <div class="footer"> and <div class="content"> When I add: HTML SHEET .footer { padding: 10px; background-image: url(images/images1.png); background-repeat: repeat-x; background-position: top; } CSS SHEET .content { padding: 10px; background-image: url(images/images1.png); background-repeat: repeat-x; background-position: bottom; } The padding moves the background images 10px, up or down! Appreciate any help. God bless. In Christ Jesus, Karl. I i open this code in FF i get some padding on the left side of the image which is ok, but when i open it in IE i don't get this padding. Is there any way that I have this padding in IE? thanks Code: <div align="justify"><img src="http://www.site.com/default1.gif" style="padding-left:27px;" alt="Cleveland" align="right" width="152" height="136" border="0" /> <p> Ticketchest.com is the Number One provider of Major League Baseball tickets in the United States. You came to the right place for great Cleveland Indians tickets -- close to the field or anywhere you desire. Ticketchest.com has a huge supply of great tickets to sold-out or hard-to-get Cleveland Indians baseball games. <br> </p> <p>Whether you need group tickets for a professional or corporate outing or just a pair of tickets, The Ticket Chest is your source for the best Cleveland Indians baseball tickets on demand. Also, check into our other Major League Baseball teams. We do the hard work so you can focus on eating peanuts. <br> </p> </div> Hi all -- I'm having a problem. I have a series of 8 images that make up my navigation bar for the website I'm making. Each image has an <a href=" ... > </a> tag around it. I have zeroed out all of the padding/margins/borders on all of the images (in CSS and HTML). The problem I'm having is that a 2-3px padding is showing up to the left of each image, but only in Internet Explorer. Firefox and Chrome do not show the padding. To clarify, I DO NOT want the padding to be displayed. Here is my CSS: Code: <style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-image: url(images/nav/blue/blue.bg.png);
background-repeat: repeat;
background-color: #009;
}
.oneColFixCtr #container {
width: 1000px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
padding: inherit
border: 0px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
padding: 0px;
border: 0px;
}
.oneColFixCtr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
body, td, th {
color: #333;
}
a img {
border:none;
padding:0;
margin:0;
float:left;
}
a:link {
color: #009;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000053;
}
a:hover {
text-decoration: underline;
color: #009;
}
a:active {
text-decoration: none;
color: #009;
}
-->
</style>
and the <img src=" ... "> code: Code: <!-- MAIN NAVIGATION BANNER -->
<!--HOME-->
<a href="index.php"><img src="images/nav/blue/home_select.png" alt="home" name="home" width="82" height="30" border="0" id="home" onmouseover="document.images.home.src='images/nav/blue/home_over.png'" onmouseout ="document.images.home.src='images/nav/blue/home_select.png'"/></a>
<!--PROGRAMS-->
<a href="programs.php"><img src="images/nav/blue/programs.png" alt="programs" name="programs" width="111" height="30" border="0" id="programs" onmouseover="document.images.programs.src='images/nav/blue/programs_over.png'" onmouseout ="document.images.programs.src='images/nav/blue/programs.png'"/></a>
<!--SCHEDULE OF EVENTS-->
<a href="schedule.php"><img src="images/nav/blue/scheduleofevents.png" alt="schedule of events" name="scheduleofevents" width="189" height="30" border="0" id="scheduleofevents" onmouseover="document.images.scheduleofevents.src='images/nav/blue/scheduleofevents_over.png'" onmouseout ="document.images.scheduleofevents.src='images/nav/blue/scheduleofevents.png'"/></a>
<!--CONTACT US-->
<a href="contact.php"><img src="images/nav/blue/contactus.png" alt="contact us" name="contactus" width="119" height="30" border="0" id="contactus" onmouseover="document.images.contactus.src='images/nav/blue/contactus_over.png'" onmouseout ="document.images.contactus.src='images/nav/blue/contactus.png'"/></a>
<!--DOWNLOADS-->
<a href="downloads.php"><img src="images/nav/blue/downloads.png" alt="downloads" name="downloads" width="267" height="30" border="0" id="downloads" onmouseover="document.images.downloads.src='images/nav/blue/downloads_over.png'" onmouseout ="document.images.downloads.src='images/nav/blue/downloads.png'"/></a>
<!--FACEBOOK-->
<a href="javascript:void(0)"
onclick="window.open('http://www.facebook.com/pages/Delhi-NY/Delaware-County-Public-Health-Nursing-Service/247460644781?ref=ts')"><img src="images/nav/blue/facebook.png" alt="facebook" name="facebook" width="90" height="30" border="0" id="facebook" onmouseover="document.images.facebook.src='images/nav/blue/facebook_over.png'" onmouseout ="document.images.facebook.src='images/nav/blue/facebook.png'"/></a>
<!--TWITTER-->
<a href="javascript:void(0)"
onclick="window.open('http://www.twitter.com/dcphns')"><img src="images/nav/blue/twitter.png" alt="twitter" name="twitter" width="67" height="30" border="0" id="twitter" onmouseover="document.images.twitter.src='images/nav/blue/twitter_over.png'" onmouseout ="document.images.twitter.src='images/nav/blue/twitter.png'"/></a>
<!--BLOGGER-->
<a href="javascript:void(0)"
onclick="window.open('http://dcph.blogspot.com')"><img src="images/nav/blue/blogger.png" alt="blog" name="blogger" width="75" height="30" border="0" id="blogger" onmouseover="document.images.blogger.src='images/nav/blue/blogger_over.png'" onmouseout ="document.images.blogger.src='images/nav/blue/blogger.png'"/></a>
I know it's a bit of a mess.. but regardless, I cannot figure out why this happens.. any ideas? my problem is ie and its padding, ie has add a 4px padding at the bottom of the of the image but in safari and firefox there is no padding. here is the url so u understand what i mean http://nathanoconnor.co.uk/gilbertelectrical/site/ Hi all, Does anyone have other techniques to mock a padding in IE. I think the new IE ver8+ have padding, but i don't think IE ver6-7 have it. I did not realize it becuase i would always expect my clients to update thier browsers. I also see that there are still a HUGE percentage of people across the world that is still using IE 6. One trick that i use is to create two div for example: HTML Code: <div>
<div style="margin: 10px;">
content
</div>
</div>
this mocks a padding type hope anyone finds this useful Hi All, I have a table under a div tag, and there seems to be some padding that I want to remove. I've set the padding and border-width property to 0px, but there gap's still there. Any suggestions? Thanks, HTML Code: <html>
<head>
<title>Untitled Document</title>
</head>
<body>
<div id="stuff1" style="background-color: red">Stuff 1</div>
<table style="padding-top: 0; border-top-width: 0px">
<tr><td style="background-color: Black">asd</td></tr>
</table>
</body>
</html>
Website is Here Ok, so I'm trying to get the text near the picture with the old guy with the roses padded a little. I tried adding "padding: 2px;" to the css but that doesnt work...Can someone look at my css and figure it out? Im stuck! -Thanks Hello htmlforums and members, i am having trouble with spacing my text away from my image... Problem: -------------------------------------------------- as you all can see from my picture the text is to close to the image even though i have checked my css and html i cant find the problem line css: PHP Code: #small-content { float:left; width:150px; height:372px; padding:12px 0 0 0; margin:18px 0 0 34px; } #box1 { height:124px; padding:38px 5px 0 5px; margin-bottom:22px; font-size:0.6em; line-height:1.0em; overflow:auto; html: PHP Code: <div id="small-content"> <div id="box1"> <a id="link" href="http://betyoulikeit.com/viewtopic.php?f=84&t=19"> <img style="float: left; padding: 3px 3px 0px 3px;" src="http://i713.photobucket.com/albums/ww140/daveedking/moviezsmall.png" width="25" height="25" /> </a> <p> http://Betyoulikeit.com is on a mission to obtain only the best clean, virus Free Data From around the World... We Do not Host the Data But WE Track Down and Run Security scans on all Files... ___________________________ -Upgrading Everyday- </p> </div> help me find the errors of my ways jajajaja.... -tikki- i set up a large gap for cellpadding with my site and im wondering if i can undo that for 1 object, i want 1 object to be style="float:right; and in the top right area of the screen is there anyway i can undo the cellpadding effect for that object ? I run a forum with a small progress bar under the user's avatar showing how far until the user achieves the next rank. The progress bar is simply an image resized based on the % of current posts to posts needed for the next rank. The styling of the progress bar is done entirely inline. <dd style="padding-left:5px; padding-top:2px;"> <div style="text-align:left; display:block; height:3px; width:80px; border:1px solid #DACDA5;"> <div style="height:3px; width:{postrow.RANK_LEVEL_SIZE}px; background: url('images/progress.jpg') no-repeat;"></div> </div> </dd> In Firefox and later versions of IE, the progress bar renders perfectly: In IE6 however, the bar is oversized and the padding is clearly off: Any suggestions on how I might correct the padding for IE6 would be greatly appreciated. I was going to create a seperate set of code showing the progress bar bracketed by <!--[If IE]> <![endif]-->. Hey guys, I want a kind of horizontal border down the side of my comment div, and padding that pushes it away from it. So far, it's worked perfectly in Firefox and Opera, but it goes all haywire in IE. I honestly don't even know what's going on. Here's an example page with the comments: http://automata.firephoenixnet.com/item/85 It looks okay in Firefox, but it looks all weird in IE. Can someone tell me what's causing this? Hello, This is similar to my last post that has been already marked resolved so I'm starting a new one. I can't figure out how to have a TABLE WITHIN A TABLE be at 100% height and not create a scroll bar in IE. One table alone, there is no problem, but when you nest another table, a scroll bar appears. Here is a link to a visual example: www.thehamandcheese.com If you use Firefox, you can see how I would like it to work. But if you use IE, you will see how I don't want it to work. How do I get IE to work like FF? Here's the code of that link: HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<link href="StyleSheet.css" type="text/css" rel="stylesheet"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html { PADDING:0px; MARGIN:0px; HEIGHT: 100%;WIDTH:100%;}
BODY { PADDING:0px; MARGIN:0px; HEIGHT: 100%;WIDTH:100%;}
FORM { PADDING:0px; MARGIN:0px; HEIGHT: 100%;WIDTH:100%;}
</style>
</head>
<body>
<form runat="server">
<table style="height:100%; width:100%; border-color: Red" border="3" cellspacing="0" cellpadding="0">
<tr>
<td style="height:100%; width:100%">
<table style="height:100%; width:100%; border-color: Blue" border="3" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle" align="center">
Hello
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
Thanks, Alec Hello! I hope you can help. This code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD> <style type="text/css"> .container {display: table; border-collapse: collapse} .row {display: table-row} .cell {border: 3px solid red} .map{width:480; border:4px solid #C63; margin:0} </style> <link type="text/css" rel="stylesheet" href="GA.css"/> </HEAD> <BODY> <div class="container"> <div class="row"> <div class="cell"><IMG class="map"SRC="mapA.jpg"alt='PAP'></div> <div class="cell"><IMG class="map"SRC="mapB.jpg"alt='Pacot'></div> </div></div> </BODY></HTML> gives the expected red outer borders and brown inner borders. But... what is the blue (empty) space between them? Has now been sorted. http://dampheat.com/store.html i cant recall the html to make the spacing to the left and atop that graphic go away. Hi! I am in the process of designing my first web page and I am having some difficulty with cell padding. I want there to be some space between my text and the edge of the tan box. What i am doing is obviously not working! Any help would be greatly appreciated! Here's the URL: http://www.freewebs.com/pixelsnponies/index.htm And here's the code: <html> <head> <title>Pixels 'n Ponies Graphics</title> </head> <body bgcolor="A85045"> <img src="http://img221.imageshack.us/img221/6698/sagebannerwg7.jpg" align="center" width="100%"> <br> <br> <TABLE width=100%><TR><TD bgcolor=#A85045 width=20% valign=top> <center><A href="http://www.freewebs.com/pixelsnponies/index.htm"><font color="161513"><img src="http://img222.imageshack.us/img222/9146/homelinkaf5.jpg"></FONT></A></center> <br> <br> <center><A href="http://www.freewebs.com/pixelsnponies/Layouts.htm"><font color="161513"><img src="http://img136.imageshack.us/img136/7010/layoutsap5.jpg"></FONT></A></center> <br> <br> <center><A href="http://www.freewebs.com/pixelsnponies/The%20Seasons.htm"><font color="161513"><img src="http://img225.imageshack.us/img225/9294/theseasonsst5.jpg"></FONT></A></center> <br> <br> <center><A href="http://www.freewebs.com/pixelsnponies/The%20Breeds.htm"><font color="161513"><img src="http://img225.imageshack.us/img225/7374/thebreedsgw1.jpg"></FONT></A></center> <br> <br> <center><A href="http://www.freewebs.com/pixelsnponies/Banners.htm"><font color="161513"><img src="http://img225.imageshack.us/img225/1058/bannersandadshw3.jpg"></FONT></A></center> <br> <br> <center><A href="http://www.freewebs.com/pixelsnponies/Support.htm"><font color="161513"><img src="http://img225.imageshack.us/img225/4702/supportgx7.jpg"></FONT></A></center> </TD><TD bgcolor=#EEE7DB width=80% valign=top cellpadding=10><center><font size="3" face="baskerville" color="161513" > <br> <b>Welcome to Pixel's n' Ponies Howrse Graphics!</b> <br> <br> Your Howrse profile page represents you, so it's appearence is important. Here you can find a number of free layouts to make your page look professional. Feel free to take a look around and choose a look that suites you. A new layout is added every week, so check back often! <br><br>Don't have a Howrse account? <A href="http://www.howrse.com" target="_blank"><font color="161513">Click here</A> and come join the fun!</center> <br> <br> <b>FAQ</b> <br> <br> <b>Q: How do I put the layout on my page?</b> <br><br><b>A:</b> - Copy the HTML code. <br>- Go to "Edit My Profile" <br> - Click "HTML Mode" <br> - Paste the code. <br> - Click "Edit My Profile" <br> - Add your own text, pictures, etc. <br> <br> <b>Q: Can I have a custom layout?</b> <br><br> <b>A:</b> Due to the time it takes to design and code a layout, I do not make custom layouts for free. However, I would consider doing one for around 400E. Message me for details. My Howrse name is Pookielou. <br> <br> <b>Q: I have a good idea for a layout. Will you code it?</b> <br> <br><b>A:</b> I'm always open to new ideas. If you message me with your proposal, I will consider coding it and adding it to the free layouts on this site.<br></font> </TD> </TR> </TABLE> </body> </html> Maybe it's not padding or whatever, but i'm having an issue with my assignment (given the very sketch instructions we get) and I simply can't figure this one out it's making me crazy -.- Look closely at the box with the paragraph, and the logo. Between them is a space of the original background color. I can't seem to figure out why that space is there and how to close the gap. Any ideas? here's the CSS code for the div class/id's around the main content(paragraph and photo) Code: #content { padding-left: 20px;
padding-right: 20px;
margin-left: 150px;
background-color: #F1E8B0;
color: #000000;
padding: 10px 20px;
overflow: auto;
}
#container {
margin-left: auto;
margin-right: auto;
width: 80%;
background-color: #E8D882;
text-color: #000000;
border: 2px double #000000;
min-width: 700px;
}
And here is my xhtml code. HTML Code: <body> <div id="container"> <h1 id="logo"><img src="javalogo.gif" alt="Java Logo" height="117" width="619" /></h1> <div id="nav"><a href="index.html">Home</a> <a href="menu.html">Menu</a> <a href="music.html">Music</a> <a href="jobs.html">Jobs</a></div><br/> <div id="content"> <img src="windingroad.jpg" height="156" width="333" class="floatright" alt="Winding Groad Photo" /> <p>Following the winding road to JavaJam...</p> <ul> <li>Specialty Coffee and Tea</li> <li>Bagels, Muffins, and Organic Snacks</li> <li>Music and Poetry Readings</li> <li>Open Mic Night</li> </ul> <p>12312 Main Street<br/>Mountain Home, CA 93923<br/>1-888-555-5555</p></div> <div id="footer">Copyright © 2011 JavaJam Coffee House<br/><a href="mailto:whatever">SomeSite</a></div> </div> </body> Thanks a lot in advance. |
|||||||