On my website, the titles above the thumbnails do not show in any version of IE.
As usual everything works fine in every other modern browser.
the html for a thumbnail is
<div id="s1" class="stumb">
<p>Emily Cotton</p>
<img alt="Emily Cotton" src="img/thumbs/ect.jpg">
</div>
the css is
p
{
margin:-20px 0px 0px 0px;
font: 11px OpenSansRegular, Arial ;
background: rgb(235,235,235);
text-align: left;
padding:0px 2px 0px 2px;
}
and
.stumb
{
margin:-20px 0px 0px 0px;
font: 11px OpenSansRegular, Arial ;
background: rgb(235,235,235);
text-align: left;
padding:0px 2px 0px 2px;
}
I tried alternative css, removing the negative margins but this did not work. Besides IE should be able to deal with these negative values anyway. I'm at a point where i am going mad with all the alternative versions floating around, all of them still not showing in IE. My conclusion is that the solution must be so simple that i am blind too it.
Related
I am having a problem with getting multiple spans to lay on top of a few divs within a WordPress post of mine correctly.
I created my own dummy webpage within Notepad++ with all the styling and things to make sure it looked how I wanted, and it looks fine. However, when I then go and put all of the HTML structure and the CSS into my WordPress site, then it doesn't look quite right.
The HTML content is the following:
<div class="member-status">MEMBER
<span class="level-dot">•</span>
</div>
<br /><br />
<div class="silver-status">
<span class="big-checkmark">✔</span>SILVER<span class="level-dot">••</span>
</div>
<br /><br />
<div class="gold-status">GOLD
<span class="level-dot">•••</span>
</div>
And the CSS to back it is this:
.member-status {
position:relative;
width:200px;
color:#fff;
display:block;
margin:0 auto;
border-radius:5px;
border:1px solid #5cadff;
text-align:center;
font-family: sans-serif;
font-weight: bold;
text-shadow: 0px 1px 1px #5cadff;
padding:20px 30px;
background:#1874cd;
background-image: -webkit-linear-gradient(#4f9eea, #1874cd);
background-image: -moz-linear-gradient(#4f9eea, #1874cd);
background-image: linear-gradient(#4f9eea, #1874cd);
-webkit-box-shadow: 10px 10px 5px #777;
-moz-box-shadow: 10px 10px 5px #777;
box-shadow: 10px 10px 5px #777;
}
.silver-status {
position:relative;
width:200px;
color:#555;
display:block;
margin:0 auto;
border-radius:5px;
border:1px solid #bbb;
text-align:center;
font-family: sans-serif;
font-weight: bold;
text-shadow: 0px 1px 1px #bbb;
padding:20px 30px;
background:#c0c0c0;
background-image: -webkit-linear-gradient(#eaeaea, #c0c0c0);
background-image: -moz-linear-gradient(#eaeaea, #c0c0c0);
background-image: linear-gradient(#eaeaea, #c0c0c0);
-webkit-box-shadow: 10px 10px 5px #777;
-moz-box-shadow: 10px 10px 5px #777;
box-shadow: 10px 10px 5px #777;
}
.gold-status {
position:relative;
width:200px;
color:#e68a00;
display:block;
margin:0 auto;
border-radius:5px;
border:1px solid #ffff80;
text-align:center;
font-family: sans-serif;
font-weight: bold;
text-shadow: 0px 1px 1px #ffff80;
padding:20px 30px;
background:#ffd700;
background-image: -webkit-linear-gradient(#fff2aa, #ffd700);
background-image: -moz-linear-gradient(#fff2aa, #ffd700);
background-image: linear-gradient(#fff2aa, #ffd700);
-webkit-box-shadow: 10px 10px 5px #777;
-moz-box-shadow: 10px 10px 5px #777;
box-shadow: 10px 10px 5px #777;
}
.big-checkmark {
position:absolute;
top:7px;
left:12px;
color:#3c3;
font-size:2.5em;
}
.level-dot {
position:absolute;
top:7px;
right:15px;
font-size:2.5em;
}
You can see the end result on JSFiddle here: http://jsfiddle.net/WcQbL/1/
Here's the thing... on Chrome this looks perfect to me. The big-checkmark and level-dot spans look perfectly placed where I want them.
In Firefox and IE11, the level-dots look like they are positioned well, but the big-checkmark is positioned way down from the center on Firefox, and slightly down from center on IE11. I am pushing both the spans down the exact same way using top:7px;
Now... I went and plugged in this same HTML structure into a test post of mine on WordPress, and I added all the appropriate CSS to my child theme's style.css file.
However, when I go to the post, both the level-dots and the big-checkmark are positioned way up high on all 3 of the divs and it looks really bad.
So, my question is... is there a better way I can go about positioning these spans on top of these divs so that it is consistent among all browsers? And is there maybe some CSS in my parent style.css that would be affecting the spans being way up high once I plug the SAME exact code into my WordPress post?
Any help would be greatly appreciated. This is my first time working with spans on top of divs, so I apologize if the CSS code is not-so-great.
One more note, I originally had posted this on the "WordPress Development" Stack Exchange, but they told me to come here. I feel like it may just be purely a markup issue that will get it to work on all browsers including my Wordpress site, but maybe it is WordPress specific.
Thanks!
I figured out the solution to my problem. In the old code, I was letting the padding on my divs more or less do the "sizing" of the div for me and give it the look that I wanted. In the old code, I had only specified a width on my divs, no height.
In the fix, I specified my own height and width (width:275px and height:70px). Then, in order to get text or other things to center correctly within a div you should specify the "line-height" property as well so I set line-height:70px to match my regular height. Then, took all of the padding out (padding:0).
As a specific example, the "member-status" class now looks like this:
.member-status {
position:relative;
height:70px;
line-height:70px;
width:275px;
color:#fff;
display:block;
margin:0 auto;
border-radius:5px;
border:1px solid #5cadff;
text-align:center;
font-family: sans-serif;
font-weight: bold;
text-shadow: 0px 1px 1px #5cadff;
padding: 0;
background:#1874cd;
background-image: -webkit-linear-gradient(#4f9eea, #1874cd);
background-image: -moz-linear-gradient(#4f9eea, #1874cd);
background-image: linear-gradient(#4f9eea, #1874cd);
-webkit-box-shadow: 10px 10px 5px #777;
-moz-box-shadow: 10px 10px 5px #777;
box-shadow: 10px 10px 5px #777;
}
Lastly, I was forcing the "big checkmark" and "level-dot" to be in a specific position. I took the "top:7px" property out because that was pushing it down too far now with my changes, but left the "left" and "right" properties on there to get them spaced away from the left and right borders where I wanted them.
You can see the new code at: New fixed way
And the old code at: Old wrong way
If you look at the new code in all the different browsers, it looks the exact same now and exactly how I want it -- no differences between each browser.
Hope this helps someone!
I was trying to make a simple help button using "A" anchor tag. The thing is it works perfectly on Firefox, Chrome, OP, Safari. Now when I tried it on Internet Explorer 10, The text wasn't properly aligned in the middle. here is what I've done so far:
HTML
<a id="help-btn"><span>?</span></a>
CSS
#help-btn {
display: table;
margin-left: auto;
margin-right: auto;
border: solid 5px #2F2F2F;
width: 10em;
height: 10em;
text-align:center;
background: #c100ff;
text-decoration: none;
vertical-align: middle;
}
#help-btn span {
color: #22002D;
font: 10em "bauhaus 93";
text-shadow: 0px 0px 5px #fff;
line-height: 100%;
}
here is a jsfiddle sample. any help would be appreciated...
so I've finally found the solution after 3 hours of digging deep, as stupid as may it sounds but the extra space was being added by the font "bauhaus 93". It renders correctly on all browsers except IE (that's a shocker). So I had to change it to another font and now it works perfectly. so if anyone face the same problem please do check the font that you are using.
play with your line-height.
Try this :
#help-btn span {
color: #22002D;
font: 10em "bauhaus 93";
text-shadow: 0px 0px 5px #fff;
line-height: 10em; // CHANGE YOUR LINE-HEIGHT SIZE
}
if the problem not fixed, try add display:block; to your #help-btn span
You need to add the line-height attribute and that attribute must match the height of the div. In your case:
Try
#help-btn span {
color: #22002D;
font: 3em "bauhaus 93";
text-shadow: 0px 0px 5px #fff;
height: 3em;
line-height: 3em;
}
i have a div which has a ribbon background image to it. I'm wanting to position my div with the ribbon backgrounnd over another div (div 2) so it looks like the ribbon is wrapped around the 2nd div.
Now this works fine in Chrome and safari and i have had to use assitional css settings for firefox but IE and Opera both display my ribbon div about 25px higher than in chrome or safari.
Im not sure why this is and i cant seem to get it not to do positon right ( i need to move it down about 25px somehow only in these two browsers)
(div 1)
<div class="side-ribbon4"><img src="assets/img/sidebar/1.png" width="118" height="118" /></div>
div 1 css:
.side-ribbon4 {
width:28px;
height:21px;
margin-left:111px;
padding-right:0px;
float:right;
text-align:center;
margin-top:2273px;
position:absolute;
z-index:30;
}
im placing it on top of this div (div 2)
div 2 css:
.categories-box2 {
width: 200px;
float: left;
border:solid;
border: 1px solid #cccccc;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
behavior: url(border-radius.htc);
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
margin-bottom: 30px;
margin-top:10px;
margin-left: 20px;
text-align: center;
background-color: #FFF;
/* [disabled]margin-left: 30px; */
overflow: hidden;
padding-top: 20px;
padding-bottom: 20px;
position:relative;
}
http://jsfiddle.net/ZnRSm/3/
.side-ribbon4 {position: relative;}
.categories-box2 {position: absolute;}
<div class="side-ribbon4">
<img src="http://placehold.it/118x118" width="118" height="118" />
<div class="categories-box2"> </div>
</div>
You'll want to do some study of CSS positioning and why it usually shouldn't be combined with floats. For one thing, absolutely-positioned elements are typically placed inside (and therefore relative to) relatively-positioned elements.
One other hint is that if you're having this type of problem, where browsers are rendering your layout differently, it probably means you have a bad layout. IE9+, Firefox, Chrome, and Safari are all quite standards-compliant and should show you nearly identical results.
Since you're new to SO I'll remind you to kindly select an answer, if one is provided, by clicking the checkmark.
My new site is not been displayed how it should be in internet explorer, in some parts of the site internet explorer dose not seem to be reading the css at all!
here is the css that ie is not reading can someone tell me what is wrong with it? or what i need to change to make it work in ie.
#reg_area {
border: 2px solid #ffffff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-moz-box-shadow: 2px 3px 3px #cccccc;
-webkit-box-shadow: 2px 3px 3px #cccccc;
background-color:#79af11;
background-image: -moz-linear-gradient(#b2d545,#79af11);
background-image: -webkit-gradient(linear, 0 0, 0 100%,color-stop(0, #b2d545),color-stop(1, #79af11));
text-align:center;
height:35px;
padding:10px;
font-family: Tw_Cen_MT_Condensed;
color: #DAF7A4;
font-size: 25px;
text-shadow: 2px 2px 2px #2c4006;
}
#reg_area a:link {
font-family: Tw_Cen_MT_Condensed;
font-size: 45px;
color:#ffffff;
text-decoration:none;
}
#reg_area a:visited {
color:#ffffff;
}
#reg_area a:hover {
color:#D8F170;
}
Tw_Cen_MT_Condensed is not a web-safe font, hence won't be read.
You have your gradient set up as background-image, not background
Shadows don't work in IE
Your Box Radius and Gradients point to Webkit browsers and Firefox, not IE.
Have you even looked into how to make stuff work in IE? Hint: Try to search for workarounds and what is missing for each issue you have on IE.
Every line with -moz-
like -moz-border-radius: 15px;
will work only for mozilla (firefox)
It's probably the same with webkit.
I got a problem rendering box-shadows over floating divs!
Ive tested in chrome and firefox with the same result.
<html>
<head>
</head>
<body>
<div style="float:left; clear: left; background-color: #aaa; -moz-box-shadow: 0px 8px 8px #000; width: 200px; height: 200px;">
</div>
<div style="float:left; clear: left; background-color: #aaa; -moz-box-shadow: 0px 8px 8px #000; width: 200px; height: 200px;">
</div>
</body>
</html>
Edit: The div on top doesn't render its shadow on the div below, is there any fix for this problem or do I have to try a different solution?
regards
/Joel
Works for me in Firefox 4, but that code will never work on chrome or safari, the -moz is a vendor tag indicating mozilla.
You need add all of the following
-moz-box-shadow: 0px 8px 8px #000; width: 200px;
-webkit-box-shadow: 0px 8px 8px #000; width: 200px;
box-shadow: 0px 8px 8px #000; width: 200px;
-webkit is the vendor tag for Chrome/Safari, the following will add in drop shadows for the vendors that support it and then when it's universally supported the last rule will cover all browsers.
Edit: To get the top div's dropshadow over the other element you must position:relative and then give it a z-index higher than the bottom one.
What's wrong with them? If you're worried about not seeing the bottom shadow of the top div it's because you need a little separation. If you're having trouble seeing the box-shadow it's because you need to use vendor-specific prefixes at this stage, like so.
Demo: jsfiddle.net/q5yf3
If you want them to be stuck together, just give the first div a z-index with position:relative and it will look how you want it to.
HTML:
<div class="bs up"></div>
<div class="bs"></div>
CSS:
div.bs {
float:left;
clear:left;
margin:1em;
width:200px;
height:200px;
background:#aaa;
box-shadow:0 8px 8px #000;
-moz-box-shadow:0 8px 8px #000;
-webkit-box-shadow:0 8px 8px #000;
}
div.up { z-index:10; position:relative; }
Demo: jsfiddle.net/VaVhy
That said, I'd also recommend looking into using rgba() instead of hex values for box-shadow color as it renders the shadow a lot more naturally on non flat-colored backgrounds.
looks fine in firefox because you are using -moz-box-shadow, for webkit browsers you will have to use -webkit-box-shadow