CSS - Phantom Right Padding In Ff

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

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.

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

Question? Okay I know IE for some reason defaults with a left-padding or something for an unordered list. so when I set padding:0 for my unordered list everything is great in firefox. But when I look at it in IE the list-style elements are pulled off of the list object. How can I place no padding on the list and still use the list-symbols in IE?

The thought of placing my own list object in the background, but it would be silly if I could just use the disc built into windows ie.

thanks!

Is it possible to set the colour of the padding in a table cell?

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?

how do you remove the "padding" of the ul on the left hand side?

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

Hi there,

I am trying to add some padding to my inputs, but the padding is being ignored by IE.

This is my CSS:

PHP Code:
 INPUT {

    background-color:#FFFFFF !important;
    border: 1px solid #ececec;
            padding: 10px;
} 






Any ideas why it is not working?