The html is:
<div class="choose-os">
<p>
Microsoft Windows
Apple Mac OS
</p>
</div>
The CSS is:
.choose-os {
margin: 20px 0;
padding: 20px;
background: #e7eefa;
}
.choose-os p {
margin: 0;
}
.choose-os p a {
display: inline-block;
text-indent: -100000px;
height: 56px;
width: 308px;
}
.choose-os p a.windows {
background: url(../images/button-windows-bg.png) 0 0;
}
.choose-os p a.macos {
background: url(../images/button-macos-bg.png) 0 0;
}
.choose-os p a:hover {
background-position: 0 -56px;
}
Any suggestions would be greatly appreciated as to have the background image also appear on IE7.
The text-indent: -100000px; in combination with inline-block is what's causing the two elements to not be visible in IE7, due to a bug.
You need to find some other way to hide the text for IE7 (or not use inline-block at all, see below for this more suitable fix).
Options include the method in the comment by #Sotiris, or:
.choose-os p a {
display: inline-block;
height: 56px;
width: 308px;
text-indent: -100000px;
/* for ie7 */
*text-indent: 0;
*font-size: 0;
*line-height: 0
}
Which uses the *property: value hack several times to hide the text in IE7.
The problem does seem to be related to the use of display: inline-block.
So, another workaround (which I prefer to my previous one) is:
.choose-os {
margin: 20px 0;
padding: 20px;
background: #e7eefa;
overflow: hidden
}
.choose-os p a {
float: left;
margin-right: 4px;
text-indent: -100000px;
height: 56px;
width: 308px;
}
To display inline-block properly in IE7, add the following styles to .choose-os p a
zoom:1
*display:inline
(The star is important! It's ignored by modern browsers, but not IE6/7)
IE7 doesn't respect inline-block, so you have to do a little magic to make it work. There's a great description here: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
[edit] If text-indent is also part of the culprit, you may be better of sticking with display:block and setting float:left on your elements. Probably multiple valid paths to take :)
IE7 has some serious limitations in CSS. I would recommend avoiding the shorthand notation and explicitly declaring each property, then validate the CSS sheet here.
Related
I am working on this page: link to page.
Inside h2 I have before and after elements. In IE they are too big, original width and height these images are not working. When I am trying to resolve this problem, in FF and Chrome everything is getting even worse.
In Edge things are a little bit different - I have figured out a way to make images smaller, but before element is inside h2 text.
Here are the examples:
Normal (from FF and Chrome)
A little strange (from Edge)
So crazy (from IE)
CSS code:
h2{/*How I am displaying h2 elem */
text-align: center;
width: 80%;
margin: 45px auto 115px !important;
text-transform: uppercase;
color: #fff;
}
h2::before {
content: url(img/pepper.svg);
margin-right: 10px;
position: relative;
height: 50px;
}
h2::after{
content: url(img/apple.svg);
margin-left: 10px;
position: relative;
height: 50px;
}
#supports (-ms-accelerator:true) { /*Trying to resolve problem in Edge */
h2::before {
position: absolute;
}
h2::after{
position: absolute;
}
}
Try making the positon of before and after leftmost and rightmost.
If it doesnt work,try making pixels to %.
As #ankit says, removing width: 80% is doing right on IE. Also removing part with supports resolved problem with Edge.
Another approach (assuming you have control of the HTML): add an empty right after the input, and target that in CSS using input+ span:after
.field_with_errors {
display: inline;
color: red;
}
.field_with_errors input+span:after {
content: "*"
}
<div class="field_with_errors">Label:</div>
<div class="field_with_errors">
<input type="text" /><span></span>
</div>
I'm using this approach in AngularJS because it will add .ng-invalid classes automatically to form elements, and to the form, but not to the .
On iOS 8, I'm overlaying a div with a textarea, with the same text and resetting every margin/padding values, but there's still an offset of 3px that I can't get rid of. It works great on Chrome and Safari desktop.
Here's a fiddle: http://jsfiddle.net/jfvz0ved/
textarea, div {
position: absolute;
top: 0;
left: 0;
font-size: 1.1em;
line-height: 1.6em;
font-family: Courrier;
border: 0;
outline: 0;
padding: 0;
margin: 0;
background: transparent;
display: block;
text-align: left;
resize: none;
width: 100%;
color: black;
opacity: 0.4;
}
Any idea what property could cause this issue? I don't want to resort to a browser detection + special class if possible.
What happens when you apply a universal CSS reset?
If that fixes the problem, then one of the containing elements might need to be reset.
After quite a bit of research, it turns out iOS is adding a 3px padding and it can't (apparently) be removed. So the best way to go about it is to compensate for it. I've added a left: 3px on the div when iOS is detected. It's not ideal (I'd have loved to avoid that and have a CSS only solution), but it works.
Is it possible to achieve line-height consistency in all browsers?
I have attached an image. You will notice a red rectangular box and a green rectangular box (both of the same width and height) which I have added via photoshop manually to aid in showing the the space/gap difference between the dotted lines (below the red box) and the "Followers: 3197179" text.
It seems that Firefox is the only one that is displaying the elements differently. I notice this when I apply a line-height. Any way I can make this consistent with all browsers?
I am using Firefox 3.6.13, Safari 5.0.3, Opera 10.63 and Chrome 8.0.552.231.
.clearfix,
.container {
display: block;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
position: relative;
margin: 0 0 0 0;
padding: 12px 0;
border-bottom: 1px dotted #E7E7E7;
}
li img {
float: left;
margin-top: 0;
}
li p {
margin: 0 0 0 58px;
padding: 0;
font-weight: normal;
border: none;
font-size: 1em;
line-height: 1.3em;
}
li p.name {
position: relative;
padding-top: 0;
font-size: 1.1em;
font-weight: bold;
}
<ul>
<li class="clearfix">
<img width="50" src="http://localhost:3000/images/foobar.gif" alt="thumb">
<p class="name">
Jessica Simpson
</p>
<p>Blurred out text here</p>
<p>Followers: 3197179</p>
</li>
</ul>
Your currently using em's. Maybe you can try to be more specific by trying to use px in both line-height and font-size. Also try to use padding in those texts, maybe it'll work, I think ;).
In any cross browser thing you do. There's is no concrete way of doing things to make it same on every renderer. It's always a dream that most client's don't understand. For me, it's better to always explain to them what they want and how much time we spend in things like 1px/2px differences. It's plain normal. You may check this video by Andy Clarke speaking about cross browser and some other cool stuff.
Are you using a CSS reset? These help alleviate most of the cross-browser issues. Meyer Web has a popular one: http://meyerweb.com/eric/tools/css/reset/
You can add line-height for Mozilla only, by using:
#-moz-document url-prefix() {
*, body {
line-height: [as per your requirement];
}
}
Have you specified any common rules? e.g:
* {
margin: 0;
padding: 0;
}
body {
font-size: 100%;
line-height: 1;
}
Sometimes it's helpful, even without full reset.css approach.
It might be how the font is being rendered. Try using this as a font family.
font-family:"Arial Unicode MS","Lucida Sans Unicode";
I know this is something I'm probably doing wrong, so please don't incinerate me for the thread title.
I'm trying to put together a small personal website using HTML 5/CSS3. I've checked with the w3c validator and the site and CSS file fully conform according to the validator (However the validator has a warning attached that it might not be perfect).
I'm not sure how to explain it without a picture, so here's a comparison of Chrome/Opera/Firefox:
So, you can sorta see how in Chrome the background image is in one non-repeating piece, whereas in Opera/Firefox the image has, oddly, been broken up and placed slightly differently.
I'm confident this is due to an error on my part, but I've had no luck at all figuring out why the image is being mangled in Opera and Firefox.
Here's the CSS that's relevant to this issue:
/* Content Pane */
.content
{ position: absolute;
left: 220px;
width: 800px;
top: 80px;
min-height: 550px;
background-color: rgba(8,12,42,0.85);
}
/* Headers */
.content hgroup
{
background: url("Header_Flat.png") no-repeat left top;
min-height: 38px;
padding-left: 28px;
text-shadow: 0 0 8px #FFA9FF;
color: Black;
text-decoration: none;
}
.content hgroup h1
{
display: block;
}
.content hgroup h3
{
display: inline;
position: relative;
top: -12px;
left: 20px;
text-shadow: 0 0 6px #AFF9FF;
}
.content hgroup h4
{
display: inline;
position: relative;
top: -12px;
left: 20px;
font-size: xx-small;
text-shadow: 0 0 6px #AFF9FF;
}
And the HTML:
<hgroup>
<h1>New Site!</h1>
<h3>Now with Bloom!</h3>
<h4> - Posted Tuesday, May 11th 2010</h4>
</hgroup>
Can anyone see what I'm doing wrong?
EDIT
I changed the CSS a bit, and it halfway-fixed the image (I don't understand why) and the bad alignments (I hadn't yet noticed those).
The changed CSS defs are as follows:
/* Headers */
.content hgroup
{
background: url("Header_Flat.png") no-repeat left top;
min-height: 38px;
position: relative;
text-shadow: 0 0 8px #FFA9FF;
color: Black;
text-decoration: none;
}
.content hgroup h1
{
position: relative;
left: 28px;
}
.content hgroup h3
{
display: inline;
position: relative;
top: -12px;
left: 48px;
text-shadow: 0 0 6px #AFF9FF;
}
.content hgroup h4
{
display: inline;
position: relative;
top: -12px;
left: 48px;
font-size: xx-small;
text-shadow: 0 0 6px #AFF9FF;
}
Got it: You need to give hgroup display: block.
EDIT: Keep in mind that most browsers don't know the new HTML5 elements yet thus they are missing all default style.
You'll need to set the parent element of positioned child elements to relative to make the positioning work.
hgroup{
position: relative;
}
Your h1 needs a width and height, otherwise display: block is a little pointless imho.
These are the two things which jump out at me the most :)
Just took a look in Chrome and Firefox and they're both displaying the same as your error pic.
Take a look here: HTML5 browser support checklist, seems that Firefox and Opera don't support all HTML5 attribute yet, so invariably there will be some weird problems. The browsers don't know all the default styles of HTML5 elements yet, so more reason for strange errors. Can't think of any other fixes other than DavidYell's answer, eveything seems fine in the CSS.
The background image alignment CSS is not ready on all browsers.
It's as if you only had:
.content hgroup
{
background: url("Header_Flat.png") no-repeat;
etc.
Since hgroup has no set size your background image will float around when you're using different browsers at different zooms.
If you are able to set hgroup's size you can design your .png the size of hgroup, transparent and with the blue streaks aligned top left.
I am also looking forward to full CSS3 support in all browsers.
There are so many effects that look so cool in some browsers and then just look mangled in others. I personally prefer 1)Firefox 2)Safari
Problem
I am working on a project to theme a website, but I am not allowed to change the HTML or JavaScript. I can only update the CSS stylesheet and add/update images.
Requrements
I need to style a h3 tag to have an
underline/border after the content.
This h3 will be used multiple times
on the page, so the conent length can
vary
The solution needs to be
cross-browser (IE 6/7/8, FF 3, &
Safari)
Sample Code
<div class="a">
<div class="b"><!-- etc --></div>
<div class="c">
<h3>Sample Text To Have Line Afterwards</h3>
<ul><!-- etc --></ul>
<p class="d"><!-- etc --></p>
</div>
</div>
Sample Output
Sample Text to Have Line Afterwards ______________________________________
Another Example __________________________________________________________
And Yet Another Example __________________________________________________
Notes
I think #sample:after { content: "__________"; } option wouldn't work since that would only be the correct length for one of the tags
I tried a background-image, but if it gave me problems if I gave it one with a large width
Using text-indent didn't see to give me the effect I was looking for
I tried a combination of border-bottom and text-decoration: none, but that didn't seem to work either
Any ideas would be much appreciated!
This will work if class 'c' is always the parent of the h3...
.c {
position: relative;
margin-top: 25px;
border-top: 1px solid #000;
padding: 0px;
}
h3 {
font-size:20px;
margin-top: 0px;
position: absolute;
top: -18px;
background: #fff;
}
It lets the container have the border, then uses absolute positioning to move the h3 over it, and the background color lets it blot out the portion of c's border that it's covering.
try attaching a background image to class c of a repeating underline, then add a background color to the h3 to match the background of the container. I believe that you would have to float the h3 left in order to get the width to collapse. does that make sense?
.c {
background: #ffffff url(underline.gif) left 20px repeat-x;
}
.c h3 {
margin: 0;
padding: 0 0 2px 0;
float: left;
font-size: 20px;
background: #ffffff;
}
.c h3 { display: inline; background-color: white; margin: 0; padding: 0; line-height: 1em; }
.c ul { margin-top: -1px; border-top: 1px solid; padding-top: 1em; /* simulate margin with padding */ }
http://besh.dwich.cz/tmp/h3.html
H3 {
border: 1px solid red;
border-width: 0 0 1px 0;
text-indent: -60px;
}
You need to know the width of the text, but works pretty well.
The only solution I've imagined so far is to make a PNG or GIF image, with 1px height and a very large width (depends on your project, could be like 1x2000px), and do something like this:
h3#main-title { background: url(line.png) no-repeat bottom XYZem; }
where the XYZ you'd set manually, for each title, in 'em' units. But I can't figure out a 100% dynamic solution for this one, without using JS or adding extra markup.
this worked for me
div.c
{
background-image:url(line.gif);background-repeat:repeat-x;width:100%;height:20px;
}
div.c h3
{
height:20px;background-color:white;display:inline;
}
you make the div the width of your content
then you set the background of the h3 to the background of your page. this will then overlap the background imageof the full div. You might want to play with background positioning depending on your image
Can you pad content in the UL tags? If so, this might work:
h3 { display: inline; margin: 0; padding: 0 10px 0 0; float: left;}
ul { display: inline; border-bottom: 1px solid black; }
check source code of: http://nonlinear.cc/lab/friends/elijahmanor.html
then again i have NO IDEA how to control the end of the line.
Assuming that you're working with dynamic content, the best I could suggest is to accept graceful degradation and use a mix of great_llama and Bohdan Ganicky
Imagine:
A long title that will wrap to two lines___________________
and leave you like this in great_llama's solution
and nothing appearing at all with Bohdan Ganicky's solution if ul isn't immediate preceded by ul.
Solution:
.c h3 { display: inline; background-color: white; margin: 0; padding: 0; line-height: 1em; }
.c + * { margin-top: -1px; border-top: 1px solid; padding-top: 1em; /* simulate margin with padding */ }
We care about IE6, but accept that this is an aesthetic touch and IE6 users will not suffer. If you can't get the designer to accept this AND you can't alter the HTML, then do something else (before you find another job ;))
Here's a better answer:
.c {
background: url('line.png') repeat-x 0 20px;
}
H3 {
background-color: white;
display: inline;
position: relative;
top: 1px;
}
Use a small, 1px height, couple px wide image as your underline and occlude it with a background color on your H3.
h3:after {
content: '___________';
}