CSS - Border-radius Problem

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)

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.

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.

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?

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

Sorry problem solved!

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.

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

The problem page is http://chris.paing.com/version5/index.php.

I used suckerfish drop-down menus in that yellow menu (hover over Mission In Canada and you'll see it working).

In IE6, the bottom-border of the drop-down menus does not appear until you hover over the actual dropdown (the nested <ul>). If you move your mouse off it and then put it back onto the drop-down menu, the border is still not visible.

Now, if I change the 'display:block' in '#menu2 li li' to 'display:inline-block', or if I add 'height:1%' to '#menu2 li' then once you hover over the actual dropdown, the border will work correctly unless you refresh the page. However, it is still missing at first.

The problem is not an overlapping background because if you look carefully you can see the border is being added to the bottom of the menu, as opposed to suddenly appearing through the bottom edge of the menu.

Any solutions? Alternatively, any ideas as to which IE bug this might be?

I have this in my other thread but I decided to make a new thread since my old thread was pertaining to a seperate issue. OK well I have validated my CSS and am now getting no errors on it, warnings about the font-family but that is an easy change and isn't priority right now. That fixed a couple minor things that I had missed. But the current problems a

1.) Every div past the #space div appears to be a couple pixels short in terms of width, as the right border doesn't line up with the border from #topright, #space, #grayfade, and #bannercell.

2.)Now in FF its all screwy. It wont display one div next to another, it puts it in the correct position on the right, but bumps it down below the div it is supposed to be next to. The DTD I have on the page right now is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Please let me know if this is confusing or you need anything else. Thanks

CSS:
Code:

html {height:100%;}

body{

margin:0; padding:0; height:100%;
font-family:Times New Roman, serif;
background-color:white;
}


#wrap{

background-image:url(bgimage.jpg);
background-position:top left;
background-repeat:repeat-y;
min-height:100%;
width:790px;
margin:auto;
}


* html #wrap {height:100%}

#header{

background-image:url('keyboard.jpg');
background-position:left;
background-repeat:no-repeat;
background-color: #FEFEFE;
margin:0; padding:0;
height:117px;
width:615px;
border-left: 1px solid #777777; 
float:left; 
}


p{

margin:0px; padding:0;
font-family: courier;
}


p.headline{

margin:0px; padding-left:5px;
font-family: arial;
font-weight:bold;
font-size:70%;
}


p.news{

margin:0px; padding-left:5px;
font-family: arial;
font-size:70%;
color:#808080;
}


h1{

position:relative;
line-height:0px;
margin:0; padding-left:10px;
font-size:115%;
color:#1B018E;
}


#left{

float:left;
width:200px;
text-align:left;
background-color:#FFFFFF;
border-left: 1px solid #777777; 
border-right: 1px solid #777777; 
}


#main{

float:right;
clear:both;
text-align:left;  
width:565px;
border-right: 1px solid #777777;
}


#clearfooter{

clear:both;
height:30px;
overflow:hidden;
}


#footer{

height:30px;
background-color: #777777;
margin:0 auto; padding:0;
margin-top:-30px;
color:#FFFFFF;
text-align:center;
width:790px;
}


#bannercell{

float:right;
clear:both;
background-color:white;
text-align:right;
width:175px;
height:117px;
font-size:75%;
margin:0; padding:0;
border-right: 1px solid #777777;
}


#borderleft{

border-left: 1px solid #777777; 
}


#topright{

float:right;
clear:both;
background-color:white;
text-align:right;
width:175px;
height:53px;
font-size:75%;
margin:0; padding:0;
border-right: 1px solid #777777;
}


input.box{

height:17px;
}


#linkbanner{

width:615px;
height:19px;
float:left; 
text-align:left;
border-left: 1px solid #777777; 
background-color: #777777;
}


#grayfade{

float:right;
clear:both;
border-right: 1px solid #777777;
background-image:url(gray_grad.jpg);
width:175px;
height:16px;
}


#space{

border-right: 1px solid #777777;
border-left: 1px solid #777777; 
background-color: #FFFFFF;
height:25px;
width:790px;
}


#extraspace{

float:right;
clear:both;
border-right: 1px solid #777777; 
background-color: #FFFFFF;
height:25px;
width:565px;
}


#newsbar{

background-image:url(blue_grad.jpg);
background-repeat:no-repeat;
width:200px;
height:10px;
}


#mainbar{

background-image:url(blue_lg.jpg);
background-repeat:no-repeat;
width:565px;
height:10px;
border-right: 1px solid #777777;
}


#mainbarsm{

float:right;
clear:both;  
width:565px;
background-image:url(blue_thin.jpg);
background-repeat:no-repeat;
height:5px;
}


#heading{

background-color: #FFFFFF;
margin:0; padding:0;
height:53px;
width:615px;
border-left: 1px solid #777777; 
float:left; 
text-align:left;
}

and my HTML:
Code:

<center>
<body background="../images/bg_texture2.gif">
<div id="wrap">

<div id="heading"><img src="../images/logo.gif"><font face="Bodoni MT" size="5" color="#040C89">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Company Name</font></div>

<div id="topright"><font color="#6666FF">Monday April 4, 2005</font></div>

<div id="header"></div>

<div id="bannercell"><center>.::Client Login::.</center>
<br>
<font size="2">username&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" size="13" class="box">
password&nbsp;&nbsp;&nbsp;&nbsp;<input type="password" size="13" class="box"></font>
<center><input type="submit" value="Login"></center></div>

<div id="linkbanner"><font color="#FFFFFF" size="2">About Us&nbsp;&nbsp;|&nbsp;&nbsp;Services&nbsp;&nbsp;|&nbsp;&nbsp;Solutions&nbsp;&nbsp;|&nbsp;&nbsp;Help Desk&nbsp;&nbsp;|&nbsp;&nbsp;Training&nbsp;&nbsp;|&nbsp;&nbsp;Careers&nbsp;&nbsp;|&nbsp;&nbsp;Contact</font></div>
<div id="grayfade">&nbsp;</div>

<div id="space">&nbsp;</div>

<div id="left">

<div id="newsbar"><h1>Recent News</h1></div>

<p class="headline">.::New Website::.</p>
<p class="news">We're launching a new website in the near future.  Look for great things to come!</p><br>
<p class="headline">.::Done using CSS::.</p>
<p class="news">No tables with this design.  "Out with the old and in with the new."</p><br>
<p class="headline">.::Continuously Changing::.</p>
<p class="news">With us having recent news on the website, the main page will be changing all
the time with the latest info about Us and stuff</p><br>
<p class ="headline">.::Sales Platform::.</p>
<p class="news">We can also use this as an area for sales opportunities and promotion.  It will
be a good reference for all new products and features from Us.</p>
</div>

<div id="main">

<div id="mainbar"><h1>Your Cool Slogan</h1></div>
<br>

<p class="news"><strong>Intuitive.</strong>  Having the knowledge and experience in a changing <img src="../images/imis.gif" align="right" border="0"> world to make expert decisions through perceptive insight.  We allow your organization to tear down barriers by offering <strong>software solutions, innovative design, and managed services.</strong>
Specializing in <i>sutff</i> and ore stuff</i> software we are able to expand the dimensions of your organization, and provide you with the solutions needed for an on demand world.
</p>

<div id="mainbarsm"></div>

<p class="news">Having the knowledge and experience in a changing <img src="../images/microsoft.gif" align="right" border="0"> world to make expert decisions through perceptive insight.  We allow your organization to tear down barriers by offering software solutions, innovative design, and managed services.
</p>
</div>

<div id="extraspace"></div>

<div id="clearfooter"></div>

<div id="footer">
<center><font size="2">2005 Us. All rights reserved.<br>
Site produced by a Web Guy, Content Manager.</font></center>
</div>

</body>
</center>

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