I'm trying to make a banner in HTML/CSS. However, I'm having trouble with the margins in one of my div's. It works perfectly in Firefox, but not in IE.
#lowerText{
float: left;
margin-top: 50px;
margin-left: -185px;
color: rgb(255, 199, 142);
font-family: 'Special Elite', cursive;
font-size: 15px;
text-transform: uppercase;
display:inline;
}
#upperText{
float: left;
margin-left: 20px;
margin-top: -10px;
color: rgb(255, 199, 142);
font-family: 'Special Elite', cursive;
font-size: 30px;
text-transform: uppercase;
display:inline;
}
It's an h3 tag in #lowerText which says "-Foo foo foo bar". In IE it only shows: "oo bar". The text in this div HAS to be right underneath #upperText at a specfic position. But the margin-left: 185px in #lowerText doesn't show in IE, but it shows in Firefox.
What do I need to do to fix this?
In your comment, you state your jsfiddle works in IE. jsfiddle auto inserts a doctype which I now assume you do not have in your original page. If so, IE is in quirks mode without the doctype and the cause of your problem (other than IE being the worst browser on the planet).
EDIT: Didn't look first. jsfiddle shows a doctype. Did you put that there?
Related
I have a site with a small pricing blurb. In every browser I've tested in (Chrome, Firefox, IE, Safari for Windows, Chrome for Mac) it looks exactly as intended:
Unfortunately, though, in Safari for Mac, iOS Safari, and Chrome for iOS, the "MEMBERSHIP" text doesn't wrap to the next line and is pushed to the right farther than it should be:
Since I am not aware of any inspector for mobile, I'm having a really hard time figuring out why this text is displaying in the wrong place.
Here's the HTML:
<div id="home-cta-text">
<p style="font-size:40px; text-align:center; font-family:'Franchise-Bold', Arial, sans-serif; line-height:40px; color:#fff; margin-left:auto; margin-right:auto;">
MEMBERSHIPS AS LOW AS
</p>
<div id="home-cta-right" style="float:none; margin-left:auto; margin-right:auto;">
<p><span>$19</span><sup>.99</sup></p>
<p class="home-cta-subtext">PER MONTH</p>
</div>
<div style="clear:both;"></div>
</div>
And appropriate CSS:
#home-cta-text {
padding: 1em;
background-color: rgba(0, 0, 0, 0.4);
width: 377px;
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
#home-cta-right {
float: left;
width: 156px;
}
#home-cta-left p, #home-cta-mid p, #home-cta-right p {
font-family: 'Franchise-Bold', Arial, sans-serif;
font-size: 109px;
color: #fff;
line-height: 90px;
padding-bottom: 0;
}
#home-cta-text p.home-cta-subtext {
font-size: 40px;
line-height: 40px;
}
#home-cta-text sup {
position: relative;
height: 0;
line-height: 1;
vertical-align: baseline;
font-size: 49px;
display: inline;
margin: 0;
padding: 0;
bottom: 43px;
}
Can anyone tell me what's going on here?
EDIT: I just noticed that if I remove my #font-face font, the text wraps normally. What's going on here?
I'm having the exact same problem on safari 10+ with the same font. Works perfectly on all other browsers. Looks like a problem with Franchise Bold. I'm going to try downloading it again, hoping there's something wrong in the font files.
EDIT: Apparently I got the wrong files in my assets. Downloaded the font again from Weathersbee Type (http://www.weathersbeetype.com/fonts/franchise/) and it now works in Safari 10+ (and all other browsers).
try use not 'P' just use DIV, and use just text-align center
I have a website with text that I've set to #666666 in CSS. This color persists just fine across browsers- however, when I view the site on a Windows machine, the text appears a much lighter shade of gray, despite my using the same browsers (Firefox and Chrome). This problem only occurs within the content elements- the nav bar is also set to #666666 and it behaves as desired.
The CSS for the nav bar:
a.nav {
color: #666666;
font-size: 48px;
font-family: 'Raleway';
text-align: center;
text-decoration: none;
margin-top: -50px;
}
The CSS for my content (this is the stuff that changes color):
#content {
color: #666666;
font-size: 18px;
font-family: 'Raleway';
width: 470px;
margin: 0 auto;
margin-top: 15px;
line-height: 128%;
text-align: justify;
}
Any ideas about why this might be happening and what I can do to remedy it?
may be rgb color as it may be more consistent applied on different elements.
color: rgb(102,102,102);
I have some text on top of an image.
In new browsers it's working fine.
But when I check in IE7, it looks like this:
Somehow, IE7 is very keen, on giving the background color a width of a 100%.
And I don't wanne fix it, by setting a width, since the length of the text will vary from page to page.
My CSS looks like this:
#sub-slideshow-wrapper h2 {
font-family: 'Droid Sans',sans-serif;
display: table;
font-size: 20px;
font-weight: 900;
color: #000;
background: #e68e47;
background: rgba(230,142,71,0.8);
padding: 7px;
margin: 0 0 3px 0;
}
And I know that IE7 is outdated, and that only 1.xxx is usnig it. But my is expection it to work on all browsers, even old ones.
If you must support IE7 add zoom:1 and *display:inline (star hack to target IE6 & 7) to make IE 7 display them as if they were inline-block. However this may have other effects you do not want.
#sub-slideshow-wrapper h2 {
font-family: 'Droid Sans',sans-serif;
zoom: 1; /* added */
*display: inline; /* added */
display: table;
font-size: 20px;
font-weight: 900;
color: #000;
background: #e68e47;
background: rgba(230,142,71,0.8);
padding: 7px;
margin: 0 0 3px 0;
}
As you can see here, IE7 does not support display:table so your h2 is rendered with display:block (the standard display for h2), causing your problem.
As the global usage of IE7 is about 0.1%, I suggest you just leave it as it is.
It works in Chrome desktop
But not Safari iOS
Here is the the CSS
.button {
border: 1px outset $color3;
background: $color1;
color: $color4;
font-size: 80%; // A little smaller because it's in uppercase
text-transform: uppercase;
display: inline;
margin-left: 5px;
margin-right: 5px;
}
I tried font-size: smaller, 0.8em, etc, but it did not help. 50% or 0.5em looks good on iPhone, but is too small on the desktop. text-transform did not matter. padding: 1px; did not help.
Change display to inline-block, and add padding to the top
I have this problem:
http://liberainformazione.it/
Title css rule:
p.right_sidebar_title {
font-size: 16px!important;
font-weight: bold;
color: black;
margin: 7px 0!important;
line-height: 18px!important;
font-family: Arial,Helvetica,sans-serif;
font-weight: bold;
width: 300px;
}
Blue rectangle css rule:
.post-category-rightSidebar {
background: #369;
display: inline;
float: left;
font-size: 10px;
height: 16px;
line-height: 17px;
margin-right: 5px;
padding: 0 5px;
text-transform: uppercase;
color: white;
}
In Chrome or Firefox the blue rectangle is near the title but with IE the title is on new line.....
I haven't understand why IE not recognize my css rules.
What I am doing wrong?
Thanks a lot.
Your page has <meta http-equiv="X-UA-Compatible" content="IE=7" />, so IE9 is operating as IE7.
In IE7, specifying width or (height) value triggers so called hasLayout which makes element's box somewhat isolated and prevents its contents from being floated by any external elements.
You should either set X-UA-Compatible meta element to IE=edge value (best option), or remove width: 300px; from p.right_sidebar_title rule, or specify this width for a container that contains both p.right_sidebar_title element and floating color square.
I noticed you don't have a float on p.right_sidebar_title, try adding float: left; to that.
If it helps, I'd put p.right_sidebar_title and .post-category-rightSidebar inside their own div:
<div>
<div class="post-category-rightSidebar"></div>
<p class="right_sidebar_title">Title</p>
</div>
Hope this helps!