|
HTML - Bullets Not Obeying Image Padding
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! 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 /> How do I fix this: Please help! 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. 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. 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/ When combining lists w/ bullets (I use adobe golive) Is there a way (in the source code perhaps) to eliminate the the bullet from the first item being bulleted? why you might ask? because I want my bulleted list to be directly under the first item, by default, my software creates a big space between the last item and the bulleted list. Hope this makes sense. thanks for the help, I'm uder too much pressure here. I would like to line up the bullets (<li type="disc">) with the other text. They are too far to the left. What code will do that? Thanks. Adam This is the example: http://detroit.craigslist.org/okl/ctd/1468871649.html This is the code: <center><table border="2" cellpadding="20px" cellspacing="2" width="61%"> <tr> <td align="left"> <a href="http://jimdouglasautosales.com" target="_blank" rel="nofollow"><img src="http://jimdouglasautosales.com/Craigslist_Vehicle_Listings/CraigslistVehicleListingLogo.jpg" width="350" height="100.975" border="0"></a> <a href="http://jimdouglasautosales.com" target="_blank" rel="nofollow"><img src="http://www.jimdouglasautosales.com/sitebuilder/images/Craigslist_Picture-600x302.jpg" width="225" height="112.5" border="0"></a> <hr> <br><b><font size="5"> 2006 Cadillac STS4 AWD <font size="3"> <br><br> Options: <li type="disc">Leather <li type="disc">Power seats <li type="disc">Heated seats <li type="disc">Power windows <li type="disc">Power locks <li type="disc">Power mirrors <li type="disc">Tilt <li type="disc">Cruise <li type="disc">Navigation <li type="disc">CD <li type="disc">Power sunroof <li type="disc">Chrome wheels <br><br> Mileage: 46,172 <br><br> Stock number: 90771 <br><br> VIN: 1G6DW677360204132 <br> (Ask for a free vehicle history report) <br><br> View our <a href="http://www.jimdouglasautosales.com/inventory" target="new" rel="nofollow"> inventory</a>. Visit our <a href="http://www.jimdouglasautosales.com" target="new" rel="nofollow"> website</a> for hours and directions. Financing and warranties available. We buy vehicles. <br><br><hr> <div><a name="0" rel="nofollow"></a><img src="http://images.cars.com/supersized/MDC/53/458653/7185592530.jpg"></div> <hr> <div><a name="1" rel="nofollow"></a><img src="http://images.cars.com/supersized/MDC/53/458653/7185592532.jpg"></div> <hr> <div><a name="2" rel="nofollow"></a><img src="http://images.cars.com/supersized/MDC/53/458653/7185592534.jpg"></div> <hr> <div><a name="3" rel="nofollow"></a><img src="http://images.cars.com/supersized/MDC/53/458653/7185592535.jpg"></div> <hr> <div><a name="4" rel="nofollow"></a><img src="http://images.cars.com/supersized/MDC/53/458653/7185592537.jpg"></div> <hr> <div><a name="5" rel="nofollow"></a><img src="http://images.cars.com/supersized/MDC/53/458653/7185592538.jpg"></div> <hr> <div><a name="6" rel="nofollow"></a><img src="http://images.cars.com/supersized/MDC/53/458653/7185592541.jpg"></div> <hr> <div><a name="7" rel="nofollow"></a><img src="http://images.cars.com/supersized/MDC/53/458653/7185592543.jpg"></div> <hr> <div><a name="8" rel="nofollow"></a><img src="http://images.cars.com/supersized/MDC/53/458653/7185592544.jpg"></div> <hr> <div><a name="9" rel="nofollow"></a><img src="http://images.cars.com/supersized/MDC/53/458653/7185592546.jpg"></div> <hr> <div><a name="10" rel="nofollow"></a><img src="http://images.cars.com/supersized/MDC/53/458653/7185592548.jpg"></div> <hr> <div><a name="11" rel="nofollow"></a><img src="http://images.cars.com/supersized/MDC/53/458653/7185593100.jpg"></div> <hr> <div><a name="12" rel="nofollow"></a><img src="http://images.cars.com/supersized/MDC/53/458653/7185593104.jpg"></div> <hr> <div><a name="13" rel="nofollow"></a><img src="http://images.cars.com/supersized/MDC/53/458653/7185593106.jpg"></div> <hr> <div><a name="14" rel="nofollow"></a><img src="http://images.cars.com/supersized/MDC/53/458653/7185593108.jpg"></div> <hr> <div><a name="15" rel="nofollow"></a><img src="http://images.cars.com/supersized/MDC/53/458653/7185593111.jpg"></div> <hr> <div><a name="16" rel="nofollow"></a><img src="http://images.cars.com/supersized/MDC/53/458653/7185593113.jpg"></div> <hr> <div><a name="17" rel="nofollow"></a><img src="http://images.cars.com/supersized/MDC/53/458653/7185593116.jpg"></div> </td> </tr> </table> If you look at http://www.bkriegtech.net/2008/ in firefox you will see my left nav bar, the bullets go outside of the frame. How do I fix that? i am trying to create a bullet point list but have spaces inbetween each bullet point item. i tried <br> but no luck. Code: <UL> <LI> <DIV align=left><SPAN style="COLOR: #333333">Stated Income with good credit</SPAN></DIV> <LI> <DIV align=left><SPAN style="COLOR: #333333">5/1, 7/1, 10/1 and 30 Yr Fixed<SPAN style="COLOR: #333333"><IMG border=0 hspace=0 align=right src="http://www.sharperemail.com/se_members/4346/ftp/raintree_hoa_images/happy-elephant-02-gif.gif" width=215 height=215></SPAN></SPAN> </DIV> <LI> <DIV align=left><SPAN style="COLOR: #333333">Interest Only</SPAN> </DIV><SPAN style="COLOR: #333333"> <LI> <DIV align=left>Cash out up to 250,000</SPAN> </DIV> <LI> Hey there. I'm totally new to coding. I'm trying to make a list (centered), without bullets and without a border. You can see here i'm not succeeding yet. http://bondicreative.com/clients.html I'd like the list to be 8a8a8a color, and centered under the CLIENTS header. Here is how i want it to look: http://img.photobucket.com/albums/07...at103543AM.png Any help? Thanks, Mark Is it possible to have a <li> without it showing the bullet symbol? I want a list item that does everything a normal <li> does but doesn't look like a list item. Alternatively, is it possible to end a <ul> without unwanted space appearing after it? I want the next item to appear exactly on the next line but no matter what margins I specify in my <ul>'s CSS it leaves a blank line. A solution to either of these issues will solve my problem! Thanks, -sbs removed thank you http://www.auroraevansville.org/NewL...ved/index.html is the page that im working on. Notice how the second image is left aligned "yes i know it looks bad that way" the bullets rest on the right side of the image. I was wondering if their was a way to make some space and separate the two. Iv tried to apply v-space and h-space on the image with no luck. Any ideas would be welcomed Thanks You I just finished the rough draft for my new site. Everything looks fine in DW, but in the browser, it's all messed up! Can someone take a look and help me out? Take a look at the bullets about halfway down. http://nextlevelprofits.com/emailsecretsexposed/ Thank you SO much! Ok, so i uploaded my page to the web and for some reason the bullets are not showing up inside the table cells of the Toppings table to my page. for some reason it shows up fine in Chrome, but in IE and Firefox, they show up to the left of the table cells making it look weird? does someone know how to make it so it shows up the way it does in chrome for all browsers? whats wrong with my code? heres the page... http://valspizzaplace.com/newwebsite...inos/pizza.php ahh this is frustrating, i can't figure out and its probably something simple. 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>
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? |
|||||||