CSS - 100% Width And Border Problem

New to using CSS for layouts and I'm having an issue with getting an img to appear within a div without a border.

Here's my code, with a screenshot showing below it:

Code:

<div class="leftmenu">
     <div class="lnavbtn">
	<img src="images/leftnavbtn1.gif" border="0">
    </div>
</div>

.leftmenu {
	margin:0px;
	border:0px;
	padding:0px;
	width:150px;
	height:100%;
	background-color:black;
}

.lnavbtn {
	align:right;
	margin:0px;
	border:0px;
	padding:0px;
}

Even with all the padding/margin/padding 0 stuff, I still get a 2 px border around the image. I want it to be clean all the way around. This happens in firefox and IE.

Any suggestions?

why is the top border on the links called "Sva Ponuda Farovi Felge Pragovi Retrovizori Spojleri" not showing up in IE??

http://www.xtreme-style.com/item.cfm?prodID=371&ID=0

here is my css code for the links

Code:

/**BEGIN CATEGORY LINK EFFECTS**/
	a.category_links:link {
		color:#003366;
		text-decoration: none;
		background-color:#efefef;
		padding:2px 4px 0px 4px;
		border-bottom:0px solid #333333;
		border-top:1px solid #333333;
		border-left:1px solid #333333;
		border-right:1px solid #333333;
		margin-right:5px;
	}
	
	a.category_links:visited {
	    color: #003366;
		text-decoration: none;
		background-color:#efefef;
		padding:2px 4px 0px 4px;
		border-bottom:0px solid #333333;
		border-top:1px solid #333333;
		border-left:1px solid #333333;
		border-right:1px solid #333333;
		margin-right:5px;
	}
	
	a.category_links:hover {
		color:#FF3300;
		text-decoration: none;
		background-color:#FFFFFF;
		padding:2px 4px 0px 4px;
		border-bottom:0px solid #333333;
		border-top:1px solid #333333;
		border-left:1px solid #333333;
		border-right:1px solid #333333;
		margin-right:5px;
	}
	
	a.category_links:active {
		color: #003366;
		text-decoration: none;
		background-color:#efefef;
		padding:2px 4px 0px 4px;
		border-bottom:0px solid #333333;
		border-top:1px solid #333333;
		border-left:1px solid #333333;
		border-right:1px solid #333333;
		margin-right:5px;
	}


/**BEGIN CATEGORY LINK EFFECTS**/
	a.category_links_selected:link {
		color:#FF3300;
		text-decoration: none;
		background-color:#FFFFFF;
		padding:2px 4px 0px 4px;
		border-bottom:0px solid #333333;
		border-top:1px solid #333333;
		border-left:1px solid #333333;
		border-right:1px solid #333333;
		margin-right:5px;
		font-weight:bold;
	}
	
	a.category_links_selected:visited {
		color:#FF3300;
		text-decoration: none;
		background-color:#FFFFFF;
		padding:2px 4px 0px 4px;
		border-bottom:0px solid #333333;
		border-top:1px solid #333333;
		border-left:1px solid #333333;
		border-right:1px solid #333333;
		margin-right:5px;
		font-weight:bold;
	}
	
	a.category_links_selected:hover {
		color:#FF3300;
		text-decoration: none;
		background-color:#FFFFFF;
		padding:2px 4px 0px 4px;
		border-bottom:0px solid #333333;
		border-top:1px solid #333333;
		border-left:1px solid #333333;
		border-right:1px solid #333333;
		margin-right:5px;
		font-weight:bold;
	}
	
	a.category_links_selected:active {
		color:#FF3300;
		text-decoration: none;
		background-color:#FFFFFF;
		padding:2px 4px 0px 4px;
		border-bottom:0px solid #333333;
		border-top:1px solid #333333;
		border-left:1px solid #333333;
		border-right:1px solid #333333;
		margin-right:5px;
		font-weight:bold;
	}

Thanks in Advance.

Hi,

I've got weird issue:
I have three div's that are positioned relative below each other. Together they compose a box, where the top has a background, the middle has a background and the bottom has a background. The middle part holds content and can expand vertically so the box is flexible in height. The background tiles vertically so the picture of the border stays intact when it increases in height.

The weird thing is that when a border is not defined for the middle part:

PHP Code:
 border: 0px solid #ffffff; 





that FF gives it a default white border of some 5 pix or so. In IE it works fine.

When I do define a border, the div shows properly, but then I have a border that I don't want (see example white border). I can define the border to be transparent:

PHP Code:
 border: 1px solid transparent; 





but that only works in FF and not in IE (where it shows up black). I can also define the border to be none:

PHP Code:
 border: 1px none #ffffff; 





But that works fine in IE, but in FF I get the 5px white border again....

Here's my css: PHP Code:
.contentbin {
    position: absolute;
    margin: 0px;
    height: 475px;
    width: 780px;
    top: 146px;
    left: 222px;
    padding: 0px 0px 0px 0px;
    border: 0px solid #ff0000;
    z-index: 1;
    }    

.contenttop {
    position: relative;
    margin-top: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    padding: 0px;
    width: 780px;
    height: 17px;
    border: 0px solid #ff0000;
    background-image:url(../images/contentvensters/contentframe_gr1.jpg);
    background-repeat: no-repeat;
    }    

.contentmid {
    position: relative;
    margin-top: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    padding: 0px 0px 0px 0px;
    width: 780px;
    border: 1px solid transparent;
    background-image:url(../images/contentvensters/contentframe_midback.jpg);
    background-repeat: repeat-y;
    }    

.contentbottom {
    position: relative;
    margin-top: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    padding: 0px;
    width: 800px;
    height: 17px;
    background-image:url(../images/contentvensters/contentframe_gr1_onder.jpg);
    background-repeat: no-repeat;
    }    
    
.contentpadder {
    position: relative;
    margin-top: 10px;
    margin-left: 20px;
    margin-bottom: 10px;
    margin-right: 10px;
    padding: 0px 0px 0px 0px;
    border: 0px solid #000000;
    } 




Here's the html: PHP Code:
<div class="contentbin">

    <div class="contenttop">
        <img src="images/spacer.gif">
    </div>
    <div class="contentmid">
        
        <div class="contentpadder">
            Example text
        </div>
        
    </div>
    <div class="contentbottom">
    </div>

</div> 





I've attached screenshots for the different situations.

Any help is greatly appreciated!

Cheers,
Gurt

I have a small problem with the way borders are displaying around a rounded box in IE. Below are screen shots of what it looks like in FF (which is correct) and IE (broken):
http://img332.imageshack.us/img332/7734/example1do7.jpg
http://img307.imageshack.us/img307/4980/example2xo5.jpg

As you can see, in IE the border runs over the GIF corner on the lower left and right, and the upper right. Here is the relevant CSS code:

Code:

b.cn {
position: absolute;
height: 10px;
width: 10px;
margin: 0;
padding: 0;
background: url(images/greycircle.gif) no-repeat;
line-height: 1px;
font-size: 1px;
}

.box {clear: both; position: relative; background: #000; width: 425px;}

b.tl {top: -1px; left: -1px; background-position: top left;}
b.tr {top: -1px; right: -1px; background-position: top right;}
b.bl {bottom: -1px; left: -1px; background-position: bottom left;}
b.br {bottom: -1px; right: -1px; background-position: bottom right;}

div.box {
margin: 0 0 20px 0;
}
div.box {
border: 1px solid #999999;
background-color: #be9;
color: #000000;
background: url(images/boxgrad.gif) repeat-x top left;
float: left;
}
div.box .boxbody {
padding: 10px 20px 10px 20px;
border: none;
}

.boxhead {
font-size: 16pt;
font-weight: bold;
}
.boxtext {
font-size: 11pt;
}

and the relevant HTML code:

Code:

<div class="box">
<div class="boxbody">
<span class="boxhead">This is the title</span><br>
<span class="boxtext">
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. <p> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
</span>
</div>
<b class='cn tl'></b>
<b class='cn tr'></b>
<b class='cn bl'></b>
<b class='cn br'></b>
</div>

Any help would be greatly appreciated.

Well, just imagine. My table displays beautifully in Firefox, but it looks like a third-grader did it in IE7. IE7 will not display a border in connection with cells that have no data. The list is populated from a five-column database and not every field has an entry for every column. In Firefox the bottom border extends across every cell regardless of content. Any ideas?

CSS:
.NewSOL #guardtable td {
vertical-align:top;
border-bottom-style:solid;
border-color:#666666;
border-bottom-width:thin;
}
.NewSOL #guardtable tr {
border-bottom-style:solid;
border-color:#666666;
border-bottom-width:thin;
}

THANK YOU!!

Hi,

I am trying to apply a bottom-border to a TR element. The border shows fine in Firefox, but will not display in IE6. Any ideas what is causing this?

Page: http://explosiveracing.net/wow-guild/forum/
CSS: http://explosiveracing.net/wow-guild/css/forum.css(Under the .headers declaration)

Hi, here's the CSS layout:

http://www.abhiram.astahost.com/newlayout4/

The menu layout has been taken from 'Suckerfish menus' in http://www.alistapart.com

The curved borders has been taken from http://www.webreference.com/program..._borders/2.html

I've been trying to make curved borders for the header and the content. It displays it just the way I want it to in Firefox, but for some reason, the content part is giving a big gap in IE. I've used the same code with minor adjustments for both header and the content, but there is a problem only with the content. I've spent 2 hours and am at my wits end. Any leads?

Source:

http://www.abhiram.astahost.com/newlayout4/index.html
http://www.abhiram.astahost.com/newlayout4/mystyle.css
http://www.abhiram.astahost.com/newlayout4/iefix.js

Thanks.

Sorry problem solved!

On my new layout I have a navigation box in which the inside needs to contain 5 x 75px wide boxes, all on the same line (Using float:left), but due to the way FireFox and IE handle borders differently the size needs to be 381px wide in IE (Due to the 3px border) and only needs to be 375px in Firefox.

Obviously for now I have opted to go for 381px as the width, as it works in Firefox too, but it makes a few pixel gap on the right, is there anyway to get around this??

Thanks in advance.

I'm having a slight problem with the appearance of the border for the DIV below the navigation bar. Firefox runs the border through the entire width of the DIV, but IE stops the bottom border as soon as the last <LI> is reached.. Any ideas guys? Thanks in advance.

http://www.manliusvillage.org/test/index.html

The related CSS is below:

Code:

#navigation{
height:2.2em;
line-height:2.2em;
width:758px;
margin:0 1px;
background:#578bb8;
color:#ffffff;
}

#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #ffffff;
border-bottom:1px solid #ffffff;
white-space:nowrap;
}

#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #ffffff;
}

* html #navigation a {width:1%;}

#navigation .selected,#navigation a:hover{
background:#80b0da;
color:#ffffff;
text-decoration:none;
}

#sublinks{
float:left;
height:1.4em;
line-height:1.4em;
width:758px;
margin:0 1px;
background:#578bb8;
color:#ffffff;
}

#sublinks li{
float:left;
list-style-type:none;
white-space:nowrap;
border-right:1px solid #578bb8;
}

#sublinks li a{
display:block;
padding:0 5px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #ffffff;
}

* html #sublinks a {width:1%;}

#sublinks .selected,#sublinks a:hover{
color:#000000;
text-decoration:none;
}

I'm having problems with my CSS.

I have three columns.

1) Left for navigation
2) Middle for content
3) Right for sidebar

I am using this format for a template. The right sidebar column sometimes will be longer in height than the middle column depending on content of the page.

The Middle column has a 1px solid line on the left and right (using it as a visual divider). So I really want the Middle column to extend and follow the height of the Right sidebar. I can't add the border to the Right sidebar column because it has it's own border already.

What code should I use for the middle column?

I currently have this:

Code:

#middle {
       float: left;
       width: 375px;
       background: #fff;
       margin: 0 auto;
       padding-top: 0px;
       padding-left: 15px;
       padding-right: 15px;
       border-left: 1px solid #ccc;
       border-right: 1px solid #ccc;
       }

Thanks in advance.

This time, problem is at the left navigation menu. There should be a 10px border on the left side of Denim. It appears fine with firefox but it does not appear at all with ie.

Please view the attached image. Or view at :
http://www.refinethetaste.com/html/...s&CATEGORYID=16

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