homepage Welcome to WebmasterWorld Guest from 54.197.19.35
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
CSS Round rectangle
jojy




msg:3739897
 1:55 am on Sep 7, 2008 (gmt 0)

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




msg:3739910
 3:08 am on Sep 7, 2008 (gmt 0)

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




msg:3739985
 10:06 am on Sep 7, 2008 (gmt 0)

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




msg:3740013
 1:04 pm on Sep 7, 2008 (gmt 0)

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




msg:3740021
 1:35 pm on Sep 7, 2008 (gmt 0)

@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




msg:3740044
 2:19 pm on Sep 7, 2008 (gmt 0)

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

Thanks every one :)

ergophobe




msg:3742839
 4:24 pm on Sep 11, 2008 (gmt 0)

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




msg:3742851
 4:37 pm on Sep 11, 2008 (gmt 0)

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

ergophobe




msg:3742957
 7:37 pm on Sep 11, 2008 (gmt 0)

>> The issue i am facing is on firefox

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

swa66




msg:3742973
 8:11 pm on Sep 11, 2008 (gmt 0)

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)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved