CSS - Background Image 1px Padding From Border?

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/

Hello, is it possible to start a border-left css 1 or 2 pixels from the left of the element instead of it going to the far left of the element??

I've written a menu in css and I want to show the user what page they are on by having a little block of colour next to the link that they are on. This link should explain it better:

http://www.midwivesonline.com/test.html

at least it will do in everything but IE6 on windows where it stretches out too far to the right.

The problem lies in the css:

http://www.midwivesonline.com/styles/test.css

In particular:

.currentpagep {
padding-right: 155px;
border-right: 5px solid #85306B;
}

If I set the padding-right to just 5px then it's perfect in IE6 but screwed up everywhere else. From the tests I've done I don't think that it's a doctype issue - but then again not sure what the solution is...

I'd really appreciate any help on this,

Cheers,

Tim

Hi,

I have a problem with the css for the following page:
http://www.designdictator.com/

For the img in the log i do use the following css:

#content img {
display : block;
border : 1px solid #999;
padding : 4px;
margin : 20px 0;
}

but in IE6 the padding between the border and the img doesn't display. Firefox does all right.

What's wrong?

thanx
jarra

I'm building a series of navigation links in boxes on top of each other. I want to pad the links inside their div tags 3 pixels all the way around. I'm seperating the boxes using the border property, 1px solid on the bottom of each cell. The top and the bottom are handled in a seperate class.

In firefox, the brower adds the 3 pixels to the overall width (maybe six since I'm padding left/right) so the page comes out like this:

---------
| Link 1 |
-------------
| Link 2 |
-------------
| Link 3 |
-------------

Now in IE, it looks correctly. I'm not sure which one is correct, but since IE looks right I assume it's correct. Any way to get the padding to be handled consistently in 2 browsers?

Hi guys,

Ive been playing with this little bit of CSS for a while now and its' definitely getting the better of me. I have been using the demo on www.w3schools.com to create a horizontal menu. That has worked fine. I thought I could use a similar principle to create a horizontal menu.

The whole idea is to create a CSS template, and then go through putting the ASP, etc in. I want to have a "leftpanel" on my site which will contain the navigation menu (that I am trying to create) and later make space for featured listings/whatever. Anyway, this is what I have:

Code:

ul.ver
{
width: 125px;
padding: 0px;
margin: 0px;
text-align: center;
border: 1px solid black;
list-style-type: none;
float: left;
}

a.ver
{
float: left;
width: 125px;
text-decoration:none;
color: black;
padding: 0.2em 0.6em;
border: 1px solid black;
background-color: #A2B5CD;
}

div.leftpanel
{
background-color: #CAE1FF;
width: 125px;
float: left;
margin: 0px;
padding: 0px;
}

And the HTML is:

Code:

<div class="leftpanel">
	<ul class="ver">
		<li><a class="ver" href="#">MenuA</a></li>
		<li><a class="ver" href="#">MenuB</a></li>
	</ul>
</div>

The problem that I have is that no matter what the width of the <a> tags are, and what the width of the "leftpanel" is, there is always 20-ish pixel width strip of the "leftpanel" showing through, even though they are the same width, with no padding, no margins, no nothing! If I play with the padding on the <a> it seems to have no effect!

Thanks to anyone who can offer me some help!

Porky.

Code on the page:

Code:

<body>
<div class="wrapper_page">
	<div class="wrapper_widebackground">
		<div class="wrapper_body">
			<div class="wrapper_head"><img src="Header.jpg" width="1000" height="182" /></div>
			<div class="wrapper_nav_top"><!-- navbar goes here --></div>
			<div class="wrapper_main">
				<div class="wrapper_main_insidebackground_blue">
				<div class="wrapper_main_insidebackground_white">
					<div class="wrapper_main_top"><img src="PageBodyTop.png" width="1000" height="35" /></div>
					<div class="wrapper_main_content">
						<div class="wrapper_main_sword">
							<!-- Content here -->
						</div>
					</div>
				</div>
				</div>
			</div>
		</div>
	</div>
</div>
</body>

Stylesheet:

Code:

.wrapper_page {
	text-align: center;
	width: 100%;
	border: 0px solid #FFFF00;
}
.wrapper_widebackground {
	background-image: url(../Cloth.png);
	width: 1350px;
	background-repeat: no-repeat;
	margin: auto;
	clear: both;
	border: 0px solid #FF0000;
}
.wrapper_body {
	text-align: left;
	margin: auto;
	clear: both;
	width: 1000px;
	border: 0px solid #FF00FF;
	padding: 0px;
}

.wrapper_head {
	height: 182px;
	width: 1000px;
	border: 0px solid #33FF00;
	margin: 0px;
	padding: 0px;
}
.wrapper_nav_top {
	height: 24px;
	width: 1000px;
	border: 0px solid #FFFF00;
	margin: 0px;
	padding: 0px;
}
.wrapper_main {
	background-color: #000000;
	background-image: url(../background.jpg);
	margin: auto;
	padding: 0px;
	background-position: top;
	background-repeat: repeat;
	clear: both;
	border: 0px solid #99FFFF;
}
.wrapper_main_insidebackground_blue {
	background-repeat: no-repeat;
	background-image: url(..Blue.jpg);
	background-position: top;
	background-color: #000000;
}
.wrapper_main_insidebackground_white {
	background-repeat: repeat-y;
	background-image: url(..White.png);
	background-position: top;
}
.wrapper_main_top {
	border: 0px solid #00FF00;
	height: 35px;
	width: 1000px;
	margin: 0px;
	padding: 0px;
	clear: both;
}

.wrapper_main_sword {
	background-image: url(../Sword.png);
	background-repeat: no-repeat;
	background-position: right top;
	vertical-align: top;
	padding: 0px;
	margin-top: -14px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	border: 0px solid #FF33CC;
}

.wrapper_main_content {
	border: 0px solid #FF9900;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 90px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

Here's the issue. wrapper_main will not stretch all the way to the bottom of the page regardless of the amount of text. It maintains what seems to be a bottom margin whether I put a bottom margin of 0 there or not. (Currently, it is set to auto.)

I thought maybe wrapper_body was causing the issue, but setting the padding to 0 on wrapper_body did not work.

Here's the confusing part. If I set a border with a width of 1px on wrapper_main, it goes all the way to the bottom. However, the border looks bad on the page so I don't want the border. (I'd give you the URL, but the forums wouldn't allow it.)

Why is this happening and how do I remedy it?

I am designing a site which has a vertical nave which when an item in the list is hovered over it adds the left and right border and decreases the padding by 5 px:

Code:

#navlist2 a
{
	width: 168px;
	/* extend the sensible area to the maximum with IE5 */
	display: block;
	text-align: left;
	text-decoration: none;
	color: #fff;
	margin-top:5px;
	margin-bottom: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	font-size: 12px;
	font-weight: bold;
}
#navlist2 a:visited { 

}
#navlist2 a:hover {
width: 163px; 
border-left: 5px solid #fff; 
border-right: 5px solid #fff;
padding-left: 5px; 
}

It works fine in firefox, but I noticed that there is massive slowdown/lag . So im wondering, why this is happening in IE and how can I fix it?

i have a div named #main that contains #content(float:right), #sub(float: left), and #footer(clear:both). In IE, #main's background color doesn't stretch all the way through #footer, even though a bottom border applied to #main displays below #footer. So there's a space between the background and the border!

#main's background is brown/grey, and botom border is 1px green.

What gives?

http://www.nomadicamedia.com/temp/

Here's the code.

Code:

<div class="entry">
<p>Blah blah blah</p>
<div class="postmetadata">

<div class="hide">
Blah blah blah
</div>

Blah blah blah
</div>

And the CSS.

Code:

#content div.post div.entry {
float:left;
margin:-5px auto auto 6px;
width:570px;
font-size:12px;
line-height:20px;
}

#content div.post div.entry p {
margin:0;
padding:0;
background:white;
}

#content div.post div.entry div.postmetadata {
margin:10px auto 20px auto;
font-size:11px;
line-height:19px;
border-top:1px solid #bcbcbc;
}

#content div.post div.entry div.postmetadata div.hide {
display:none;
}

Apparently I have to set background:white; to the #content div.post div.entry p for div.postmetadata's border-top to appear in IE7. Firefox and IE8 displays this correctly.

Any ideas?

I'm trying to renew my website using css.
i have a list with images inside. something like

<ul>
<li><img ... /></li>
<li><img .../></li>
</ul>

my style definition looks like
img {
margin:0px;
padding:0px;
}

ul {
margin:0px;
padding:0px;
}

li {
margin:0px;
padding:0px;
}

i don't want any pixels between two items (images), but i cannot find the way to do that. i always get some pixels between them...
anyone can help me? thanks!

Hi all,

I've got a <div> tag around an image and in Firefox, it shows an extra 2 pixels of padding at the bottom of the image - Why is that and how can it be stopped? There's no blank spaces between the <div> and <img... tags.

I can not figure out how to remove the padding and margin around the triangle image so it is not indented, I would also like it if the gap between the image and the text was smaller.

Can anyone suggest what I change or add to my code to do this.

I am also wanting to know how I get the triangle to be part of the link, so clicking the triangle or thetext will open the sub menu.

Code:

<!DOCTYPE HTML>
<html><head><title>working submenus</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
ul.catMenuItem { margin: 0px auto; list-style-type: none; /*margin-left: -25px;*/
	background: url("triangle_right.png") no-repeat 0px 5px transparent; /*adjust 2px & 5px until it looks correct */
	display: block;
	padding: 0px 4px 0px 15px; /*adjust until you have enough left padding to account for your bullet */
	/* list-style-image: url('triangle_right.png'); */
}
/*	list-style-image:url('triangle_down.png');  */

ul.catMenuItem li a { text-decoration: none; padding: 0; margin: 0; }
ul.catMenuItem li.catSubMenu { display: none; padding-left: 30px; margin: 0; }

--></style>

<script type='text/javascript'><!--
    var prevCat;

    function menu(newCat) {
        if (prevCat) prevCat.style.display = 'none';
        newCat.style.display = 'block';
        prevCat = newCat;
    }

    onload = function() {
        var menus = document.getElementsByTagName('ul');
        for (var a=0,x=menus.length; a<x; a++) {
            if (menus[a].className === 'catMenuItem') {
                menus[a].getElementsByTagName('li')[0].getElementsByTagName('a')[0].onclick = function() {
                    menu(this.parentNode.parentNode.getElementsByTagName('li')[1]);
                }
                menus[a].getElementsByTagName('li')[1].style.display = 'none';
            }
        }
    } 
--></script>
</head><body>

    <ul class="catMenuItem">
        <li class="catMenuTitle"><a href="#">Menu 1</a></li>
			<li class="catSubMenu">
			Content 1.1<br>
			Content 1.2<br>
			<br>
			</li>
    </ul>
     
    <ul class="catMenuItem">
        <li class="catMenuTitle"><a href="#">Menu 2</a></li>
        	<li class="catSubMenu">
			Content 2.1<br>
			Content 2.2<br>
			<br>
			</li>
    </ul>
     
    <ul class="catMenuItem">
        <li class="catMenuTitle"><a href="#">Menu 3</a></li>
        	<li class="catSubMenu">
			Content 3.1<br>
			Content 3.2<br>
			<br>
			</li>
    </ul> 

</body></html>

For the life of me I cant find out what code that will align the image correctly. Currently the "previous" button on the page below has a gap on the left, and is being cropped on the right.

http://zombiemod.com/rm/nina2/main.php?g2_itemId=13

This is the image im talking about:

http://zombiemod.com/rm/nina2/theme...ntrols-left.png

I guess if I remove the space to the left of the previous button, it will drag the image to the corrct position so all of the image is being displayed without having the right side cropped.

Here is the HTML for the button:

Code:

<ul id="control-buttons"> 
<li><button id="controls-left"> 
<img src="themes/ajaxian/images/controls-left.png" alt="Left" /> 
</button></li> 
<li><button id="controls-play"> 
<img src="themes/ajaxian/images/controls-right.png" alt="Play" /> 
</button></li> 
<li><button id="controls-right"> 
<img src="themes/ajaxian/images/controls-right.png" alt="Right" /> 
</button></li> 
</ul> 

This is the code I used to try and set the correct height of the buttons:

Code:

#slideshow-controls button {
    width: 44px;
    height: 59px;
    /*margin: 0;
    padding: 0;*/
    background-color: #000;
    border: none;
    text-align: center;
    cursor: pointer;
}

The layout I have going is a bit difficult to explain. Here's a diagram..



The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header.

I hope this makes sense.

What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though.

Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts?

Thanks in advance for any assistance/suggestions.