I'm attempting to customize a WordPress theme.
Starting theme: http://elegantthemes.com/preview/Nexus/
I've gotten nearly where I want to in Chrome:
https://dl.dropboxusercontent.com/u/20040939/HeaderChrome.png
In Firefox, the images in the header are not lining up:
https://dl.dropboxusercontent.com/u/20040939/HeaderFF.png
In both browsers, there is an annoying border/shadow at the top of the page (see highlight area in Chrome screenshot above).
Live site is here:
http://makeminepop.com/
Any assistance is appreciated.
The "annoying shadow" is coming from the social links that you are not currently using on line 109 of style.css:
#et-social-icons {
/* float: right; */
/* width: 245px; */
background-color: #f6f6f6;
-moz-box-shadow: inset 0 1px 0 #fff;
-webkit-box-shadow: inset 0 1px 0 #fff;
box-shadow: inset 0 1px 0 #fff, -1px 0 0 #fff;
position: relative;
}
Update:
I believe it is the nav element that is throwing off the image alignment. Try editing the following on line 104 of style.css
#top-navigation nav {
overflow:hidden; <-- add this
float: none; <-- modify this
}
this shadow was generated from #et-social-icons class. Just set the display:none to this class.
You can find the class in line:109 of the following css file.
http://makeminepop.com/wp-content/themes/Nexus/style.css?ver=4.3
Hope this help.
Related
I am currently updating/working on this web page "https://www.emergencydentalservice.com/emergency-dentist-by-city" and their is an unwanted box shadow appearing in the body that I can not determine from where or why. On top of the unwanted shadow the site also seems to break after 768px and I can't figure out why. Any help would be greatly appreciated, thank you all. Image of the site breaking after 768px
You have a box shadow set to #inside-main on eds_main.css.
#inside-main {
width: 100%;
background: #fff;
margin: 0 auto;
box-shadow: 1px -2px 4px #666;
-webkit-box-shadow: 1px -2px 4px #666;
-moz-box-shadow: 1px -2px 4px #666;
-o-box-shadow: 1px -2px 4px #666;
}
becomes
#inside-main {
width: 100%;
background: #fff;
margin: 0 auto;
}
As for the layout breaking, you have #foot-de-eds, #foot-top-cites on eds_main.css set to:
#foot-de-eds, #foot-top-cites {
margin: 1.3em auto;
width: 100%;
max-width: 1028px;
padding-left: 2em;
}
Try removing the max-width: 1028px; - so:
#foot-de-eds, #foot-top-cites {
margin: 1.3em auto;
width: 100%;
padding-left: 2em;
}
For the shadow issue:
#inside-main still has a box-shadow property on it from eds_main.css.
Though you didn't really specify which shadows you do and don't want... as there are multiple on the page.
Inspect Element / Dev Tools is your friend. Makes it easy to hunt down properties you may be overlooking.
on <div class="phone-wrap">
remove
background: url(/eds_siteIMGS/phoneBG_seperated.png) repeat-x;
The image have shadow
I have added a webkit-scrollbar to my Jekyll blog. I am using this code in my css:
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
height: 5px;
}
::-webkit-scrollbar-thumb {
border-radius: 2px;
background-color: rgba(253,206,147,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
It works great but on iOS Safari there appears to be a very thin line left behind the scroll bar. Here is the original view:
Now look to the left of the scroll bar, and you can see a very thin line the same width as the actual scroll bar:
Why is this happening? Is there a way to fix it? Any suggestions would be great!
Nothing more than a rendering artifact from your:
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
Shadow enabled:
Shadow disabled:
So, my website has a header and a div containing Revolution Slider immediately after it. I'm trying to add a box-shadow below the header - and above the slider. But it doesn't work, unless I also add margin-bottom to the header - but that renders the whole exercise moot.
This is the code:
#header {
display:block;
min-height: 99px;
background: #FFFFFF;
border-top: 3px solid #8dddcd;
border-bottom: 1px solid #ecf0f1;
line-height: 99px;
box-shadow: 0 10px 10px 10px rgba(0,0,0,0.3);
}
#rev {
position: relative;
}
<div id="header"></div>
<div id="rev">the slider</div>
Could someone help me figure out what's causing this?
See the following questions:
Does css border-shadow add to an element's size
Is css box-shadow part of element's box model?
According to the box-shadow spec:
An outer box-shadow casts a shadow as if the border-box of the element were opaque. The shadow is drawn outside the border edge only
So if you don't want overlap, you'll have to add the margin youself
#header {
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.3);
margin-bottom: 10px;
}
#slider {
position: relative;
}
<div id="header">Header</div>
<div id="slider">Slider</div>
Actually, the issue turned out to be related to z-index properties of the different divs. With some tweaking I managed to get it all sorted out without using any margin.
Anyway, thank you all for your time and help!
If you need as you say the box-shadow below the header only and above the slider you can use minus in the last number in box shadow as the following:
box-shadow: 0 10px 10px -10px rgba(0,0,0,0.3);
This will make the box-shadow appear only at the bottom.
Working example:
#header {
display:block;
min-height: 99px;
background: #FFFFFF;
border-top: 3px solid #8dddcd;
border-bottom: 1px solid #ecf0f1;
line-height: 99px;
box-shadow: 0 10px 10px -10px rgba(0,0,0,0.3);
}
#rev {
position: relative;
}
<div id="header"></div>
<div id="rev">the slider</div>
When you use the default rendering mode for box-shadow(outer shadow), you need to add a margin in that direction(10px on y-axis in your example) so the overflowed box content will be visible.
If you want to display your box shadow inside the header, just add the keyword inset to your declaration.
I am facing a CSS issue in IE 10 (Document Mode : IE 7 Standard). I am getting multiple border in my dropdown list while setting background color. As shown in screen shot :
Extra border is coming on top and left. I have already tried border:none, border:0, outline:none, outline:0, border:transparent etc. but none of them works for me.
Edit : I am facing this issue only when I am adding background-color to dropdown list.
OK, I got the solution for removing border. According to this Link add span as a wrapper and after some CSS manipulation things are working fine for me.
Here what I did in my code :
span.dropdown {
float: left;
overflow: hidden;
border: 1px solid #ccc;
height:20px;
}
select {
background: none;
border: none;
color: #575652;
float: left;
outline: none;
text-align: left;
text-decoration: none;
padding:6px 2px 6px 2px!important;
display:block;height:23px;
}
span.dropdown select {
margin: -2px -3px -3px -2px ;
}
and in HTML :
<span class="dropdown">
...
//dropdown code
...
</span>
Unfortunately IE10 doesn't let you remove the border on a dropdown menu.
Edit:
Untested but try style="border-style:none;
also untested, try border: none !important;
I have a site I'm working on using the Sinatra framework and I've uploaded it to Heroku. On Firefox, I'm able to see the page and all of it's contents but on Chrome the color for all text, borders, etc. is white. Why is it doing this and how do I fix it? Note that I'm also using Zurb foundation for the HTML framework and Sinatra for the backend.
Below is my CSS page.
/* LAYOUT */
/*========*/
.the-page {
-webkit-box-shadow: 4px 2px rgba(0,0,0,.1), -4px 0 2px rgba(0,0,0,.1);
-moz-box-shadow: 4px 0 2px rgba(0,0,0,.1), -4px 0 2px rgba(0,0,0,.1);
box-shadow: 4px 0 2px rgba(0,0,0,.1), -4px 0 2px rgba(0,0,0,.1);
}
/* MISC */
/*======*/
.center {text-align: center;}
.brown {color: #653000;}
.green {color: #003218;}
a{color: #653000;}
a:hover {color: #003218;}
.size20 { font-size: 20px;}
/* Prevent MOZ border outline */
:focus {outline:none;}
::-moz-focus-inner {border:0;}
/* FOOTER */
/* ====== */
html, body {
height: 100%;
color: #653000;
}
.body-wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -65px;
}
.footer, .push {
height: 65px;
}
.footer {
color: black;
}
I've tested with Chrome 24 here and looked at the applied CSS rules in the Developer Tools. By removing the row class from the <html> tag, I was able to see your website in Chrome.
The following rule appears to be the source of at least some of your trouble.
.row:before,.row:after{content:" ";display:table}
Chrome doesn't like the display:table rule applied to the <html> tag at all.