I have a problem. I want to have top border on my footer but it seems the code isnt working. I have searched on the internet for answer but aside from border showing somewhere different then footer on the page there is nothing on my problem. So i need your help on why is my border code not working? All other things on footer works perfectly. What am i missing here?
This is css for my footer:
footer{
position:absolute;
bottom:0;
width:100%;
height:60px;
background: #404040 ;
clear: both;
border-top: 2px solid #FFFFFF;
}
If you need html too, tell me and i will post fiddle.
Edit1: here is fiddle http://jsfiddle.net/N8eJp/
Your border work, but it's difficult to see it. Try to change the color to #000 to see it black and to be sure it is working
Related
I found a very weird bug today while developing a new site, I really don't know why in the hell it's happening, but I think someone might know.
I made a navigation menu fixed to the top-right part of the page, within it, a big div made round from a lot of border-radius.
It was working very fine and normal untill I added to the right bar a facebook page plugin.
When the bottom of that div goes over the title of the page in the plugin, the border-radius disappears. It stays a square div while it's there, goes back to round if I scroll the page and stays round until it's "touching" that very specific part of that page plugin.
I really don't have a clue about why, here's some code for better understanding:
.nav {
position:fixed;
width:100%;
text-align:right;
z-index:9999;
}
.face {
position:absolute;
width: 20%;
background:#F93;
top:5px;
right:10px;
border-radius:9999px;
overflow:hidden;
}
.face:before {
content: "";
display: block;
padding-top: 95%;
}
.face a img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%
}
.menu{
display:inline-block;
background:#FFF;
padding:1em;
width:50%;
text-align:left;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
margin-top:3%;
}
.menu a {
padding:0 0.5em;
border-radius:4em;
}
And also:
<div class="nav">
<div class="menu">
menumenumenumenu
</div><br/>
<div class="name">
<h2>name</h2>
</div>
<div class="face">
<img src="i/image.png"/>
</div>
</div>
By the way, it seems to happen only on webkit browsers, on firefox it looks very normal, didn't even test in internet explorer.
EDIT: Just tested on Internet Explorer and SURPRISINGLY it did work very well, this is now very very weird
EDIT2: Some Screenshots for even more clarification:
Before touching the title:
After it gets on that very specific spot:
Further down:
Anytime it's over the title it's not round, elsewhere it's fine.
EDIT3: I found out that there was another place the bug was happening; I have a jquery slider on the page; I had an Opacity effect on hover on some controls, when these opacity was being animated, it reproduced the disappearing border-radius problem, and then went back to normal by itself; Removing opacity CSS rule from the neutral state made the bug stop happening while hovering the slider, but it keeps hapenning while that div is over the facebook plugin
There may be more going on here because of the Facebook plugin, but it sounds like this is a problem of not taking into account Webkit CSS rules. If that's the problem, I'm surprised that Firefox isn't giving you trouble. The standard way to style rounded corners with cross-browser support is to give border-radius, then -moz-border-radius and -webkit-border-radius:
.menu {
...
border-radius: 100px 0px 0px 100px;
-moz-border-radius: 100px 0px 0px 100px;
-webkit-border-radius: 100px 0px 0px 100px;
...
}
.menu a {
...
border-radius: 4em;
-moz-border-radius: 4em;
-webkit-border-radius: 4em;
}
Ok, I found a fix for the problem, that I can only think I didn't thought before because I was too tired. ^^'
First of all, I found out that this bug was even weirder than I thought, thinking back how the opacity on another element seemed to affect it, I tried changing the image opacity, then, I found out that the div that contained it was in fact, still round.
Even though the image was being cut by the overflow:hidden; it wasn't being cut by the border-radius of the parent div.
I fixed it by putting border-radius on the image too, so now it is round even when over that plugin, the problem is gone now.
I hope someday this gets found by some webkit developers and the identify and fix that bug, it was really weird.
Thanks Henry for the help too!
TL;DR
Fixed by using border-radius on both parent div and image.
I am working on a webpage for MLA citation. In the top right corner I would like a little box with a gear to configure settings.
Here is the css:
#setings{
display:block;
height:50px;
width:50px;
background:#E1E1E1 url('gear.png') no-repeat fixed center;
background-size:45px 45px;
border: 2px solid #AEAEAE;
border-radius:5px;
position:absolute;
top: 5px;
right: 20px;
}
And here is the (very simple) html:
<div id="setings"></div>
The box does appear in the top right corner like I want it to, but the gear image doesn't show up. I have already searched stackoverflow and other websites for an answer but I not found anything so far.
Does anyone know what is wrong with me code?
Thank you so much!
Take "fixed" off of your "background:" line.
http://paulsfiles.vacau.com/
I'm trying to add a background-color to #maintext but it isn't showing up. The body image seems to be over-riding the #maintext, even though #maintext is more specific.
Here's how I'm trying to lay it out.
The logical order I'm going for is the nav within the header, and the main text before the images. It's a fixed width site as well.
jsFiddle
Didn't you use the same color code #6E6E6E for #maintext and #wrapper?
Works fine for me if I change the color for #maintext. Hope that helps? Otherwise please come back to me :)
In styles.css line:115 you have this:
#maintext {
float: right;
width: 570px;
background-color: #6E6E6E;
padding: 20px;
}
That background-color happens to be the same one as the #wrapper. #maintext is not being overridden, at least not in the link you posted
i have modified a wordpress theme very drastically to create the first version of my new site. I am trying to get rid of this 1px dotted border, but cannot for the life of me find which element it is on. arg!
the site is http://dev.timelesscreations.us and the dotted border i am talking about is underneath the side bar and above to footer on the right side.
Thank you!
It is caused by this CSS rule in your stylesheet:
#footer {
....
border-top: 1px dotted #000;
....
}
Element:
<div id="footer"> .... </div>
its in style.css line 62
#content
{
background: url("images/bk_content.png") repeat-y scroll 100% 0 transparent;
}
just REMOVE that property
background: url("images/bk_content.png") repeat-y scroll 100% 0 transparent
from #container css
cheers
Use Firefox Firebug add-on or Chrome Developer Tools (F12) to find it.
in style.css at line 144 you have dotted border setted on #footer. Remove that .
I'm maintaining the Perl Beginners' Site and used a modified template from Open Source Web Designs. Now, the problem is that I still have an undesired artifact: a gray line on the left side of the main frame, to the left of the navigation menu. Here's an image highlighting the undesired effect.
How can I fix the CSS to remedy this problem?
It's the background-image on the body showing through. Quick fix (edit style.css or add elsewhere):
#page-container
{
background-color: white;
}
That is an image. (see it here: http://perl-begin.org/images/background.gif) It's set in the BODY class of your stylesheet.
The grey line is supposed to be there. The reason why it looks odd is because the very top is hidden by the buffer element. Remove the background-color rule from this ruleset:
.buffer {
float: left; width: 160px; height: 20px; margin: 0px; padding: 0px; background-color: rgb(255,255,255);
}
I think it's this:
#page-container {
border-left: solid 1px rgb(150,150,150); border-right: solid 1px rgb(150,150,150);
}
However, I'm not seeing why the right border isn't showing up....
I found the problem.
The problem is that you need to set a white background on #page-container. As things stand, it has a transparent background, so the 5pt left margin on navbar-sidebanner is revealing the bg of the page_container ... so change that bg and you're cool.
I would do a quick fix on this to add the style:
border-left:2px solid #BDBDBD;
to the .buffer class
.buffer {style.css (line 328)
background-color:#FFFFFF;
border-left:2px solid #BDBDBD; /* Grey border */
float:left;
height:20px;
margin:0px;
padding:0px;
width:160px;
}
Thanks to all the people who answered. The problem was indeed the transparency of the #page-container and the background image of the body. I fixed them both in the stylesheet.