CSS - Css Form Padding Not Working In Ie 8?

Hi there,

I am trying to style a button with inline css, however, it is not working. I think it is the background images and the single quotes.

This is my code:

PHP Code:
 $options .= '<input style=\"margin-top: 5px;background-image: url(\'button_bg.jpg\'); background-repeat:repeat scroll 0%;background-color: #71d63e;border:0px #234B69 solid;color:#ffffff;font-family: arial, Verdana;font-size:11px; font-weight: bold;height:26px;padding:5px;width: 40px;vertical-align: middle\"  type="submit" name="upgrade" value="Upgrade"></form>'; 





Any ideas what I have wrong?

Around this dropdown image?
http://199.134.225.62/NW_PORTAL/sliding_menu/sliding_menu.cfm

I have padding and margins all set to 0...

Hey everyone, I am working on a new template:

http://4xp.net/temp.html

The colors are there just so I can see the divs, so don't worry.

If you look at the page in IE, it looks fine, with some padding between the green and orange div, and to the right of the orange div. When you look at it in Firefox, there is a bunch of white padding to the top and bottom of both the orange and green divs, and I can't seem to get it to go away. The weird thing is, if I add a 1px border to the orange div, the green div aligns to the top, and the orange background expands to fill in the white area above and below the orange div.

Does anyone know how to remove this padding?

Thanks!

I don't know exactly what to call what's going on, but i'm asuming that there is a padding issue with my menu.

I have a ul that contains my menu list. The CSS and xhtml are as follows: Code:

/* Menu */
li {
	border: 1px solid #000000;
	border-bottom: 0px none;
	display: inline;
	line-height: 14px;
	margin: 0px;
	margin-left: 1px;
	margin-right: 1px;
	padding: 0px;
	padding-left: 3px;
	padding-right: 3px;
}
ul#menu {
	background-image: url(img/menu.gif);
	background-repeat: no-repeat;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	list-style-position: inside;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	text-align: center;
	background-position: left bottom;
	vertical-align: text-bottom;
}
/* End Menu */


<ul id="menu"><li>Menu 1</li><li>Items 2</li>
<li>Will 3</li><li>Go 4</li><li>Here 5</li></ul>

(the menu is on one line, thanks to IE's whitespace issue, i broke it here for easier readablity.)

the problem is: i have it nestled on top of a div, and for some reason the ul has a 1px bit of padding on the bottom. I have searched the forum and may have missed some one posting a resolution for this, but i tried every one ov the voice-family/carrage return fixes i've seen, but none work.

to see what i'm talking about if my words are il formed (as they often are) click here.
to view the CSS click here.

Hi there,

I have 2 main divs.. one which holds a small ammount of content on the right hand side.. like a 'related links' box which is located at the top right of the page. The other div holds the content. It wraps around the top right div, but there is no padding to the right of the content area, so the text goes right the way up to the right hand div. How can I add some padding to the right of this area? I have added padding, but it adds it to the text where it wraps below the top right div.

This is the code I am using:

PHP Code:
#related_links{
width: 165px;
height: 237px;
background-image:  url('images/related_bg.jpg');
background-repeat: no-repeat;
float:right;
padding-right: 10px;

}

#related_inside{
padding: 10px;
}


#content{
padding-right: 10px;
}

#content_inside{
padding: 10px;

} 





PHP Code:
<div id="related_links"><div id="related_inside">right hand text</div></div>
    
    
    <div id="content">
    <div id="content_inside" >is simply dummy text of the printing and typesetting   industry. Lorem Ipsum has been the industry's standard dummy text ever since the   1500s, when an unknown printer took a galley of type and scrambled it to make a   type specimen book. It has survived not only five centuries, but also the leap   into electronic typesetting, remaining essentially unchanged. It was popularised   in the 1960s with the release of Letraset sheets containing Lorem Ipsum   passages, and more recently with desktop publishing software like Aldus   PageMaker including versions of Lorem Ipsum. <strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting   industry. Lorem Ipsum has been the industry's standard dummy text ever since the   1500s, when an unknown printer took a galley of type and scrambled it to make a   type specimen book. It has survived not only five centuries, but also the leap   into electronic typesetting, remaining essentially unchanged. It was popularised   in the 1960s with the release of Letraset sheets containing Lorem Ipsum   passages, and more recently with desktop publishing software like Aldus   PageMaker including versions of Lorem Ipsum. <strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting   industry. Lorem Ipsum has been the industry's standard dummy text ever since the   1500s, when an unknown printer took a galley of type and scrambled it to make a   type specimen book. It has survived not only five centuries, but also the leap   into electronic typesetting, remaining essentially unchanged. It was popularised   in the 1960s with the release of Letraset sheets containing Lorem Ipsum   passages, and more recently with desktop publishing software like Aldus   PageMaker including versions of Lorem Ipsum. </div></div> 

I am noticing that padding changes the width/height of an object. For example, if I have a div element with a width of 100% and padding at 10px, it will actually cause the horizontal scrollbar on the browser to appear because it takes the 100% width into account, plus 20px for the padding on the left and right side. I thought padding was suppose to push elements inward.

??? Any help will be greatly appriciated.

Right now, there is nothing about padding located in css file. And I was told I should add a bit because my page is a headache to read. I was told:

"Basically you want to add more white space between the vertical line and the text"

How would I go about doing this? The site Im talking about is:
www.ohiocichlids.com

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset-utf-8" />
<title>SiteDevs &bull; Home</title>
<style type="text/css">
*{
	margin:0;
	padding:0;
	border:0;
}
body{
	background:url(background.png) repeat-x;
	margin:40px 0px 0px 0px;
	font-size:12px;
	color:#000;
}
div#content{
	width:700px;
	background:#FFF;
	margin:0px auto;
	height:100%;
}
div.bottomLeft {
	background: url(bottomLeft.png) 0 100% no-repeat;
}
div.bottomRight {
	background: url(bottomRight.png) 100% 100% no-repeat;
}
div.topLeft {
	background: url(topLeft.png) 0 0 no-repeat;
}
div.topRight {
	background: url(topRight.png) 100% 0 no-repeat;
} 
div.left {
	background: url(middle.png) left center repeat-y;
	padding-top:15px;
	padding-bottom:15px;
}
div.right {
	background: url(middle.png) right center repeat-y;
	padding-top:15px;
	padding-bottom:15px;
	margin-left:-15px;
	margin-right:-15px;
}
div.top {
	background: url(topMiddle.png) top center repeat-x;
	margin-left:15px;
	margin-right:15px;
}
div.bottom {
	background: url(bottomMiddle.png) bottom center repeat-x;
}

</style>
</head>
<body>
<div id="content">
<div class="bottomLeft">
<div class="bottomRight">
<div class="topLeft">
<div class="topRight">
<div class="top">
<div class="bottom">
<div class="right">
<div class="left">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Validates.

Problem is this


Any idea?

I'm having trouble adding padding to a text area without affecting the scrollbar. I would like the padding:10px to only be around text in the textarea without making the scrollbar have padding around it. Is this possible?

Thanks

Hi guys,

Im building a DNN site for a client, and have used a menu system theyve specified.

Ive got it looking how I want, however in IE I have a couple pixels of padding below the UL container.. in FF its perfect (the butt up against each other)...

Any hints? Im stumped.

Cant post URL's, so if you're bored and feel like making someones day, feel free to PM me

Cheers!!!!

(see attached)

CSS Snippet
Code:

	#contentBox{
		float:right;
		padding:0;
		margin:17px 15px 0 0;
		width:423px;
		/* overflow:hidden; */
		}
	#content{
		background:url(images/layout/content_bg.gif) top left;
		margin:0;
		padding:15px 15px 0 15px;
		width:393px;
		overflow:hidden;
		}
	* html #content {
		width: 423px;  /* for IE5 and IE6 in quirks mode */
		w\idth: 393px; /* for IE6 in standards mode */
		}
	#contentTop{
		background:url(images/layout/content_top.jpg) top left;
		padding:0;
		margin:0;
		width:423px;
		height:41px;
		overflow:hidden;
		}
	#contentTop h3{
		padding:15px 0 0 0;
		margin:0;
		font-family:Georgia, "Times New Roman", Times, serif;
		text-align:center;
		font-size:14px;
		color:#036;
		}
	#contentBottom{
		background:url(images/layout/content_bottom.gif) top left;
		padding:0;
		margin:0;
		text-indent:-15000px;
		width:423px;
		height:28px;
		overflow:hidden;
		}

HTML Snippet
Code:

	<div id="contentBox">
		<div id="contentTop"><h3>What Is The Shalom Foundation?</h3></div>
		<div id="content">
		<p>The Shalom Foundation is a non-profit 501(c) (3)
		  organization dedicated to providing financial support for under-privileged
		  children and their families in the United States, Central and South America.</p>
		<p> We are dedicated to providing basic educational
		  opportunities, home construction and repair for families at risk, essential
		  food and clothing needs and medical support and assistance for critical as
		  well as basic healthcare. </p>
		<p>The Shalom Foundation seeks funding through personal
		  donations, corporate contributions and special event fundraisers. Contributions
		  to The Shalom Foundation are 100% tax deductible.</p>
		<p>If anyone has material possessions and sees his brother
		  in need but has no pity on him, how can the love of God be in him? Dear children,
		  let us not love with words or tongue but with actions and in truth. 1 John
		  3:17-18</p>
		</div>
		<div id="contentBottom"></div>
	</div>

Now, why on earth are they different!?!?

Thanks in advance!

For some reason in FF, even though I have the most nested element set to 0px for the right padding, padding is showing up in FF.

** removed **

That white line should be flush against the text of the menu items, like you'll see it is in IE.

Looking at Firebug, there's no other styles being applied to this item that would cause it to do what it does. Interestingly enough, if I change the padding using Firebug to anything else, then change it back to 0, it moves the padding back to 0.

Here's the HTML:
Code:

<div id="navBar">
	<ul>
		<li><a href="http://www.radiantsuntherapies.com" id="navBarSelected">Home</a></li>
		<li><a href="about.php">About Us</a></li>
		<li><a href="services.php">Services</a></li>
		<li><a href="practioners.php">Practioners</a></li>
		<li><a href="appointments.php">Appointments</a></li>
		<li><a href="shop.php">Shop</a></li>
		<li><a href="bms.php">Body Mind Spirit</a></li>
		<li><a href="blog/" id="navBarLast">Blog</a></li>
	</ul>
</div>

And here's the CSS:

Code:

#navBar{
	background:url(../images/navBarBackground.png) repeat-x top left;
	float:left;
	height:43px;
	overflow:hidden;
	width:910px
}

#navBar ul{
	font-family:garamond;
	font-size:14px;
	text-transform:uppercase
}

#navBar ul li {
	display:block;
	float:left;
}

#navBar ul li a:first-letter {
	font-size:16px
}

#navBar ul li a{
	color:#e4ad43;
	text-decoration:none;
	display:block;
	border-right:1px solid white;
	padding:11px 0 18px 14px; /* overflow vertical to work w/ all browser no matter how text is rendered.  hidden by parent layers */ 
}

#navBarLast{
	background-image:none !important
}

#navBarLeft{
	background:url(../images/navBarLeft.png) no-repeat top left;
	float:left;
	height:43px;
	width:5px;
}

#navBarRight{
	background:url(../images/navBarRight.png) no-repeat top right;
	float:left;
	height:43px;
	width:5px
}

#navBarSelected{
	color:#ffffff !important
}

Thanks!

I'm trying to renew my website using css.
i have a list with images inside. something like

<ul>
<li><img ... /></li>
<li><img .../></li>
</ul>

my style definition looks like
img {
margin:0px;
padding:0px;
}

ul {
margin:0px;
padding:0px;
}

li {
margin:0px;
padding:0px;
}

i don't want any pixels between two items (images), but i cannot find the way to do that. i always get some pixels between them...
anyone can help me? thanks!