css driving me crazy or is it the browsers ....

[peanuts]

Hi all,

I'm having 2 issues well to be honest more than 2 but I'll keep to the css

i want to create a newsitem in a nice little box sort of like fieldset in a form..

problem1: in IE5 the border isn't showing.
problem2: the read more link is placed outside of the box by ie7 and inside by FireFox (I want it inside!)

Could any of you please help me with this?

so here's what i have:?
css:

.box {
 border-width:1px; 
 border-style:solid; 
 border-color:red;
 padding: 0px 10px 10px 10px;
 margin-top:10px;

} 
 
.legend {
display:inline;
padding:5px;
font-weight:normal;
height:20px;
position:relative;
z-index:101;top:-12px;
background-color:#fff;
}
.boxcontent
{
margin-top:0px;
}
.more
{
 float:right;
 margin-top:0px;
 font-size:60%;
 padding: 0px 0px 0px 0px;
}

and this is my html

<div class="box" >
<div class="legend">Header goes here</div>
<div class="boxcontent">content goes here.....
<div class="more">read more link >
</div>
</div>
</div>

[Raffles]

You have divitis. Instead of the "legend", use a heading (h2 or h3 probably). Then instead of boxcontent, use paragraphs (if it's going to be text only). And for the "more" thing, just use an anchor!

I wouldn't worry about IE5 unless you specifically have been told to cater for it.

Since you keep adding margin-top:0px to things, maybe you should put this at the beginning of your CSS and reset all default margins/padding to 0:

* {margin:0; padding:0;}

Why does the "legend" need display:inline? If you want it to NOT extend to the full width of its container, float it left or give it a specific width.

Regarding the problem with the "read more" bit leaving the box, that's because it's a float and it hasn't been cleared. Give its container overflow:auto to fix this. Also, I think "read more" should be outside the "boxcontent".

[peanuts]

sorry I meant IE6 the borders aren't showing.. I'm not even gonna think about 5..
and IE7 (vista) is placing the link outside the box.

Thanks for the reply.. I'm gonna try..

[Raffles]

I can see the red border in my IE6. BTW, you can condense this:

 border-width:1px; 
 border-style:solid; 
 border-color:red;

into this:

border:1px solid red;

And I might also mention the overflow:auto clearing fix won't work by itself in IE6, you need to trigger haslayout too. See this link to decide what property you wish to use for that: http://www.satzansatz.de/cssd/onhavinglayout.html

[peanuts]

HI,

divitis... I might have it.. but in this case I want this header to fall over the border of the box. so it's either a h2 with an id / class or it's a div. since I already use h1-4 on the rest of the site.

also the site is going to include a rich text editor which will allow for H# so I wanted to make sure this is seperate.

I took the whole boxcontent out of the css file, thanks!

de display:inline made the box and the legend fall over eachother..

In or outside of the box.. that's been a nice discussion already... I think you are right but ... I'm building this for my gf and she had something different on her mind

it's fixed..

Thanks!!

Edit:

The border issue is fixed also .. thanks

[Raffles]

so it's either a h2 with an id / class or it's a div

No it's not. I think you might not have discovered the magic of descendant selectors. This works:

<div class="box" >
<h3>Header goes here</h3>
<p>content goes here.....</p>
<a href="#" class="more">read more link &gt;</a>
</div>

.box {
 border:1px solid red;
 padding: 0px 10px 25px 10px;
 margin-top:10px;
} 
 
.box h3 {
display:inline;
padding:5px;
font-weight:normal;
top:-12px;
position:relative;
z-index:101;
background-color:#fff;
}
.box .more {
 float:right;
 font-size:60%;
}

If there are other rules elsewhere for h3 (e.g. color:blue) you can just override them up there by adding color:black or whatever it is you want it to be.

[peanuts]

Thanks for that .. I did know but it's giving me mayor headackes ...

i'm doing some browser hacks to get multiple collumns and I tried getting stuff like link color changed with this and with ff it works like a charme .. ie7 will change my link color to the last color set.. it's a nightmare.. so if this works ... what is wrong with using a lot of div's?

[Raffles]

Nothing really, but you should use the elements best suited for the job. An h1 and a div behave pretty much in exactly the same way, so there's no reason to not use an h1 and use a div instead because you think if you use divs for absolutely everything your layout will be more robust. It isn't true.

[drhowarddrfine]

This may not apply here since I didn't thoroughly read this but IE applies margin differently to lists than Firefox.