CSS - Problem With Presenting Dashed Boxes

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

I am sure that you've seen these types of divs/boxes that people use on their webpage. almost everyone uses it

pretty much it's a div or a table cell where the cell has background colour and a thin border around it (usually lighter) for a nice effect. Then obviously within the box, there is text to be displayed.

I can't seem to get this!! I've tried using tables but what happens is that the border starts overlapping with the other cells and I don't have the effect I won't

what's the easiest way of implementing this type of design?

thanks!

Im trying to replicate the vertical navigation style that is used on the Mozilla Firefox Website (as seen to the left). I have sucessfully done this useing images, with the exclusion of a space problem between the items and the end images in FireFox. I am using the strict.dtd and am frustrated with this problem. Iff anyone can help me create a nav with this style that would be wonderful. Here is the css im using:

Code:

.cssnavend	{
	position:relative;
	font-family: arial, verdana, helvetica, sans-serif;
	display: block;
	width: 209px;
	height: 9px;
	margin: 0; 
	margin-bottom:0px;
	padding: 0;
}
.cssnav	{
	position:relative;
	font-family: arial, verdana, helvetica, sans-serif;
	background-image: url(images/but-over.jpg);
	background-repeat: no-repeat;
	display: block;
	width: 209px;
	height: 31px;
	margin: 0; 
	margin-bottom:0px;
	padding: 0;
}
.cssnav a {
	display:block;
	font-size: 11px;
	width: 209px;
	height: 31px;
	display: block;
	float: left;
	margin: 0;
	padding: 0;
	color: #096CCE; 
	text-decoration: none; 
}
.cssnav img {
	width: 100%; 
	height: 100%;
	border: 0;
}
.cssnav a:hover{
	color: #000;
	}
* html a:hover {
	visibility:visible
}
.cssnav a:hover img{
	visibility:hidden
}
.cssnav span {	
	position:absolute;
	left:7px;	
	top:7px;	
	margin:0;	
	cursor: pointer;
	}
#box {
	margin-top: 10px;
	padding: 0;
	width: 209px;
	display: block;
	}
#boxtop {
	width: 209px;
	height: 11px;
}
#boxcontent {
	width: 209px;
	background: #DFE5EB;
}
#boxbottom {
	width: 209px;
	height: 11px;
}
#boxtext {
	width: 209px;
	background: #DFE5EB;
	padding: 2px;
}

The following code is me testing my css. The first group is useing the cssnav styles. The 2nd group is using the box styles. The 3rd group is a try at making a content box with rounded corners that is a spacific width. Unfortunatly, the content of the box will not wrap to the width of the box, instead it continues on 1 line and outside the box.

Code:

<div class="cssnavend"><img src="images/but-top.jpg"></div>
<div class="cssnav"><a href="index.php"><img src="images/but-up.jpg" /><span>Home</span></a></div>
<div class="cssnav"><a href="#"><img src="images/but-up.jpg" /><span>This is a test</span></a></div>
<div class="cssnav"><a href="phpbb/index.php" target=_blank><img src="images/but-up.jpg" /><span>Forum</span></a></div>
<div class="cssnavend"><img src="images/but-bot.jpg"></div>

<br><br>

<div class="box">
	<div class="boxtop"><img src=images/but-top.jpg></div>
	<div content="boxcontent">
		<div class="cssnav"><a href="#"><img src="images/but-up.jpg" /><span>Home</span></a></div>
		<div class="cssnav"><a href="#"><img src="images/but-up.jpg" /><span>This is a test</span></a></div>
		<div class="cssnav"><a href="#"><img src="images/but-up.jpg" /><span>Forum</span></a></div>
	</div>
	<div class="boxbottom"><img src=images/but-bot.jpg></div>
</div>

<br><br>

<div class="box">
	<div class="boxtop"><img src=images/box-top.jpg></div>
	<div class="boxcontent">
		<div class="boxtext">This is some text inside of the box. This text should wrap and be padded.</div>
	</div>
	<div class="boxbottom"><img src=images/box-bot.jpg></div>
</div>

Thank you all who help.

hi,

Im making a site, and i decided to use CSS instead of tables. I have used basic CSS before, but it gets abit harder when i start making boxes etc.

Here is my code so far -

layout.css - (one that gets included on each page)

Code:

@import "style.css";
	
body {
	margin:10px 10px 0px 10px;
	padding:0px;
}
	
#leftcontent {
	position: absolute;
	left:10px;
	top:50px;
	width:200px;
	background:#fff;
	border:1px solid #000;
}

#centercontent {
	
	background:#fff;
 		margin-left: 199px;
 		margin-right:199px;
	border:1px solid #000;		
	voice-family: "\"}\"";
	voice-family: inherit;
  	margin-left: 201px;
  	margin-right:201px;
}

#shoutbox {
	position: absolute;
	right:10px;
	top:50px;
	width:200px;
	background:#fff;
	border:1px solid #000;
}

#rightcontent {
	position: absolute;
	right:10px;
	top:50px;
	width:200px;
	background:#fff;
	border:1px solid #000;
}
	
#banner, #footer {
  background:#fff;
	height:40px;
	border-top:1px solid #000;
	border-left:1px solid #000;
	border-right:1px solid #000;
	voice-family: "\"}\"";
	voice-family: inherit;
	height:39px;
}

#footer {
  background:#fff;
	height:40px;
	border-bottom:1px solid #000;
	border-left:1px solid #000;
	border-right:1px solid #000;
	voice-family: "\"}\"";
	voice-family: inherit;
	height:39px;
}

#banner h1 {
	font-size:16px;
	padding:10px 10px 0px 10px;
	margin:0px;
}
	
#shoutbox, #rightcontent p {
	font-size:10px
}

style.css - text formatting etc.

Code:

body {
	font:	12px/1.2 Tahoma;
	background:#ddd;
	padding:0px;
	margin:0px;
}
	
a {
	text-decoration:none;
	font-weight:bold;
	color:#c00;
}
	
pre {
	font-size:11px;
	color:blue;
}
	
ol {
	margin-right:40px;
}
li {
	margin-bottom:10px;
}

p,h1,pre {
	margin:0px 10px 10px 10px;
}
		
h1 {
	font-size:14px;
	padding-top:10px;
}

it produces a good layout, with a header, 3 coloums and a footer. whoever, the boxes expand at different rates and the footer doesnt move down. the header also doesnt expand. i know how i can fix this, but i dont know how to fix it without making it so that its locked at a resolution. i would like the site to exapand as the window is made larger.

here is an image of what i get -



and this is what i am aiming to acheive -



as you can see, i want all the boxes to be the same length, which is defined by the size of the largest box. also, i want to create 2 or more boxes on the left, only the bottom of which gets made longer. on the first image you cannot see the extra box because it is covered by the other one :-/

i would be greatful for any help you guys can provide me

thanks,

dynamyt

Hi

I am creating a new site for a friend in Wordpress

ilovelifebecause.com

I can usually muddle through in css to make changes, but i'm stumped at the moment.

What I am trying to do is swap around the two cream coloured boxes so the larger one is on the right, the thinner one on the left and the blue box in the middle still. I've tried a number of things in the css file but can't seem to find the right method - can anyone help?

many thanks in advance
Paul

My boxes line up horizontally perfectly in Firefox but not in IE7 (not suprisingly).

Because of the rules I can't show you the link but the html places two boxes side by side lined up so that they are the same distance from the top. It looks right in Firefox but IE7 drops the right box about 10 pixels or so.

My Html is this:

<div id="newsboxleft">
<div id="newsboxright"></div></div>

My CSS is this:

#newsboxleft { margin: 10px auto;
position: relative;
top: 0px;
left: -187px;
width: 350px;
height: 142px;
background: url(../images/newsboxleft.jpg) repeat-x top;
border-top: 0px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
padding: 0px;
clear: both;
}

#newsboxright { margin: 10px auto;
position: relative;
top: 0px;
left: 373px;
width: 350px;
height: 142px;
background: url(../images/newsboxright.jpg) repeat-x top;
border-top: 0px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
padding: 0px;
clear: both;
}


I hope someone can help. Thanks.

Hallo,

I have in several cases serious problems with floating boxes. Not with the standard layout's like here described http://css.maxdesign.com.au/floatutorial/
but with more complicated layouts. I know to place the float attribute but have problems with setting the clear attribute.

Does some know a good source where I find more information or documented examples ?

Finally I can fix my problems, but it take so much time of testing...

Thnaks

Hello,

I created a site with floating frames and it looks good in IE6 and FF/Mozilla.

But I have one problem:
I use in my dynamic layout an ID more then once
(thats not OK according w3 validation)

I tried to do something with pseudo classes but this works not really goed. My "uni" thumb box is used on two diff. pages
The skyscraper: http://www.all4yourwebsite.com/
and the result/search page: http://www.all4yourwebsite.com/search.php

I know there is a solution, but because the tumbbox have to be much flexible the solution must be simple as the current (wrong) solution. Anyone an idea?

I have 4 or 5 form controls that I want in a horizontal line. Each form control has a label above it, and I'm using <br>s to position the form control below the label.

I thought that wrapping each "label<br>form control" with a <span> would turn the whole thing into an inline block, where the next <span> would line up next to it, like the next <td> in a <tr>.
Code:

<div id=secondline>
  <span id=ed>
    <b>Event Definition</b>:<br>
    <textarea name=inject cols=45 rows=6></textarea>
  </span>
  <span id=after>
    <b>After</b><br>
    <select name=next size=8 multiple>
      <option value=0>0
      ...
      <option value=100>100
    </select>
  </span>
</div>

but, alas, it doesn't work like that.

How can I get Code:

<tr>
  <td>label<br>form_control</td>
  <td>label<br>form_control</td>
</tr>

behavior without using tables?

Hello:

I'm trying to place two drop down boxes at the right of my page.

When I view the pages in Firefox and Internet Explorer, they are so far off.

You can view the page yourself by visiting:
http://www.informedmortgage/100-financing.html

I've tried changing widths, margins, etc and am having no luck.

I can use some help. I hope someone can help me out.

Thank you.
Back to top

Hi guys,

I am trying to achieve the following:

Box 1 |
------
Box 2 |

** With a 3rd box to the right of box 1&2


I have got this far but cant work out how to do 'box2'


Code:

<div id="box2">
box 2
</div>
<div id="box3">
box 3
</div>

Code:

#box2 {
	float: left;
	padding: 10px;
	margin: 20px;
	background: #ffffff;
	width: 100px; 
	/* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 100px;
	}
html>body #box2 {
	width: 100px; 
	/* ie5win fudge ends */
	}


#box3 {
	float: right;
	padding: 10px;
	margin: 20px;
	background: #ffffff;
	width: 100px; 
	/* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 100px;
	}
html>body #box3 {
	width: 100px; 
	/* ie5win fudge ends */
	}

Can anyone possibly help?

I'm pretty new to CSS so bear with me if this is a silly question.

I want to go totally CSS and 0 tables. 1 problem that I've been having with my site is that I have several forms for data entry. These are of course done in 2 column tables, label in the 1st column, text box in the right.

The problem I'm having is that I cannot get the text boxes to line up properly using CSS. I am trying a test page simulating a login page. But since the words Username and Password are different lengths, the left edges of the text boxes don't line up evenly.

What is the best technique to get CSS to display 2 columns like a 2 column table where the first 'column' contains a text label and the 2nd column has the input boxes aligned nice and neat?

i have two css boxes on the company lan, and for one person the two boxes wont appear? is this a problem with internet explorer?

I know, this sounds like an AJAX question, but I don't think thats the solution. I have created a layout:
http://www.cabinincanada.com/script/

The problem is, that I want to be able to click on the About us button, and have it load into the content box where the posts are. I could just create a second page, copying the HTML and making the changes, but isn't this defeating the purpose of CSS? I would then have to go through and update all my links on both pages if I made changes. How do I load content into a box from an external web-page?