I need a help with css, elements (lists) from wp-plugin (simple directory listing pro) overlap over body and footer, I create additional css for colors without touching positions, please take a look (desktop and mobile view)
https://streamingsites.eu.org
I try to play with css for colors here is additional css which I implement
/* Heading */
#opd-list-holder .qc-grid-item h2{
border-top-left-radius:15px;
border-top-right-radius:15px;
background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
font-size:16px;
}
.custom-header-media .page-header h1{
display:none;
}
.advertise-block{
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important; border-bottom-left-radius:15px; border-bottom-right-radius:15px;
}
/* Span Tag */
#opd-list-holder li .li-txt{
position:relative;
padding-left:15px;
color:#000;
font-size:20px;
top:20px;
}
/* Image */
#opd-list-holder li img{ max-width:75px;
padding-left:10px;
}
/* Search bar and category buttons*/
#live-search input[type=text]{
border-radius:15px;
}
.hentry .filter-area-main .filter-area{
border-radius:15px;
background-image:linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.effect-style-seven{
color:#000000;
}
.portfolio-listing a h3{
color:#000000 !important;
font-size:20px !important;
}
.qcopd-list-column h2{
text-align:center;
}
.portfolio-listing a .effect-style-seven{
background-image:linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
}
#opd-list-holder .sld-list li{
background:#c3cfe2 !important;
}
Related
I was just wondering as I've always heard that absolute position messes up the page on different resolution. For some reason, it is working fine for me even without wrapping it around a relative element. How is that possible? I just want to understand.
Here is my css:
body
{
background-image:url('images.jpg');
background-repeat:repeat-x;
}
.mainpage
{
margin-top:100px;
width:900px;
margin:auto;
}
.gridline {
content:"";
height:1px;
background:-moz-linear-gradient(left, #FFFFFF 0%,#000000 50%,#FFFFFF 100%);
background:-webkit-linear-gradient(left, #FFFFFF 0%,#000000 50%,#FFFFFF 100%);
background:linear-gradient(left, #FFFFFF 0%,#000000 50%,#FFFFFF 100%);
width:100%;
display:block;
}
.empbox
{
height:30px;
background:-moz-linear-gradient(left, #FFFFFF 0%,#6C8483 50%,#FFFFFF 100%);
background:-webkit-linear-gradient(left, #FFFFFF 0%,#6C8483 50%,#FFFFFF 100%);
background:linear-gradient(left, #FFFFFF 0%,#6C8483 50%,#FFFFFF 100%);
width:100%;
display:block;
color:White;
margin-top:190px;
padding-top:10px;
clear:both;
}
.menu
{
color:black;
margin-top:-110px;
position:absolute;
}
.menu ul
{
list-style:none;
display:inline;
float:left;
padding-left:40px;
}
.menu li { float:left; margin-left:20px;}
.menu li:hover
{
padding:0px 15px 0px 15px;
font-size:xx-large;
font-style:italic;
border-bottom:3px solid #6C8483;
padding-bottom:10px;
}
.menu li a {
text-decoration:none;
font-style:oblique;
color:black;
font-weight:bolder;
font-size:large;
}
.menuwrap
{
overflow:visible;
position:relative;
}
HTML
<div class="menuwrap">
<div class="menu">
<ul>
<li>Home</li>
<li>Query</li>
<li>Reports</li>
</ul>
</div>
</div>
I would like to point out that I haven't set anything in the body element, only a picture background. And again, I just want to understand to avoid any future problems. I thought that wrapping an absolute inside a relative avoids such issue, but apparently nothing changes even if I remove the relative. I conducted my test using chrome extension called resolution test. Also I have a question, when you set an element to relative, what is it relative to, the body or the element on the top of it? And if there is no element on the top of it, is it relative to the body size and if there is no width or height set into the body then how does it functions?
Thanks!
Absolutely positioned elements are relative to a container positioned relatively. If none is specified, it's relative to the window. I've never heard of/see anything about problems with position and screen resolution... other than the fact that your browser might change width/height when your resolution changes?
this is all regardless of if there is anything set in the css for the html/body width & height.
I am using Twitter Bootstrap in my rails app. My navbar looks perfect in Firefox / Chrome / Safari (tested chrome on both a Mac & PC). In Internet Explorer, it looks ugly! Wrong colours & everything.
Any help you can provide would be appreciated. I can post whatever code would help.
Update
Here is all of the CSS where I override anything from bootstrap (brought into my app via sass-rails gem). Hopefully it pushes us in the right direction.
Note: Where I have color:#F8F8F8; below, I used to have #333. This is just one iteration of me trying to fix it. I've even tried changing the background color to #333334 as I think that my precompiler was changing #333333 to #333 (don't know for sure though)
/* Styling */
.navbar, .navbar-inner, .navbar-fixed-top, .container, #tabs .nav {
border:none;
background-image:none;
}
.navbar {
font-size:14px;
text-shadow:none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
.nav {
float:right;
}
.brand {
margin-left:30px;
color:#333334;
font-family: Georgia, serif
}
.navbar-inner {
background-color: #F8F8F8;
border-bottom-color: #E0E0E0;
border-bottom-style: solid;
border-bottom-width: 1px;
color: #333334;
}
}
.navbar .nav > li > a {
text-shadow:none;
color:#555555;
background-color: transparent;
cursor:pointer;
&:hover {
color:#E6E6E6;
}
}
.navbar .nav .active > a, .navbar .nav .active > a:hover {
background-color: transparent;
color: #555555;
}
.navbar .nav .inactive > a:hover {
color:#999999;
}
.navbar .nav > li > a.sign-in {
color:#555555;
padding-top:4px;
padding-bottom:4px;
margin-top:5px;
margin-left:30px;
}
.navbar .nav > li > a.sign-in:hover {
background-position: 0 0px;
}
.navbar .nav > li > a.active-button {
background-color: #E6E6E6;
background-image: none;
border:1px solid #cccccc;
border-radius:4px;
box-shadow: none;
cursor: pointer;
opacity: 0.6499999761581421;
outline-color: #555555;
outline-style: none;
outline-width: 0px;
text-decoration: none;
text-shadow: none;
padding-top:4px;
padding-bottom:4px;
margin-top:5px;
}
I have also tried the following (in an attempt to explicitly override anything to do with gradients from Bootstrap):
body {
color:#333334;
}
.navbar-inner {
background-image: -moz-linear-gradient(top, #F8F8F8, #F8F8F8);
background-image: -ms-linear-gradient(top, #F8F8F8, #F8F8F8);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F8F8F8), to(#F8F8F8));
background-image: -webkit-linear-gradient(top, #F8F8F8, #F8F8F8);
background-image: -o-linear-gradient(top, #F8F8F8, #F8F8F8);
background-image: linear-gradient(top, #F8F8F8, #F8F8F8);
}
.btn-navbar {
background-image: -moz-linear-gradient(top, #F8F8F8, #F8F8F8);
background-image: -ms-linear-gradient(top, #F8F8F8, #F8F8F8);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F8F8F8), to(#F8F8F8));
background-image: -webkit-linear-gradient(top, #F8F8F8, #F8F8F8);
background-image: -o-linear-gradient(top, #F8F8F8, #F8F8F8);
background-image: linear-gradient(top, #F8F8F8, #F8F8F8);
}
Yet another update
Fiddling around with the internet explorer developer tools leads me to believe the issue is this:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF333333',endColorstr='#F2222222', GradientType=0)
What is this? Do I need it? (Why does it not use the same gradients as firefox/chrome?) It comes from Bootstrap... I can try to override the colours in there because for whatever reason IE is interpreting FF333333 as that dark blue.
Turns out I was able to fix this by over-riding the default filter code generated by Bootstrap. Big thanks for Nathan and Andres! To override the code I had posted above, I added the following :
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#F8F8F8', endColorstr='#F8F8F8', GradientType=0)
Hope this saves some pain for somebody....
Andres Ilich commented on the OP:
"Try filter:none on your navbar (totally forgot about that), IE uses a
separate syntax to generate gradients. background-image is still not
supported by IE9 to create gradients."
After developing very painful forehead from smacking it numerous times on the desk, this is exactly what fixed the issue for me. Thanks Andres.
This happened to me too. But I found out that in CSS gradients, IE (even 9) doesn't seem to except just 3-character HEX codes. So you need to change the hex codes to 3-character instead if they aren't already (such as #CCC to #CCCCCC) so it'll work correctly in IE (only for the IE gradient CSS, not all of them).
If you could post your CSS I could see if there are any other problems. But, my problem was that #CCC was being interpreted as dark blue in IE.
From what i can tell you're using a solid color for your background in the top navbar, so you're only adding a background-color but not removing the background-image as well, so try to reset that too like so:
.navbar-inner {
background-color: #F8F8F8;
background-image:none;
border-bottom-color: #E0E0E0;
border-bottom-style: solid;
border-bottom-width: 1px;
color: #333334;
}
Internet Explorer is quite good at messing things up what I normally do is use a separate style sheet to fix up explore without messing up the rest of my site. Paste this line of code in your web pages:
<!--[if IE]>
<link rel="stylesheet" href="styles/fix_internet_explore.css">
<![endif]-->
and modify the css to make look better on explorer, and the good part is other browsers will ignore this style sheet.
This is much more simple:
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-submenu:hover>a,
.dropdown-submenu:focus>a,
.dropdown-menu>li.active>a
{
filter: none;
}
Really getting some unwanted behaviour from IE7 and IE8 on header and fotter vertical menu. Did this before without problem but while using Wordpress it's just not getting it right.
Here is the test site: http://examples.iamwebsitedeveloper.com/walkinmyshoes/
And here is the code used for #headerNav:
#headerNav {
display:block;
float: left;
margin: 0 auto;
width: 940px;
position: relative;
z-index:99999;
font: Verdana, sans-serif;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #894ba6;
background: -moz-linear-gradient(top, #894ba6 0%, #743a8f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#894ba6), color-stop(100%,#743a8f));
background: -webkit-linear-gradient(top, #894ba6 0%,#743a8f 100%);
background: -o-linear-gradient(top, #894ba6 0%,#743a8f 100%);
background: -ms-linear-gradient(top, #894ba6 0%,#743a8f 100%);
background: linear-gradient(top, #894ba6 0%,#743a8f 100%);
margin-bottom:20px;
behaviour:url(PIE.htc);
}
.ie7 #headerNav,.ie8 #headerNav{*display: block;*zoom:1;}
#headerNav ul{
font-size: 1.077em;
list-style:none;
margin:0;
padding:0px;
}
#headerNav li {
float: left;
position: relative;
border-right:1px solid #8B4DA7;
}
Moreover if you look at the footer segment the background color and block is not coming! Moreover the footer navigation is behaving the same way!
Using IE conditional classes as well as css3pie, I can't get it working properly.
Evan Vai,
Strange problem when i opening the debugger and closing it the css comes back. Its may be the execution of jQuery.
I am trying very hard to make this work but I can't see what is wrong. I have the following code:
<div id="ftr_btm">
<div id="ftr_ctr">
<div id="ftr_msg">
<ul>
<li>123</li>
<li></li>
</ul>
</div>
</div>
<div id="ftr_rgt">
<div id="ftr_msg">
<ul>
<li>ABC</li>
<li></li>
</ul>
</div>
</div>
</div>
and the following CSS:
#ftr_btm { height:24px; margin:0 auto; border-top: 1px solid #AAA;
background: #F6F6F6;
background: -moz-linear-gradient(top, #F6F6F6 0%, #F6F6F6 5%, #F0F0F0 6%, #F0F0F0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F6F6F6), color-stop(5%,#F6F6F6), color-stop(6%,#F0F0F0), color-stop(100%,#F0F0F0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #F6F6F6 0%,#F6F6F6 5%,#F0F0F0 6%,#F0F0F0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #F6F6F6 0%,#F6F6F6 5%,#F0F0F0 6%,#F0F0F0 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #F6F6F6 0%,#F6F6F6 5%,#F0F0F0 6%,#F0F0F0 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F6F6F6', endColorstr='#F0F0F0',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #F6F6F6 0%,#F6F6F6 5%,#F0F0F0 6%,#F0F0F0 100%); /* W3C */ }
#ftr_btm p { line-height:20px; text-align:center; margin:0px; padding:0px; color:#666; }
/* Footer Message */
#ftr_ctr {text-align: center; font-size:0.8em; }
#ftr_rgt {text-align: right; font-size:0.8em; top: 0px; position: relative;}
#ftr_msg { color:#666; display: inline-block; padding-top: 2px; height:24px; background: transparent;}
#ftr_msg ul { margin: 0; }
#ftr_msg ul li { float: left; overflow: inherit;position:relative; white-space: nobox; display:inline; line-height: 20px; }
#ftr_msg ul li a { color:#666; display:inline; padding: 0 10px; white-space: nobox; text-decoration: none; }
#ftr_msg ul li a:hover { color:#3985d4;}
The problem is that 123 and ABC are both supposed to appear within the footer. When I run it with this fiddle then you can see ABC is BELOW the footer. Can anyone see what I am doing wrong. I checked many times and still cannot see what's wrong.
Guessing your intent from what you have so far..
On #ftr_rgt, you need to set position to absolute, instead of relative.
On the parent of #ftr_rgt (which is #ftr_btm, you need to set position: relative.
Lastly, you need to add right: 0 to #ftr_rgt. You already have top: 0.
See: http://jsfiddle.net/a4Gar/1/
If you're trying to use relative/absolute positioning, you need to get your head around how it works:
http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/
Lastly, I think that you could accomplish this layout in a simpler way with floats.
Here's your problem - block-level elements like divs will not appear next to each other unless you change the way they're displayed. Currently, #ftr_ctr is taking up the entire footer, and #ftr_rgt is appearing below it.
There are a couple ways to move #ftr_rgt up. Since it has position:relative;, you can give it a top:-20px; to slide it up. The downside it that it'll still reserve white space for itself below the footer.
You can make both #ftr_ctr and #ftr_rgt float:left;, and put a <div style="clear:both;"></div> after them. You'll need to adjust the widths of each of them to get them to line up right, though.
You can set both of them to have display:inline-block;
You may even be able to get away with just using display:inline as well.
#ftr_rgt {
text-align: right;
font-size:0.8em;
position: absolute;
top: 0px;
right: 0px
}
<div id="ftr_btm">
<div id="ftr_ctr">
<div id="ftr_msg">
<ul>
</ul>
</div>
</div>
<div id="ftr_rgt">
<div id="ftr_msg">
<ul>
<li>123</li>
<li></li>
<li>ABC</li>
<li></li>
</ul>
</div>
</div>
</div>
This might be what you are looking for, but I do not know exactly how you want the text formatted.
Kind of come up a against a weird problem...
Here is my css for a button:
a.cta-btn-green {
color:#fff !important;
font-size:14px !important;
font-weight:bold;
text-shadow: #060 1px 1px 1px;
background-color:#329122;
padding:5px 10px;
-moz-border-radius:14px;
-webkit-border-radius:14px;
text-decoration:none;
float:right;
border:0;
font-family:Arial, Helvetica, sans-serif;
cursor:pointer;
background: -moz-linear-gradient(100% 100% 90deg, #307d23, #4ac236);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4ac236), to(#307d23));
}
input.cta-btn-green {
color:#fff !important;
font-size:14px !important;
font-weight:bold;
text-shadow: #060 1px 1px 1px;
background-color:#329122;
padding:5px 10px;
-moz-border-radius:14px;
-webkit-border-radius:14px;
text-decoration:none;
float:right;
border:0;
font-family:Arial, Helvetica, sans-serif;
cursor:pointer;
background: -moz-linear-gradient(100% 100% 90deg, #307d23, #4ac236);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4ac236), to(#307d23));
}
Both CSS classes are the same, but one is applied to <a> and the other is applied to <input type="submit" /> ...The effect is that Firefox is giving the input.cta-btn-green greater height than a.cta-btn-green ?
Can anyone tell me where I'm going wrong?
Thanks
if you tell your a and input to display:block then you will be able to set specific heights and thus make them the same.
so add the following lines to both rules:
display:block;
height:20px; /*adjust this as needed*/
Try explicitly setting the height and line-height for each rule.
I think that it's because you're just setting the font height - the <input> element afaik also has the typical button-border which the <a> element doesn't have.