CSS - Frustrating Non-existant Padding

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.

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...

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> 

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

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.

Hello,

I am having problems sorting out my css. It all looks good but when i look at the css it has 21 browser errors in different browsers. Mainly it is padding errors for netscape 4.0. Is there a way round this please? Cheers

Hello, I just took a look at my site in IE7. I know the coding is far from pure, but it's still simple, and I didn't expect any problems. It looks fine in Firefox and Safari.

Is style="padding-right:15px" not allowed in an img tag?

Why does the mouseover effect in the menu not work?

Code:

#sidebar {
	margin: 0 0 0 0;
	width: 160px;
}
#sidebar .menu {
	list-style: none;
	margin: 0 0 0 0;
	padding: 0;
	width: 150px;
	border-bottom: 1px solid #e8e8e8;
}
#sidebar .menu li {
	border-top: 1px solid #e8e8e8;
	color: #999;
	font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Verdana, Arial, sans-serif;
	font-size: 12px;
	font-weight: normal;
	padding: 2 0 2 10;
	width: 150px;
}
#sidebar .menu li:hover {
	background-color: #f8f8f8;
}
#sidebar .menu li a {
	color: #2E86D0;
	display: block;
	padding: 0px;
	text-decoration: none;
	width: 140px;
}
#sidebar .menu li.active:hover {
	background-color: #e8e8e8;
}

THANKS for the help!

I have a page with a header, two column, and footer layout. For some reason, IE is adding 5px to the left column of the page. Here is the relevant css code.

Code:

#container {
		width:770px;
		margin:0px auto 0px auto;
		background:#ffffff;
		text-align:left;
	}
	
#header {
		position:relative;
		width:770px;
		height:109px;
		background-image:url(images/header.jpg);
		background-color:#ffffff;
		text-align:center;
		}

div#leftcontainer {
		float:left;
		width:190px;
		background-color:#ffffff;
		}
	
div.leftcontent {
		width:190px;
		background-color:#004994;
		padding-left:5px;
		padding-right:5px;
		}

div#centercontainer {
		margin-top:3px;
		float:right;
		width:570px;
		background-color:#ffffff;
		padding:0px;
		}

div.centercontent {
		width:560px;
		background-color:#ffffff;
		padding-left:5px;
		padding-right:5px;
		}

#footer {
		clear:both;
		padding:4px;
		width:770px;
		font-size:.8em;
		font-family:arial, sans-serif, courier;
		color:#ffff00;
		background-color:#004994;
		margin:0px 0px 20px 0px;
}

Now everything goes inside the leftcontent and centercontent classes. It displays perfectly in Firefox but IE is adding 5px on the right side of the leftcontent section which is pushing all the centercontent down.

Any ideas what is causing this? I thought I got away from the IE box model bug by using boxes inside boxes.

Thanks in advance.

I am having a problem..
The site am working on looks great in FF but in IE breaks when you click on a the link to view a larger picture and then mouse off the link. The padding on the bottom of the body (#main) disappears. i have a Javascript that switches the image out for another one. i am not sure if this is the problem.

can someone please take a look i have been racking my brain on this for days.

http://www.avallo.com/test/fatcatweb/phototest.shtml

(Problem occurs when thumbnail is clicked and then moused off in IE 5.5 and IE 6)

i have a border on the #main div so you can see what i am talking about.

* Update *
it isnt the javascript.

here is the css and html.

Code:

#main {
border:#333 dotted 1px;
	float:right;
	display:inline;
	position:relative;
	width: 610px;
	padding-bottom:30px;
	background:url(images/body-top.gif) no-repeat;
}
#mainbody {
	margin: 30px 20px 20px 15px;
}
a.thumb {
	float:left;
	margin: 0 5px 5px 0;
	padding: 2px;
	border: #fff 2px solid;
}
a.thumb:hover {border: #895FA5 2px solid;}

					<div id="mainbody">
						<h1>Photo Portfolio</h1>
						<p>Fat Cat Art Studio is proud to provide our clients with images of their business, area, or workers. This portfolio is a SMALL representation of recent photos.</p>
						<div class="photos">
							<h2>The Shore Photos</h2>
							<div class="floatR" id="change1"><img src="images/photos/photo-01.jpg" alt="Enlargment" width="350" height="245" border="0" /></div>
							<p>Taking a stroll on the shore leads to inspiration and some unique perspectives.</p>
							<a class="thumb" href="javascript:change('change1','photo-01',350,245)"><img src="images/photos/photo-01x.jpg" alt="Thumb" width="75" height="75" border="0" /></a>
							<a class="thumb" href="javascript:change('change1','photo-02',350,263)"><img src="images/photos/photo-02x.jpg" alt="Thumb" width="75" height="75" border="0" /></a>
							<a class="thumb" href="javascript:change('change1','photo-03',350,264)"><img src="images/photos/photo-03x.jpg" alt="Thumb" width="75" height="75" border="0" /></a>
						</div>
					</div>

thanks,
weston

I have a beautiful looking site when viewed in Firefox but I am having some problems with Internet Explorer (surprise, surprise!)

http://cbo4edu.org/newSite/index.html

I want the Headings, OUR MISSION and CBO NEWS to be lined up just below the navigation div. In Firefox, my CSS and padding renders perfectly, with the background on OUR MISSION blending in with the navigation div's bottom border. In IE, these headings are mostly hidden behind the navigation div.

How can I adjust my CSS for IE without disturbing the Firefox version?

I'm using the following code. I'd like the DIV that surounds the up / down images to more tightly wrap the images (there is too much space between the top and bottom border and the images). I'm having trouble understanding how to accomplish this.
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
	<title>Untitled</title>
	<style>
	.nav_box {	
		width: 95%;
		padding: 1px 1px 1px 2px;
		margin-top: 10px;
		margin-bottom: 10px;
		border: 1px solid #003366;
		background-color: #eef7ff;
		text-align : left;	
	}	
	</style>
</head>

<body>

<div class="nav_box">
	<img ... />
	<img ... />
	&nbsp;Row Zero
</div>	

</body>
</html>

I've been having a hard time with browser compatibility and I need a bit of help. This is what I'm trying to acheive. It's a link bar on top and then a page that contains left and right headers, dividers and content plus a footer (height is not an issue right now). I would like the #page to have a 2px border and every element inside to have a white 2px padding.
It seems that in IE, if I set #page with a 2px padding, I get exactly what I want but Firefox does not interpret it the same way. Is there a hack/workaround for this. I've attacned a picture of what I'm trying to get at.

Thanks

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=ISO-8859-1" />
<style type="text/css"><!--

html, body {
	margin:0;
	padding:0;
	height:100%;
}

div {
	margin:0;
	padding:0;
}

div#holder {
	margin:auto;
	margin:auto;
	width:800px;
	height:100%;
	background:black;
}

div#links {
	width:auto;
	height:30px;
	background:pink;
}

div#page {
	width:auto;
	height:100%;
	background:white;
	border:2px black solid;
	padding:2px;
}


div#left {
	float:left;
	background:red;
	width:180px;
}

div#right {
	float:right;
	background:blue;
	width:610px;
}

div#footer {
	clear:both;
	width:auto;
	height:30px;
	background:green;
}


--/></style>

</head>
<body>

<div id="holder">
	<div id="links">1</div>
	<div id="page">
		<div id="header">
			<div id="left">1</div>
			<div id="right">1</div>
		</div>
		<div id="divider">
			<div id="left">1</div>
			<div id="right">1</div>
		</div>
		<div id="content">
			<div id="left">1</div>
			<div id="right">1</div>
		</div>
		<div id="footer">1</div>
	</div>
</div>

</body>
</html>

just read a post on ALA regarding how to create a simple thumbnail gallery using CSS.

while the styling of the CSS provided on ALA seems to render the same on both FF and IE, the original code renders slightly different.

everything seems to work fine except for the padding around the caption, underneath the image.

there is more space around then caption when viewed in IE.

please look at this link where the html file and css are hosted - (view source)

can you make out anything that could be adjusted to fix this tiny bug?


really appreciate if you could help out a little here.

been at this for the last couple of days,
and now really dead with any ideas to fix this tiny issue :-/



thanx for your time,
z