CSS - Padding Appear At Top Of Page....

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

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

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> 

I am trying to get away from tables to get images in a formatted manor.

I have a div with a id giving each padding and margin element (left right, top, bottom) that sets them to 0px.

How can put a couple of images together (<img src="" /><img src="" />) in a div (or span) without having whitespace between them?

- Thanks for the help

- K

The site can be viewed he http://oharenoise.org/new/

I am having issues with padding on this newly revised website, specifically in the left column division.

For example, I'd like the "Special Information" heading to have larger padding above it & less padding below. No matter what values I enter into the padding attributes, nothing changes.

I'm having the same problem with the "Featured Publications" too, further down the page.

Hey everyone,

I am working on an old design I started a while back, and for some reason, IE and Opera do not render the top padding right. I figured that it is a bug, but I am not sure. Here is my code:
css Code:
Original - css Code body { background-image: url( http://img521.imageshack.us/img521/6097/blissxk5.png ); color: #000000; font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif; font-size: 12px; text-align: center; padding: 0; margin: 0; } a img { border: 0; } a,a:link,a:visited,a:hover,a:active { color: #0099FF; text-decoration: underline; } a:hover { color: #FF9900; text-decoration: underline; } #container { width: 85%; margin: 0 auto; text-align: left; } #header { padding-left: 150px; } #menu { width: 100%; text-align: center; } #menu ul { list-style-type: none; display: block; } #menu li { display: inline; } #menu a { padding-left: 45px; padding-right: 45px; padding-top: 15px; padding-bottom: 15px; } #menu a:hover { opacity: .8 !important; background-color: #999999; color: #FFFFFF; } #main { opacity: .6 !important; filter: alpha(opacity=50); background-color: #FFFFFF; padding: 1%; text-align: justify; } #main h1 { color: #0075FF; border-bottom: 2px solid #0099FF; display: block; width: 60%; } #footer { text-align: center; } #footer a { color: #000000; }

  

 body {


     background-image: url( http://img521.imageshack.us/img521/6097/blissxk5.png );


     color: #000000;


     font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif;


     font-size: 12px;


     text-align: center;


     padding: 0;


     margin: 0;


 }


 a img {


     border: 0;


 }


 a,a:link,a:visited,a:hover,a:active {


     color: #0099FF;


     text-decoration: underline;


 }


 a:hover {


     color: #FF9900;


     text-decoration: underline;


     


 }


 #container {


     width: 85%;


     margin: 0 auto;


     text-align: left;


 }


 #header {


     padding-left: 150px;


 }


 #menu {


     width: 100%;


     text-align: center;


 }


 #menu ul {


     list-style-type: none;


     display: block;


 }


 #menu li {


     display: inline;


 }


 #menu a {


     padding-left: 45px;


     padding-right: 45px;


     padding-top: 15px;


     padding-bottom: 15px;


 }


 #menu a:hover {


     opacity: .8 !important;


     background-color: #999999;


     color: #FFFFFF;


 }


     


 #main {


     opacity: .6 !important;


     filter: alpha(opacity=50);


     background-color: #FFFFFF;


     padding: 1%;


     text-align: justify;


 }


 #main h1 {


     color: #0075FF;


     border-bottom: 2px solid #0099FF;


     display: block;


     width: 60%;


 }


 #footer {


     text-align: center;


 }


 #footer a {


     color: #000000;


 } 

And also IE6+ do not seem to render the filter property. Anyone know whats going on with this?

ok im having a no brainer and i cant figure out what i did wrong, can someone take a look at this and tell me how to remove the space below. im posting a link, it has the css text posted on the page with the menu im working on that im having difficulty with.

thanks in advance,

Trizen

www dot cooperativecreditsystems slash Untitled-2 dot html

apparently being a new user i cant post links but just add the dots as dots and you should be able to find it.

EDIT: Fixed

[s]Anyone know why that ie6 keeps doubling the padding to the left of the that avatar image on the top [/s]http://new.gifdump.com/

looks perfect in Moz and IE...but any time I set a padding it overhangs the actual width. So the below code creates a 1010px wide result...is there a workaround for Opera sucking?

Code:

.topa	{ width: 1000px; padding: 5px; background:#000000 }

edit:
nesting a div and putting the padding on it without a background seems to work...while I'm sure it is overhanging the same way, at least it doesnt LOOK that way.

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

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

The padding isn't correct in IE or Firefox. It looks fine on a mac, but it's not rendering right on PC.

strategicguru.com/secure-enterprise

The menu should fill up the gray bar all the way to the right. What is conflicting here?