CSS Round rectangle

[jojy]

Hello,
I have small css issues with my xhtml file. I have two div tags first one uses background round rectangle and another one uses border excluding top. Please see code below.

HTML Code

<div id="signup">
 <div class="signup_layer">
 <div class="signup_left"></div>
 <div class="signup_center"></div>
 <div class="signup_right"></div>
 </div>
</div>

CSS Code

#signup {
 background: url(images/signup_top.jpg) top no-repeat;
 width: 575px;
 margin: 0 auto;
 padding-top: 6px;
}
#signup h1, h2, p { margin: 0; }
.signup_layer {
 border: 1px solid #D7D7D7;
 border-top: none;
 padding: 0px 5px 5px 6px;
 height: 300px;
}
.signup_left{
 width:315px;
 float:left;
}
.signup_center{
 width:45px;
 float:left;
 padding-top:12px;
}
.signup_right{
 width:202px;
 float:left;
}

Problem I am facing is whatever I write in all three divs(left,center,right) signup layer box does not extend. I used height: auto; display: block and table; but none helped me.

Second thing: I want to display a picture within the h2 tag with hyper link. I did this with following and it works very well with following css and html code

CSS

#test h2{ background: url(images/pic1.gif) no-repeat; width: 45px; height: 47px; text-indent: -100em; }
#test h2 a{ width: 45px; height: 47px; float: left;}

HTML

<div id="test"><h2><a href="#">Few words go here</a></h2></div>

The issue i am facing is on firefox. It shows the large rectangle when I click on the image. Any hint how to hide this rectangle over the page?

Thanks in advance!
jojy

[csuguy]

I think what you want for the first problem is background-size. By setting it to 100% it will stretch to fit. That should work - if I understand your problem correctly.

For the second problem - give it a class of 'nodec' (or w/e) and use the following css:

.nodec
{
  text-decoration:none;
}

That should remove the rectangle.

Ryan

[swa66]

First, your html sample has an extra </div>, make sure your actual code validates.

Secondly, developing in IE will do this to you, you should really try to develop in something (anything) else and work around IE bugs later.

You seem to have a in-flow div that only contains 3 floated divs (who are taken out of the flow). The div should collapse as it doesn't contain anything anymore.
Try adding something after the float divs that's clearing the floats (or don't float them). a <br /> with a "clear:left" applied to it should do the trick.

[jojy]

thanks swa66, spacer tip worked very well :) I had similar problem an year ago and i solved it using clear:both

I don't have any extra div in the code but in the code format it looks like.

@csuguy text-decoration: none; didn't solve problem. I can still see the rectangle over the image and on left side in firefox only.

Thanks for your help

[SuzyUK]

@jojy.. I'm not sure but I think

overflow: hidden

or "

outline: none;

" on the link, might solve the FF issue if I'm understanding correctly

When you click on a link it's gets focus and the outline [w3.org](A CSS Property not the same as border or text-decoration) is shown as an accessibility/visual aid..

Again I'm not sure on this but would be interested to see,

overflow: hidden

if it works would be the accessible friendly way to stop it "stretching" but still leave it intact for accessibility

let us know if it works: either, both or neither ;)

[edited to add link to Outline Property]

[edited by: SuzyUK at 1:48 pm (utc) on Sep. 7, 2008]

[jojy]

Amazing! thank you so much Suzy outline:none worked.

Thanks every one :)

[ergophobe]

jojy - you didn't say which browsers were causing the issue. Poking around, I don't see outline supported at all in IE (perhaps in IE8?).

Just curious. I have to admit that I've never even heard of the outline property let along used it.

[jojy]

I faced this issue in firefox and its resolved. Thanks ergophobe for your message.

[ergophobe]

>> The issue i am facing is on firefox

My bad. I looked, but didn't see it. Sorry.

[swa66]

Just a friendly note: turning off outline for active links isn't being nice to people who're used to the browser: they expect it to be there when they return to a page using "back".
Probably worse: accessibility guidelines sometimes mention not to use outlines in a confusing fashion. I'm not entirely sure what they try to achieve, but I'm willing to let them be if it helps those with an additional challenge in life. (I guess it helps for keyboard focus users or alternate input methods that might be used aside of a mouse)