There ARE other questions regarding this issue. However, each one seems to have an individual answer, because the answers found do not work.
Just scroll right on my site and see the white space all through the site: http://highcatering.wpengine.com/
NOT nice!
Any ideas? I have tried the following:
body{width:100%;}
body{margins:0 0 0 0;}
Thanks!
The offending line is in style.css:
.post ol, .post ul { margin:0 0 30px 20px; padding:0;}
It is adding a margin to all ol and ul within your main body section. If you remove it, the white space will disappear. I'm not sure if it is needed somewhere else on your site.
it should be like:
body
{
width:100%;
margin:0;
}
That large white bar down there, is a place to insert some widgets, if you do not want to use this section, add this on your CSS file:
.footerWrap.footerStyleLight {
display: none;
}
If you want to have something on this section later but with a different background color, just change the background color like this for example:
.footerWrap.footerStyleLight {
background: #2c2c2c;
}
Although you probably have this class in your CSS file, search for it delete what's inside and add this display: none; or for changing background color background: #2c2c2c;
Related
I'm currently customising a site with Magento. I installed a wow-slider image slider. It works but it seems to have 2 random dots to the left and also a random space before the shadow.
Please see link
ellamatt.mygostore.co.uk
Please see here and let me know if you have an idea. I would give you the code but there are a few CSS and JS pages that go with this.
PS: it works properly in usual HTML but not in Magento.
The two dots are because of the li elements.
Changing the list-style property to none on this css rule will get rid of them:
Old:
.widget-static-block ul {
list-style: disc outside none;
padding-left: 1.5em;
}
New:
.widget-static-block ul {
list-style: none outside none;
padding-left: 1.5em;
}
And, for the shadow, on the same css rule, add a height of zero and displaying it as inline will get the ul block out of the way and remove the space before the shadow.
Final:
.widget-static-block ul {
display: inline;
height: 0;
list-style: none outside none;
padding: 0;
}
I'm working on a website and am struggling with one thing. Basically, when you hover over the main logo, the background of the logo goes white and it looks awful. I've tried this in three different browsers. Apart from the mouse pointer changing to a link indicator, I don't want any other visual changes on hover. This is a bootstrap based mediawiki theme if that helps.
The site is: www.nebdat.com
I've figured out that that section is called p-logo and have tried the following:
#p-logo:hover { background-color: transparent !important; }
It doesn't seem to do anything though. However, when I try:
#p-logo:hover { opacity: 0; }
the logo and background all go transparent, so I know it's the right name of the object. However, I want the logo name to remain.
I hope that makes sense. I'm pretty new to this.
Hope you have some advice.
Thanks,
JT
#media screen
.nav > li > a:hover, .nav > li > a:focus {
text-decoration: none;
background-color: #eeeeee;
}
That's causing it.
This should do it:
#p-logo > a {
background: transparent;
}
It's not the image that's got a background on hover, it's the anchor tag.
You don't have to override it, you can simply remove it. Find and remove this code from load.php:
img:hover{background:white url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAAAAAA6mKC9AAAAGElEQVQYV2N4DwX/oYBhgARgDJjEAAkAAEC99wFuu0VFAAAAAElFTkSuQmCC) repeat;background:white url(http://www.nebdat.com/wiki/skins/common/images/Checker-16x16.png?2013-05-25T13:38:20Z) repeat!ie}
I'm writing a mobile website and I've looked for hours at a centering problem I'm having.
The website is http://peatarian.com and you can emulate the iphone browser using transmog.
The CSS can be found at this page, but the most important parts are the following :
html, body {height:100%;float:center;text-align:center;}
body {background-url:url(raypeat.gif) no-repeat left top;margin:0; padding:0; text- align:center;color:black;}
body,td,input,textarea {font-size:100%; font-family:Verdana, Arial, Helvetica, sans-serif;}
a:link,a:active,a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
p {margin-top:0;}
table {background: none repeat scroll 0 0 white;}
and
.qa-nav-main {float:center;clear:both;border-top:1px solid black;border-bottom:1px solid black;background-color:#B7E3DA;margin:auto;margin-top:10px;padding:10px 0px;display:block;margin-left:auto;margin-right:auto;}
.qa-nav-main-list {font-size:125%; list-style:none;margin:auto;display:block;margin-left:auto;margin-right:auto;}
.qa-nav-main-item,.qa-nav-main-item-opp {margin:auto;display:block;float:left;margin-left:auto;margin-right:auto;}
.qa-nav-main-item {display:block;margin-left:auto;margin-right:auto;}
.qa-nav-main-item-opp {margin:auto;display:block;margin-left:auto;margin-right:auto;}
.qa-nav-main-link {color:#fff; display:block; padding:6px 10px; background-color:none;}
.qa-nav-main-selected {background-color:none; text-decoration:none;}
.qa-nav-main-hot .qa-nav-main-link {background:none;}
.qa-nav-main-hot .qa-nav-main-link:hover, .qa-nav-main-hot .qa-nav-main-selected {background:#396E63;}
The images are the (main) menu. If you'd turn the iphone on its side, you'd see that they aren't centered.... I've tried editing so many things in .qa-nav-main and also .qa-nav-mean-item but if I set float:center in the latter the menu items are all on a new line (though they are centered).
If you want to keep your code structure like you have it now, then just add a class to the <span> which contains your <center> which contains your buttons. The class would have the following rules:
display: block;
width: 200px; /* this should be the width you need, please assign your own */
margin: 0 auto;
To your .qa-nav-main class add the following rule:
text-align:center;
This should give you the desired effekt of your spans floating in the middle. But I would suggest that you rework your markup a bit and get rid of all the spans and center tags.
The above gives you the result depiced on the following image:
I'm trying to take away a white border that is appearing from behind an image on my sidebar. I can't figure out what is causing the white border. I thought it was the padding, and then I thought it was the border. If you visit our home page (http://noahsdad.com/) and look on the side bar under the "new normal" picture you will see a "Reece's Rainbow" image. I'm trying to remove that white around the image. I pasted in the code below, but it's not doing anything. Any thoughts as to what I'm doing wrong?
Thanks.
#text-23 { background: none}
the reason it's not working is the background: none is never getting to the img which has the background set on it (backgrounds don't cascade down they exist in the element and you can have multiple elements layered on top of each other much like a painting. Which has the effect of the background cascading)
#text-23 img { background: none; }
that should resolve your problems. I am assuming that when you call the class textwidget you still want it to append the white background, just not for this instance. So if you set the above it will cascade properly with the correct specificity while leaving the rest of your page alone.
This can also be done by
#text-23 .textwidget img { background: none; }
but that level of specificity is not required. However if you try to just do:
.textwidget img { background: none; }
this will override all of the instances where the background is set on an image in the textwidget container.
You have added the white border yourself by setting the following in line 884 of style.css:
.textwidget img {
background: #fff;
padding: 5px;
max-width: 290px;
}
Simply remove the background declaration. If you only want to remove this instance of a white border, add the following rule:
#text-23 .textwidget img {
background: none;
}
This seems to be the conflicting CSS class.
.textwidget img {
background: white;
padding: 5px;
max-width: 290px;
}
If you want to debug css you should really look into Firebug(a plugin for Firefox) or Opera and use builtin dragonfly
These allow you to rightclick on your HTML page and inspect it.
Go to your style.css file and search for .textwidget img and change the background-color property to none. It is currently set to #FFFFFF which is the hex color code for white and is resulting in the white border or background (precisely).
.textwidget img {
background-color: none;
}
i have the following css to put padding around a div:
.orangeAllDay, .orangeAllDay a {
background: #fab384 !important;
color: white;
padding: 5px;
}
it works great until the content (which happens to be inside a cell in an html table takes up two lines. When i look at this in firefox, it looks like its trying to add the padding to each line of the content (even though its all inside one div) so i get some weird overlap of space above the second line that covers part of the first line.
Is there a workaround for this issue or another solution that doesn't break on multiline.
It is adding this padding because you have included both the .orangeAllday and .orangeAll Day a together, so both the link & the elemenent .orangeAllday will get padding of 5px.
You would need to separate them like so:
.orangeAllDay {
background: #fab384 !important;
color: white;
padding: 5px;
}
.orangeAllDay a {
background: #fab384 !important;
color: white;
}
this is done with the assumption that you want padding on the .orangeAllDay element only, but wish to retain background / color for link a.
You've got the padding around the div (.orangeAllDay) and the link. What you are seeing is the padding of the link. There are several ways around this, depending on how exactly the HTML looks like.
If it only contains the link, I'd suggest to actually drop the div and just have the link display as a block:
...
a.orangeAllDay {
background: #fab384 !important;
color: white;
padding: 5px;
display: block;
}