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.
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
Hey is it possible to make scrollbar "hidden" i dont wanna use overflow-y: hidden
just something like background: transparent or something like that
Here you will find a description how to hide the scrollbar just with CSS.
And here in the second example you will find a solution how to hide the scrollbar within a div for example.
The trick in the second example is to define a wider div container that the surrounding one.
.hidden-scrollbar .inner {
height:200px;
overflow:auto;
margin:15px -300px 15px 15px;
padding-right:300px;
}
Just play arround with the values of margin and padding.
There is a CSS rule that can hide scrollbars in Webkit-based browsers (Chrome and Safari). That rule is:
.element::-webkit-scrollbar { width: 0 !important }
u can change width / background-color and other properties .
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
}
this css code might work
In Webkit browsers:
::-webkit-scrollbar {
display: none;
}
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.
<div id="specials">
<h2>We have HOT DEALS with unbelievable prices! | We have Pre-Owned boats!</h2>
<style>
#specials {
width:695px;
float:left;
padding: 0 10px;
height:38px;
margin:7px auto 10px 13px;
background:#BAD6E3;
border:2px solid #005C8A;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: 0px 0px 4px #dbdbdb; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 0px 0px 4px #dbdbdb; /* FF3.5 - 3.6 */
box-shadow: 0px 0px 4px #dbdbdb; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
}
#specials:hover {
width:695px;
float:left;
padding:0 10px;
height:40px;
margin:5px auto 10px 13px;
background:#005C8A;
border:2px solid #005C8A;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: 0px 0px 4px #dbdbdb; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 0px 0px 4px #dbdbdb; /* FF3.5 - 3.6 */
box-shadow: 0px 0px 4px #dbdbdb; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
}
#specials h2 {float:left; margin-top:8px; color:#005C8A; padding-left: 10px;}
#specials h2 span {text-decoration:underline;}
#specials h2 a {color:#005C8A; text-decoration:none; font-size:20px;}
#specials h2 a span {color:#005C8A;}
#specials h2 a:hover {color:#fff;}
</style>
</div>
Well, the :hover is applied to the containing <div> element, not the individual <a> elements, which is what you'll need to do in order to show the hover effect on only that portion of the button.
I've created a fiddle to show how you might do it: http://jsfiddle.net/TJG8G/
EDIT
What I did...
Best bet would be to diff your original CSS and mine but the main points are:
No :hover styles on the container. Apply the :hover CSS from the container to the <a> elements instead.
Set the <a> elements to display: inline-block
Muck about with the padding and line-height <a> elements and remove the padding on the h2.
Adjust the border radius rules on the individual A elements (so that the left A only has a curve on the left and the right A has the curve on the right.) This also required adding a class to the second a.
If I understand your issue correctly, you want the blue background to only show up on the link you're hovering over.
In that case, a simple solution that may work for you is to move the background color from the container hover to the link hover.
Example Fiddle
CSS:
#specials:hover {
// existing styles
// background:#005C8A; <- remove this
}
#specials h2 a:hover {
color:#fff;
background:#005C8A; // <- add it back here.
}
I have the following selector in a Wordpress CSS theme that I've been advised not to edit by the theme creators:
.entry img, img.thumbnail {
margin-bottom: 10px;
padding: 2px;
border: 1px solid #DDD;
background: white;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
So I added this in an auxiliary CSS to attempt to 'cancel' out the above CSS selector's effects:
.entry img, img.thumbnail {
margin-bottom: 0px;
padding: 0px;
border: 0px;
background: #fff;
-moz-box-shadow: 0;
-webkit-box-shadow: 0;
box-shadow: 0;
}
However, it doesn't seem to change anything. I'm not sure what I need to edit in the above snippet.
The border I'm trying to get rid of does disappear when I manually uncheck the following options in Google Chromes inspector:
-moz-box-shadow
-webkit-box-shadow
box-shadow
I !important to every CSS Rule or you can add wraper div and use it in css.
Like
HTML
<div id="wraper_div">
<div class="your_class"></div>
</div>
CSS:
#wraper_div .your_class{
/*CSS PROPERTY*/
}
If you inspect the element in for instance Chrome, does your rule apply after the default one?
If so, you could try adding !important to it to override.
.entry img, img.thumbnail {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
1st
Shadows should be set to none
2.
background should be reset without short hand because IE has problems with resetting by shorthand
try
background-color:#fff
instead of
background:#fff
3.
There is something called "specifity".
Youre code has the same specifity as the code it overrides, so it needs to be below the code it overrides, or have higher specifity.
Try target the code with one more selector:
.entry img, img.thumbnail
Higher specifity:
body .entry img, body img.thumbnail
Specifity means "authority" of a css rule. Different selectors have different "weight".
IDs have a weight of 100, classes 10, element selectors 1.
.entry img, img.thumbnail
Has 11 for the first statement and 10 for the second. Add body in front of both to give them +1 specifity, so they override the old code.
5.
If you care to support older IEs, loose the img.thumbnail, it can cause problems in IE, replace with .thumbnail only. You may do this if there are no other elements with the class .thumbnail then img elements.
Hope that helps.
Using none instead 0 fixes the issue. Order of CSS styles also matters, make sure to put these styles at the bottom of your CSS.
Working DEMO
.entry img, img.thumbnail {
margin-bottom: 0px;
padding: 0px;
border: 0px;
background: #fff;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}