CODEWITHSUNDEEP
htmlcss
MrFoh
MrFoh

Reputation: 2701

Css not rendering correctly

Am trying to style a textarea with css but its not rendering correctly, a part of the border doesnt show. Heres a screenshot Screenshot

This is the css code for the textarea

#pheedform textarea {
    -moz-border-top-left-radius:4px;
    -moz-border-top-right-radius:4px;
    -webkit-border-top-right-radius:4px;
    -webkit-border-top-left-radius:4px;
    border-top-left-radius:4px;
    border-top-right-radius:4px;
    border:1px solid rgba(153,153,153,1);
    border-bottom:thin;
    width:100%;
    padding:4px;
}

And this the css code for the box beneath the textarea

 .pheed-options {
        background:#EEEEEE;
        border-top:none;
        padding:5px;
        position:relative;
        top:-7px;
        width:100%;
        border:1px solid #666666;
        border-right:1px solid #666666;
    }
    .pheedOptionItem {
        padding:5px;
        border-right:solid 1px #999999;
    }

And this the html

<div class="textarea_fix">
                <textarea name="pheed" cols="50" id="pheed">
                </textarea>
                 <div class="pheed-options">
                       <span class="pheedOptionItem">
                       <a href="#" class="pheedAdd_photo">Add Photo</a>
                       </span>
                       <span class="pheedOptionItem"class="pheedOptionItem">
                       <a href="#" class="pheedPostToTwitter">Post to Twitter</a>
                       </span>
                       <span class="pheedOptionItem">
                       <a href="#" class="pheedPostToFacebook">Post to Facebook</a>
                       </span>
                       <span>
                       <a href="#" class="pheedBtn">Pheed</a>
                       </span>
                </div>
                </div>

Upvotes: 0

Views: 165

Answers (3)

Brent
Brent

Reputation: 2971

From the looks of your screenshot and the jsfiddle, it looks like the .feed-options element is a pixel or two wider than the textarea, and is likely being cutoff by having a width wider than its parent, and a parent element having overflow: hidden.

I adjusted the padding on .feed-options from padding: 5px to padding: 4px and it lined it up in the jsfiddle: http://jsfiddle.net/blineberry/d56fY/5/

This may prevent it from overflowing the parent element. If not, either adjust the widths to be less than 100% or continue to adjust the padding/margin/borders until its no longer overflowing the overflow: hidden element.

Upvotes: 0

scumah
scumah

Reputation: 6393

You should set both elements padding the same, either change #pheedform textareas padding to 5px or .pheed-options to 4px.

Upvotes: 0

Joshua
Joshua

Reputation: 3603

Setting width:100% is the cause, because the following scenario occurs: 100% + 1px border-left and 1px border-right.

Either remove the width attribute altogether (just relying on display: block) or give it a fixed, static value.

Upvotes: 1

Related Questions