CSS - Padding In Nn

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.

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!

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> 

Hi All,

Im giving my site a slight update, but have encountered a strange IE problem. Saying that i have nothing but problems with IE some days with both 6 and 7.

The menu system seems to work fine in Safari and firefox, however in IE the last tab seems to go to the next line. I think it may be a problem with the padding/margin however thats only a guess.

Any help would be appreciated. Thanks

Here is the link:
http://www.michaelpalmer.info/new/index.php

Here is the full CSS code:
http://www.michaelpalmer.info/new/css/style.css



Here is the CSS code for the menu system:
css Code:
Original - css Code /************ pageMenu ************/ #pageMenu { background: repeat url(../images/pageLayout/pageMenu.gif); width:780px; margin: 0px auto; border-left: 1px solid #000000; border-right: 1px solid #000000; } .menuButton { /*background: #fff url(RightCorner.gif) bottom repeat;*/ width:130px; font-weight:bold; float: left; margin: 0px auto; background: url(../images/pageLayout/blackDot.gif) bottom repeat-x; color: #ffffff; padding-bottom: 2px; padding-top: 4px; } .menuCurrent { /*background: #fff url(RightCorner.gif) bottom repeat;*/ width:130px; font-weight:bold; float: left; margin: 0px auto; background: url(../images/pageLayout/menuCurrent.gif); color: #ffffff; padding-bottom: 2px; padding-top: 4px; } .menuCurrentLeft { /*background: #fff url(RightCorner.gif) bottom repeat;*/ width:130px; font-weight:bold; float: left; margin: 0px auto; background: url(../images/pageLayout/menuCurrentLeft.gif); color: #ffffff; padding-bottom: 2px; padding-top: 4px; } .menuCurrentRight { /*background: #fff url(RightCorner.gif) bottom repeat;*/ width:130px; font-weight:bold; float: left; margin: 0px auto; background: url(../images/pageLayout/menuCurrentRight.gif); color: #ffffff; padding-bottom: 2px; padding-top: 4px; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} /* End hide from IE-mac */ .menuCurrentLeft a { color: #000000; text-decoration: none; } menuCurrentLeft a:hover { color: #000000; text-decoration: none; } .menuCurrentRight a { color: #000000; text-decoration: none; } menuCurrentRight a:hover { color: #000000; text-decoration: none; } .menuCurrent a { color: #000000; text-decoration: none; } menuCurrent a:hover { color: #000000; text-decoration: none; } .menuButton a { color: #ffffff; text-decoration: none; } .menuButton a:hover { color: #dba549; text-decoration: none; } /************ pageMenu ************/

  

 /************ pageMenu ************/


 #pageMenu {


     background: repeat url(../images/pageLayout/pageMenu.gif); 


     width:780px;


     margin: 0px auto;


     border-left: 1px solid #000000;


     border-right: 1px solid #000000;


 }


  


 .menuButton {


  


     /*background: #fff url(RightCorner.gif) bottom repeat;*/


     width:130px;


     font-weight:bold;


     float: left;


     margin: 0px auto;


     background: url(../images/pageLayout/blackDot.gif) bottom  repeat-x;


     color: #ffffff;


     padding-bottom: 2px;


     padding-top: 4px;


 }


  


 .menuCurrent {


  


     /*background: #fff url(RightCorner.gif) bottom repeat;*/


     width:130px;


     font-weight:bold;


     float: left;


     margin: 0px auto;


     background: url(../images/pageLayout/menuCurrent.gif);


     color: #ffffff;


     padding-bottom: 2px;


     padding-top: 4px;


 }


  


 .menuCurrentLeft {


  


     /*background: #fff url(RightCorner.gif) bottom repeat;*/


     width:130px;


     font-weight:bold;


     float: left;


     margin: 0px auto;


     background: url(../images/pageLayout/menuCurrentLeft.gif);


     color: #ffffff;


     padding-bottom: 2px;


     padding-top: 4px;


 }


  


 .menuCurrentRight {


  


     /*background: #fff url(RightCorner.gif) bottom repeat;*/


     width:130px;


     font-weight:bold;


     float: left;


     margin: 0px auto;


     background: url(../images/pageLayout/menuCurrentRight.gif);


     color: #ffffff;


     padding-bottom: 2px;


     padding-top: 4px;


 }


  


  


  


 .clearfix:after {


     content: "."; 


     display: block; 


     height: 0; 


     clear: both; 


     visibility: hidden;


 }


  


 /* Hides from IE-mac \*/


 * html .clearfix {height: 1%;}


 /* End hide from IE-mac */


  


  


 .menuCurrentLeft a {


     color: #000000;


     text-decoration: none;


 }


  


 menuCurrentLeft  a:hover {


     color: #000000;


     text-decoration: none;


 }


  


 .menuCurrentRight a {


     color: #000000;


     text-decoration: none;


 }


  


 menuCurrentRight  a:hover {


     color: #000000;


     text-decoration: none;


 }


  


  


  


 .menuCurrent a {


     color: #000000;


     text-decoration: none;


 }


  


 menuCurrent  a:hover {


     color: #000000;


     text-decoration: none;


 }


  


  


 .menuButton a {


     color: #ffffff;


     text-decoration: none;


 }


  


 .menuButton a:hover {


     color: #dba549;


     text-decoration: none;


 }


  


  


 /************ pageMenu ************/ 

Heres the code for the html

html Code:
Original - html Code <!-- pageMenu --> <div class="clearfix" id="pageMenu"> <div class="menuButton"> <a href="index.php?page=1">Home</a></div> <div class="menuButton"> <a href="index.php?page=2">About</a></div> <div class="menuButton"> <a href="index.php?page=3">Contact</a></div> <div class="menuButton"> <a href="index.php?page=4">Downloads</a></div> <div class="menuButton"> <a href="index.php?page=5">Photos</a></div> <div class="menuButton"><img alt="." src="images/pageLayout/invisible.gif"/></div> </div>

  
        <!-- pageMenu -->
        <div class="clearfix" id="pageMenu">
            <div class="menuButton"> <a href="index.php?page=1">Home</a></div>
            <div class="menuButton"> <a href="index.php?page=2">About</a></div>
            <div class="menuButton"> <a href="index.php?page=3">Contact</a></div>
            <div class="menuButton"> <a href="index.php?page=4">Downloads</a></div>
            <div class="menuButton"> <a href="index.php?page=5">Photos</a></div>
            <div class="menuButton"><img alt="." src="images/pageLayout/invisible.gif"/></div>
        </div>

The line "between" the columns is actually a background image in the second column.

I'd like to reduce the area between the top of the text and the top of the div (so the text is about even with the line).

I've tried setting the padding to 0, but that has no effect.

Any ideas?



Code:

#inner_wrap_2_col {
margin:0 auto;
width:690px;
}
#news_col_left {
float:left;
width:345px;
color: #330;
line-height: 1.5em;
	
padding: 0;	
}
#news_col_right {
float:right;
width:345px;
color: #330;
line-height: 1.5em;
background:url("./images/news_bg.gif");
background-repeat: repeat-y;
}

Hello friends

I try to put padding and borders in a image with the follow code :
img {
border: 1px solid #666666;
padding: 3px;
}

It works with the firefox and opera but not with IE ...

Why?

Thanks

I can't seem to set any padding on the fieldset element with ie7

Has anyone else had these problems and is there a way I can fix this. I even set the fieldset element to a block level element but that didn't work either.

example
http://section31.us/scripts/testing/xhtml/fieldset.html

Hello,

Can anyone explain me why the texts in the following example are not in the same (relative) position? It looks like that in the first container, the margin is actually more than I specified (10px)...

I don't get it... :S

Thanks,
diodorus

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" xml:lang="en" lang="en">

<head>
    <title>Title</title>

<style type="text/css">

#container{
    margin: 0px;
    padding: 0px;
    width: 1000px;
    background: #ccc;
}

.block {
    background: #0ff;
    float: left;
    height: 100%;
    margin: 10px;
    text-align: left;
    width: 230px;
}

.block2 {
    background: #0ff;
    float: left;
    height: 100%;
    padding: 10px;
    text-align: left;
    width: 230px;
}

</style>

</head>

<body>

<p>First:<p>

    <div id="container">
        <div class="block">aaa</div>
        <div class="block">bbb</div>
        <div class="block">ccc</div>
        <div class="block">ddd</div>
    </div>

<p>Second:<p>

    <div id="container">
        <div class="block2">aaa</div>
        <div class="block2">bbb</div>
        <div class="block2">ccc</div>
        <div class="block2">ddd</div>
    </div>

</body>
</html>

First off, I'm a new member. I'd like to thank everyone for such a great board. My name is Mike and I'll be a very active user in this community as I enter the world of web design.

I have a page with an embedded flash object. I created a CSS Border around the object, and would like to add padding to it so that text can wrap around it. I understand that when adding padding to an object, it actually pushes the border out. I want the padding to reflect outside the border and not inside. All of my CSS has to be inline (the company's site does not allow workers to access template files via FTP). Here's what isn't working:

<div style="padding-left:10px;padding-bottom:10px;">
<div style="border: 5px solid rgb(198, 175, 144); float: right;position:relative;right:12px;bottom:9px;">

*flash code*

</div>
</div>

As you can see, I tried adding padding-left and padding-bottom outside the border but the text is still going underneath the object. Is there a better solution to this (using inline css)?

Thanks to all.

Hello,

My site is www.jwwebdesign.info . It shows up fine in IE, but does not display correctly in Netscape (or Firefox says my friend). Can anyone point me to why the problem is occurring?

As well, how can I change the padding without affecting the scroll bar of my div (if I increase padding, scrollbar goes off page because of width setting)?

Thanks in advance,
Jeff

I've run into this problem a few times. The padding attribute has spottty support in IE. Same with margin. Has anyone found a workaround?

For example, I would like paragraphs and bullet points to have extra space above them. In the past, I've set a style using padding-top to specify this space. However, in IE it yields some bad results.

Similarly, I've got some text links which I would like to bump over to the right a few pixels. Padding or margin would sure come in handy.

Any other ways to achieve the same result?

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>

Hi.

I have a top menu bar which is positioned below an image. The size of the image is stopping the menu bar from being further up, but I cant make the image smaller. Is there a way to put negative padding on the image to make the menu bar sit further up (effectivly on the image).

To sum it up, here is an image:

http://img40.imageshack.us/i/helpo.jpg/

Here is a link to the website: http://hiq.identityprojects.co.uk

Here is the code for the image:

Code:

h1#logo a {
	display: block;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 250%;
	width: 283px;
	height: 92px;
         padding-bottom:-20px; 
	background: url(../images/logo.png) no-repeat;
	text-indent: -99999px;
}

The red is my stab in the dark to get it to work, which didnt work. Id really appreciate it if someone could enlighten me.

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'm having a real hard time trying to figure out how to fix this css issue. I'm trying to fix what's in the 3rd table content that is the compose new pm message form so that it doesn't have any space between the form and the outer content just like it is on the template that says Form with Alternative Style in the form heading. I can't fix the content class rule because that completely messes up the rest of the page and you can see that if you go back to one of the other two tabs.

Template: http://www.kansasoutlawwrestling.com/peach/forms.html

My Page JSfiddle: http://jsfiddle.net/MtzqR/