I'm working on a website for a client and I have 3 boxes that go across horizontally near the bottom of the home page. Reading New Sermons, Tidbits, and Prayer Requests. For some reason the text that I have spanning across the boxes(images) does not want to follow my property and rule of the display:block. I've tried the \9 and the *display:block; to see if those work but it's not. Any other suggestions?
The website is http://lordjesuschurchofgod.com
Here is the code that is giving me trouble
body.home .notices .title {
position: relative;
top: -85px;
display: block;
text-align: center;
color: #fff;
text-shadow: 2px 2px 2px #666;
font-weight: bold;
overflow:hidden;
}
Related
I'm having an issue with css in Internet Explorer, however it is only showing when i'm testing in Browserstack. It shows on all versions of IE that I test on with Windows 7. On my PC it appears fine with my version of IE and when I change the browser mode from within. I'm not sure if it's a quirk or Browserstack or an IE issue that i'm missing.
The area concerned has 2 paragraph tags, 1 floated left the other right, both width 45%, display block, overflow hidden. Each has an anchor tag inside display block, with a background color and border on. The second link is like it's mirroring itself, looks really odd and i can't find anything on this, anyone seen this before and know how to fix? Or is it a Browserstack quirk?
Screenshot of what's happening here
Thanks!
edit, added code:
<style>
a.button {
background: #c10075;
-webkit-background-clip: padding-box;
color: white;
display: inline-block;
padding: 15px 0;
border-radius: 4px;
border: 2px solid #c10075;
border-bottom: 2px solid #8e0056;
border-right: 2px solid #8e0056;
text-transform: uppercase;
text-align: center;
font-family: Rokkitt, serif, Arial, Helvetica, sans-serif;
font-size: 28px;
display: block;
}
a.button:hover {
background: #8e0056;
border: 2px solid #8e0056;
color: white;
}
.cta-buttons p{
width: 45%;
float: left;
}
.cta-buttons p.last{
float: right;
}
</style>
<div class="container cta-buttons">
<p>
Apply now
</p>
<p class="last">
Book your visit
</p>
</div><!-- .cta-buttons -->
I have a styled sentence with dynamic text. Sometimes the text is too long, and pushes the anchor at the end outside its box. I want the text to wrap after the span.price-difference, but the anchor button to be positioned against the right side of the p.
I added an :after pseudo element to .price-difference. I've got it set content: '' and display: block. Works in FF, Chrome, IE (including IE8, which I have to support), but not Safari.
There is an easy answer, wrapping the text following .price-difference with another span, and set it to block, but changing the HTML is a hassle, requiring a backend developer to make changes to a JSP file, and I'm hoping to avoid that. Looking for a CSS only solution, if it exists.
<p class="upsell"> Upgrade To
<span class="stateroom-upgrade"> Concierge Class </span>
for an additional
<span class="price-difference">$7.14 USD </span>
per person per day
<span>View Upgrades</span>
</p>
The CSS
.upsell {
background: none repeat scroll 0px 0px #FAFAFA;
border-top: 2px dashed #E8E8E8;
color: #666;
display: block;
font-size: 11.5px;
font-weight: 600;
margin: auto 19px 5px;
padding: 8px 0px 8px 8px;
position: relative;
text-transform: none;
white-space: nowrap;
width: 560px;
}
.upsell .price-difference {
color: #0C82C4;
font-size: 15px;
font-weight: 700;
margin-left: 5px;
display: inline-block;
}
.stateroom .upsell .price-difference::after {
content: "";
display: block;
}
.upsell .ccButtonNew {
position: absolute;
right: 10px;
top: 17px;
}
The p element has white-space: nowrap set on it, but when I turn it off, the problem doesn't go away.
I think it's related to the following link, but my situation isn't the same. In that question, the asker put a block level element div inside a p, which only takes inline elements. I have an inline element, span, inside the p. This should work.
:after pseudo-element working in FF, but not Safari or Chrome
.stateroom .upsell .price-difference:after {
content: "";
display: block;
position: absolute;
width: 30px;
border-top: 1px solid #000; /* placeholder border */
}
try adding a position to the after's css rules. i had a similar situation in which the after pseudo wouldn't display in old versions of safari but worked properly in all other browsers. I fixed adding a position rule to the css.
Hope this hepls.
I styled some CSS buttons, and they look great, but when I open the page on mobile, they look bad and don't use the defined styles. How does one typically maintain the styling of buttons in CSS across all devices?
Here's my code for the buttons that looked good in the browser:
input[type="button"]
{
width: 416px;
border: none;
color: #fff;
font-size: 1em;
padding: .5em;
margin: 5px 0 5px 0;
border-radius: 3px;
font-weight: bold;
line-height: 40px;
background: #00aeff;
}
input[type="button"]:hover
{
background: #00a0db;
}
But this is what it actually looked like on different pages on mobile.
There is no magic bullet. Make sure that your styles have proper platform-specific directives (ie -webkit-) and, most importantly, are supported on the platforms that are acting up.
The issue with the font-size..Try setting px value for the font..it should be Ok..
like
input[type="button"]
{
font-size:14px;
}
This is my site:
http://www.michelepierri.it/
I correctly see my theme in FF and IE but if I open it in Chrome menu voice are not correctly visualized:
Can you help me to resolve this problem?
After reviewing your css, I found too many unused styling please remove those and use these rules:
.menu li {
float: left;
}
.menu a {
white-space: nowrap;
border-left: 1px solid #585858;
color: #fff;
display: inline-block;
font-size: 13px;
font-weight: 700;
height: 45px;
line-height: 45px;
padding: 0 0.9em;
text-shadow: 0 1px 1px #242424;
}
Please see the attachment after doing that changes.
See I am also using the same version and for me its fine
Prevent menu options from wrapping text
Add an additional style rule to your menu links CSS so all text stays in the same line.
.menu a {
border-left: 1px solid #585858;
color: #fff;
display: block;
font-size: 13px;
font-weight: 700;
height: 45px;
line-height: 45px;
margin: 0;
padding: 0 0.9em;
position: relative;
text-decoration: none;
text-shadow: 0 1px 1px #242424;
white-space: nowrap; /* THIS ONE */
}
And add the same thing to .sub-header-menu a style definition because when I check the site even Cloud Computing is wrapped and breaks the whole situation.
Advice: It is ok that you're exploring the possibilities of CSS but you're playing a bit too much with it producing legibility problems. Letter and word spacing should only be cautiously manipulated. I'd suggest to remove majority of letter and word spacing settings.
I am currently trying to wrap my brain around a problem, but i can't seem to grasp it.
In an unordered list for a navigation, i want to add an icon before every list item via css before pseudo class.
<ul class="list">
<li class="list-item">one</li>
<li class="list-item">two</li>
<li class="list-item">three</li>
<li class="list-item">four</li>
</ul>
My first thought was to give both elements (the icon and the a-tag) display:inline-block and align the icon with vertical-align:middle. With just little adjustments (margin-bottom), this works well in chrome:
.list-item {
display: block;
font-weight: bold;
text-transform: uppercase;
margin: 10px 0;
padding-bottom: 10px;
border-bottom: 1px solid #F3F3F3;
height:1.5em;
overflow:hidden;
}
.list-item:before {
display: inline-block;
content: '';
vertical-align: middle;
background-color: red;
width: 5px;
height: 7px;
margin: 0 4px 0.125em 5px;
}
.list-item a {
display: inline-block;
overflow: hidden;
line-height: 1.5;
height:1.5em;
}
But when you load the page in firefox, the icon is way off at the bottom. http://jsfiddle.net/pUhPB/4/
I tried what seems to me every possible combination of display, vertical-align and margin-values to get it right in both browsers, and finally, if i give the a-tag vertical-align:middle and the icon vertical-align:baseline, it seems to work:
.list-item {
display: block;
font-weight: bold;
text-transform: uppercase;
margin: 10px 0;
padding-bottom: 10px;
border-bottom: 1px solid #F3F3F3;
height:1.5em;
overflow:hidden;
}
.list-item:before {
display: inline-block;
content: '';
vertical-align: baseline;
background-color: red;
width: 5px;
height: 7px;
margin: 0 4px 0 5px;
}
.list-item a {
display: inline-block;
vertical-align:middle;
overflow: hidden;
line-height: 1.5;
height:1.5em;
}
http://jsfiddle.net/L3N3f/
But i just don't get it. Why does the first version not work? To me, it seems way more logical than the version that actually works. And which one of both browsers doesn't render the elements the right way?
I already found a solution that seems to work for me, so it's not a very urgent question, but it bugs me that i don't understand the core of my problem (and the solution), so i would be really thankful if someone could enlighten me on this.
thanks
According to web standard only inline elements can be "vertically aligned" in spite that some browsers, like chrome, still align them. Note that it is the element that is aligned and not its contents!
So if you apply it to a <span> the <span> becomes aligned with the surrounding text and not whatever is inside it within in.
ispo lorem <span> text </span> due carpe diem
adding span {vertical-align:top; border: 1px solid black} makes <span> text </span> (whole box) become higher than the rest of the text and not push the text to the ceiling of the box <span>.
The core issue here is that Firefox is very literal when it comes to web standard whilst Chrome adds a few implicit features like this one.
For more details click here.
EDIT: apparently if you use vertical-align:top ONLY on the <a> it also works.
Your problem is that per spec setting overflow:hidden changes the baseline position of an inline-block. Firefox implements what the spec says. Chrome does not.
So as long as your .list-item a is baseline-aligned, it will render differently in the two browsers. The only way to make the renderings the same is to make sure you don't baseline-align any inline-blocks with non-visible overflow, which is what your second code paste does (it's using vertical-align: middle on the inline-block).
Try this: http://jsfiddle.net/pUhPB/6/
The first thing I do in these situations is to open the code in both browsers. Then I start removing CSS code until I can see the problem. Removing the margins and the vertical-align, both browsers have rendered the code differently. So I keep removing code until they're both the same. Once they were the same in both browsers, I then changed what I could to get the desired effect.
Here's the new CSS:
.list-item:before
{
content: '';
background-color: red;
width: 5px;
height: 7px;
margin: 5px 4px 0 5px;
float:left;
}