CSS - Can't Get The Padding Right On This Menu

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!

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

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> 

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

Heyhey

Probably a very simple solution to this, but I just can't find it.

Nesting DIVs and adding padding to the parent, so I can position the DIV within.

I'm subtracting the amount of padding I am using from the width and height so that everything else around it will fit ok.


Works fine in all browsers, apart from IE 5.5, which ignores the padding (thus making the div too small because of the subtracting of width and height from the parent DIV).


Sample code:

#holdera
{
background:url(images/header_banner_a.png) no-repeat;
width:80px;
height:57px;
padding-top:25px;
padding-left:80px;
float:left;
}

#buttona
{
width:62px;
height:27px;
}


I could use margins on the inner DIV instead, but that brings up a problem with Netscape. The DIV positions shift because of no padding on the parent.


Real pain, anybody have any suggestions?

Cheers

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.

Hi All,

I am trying to fix a problem with IE 6.
In Firefox everything lines up correctly. in IE6 the images in the gallery on the left side of the page and the full size image have 5px of padding underneath. I cannot get this to disappear no matter what I've tried.

Any ideas?

Top shots

l:andy
p:andy

Here is some code of the thumbnails..
This will probably look like a mess since I am programming on a huge monitor.. But anyway.

Code:

	<div id="pagebody">
	<?php include 'mainmenu.html' ?>
      
    <div id="contentpane">  
    	<div id="content_port">	        	
	        
        	<div id="port_menu">
				<span id="gallerymenu1">
                	<span id="submenu1" class= "submenu" > <a class="portmenu" href="#" id = "portmenulink1" onClick="changeCategory(1);return false;"> --Wedding--</a> </span>
                    <span id="submenu2" class ="submenu"> <a class="portmenu" href="#" id = "portmenulink2" onClick="changeCategory(2);return false;" > --Promotional--</a>  </span> 
                </span>
            </div>

            	<span id="thumb">
			        <div id="thumb1div"  class = "thumb">
	                    <img src="images/blank.gif" title = "1 <?php echo "$title"; ?> 1" alt = "<?php echo "1 $alt"; ?> 2" height = "<?php echo $thumb_height; ?>"  onMouseOver="changeMain(1);"
                        	width = "<?php echo $thumb_width; ?>" name = "thumb1" id = "thumb1">
						<input type="hidden" id="t1" value="">
					</div>
                    <div id="thumb2div" class = "thumb">
	                    <img src="images/blank.gif" title = "2 <?php echo "$title"; ?> 2" alt = "2 <?php echo "$alt"; ?> 4" height = "<?php echo $thumb_height; ?>" onMouseOver="changeMain(2);"
                        	width = "<?php echo $thumb_width; ?>" name = "thumb2" id = "thumb2">
						<input type="hidden" id="t2" value="">
					</div>

Im running IE6 and its on an Intranet so for the moment Im only keen on getting it to work in IE5/6.

I have got the following HTML and CSS.

When I remove the CSS 'display: block; padding-bottom: 0px;' the links list views fine, but when I include it, the list spaces right out and I can't control the level of padding. Its really weird.. Im pretty sure this is where the error is but Im not exactly sure what it is.. I have not had problems in the past implementing a display type of BLOCK before, so not sure what is doing it now... Any ideas would be great...

Can post the whole template and assets if that helps...

Code:

<ul><li class="mainNav"><a href="about.htm" onMouseOver="MM_showMenu(window.mm_menu_1111120312_5,180,160,null,'navigation1');" onMouseOut="MM_startTimeout();">About Us</a></li>
<li class="mainNav"><a href="1.htm" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1015140727_0,170,170,null,'navigation1');">Our Programs</a></li>
<li class="mainNav"> <a href="1.htm" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1020105028_0,170,185,null,'navigation1');">Managing our People</a></li>
<li class="mainNav"> <a href="1.htm" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1020115125_0,170,195,null,'navigation1');">Managing our Money</a></li>
<li class="mainNav"> <a href="1.htm" onMouseOut="MM_startTimeout();"
onMouseOver="MM_showMenu(window.mm_menu_1020121338_4,170,220,null,'navigation1');">Supporting our Business</a></li>
<li class="mainNav"> <a href="1.htm" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1020121623_3,170,235,null,'navigation1');">Ministerial and Parliamentary</a></li>
<li class="mainNav"> <a href="1.htm" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1020121709_2,170,255,null,'navigation1');">IT Systems & Support</a></li>
<li class="mainNav"> <a href="1.htm" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1020121752_1,170,275,null,'navigation1');">Staff New & Events</a></li>
<li class="mainNav"> <a href="1.htm" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1020121857_0,170,290,null,'navigation1');">Staff & Territory Offices</a></li>
</ul>

##############
CSS
li.mainNav {
	list-style: url('../images/common/navarrow.gif');
	margin-bottom: 5px;
	font-size : .80em;
	
}
li.mainNav a:link {
	display: block;
	padding-bottom: 0px;
	color: #283164;
	text-decoration: none;
}
li.mainNav a:visited{
	display: block;
	padding-bottom: 0px;	
	text-decoration: none;	
}
li.mainNav a:hover {
	display: block;
	padding-bottom: 0px;
	text-decoration: underline;
}
li.mainNav a:active {
	display: block;
	padding-bottom: 0px;
	text-decoration: underline;
}

Hi!

Is it a good idea to always use padding and never margin (span, divs, etc.)? or would a combination between margin and padding be better?

P.S. In some places I must use padding... in the others I use margin but could use padding instead... wouldn't it be more consistent to always use padding?

Thank you

(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!

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>

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>