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 .
Related
There is some weird white space showing up on the right side of my website in mobile. I was wondering if there is a CSS trick to add a border to all the html elements within the body of a webpage so that I can figure out which element is extending out and causing the white space on mobile.
Thank you
You can try this CSS snippet:
* { border: 1px solid black; }
Every element should now get a border. Beware, this means everything. Hopefuly it'll help you figure out that white space in your app!
Include that CSS snippet before your CSS files so that it can be overwritten - or after, to force it onto every element.
Try with
* {
outline: 1px solid red;
outline-offset: -1px;
}
* is a global selector, while outline will not mess with your elements positions, it'll just add a 1px red outline
Also make sure you use a CSS reset (usually body has by default 8px margin http://www.w3.org/TR/CSS21/sample.html)
You can resize your window, open the debug console and inspect the elements that might create the issue. Take a look at the Style panel and test-edit the styles until you get it fixed. in Chrome's Console you also have the Emulate option to test your page for different devices.
* {
border-style: 2px 3px solid dashed #3A5FCD;
}
In the past my footer has been colored in thus no bottom border is needed.
However, I've edited the color scheme on my new site which now means the footer is colored white.
I'd like to add a thin black border to the top and bottom.
I know I'm supposed to put all the code in this message but there's literally so much it goes beyond the realm of this Stackoverflow message.
You really have to see it:
Original site (with navy footer section)
www.sweetfe.co.uk
New site with footer styled white (I want to add a thin black border to the top and bottom where the first sites navy footer ends)
http://79.170.44.76/oxfordlifestylecentre.co.uk/
Basically I want my site to look like this:
http://www.reading-college.ac.uk/sites/default/files/idea.jpg
Please advise,
Thanks,
Sam
If I understand you well, try
.footer-widget-container {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
and about removing dotted border try to remove below line from style.css
abbr[title] { border-bottom: 1px dotted; }
I want to add an extra border on the top of the .menu div.
Firstly i added top and bottom border using box-shadow. and then another regular border using
border-bottom:
border-left:
border-right:
now i want to add a border next the top white border(created by box-shadow) same as the regular border just like this.
here is the link for my current progress
Use css outline for this.
Check This- JSFiddle
FIDDLE
You don't need to specify border-top, border-bottom, border-right, border-left. Just simply specify like this border:1px solid #b8b7b7;. You are missing border-top in your css
.menu_area
{
width:960px;margin:0 auto;height:42px;box-shadow: 0 -4px 0 -3px #FFFFFF, 0 4px 2px -2px#ededed;
border:1px solid #b8b7b7;
}
Try this
<!DOCTYPE html>
<html>
<head>
<style>
p
{
border:1px solid red;
outline:green solid thick;
}
</style>
</head>
<body>
<p>Here you go</p>
</body>
</html>
Just like Beginner said, you don't need to specify the side (top, right, left, bottom) when you want to apply the effect to all sides, just boder: [styles]; it's enough in your css.
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
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.