HTML - Why Would Padding Move A Background Image?

How do I fix this:



Please help!

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!

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,

I'm a complete newb and html-challenged, so please forgive my stupid questions.

This is what I want for the personal website I'm making: a fixed image as the background that covers the entire screen regardless of what screen resolution a user's computer has - this much I've managed with CSS...I think (like this right? http://www.geocities.com/serenamonster/index.htm ) clickable regions on this background image to use for navigation to various parts of the site. Or in other words, the background image as an image map. - this I'm having trouble with, because you have to designate the picture as a set # of pixels in dimension to make an image map right? and if I do that to my background image, then it may display too big or too small depending on the person's screen resolution right?
So does anyone know how I can have clickable regions on my fixed background image without the image being too big for low resolutions or too small for high resolutions? (he http://www.geocities.com/serenamonster/map.html the background image is fixed at 800x400. I want to make each star on the image a hyperlink to a different part of the site). I read somewhere that standard is 800x600 to fill a person's browser right? But on my computer the image only covers about 2/3 of the browser screen which is too small. How can I make it so that it fills 100% of any viewer's screen regardless of resolution? How does it look on your computer? I know these are probably just really stupid questions because I'm missing something really fundamental...but any help would be greatly appreciated! Thanks!

~Serena

P.S. is it possible to do mouseovers for certain coordinates on an image map?

Hi Guys,

Firstly i apologise if this in the wrong section of the forum, please let me know.

My problem:

I have designed a webpage for my DJ services in Photoshop and plan to slice it up.
The first problem is my background. I designed it myself so its not simple. Basically i dont have a clue on how i should export the background from CS5 or how to implement it into my website on dreamweaver cs5.

Also i want to export my images once sliced from Photoshop with a transparent background, how would i do this?


Thanks for any help

Raver910

Hello,
1) I need to know how to make my background image the size of every monitor that will view it in any browser? Any idea? OR at least the size of most monitors

2) Also, how do I make is stick so it doesn't scroll, everything scrolls above it or on it.

If the answer is CSS could you please write out a bit of code for me and tell me where to put it. Pretty please, with sugar on top. I know it sounds lazy, but I use to now CSS can't remember anything now and I'm suffering from short term memory loss which is new for me. I have to relearn everything and remember it - hard to do when you can't remember what you did 5 minutes ago.

~eDee

Hey,

I'm wanting to use a larger background image with a height of around 810pixels.

Currently when i implement it, only around half the image appears and there is no scroll bar to use to view the whole image. And currently when i put a css box into it, when i scroll down it will still only show the top section of the image.

Can anyone assist in what code to put into the CSS to allow the scroll bar to appear so i can view the whole background image?

Thanks

(sorry, meant to put this in the CSS section, only just realised)

Hello All,
I hope this is a good place to ask my question. I was working on a a webpage and tinkering with two different screen capturing software to capture my website then all of a sudden I realized I can no longer see the background of my webpage. I can go online and see background images of someone else webpage but no the webpages stored on my computer. If anyone has any idea about the cause of the problem please help.

i'm trying to set an image from my harddrive as the background but it doesn't seem to be working. I've been trying <body background="image location.jpg"> but it doesn't work. Any thoughts or solutions?

thanks

Can somebody give me a full code <div style=""> for putting background images in divs... thanks in advance for you're help!

How would I do this?

Hey everyone.

I'm not too experienced in HTML and I'm having a problem with displaying a background image on this site I'm building. I know this probably isn't the best way to be doing what I'm trying to do, but I'm using a Frameset with 3 columns. The left and right I just want to display the background image and the main to be another frameset containing the main website content. It looks perfectly fine in Firefox, but in Internet Explorer the background images in leftMargin and rightMargin don't show; it's just blank.

Here is my index.html file:
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" />
<title>| Totaro's Restaurant |</title>
</head>

<frameset cols="15%, 70%, 15%" border=0>
<frame name="left" src="leftMargin.html" />
<frame name="main" src="main.html" />
<frame name="right" src="rightMargin.html" />
</frameset>
<noframes>
I'm sorry, it seems your browser doesn't support frames! x(
</noframes>
</html>

and here is the code of one of the margins:
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" />
<title></title>
<style>
body {
	background-image:url(images/bg.jpg);
 	background-repeat: repeat;
}
</style>
</head>

<body>
</body>
</html>

Here it is in Firefox: http://i34.photobucket.com/albums/d1...itefirefox.jpg

And in IE: http://i34.photobucket.com/albums/d1.../websiteie.jpg

Any help would be appreciated.

This is the current script I am using for background change upon a timer, does anyone know how and where I can add a no bg repeat and position the image on the bottom left?

Any help would be great! Thanks

<script type="text/javascript">

var bgImages = new Array();
bgImages.push("/image/girl.gif");
bgImages.push("/image/girl2.gif");
bgImages.push("/image/girl3.gif");

//bgImages.push("URL HERE");

function LoadRandomBackground()
{
var randomImageIndex = Math.floor(Math.random()*bgImages.length)
document.body.background = bgImages[randomImageIndex];

}

function StartBackgroundRefreshTimer()
{
var timer = setInterval('LoadRandomBackground()',10000); // 10 seconds
}


</script>

</head>

<body onload="LoadRandomBackground(); StartBackgroundRefreshTimer()">