CSS - Simple Problem With Border On Boxes/divs

Hi

I have img tags in my html with border="0".

I am replacing the html stylings with CSS and want to know what the equivelant would be?

Is it
Code:

border-width: none;

Or does the img tag really need the border="0" in it at all?

Thanks in advance!!

Hi,
Take a look at this page: http://nazgulled.home.sapo.pt/table.html

This is easly done with tables as you can see, now, I want reproduce the same effect with divs but I don't know how.

My exact problem is, how can I center more than 1 div tag in the same "line". And for any div tag I use the float option, I can't align the text to anywhere, how can I do this too?

Hi,

What is the best way achieve this using divs instead of a table. I have done it but it was such a long winded method. I've been going round in circles:
Code:

<table>
  <tr>
    <td align="left">Stuff 1</td>
    <td align="center">Stuff 2</td>
    <td align="right">Stuff 3</td>
  </tr>
</table>

Thanks in advance, and apologies if I look like a dumbass.

i have got two areas created with css one above the other but there is a large white gap between i have tried playing arond with the CSS file but cant gt them closer together im still only learning css but i thought id be able to do this.... if someone could advise that would be really great...

here is the page so you can see what is happeneing
http://www.justtaps.com/test/admintemplate.php

and this is a link to the css file
http://www.justtaps.com/test/css/main.css

thanks in advanced to anyone who replies..

RF

Hi
I have these boxes which displays correctly in IE but when I view it in FF, the bottom grey line is gone
Click Here
Can someone someone give pointers as to whats happening
San

Hi guys
I've succeeded doing rounded boxes (modules) in Joomla ( www.joomla.org ) and well, I'm having a little problem now

I've tested these modules by putting only text with them, but when I tried putting only 1 image, the module got "corrupted" and broken

Look:



And here is the code:

Code:

div.module-round h3, div.moduletable-round h3 {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1em;
	font-weight: bold;
	color: #333;
	margin: -2px -8px 0 -8px;
	border-bottom: 1px solid #cdcdcd;
	padding-left: 10px;
	padding-bottom: 2px;
	background-color: white;
}
div.module-round, div.moduletable-round {
	background: url(../images/tl.jpg) 0 0 no-repeat;
	margin: 0;
	padding: 0;
	margin-bottom: 5px;
	margin-left: 2px;
	width: 120px;
	background-color: white;
	height: 100%;
}
div.module-round div, div.moduletable-round div {
	background: url(../images/tr.jpg) 100% 0 no-repeat;
}
div.module-round div div, div.moduletable-round div div {
	background: url(../images/bl.jpg) 0 100% no-repeat;
}
div.module-round div div div, div.moduletable-round div div div {
	background: url(../images/br.jpg) 100% 100% no-repeat;
	padding: 8px;
	width: auto !important;
	width: 100%;
}
div.module-round ul, div.moduletable-round ul {
	margin: 10px 0;
	padding-left: 20px;
}

Does any1 know how to make the module to adjust automatically if I put an image (only) on it ?

I don't have problem with text or text+images, but when I put only an image, it shows bad

Thanks a lot 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

Sorry problem solved!

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?

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.

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.

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