I am trying to float an li's :after, which includes a background element.
It works in every browser on Mac, and every browser on Win, EXCEPT IE.
I tried changing around parameters like the display and floating, which does not work.
CSS:
ul.nav li a:after {
background: url(images/nav_icon.png) no-repeat;
width: 8px;
height: 5px;
font-weight: 400;
content: "";
display: block;
float: right;
margin: 8px 0 0 6px;
}
Heres what it looks like right:
Heres what IE does:
I am thankful for any help. Only thing i found googling was clearfix tricks for IE7, nothing regarding how that stupid browser interpretes selectors.
Solved using conditional comments which contain display: inline-block and removing the floating for the :after.
Related
It should be simple to center text in a button. Unfortunately, across different browsers and platforms, I get different results.
I've tried for hours to fix it, but nothing works everywhere.
Chrome, mac OS X:
(source: d.pr)
Chrome, Windows 8
(source: d.pr)
IE 10, Windows 8
(source: d.pr)
So, yeah. The big block doesn't appear in IE if I set a defined height, but I don't get why it breaks down in the first place.
Here's the code:
.btn-call-to-action {
background: #8e8287;
margin-bottom: 15px;
color: #f5f3e2;
padding: 3px 18px 3px 10px;
margin-top: 6px;
display: inline-block;
position: relative;
border-bottom: none;
border-radius: 2px;
white-space: nowrap;
.btn-call-to-action a:after {
content: url('../img/general-white-arrow.svg?1369574895');
position: absolute;
width: 35px;
right: 15px;
top: 0px; }
and the HTML (pretty simple) :
Want more ?
and the site: http://aurelieremia.be/tfa/
// edit: I think I get it. Still not centered in windows but by resetting the line height, the button looks a bit more normal. IE problem resolved, I'll try using a background-image instead (thanks Ana)
I'm not sure if this will help but cross browser centering in css is a big pain so I use Twitter Bootstrap and overwrite some of the classes.
If this sounds like something you'd consider you can check out the solution here
Leave :after in static .
vertical-align to middle or explicite value (depends of where really stand arrow in svg/img).
white-space:nowrap to parent box to secure, but not necessary:
http://codepen.io/gcyrillus/pen/vzrGj
How about something like this:
HTML:
<a href="about.html">
<div class="btn-call-to-action">
<span>Want more? <img src="http://bkids.sisuweb.co/wp-content/uploads/2013/04/postArrowR.png" />
</span>
</div>
</a>
CSS:
.btn-call-to-action{
width:160px;
height:80px;
background: #8e8287;
padding: 3px 18px 3px 10px;
margin:8px;
color: #f5f3e2;
border-radius: 2px;
display:table;
text-align:center;
}
.btn-call-to-action span{
display:table-cell;
vertical-align:middle;
}
Fiddle here: http://jsfiddle.net/MQHVE/3/
The important part here is to have the wrapper (the a tag) display:table and the content (span) display:table-cell. Then you can apply vertical-align:middle to the span.
A few months ago, I made a site for a small company. They were very pleased about it, and so on. Now, I will do a small ecommerce for the same company, and integrate it to the site base. But, I was looking it with ie7, and noticed something terrible. The navbar, isn't displaying correctly. The links, normally listed on horizontal line, are on vertical line. How to fix this, this is urgent?
Here's the CSS of the nav:
.nav-ul {
margin: 0;
padding: 0;
position: absolute;
left: -14px;
top: 120px;
background: #000;
height: 31px;
z-index: 2;
width: 104%;
background-image: nappulat/tyhja.png;
background-repeat: repeat;
text-align: center;
}
.nav-ul li {
display: inline-block;
padding: 0;
margin: 0;
width: 128px;
height: 31px;
}
.nav-ul li:hover {
background-color: #b2080b;
}
.nav-ul li a {
text-decoration: none;
color: #fff;
font-size: 14px;
font-family: Verdana, Geneva, sans-serif;
display: inline-block;
padding: 0;
margin: 0;
width: 128px;
height: 31px;
}
I know the conditional comments, would they give me an answer?
IE7 (and IE6) has some serious bugs with inline-block.
The main bug is that it only works at all for elements that have a default display style of inline.
<li> tags have a default style of list-item, and therefore display:inline-block; won't work for them in IE7.
There are two solutions:
Add a <span> or similar inline tag inside the <li> (or instead of your <li>) and style that as inline-block instead. This may or may not have the desired effect for you, depending on what you're trying to achieve.
Use an IE CSS hack. You can make IE7 do what you want if you set display:inline; and zoom:1;. This combination will work in IE6 and IE7 in the way inline-block is supposed to work. You'll need to work out a way to make this only happen in IE6/7, though, because obviously you'll want it to use inline-block in other browsers. There are various CSS hacks that can target these browsers, or you could use conditional comments. Either way, it's messy, but the only real solution if you want to support IE7.
(which brings up the third option, of dropping support for IE7 in your site...)
Not fully supported in IE 7 according to http://caniuse.com/inline-block (only for elements that are inline by default). It mentions alternatives here ... http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/
Conditional comments would help you if you have a version that looks ok in IE7 and have something else that looks better in newer browsers, so you would use different code for different browser versions
display: inline-block;
zoom:1;
*display: inline;
Should work. Make sure you have a valid DOCTYPE set. You can remove "zoom:1" if there is something else that triggers hasLayout.
I'm trying to use a <legend> as a title inside a <fieldset>.
In browsers other than IE, the <legend> is positioned on the top border of the <fieldset>, with the text perfectly centered on the line.
I'm trying to reset it's position so that it sits just like any other element. i.e. an <h3>.
Here's the CSS I have so far.
fieldset legend {
margin: 0;
padding: 0;
position: static;
border: 0;
top: auto; left: auto;
float: none;
display: block;
font-size: 14px;
line-height: 18px;
}
But the legend is still perfectly centered on the line.
Yes, I can add a margin/padding/top coordinate but I want to know if the browser has any default values for the element that trigger this layout. I want to then, override these values.
Tested in Firefox (3.6.10), Chrome (6.0.472.63), Safari (5.0.2)
Update
I'll leave this question open for another week just in case someone HAS been able to style <legend> elements. If no solutions are found I'll accept #jnpcl's answer.
This is enough :
form legend{
float: left;
width: 100%;
}
https://web.archive.org/web/20140209061351/http://tjkdesign.com/articles/how_to_position_the_legend_element.asp
Simply put, it is not possible across
browsers to position the LEGEND
element in a Fieldset.
Workaround: wrap the text from <legend> in a <span>, then reposition the <span>.
I've just styled my <legend>'s by giving them a position: absolute; top: -25px; and the the parent <fieldset> with a position: relative; padding-top: 30px;
This is a very old question, but still high in Google, so I'd like to share a solution that works for me (targeting only more modern browsers for the best experience).
fieldset: {all:unset};
legend:{all:unset};
this does the trick for me, unsetting all values to defaults. From there on I can happily style on a "clean-sheet".
According to the specification, here is the default styling of the fieldset and legend elements. By resetting those properties, you can have a clean legend element to work with.
As per HTML - Living Standard, the below styles are working like a default:
fieldset {
display: block;
margin-inline-start: 2px;
margin-inline-end: 2px;
border: groove 2px ThreeDFace;
padding-block-start: 0.35em;
padding-inline-end: 0.75em;
padding-block-end: 0.625em;
padding-inline-start: 0.75em;
min-inline-size: min-content;
}
legend {
padding-inline-start: 2px; padding-inline-end: 2px;
}
According to the specification, the legend is only a "rendered legend" if it is float: none.
This means that by doing:
<fieldset>
<legend style='float: left'> Heading </legend>
<div class='clearfix'></div>
<!-- Your form elements here -->
</fieldset>
This makes the legend behave like a normal (if floated) element.
Note: clearfix is the Bootstrap clearfix class:
.clearfix::after {
clear: both;
}
.clearfix::before, .clearfix::after {
display: table;
content: " ";
}
(A similar answer was posted already, but this does not include the clearfix trick, and the reference to the specification which shows that this is not a random but, but specified behaviour that is reliable.)
I'm trying to use a <legend> as a title inside a <fieldset>.
In browsers other than IE, the <legend> is positioned on the top border of the <fieldset>, with the text perfectly centered on the line.
I'm trying to reset it's position so that it sits just like any other element. i.e. an <h3>.
Here's the CSS I have so far.
fieldset legend {
margin: 0;
padding: 0;
position: static;
border: 0;
top: auto; left: auto;
float: none;
display: block;
font-size: 14px;
line-height: 18px;
}
But the legend is still perfectly centered on the line.
Yes, I can add a margin/padding/top coordinate but I want to know if the browser has any default values for the element that trigger this layout. I want to then, override these values.
Tested in Firefox (3.6.10), Chrome (6.0.472.63), Safari (5.0.2)
Update
I'll leave this question open for another week just in case someone HAS been able to style <legend> elements. If no solutions are found I'll accept #jnpcl's answer.
This is enough :
form legend{
float: left;
width: 100%;
}
https://web.archive.org/web/20140209061351/http://tjkdesign.com/articles/how_to_position_the_legend_element.asp
Simply put, it is not possible across
browsers to position the LEGEND
element in a Fieldset.
Workaround: wrap the text from <legend> in a <span>, then reposition the <span>.
I've just styled my <legend>'s by giving them a position: absolute; top: -25px; and the the parent <fieldset> with a position: relative; padding-top: 30px;
This is a very old question, but still high in Google, so I'd like to share a solution that works for me (targeting only more modern browsers for the best experience).
fieldset: {all:unset};
legend:{all:unset};
this does the trick for me, unsetting all values to defaults. From there on I can happily style on a "clean-sheet".
According to the specification, here is the default styling of the fieldset and legend elements. By resetting those properties, you can have a clean legend element to work with.
As per HTML - Living Standard, the below styles are working like a default:
fieldset {
display: block;
margin-inline-start: 2px;
margin-inline-end: 2px;
border: groove 2px ThreeDFace;
padding-block-start: 0.35em;
padding-inline-end: 0.75em;
padding-block-end: 0.625em;
padding-inline-start: 0.75em;
min-inline-size: min-content;
}
legend {
padding-inline-start: 2px; padding-inline-end: 2px;
}
According to the specification, the legend is only a "rendered legend" if it is float: none.
This means that by doing:
<fieldset>
<legend style='float: left'> Heading </legend>
<div class='clearfix'></div>
<!-- Your form elements here -->
</fieldset>
This makes the legend behave like a normal (if floated) element.
Note: clearfix is the Bootstrap clearfix class:
.clearfix::after {
clear: both;
}
.clearfix::before, .clearfix::after {
display: table;
content: " ";
}
(A similar answer was posted already, but this does not include the clearfix trick, and the reference to the specification which shows that this is not a random but, but specified behaviour that is reliable.)
I'm trying to find a good why to display my Icons.
I want to use a CSS and not an img tab.
My code:
<span id="Span1" class="iconPrinter"></span>
.iconPrinter{background:url(../images/BWIcons.gif) no-repeat 0 0; padding:0 8px;}
or
.iconPrinter{background:url(../images/BWIcons.gif) no-repeat 0 0; width:16px;}
It works fine on FF but on IE6 I can't see the Icons, only if I insert a span in the span.
When I use a div or display:block; it work fine, but I need it to be inline.
Thanks
The simplest way I found to insert an inline tag like span what will work with IE6 is:
(for 16px icon)
<span id="Span1" class="iconPrinter"> </span>
.iconPrinter{background:url(../images/BWIcons.gif) no-repeat 0 0; padding:0 7px; font-size:16px;}
IE6 probably won't show the inline element with padding if it has no content. Try adding into the span;
<span id="Span1" class="iconPrinter">& nbsp;</span>
(Note that there is an extra space in the as the code coloring mangles it otherwise)
On the other hand, in order to give the span a width, you could also try using
.iconPrinter { display: inline-block; }
In order to get around FF2 issues with inline-block I found a suggestion online which worked for my setup. Now for my setup I have a text which also has padding-left and a background-image set to the left side of the text. I needed the whole span to fire an event when clicked, which just wasn't happening when I used display block in IE6 or IE7.
I came here and it was suggested to use inline-block which fixed my issues, but left me with FF2 compatibility issues. I then found this solution.
display: -moz-inline-box;
display: inline-block;
Having both display calls doesn't seem to have any adverse effects in any of the browsers I tested IE6,7,8, FF2, 3.
What is your purpose with the icons? Do you just want to show the icons, why not use the "img"-tagg. If you should be able to click them wrap them in an "a"-tagg.
ie6 has a bug with vertical-padding on inline elements. You could also use divs and float them.
What is inside of the span? Anything?
Try adding:
#iconPrinter{
background:url(../images/BWIcons.gif) no-repeat 0 0;
padding: 8px;
text-indent: -100000px;
overflow: hidden;
}
And if the span is just there for the icon, add some kind of html special character. This may force IE to acknowledge that something is there, and it's more accessible for those without CSS or with screen readers, something like:
<span id="iconPrinter">⎙</span>
Try to give css height to the span class. Something like
.iconPrinter{
background:url(../images/BWIcons.gif)
no-repeat 0 0;
width:16px;
height: 16px;
}
I realize this is an older post, but I came across this question while searching and thought that this might help others. I was using CSS background images for links and also had trouble with IE6 and IE7.
Here's the HTML:
Edit Admin
Delete Admin
Here's my css for browsers other than IE6 and IE7.
.icon-edit, .icon-delete, .icon-error, .icon-success, .icon-notice, .icon-email
{
height: 16px;
width: 16px;
text-decoration: none;
margin: 0px 5px 0px 0px;
padding: 0px;
float: none;
display: -moz-inline-box; /* For FF 2 */
display: inline-block;
text-indent: -9999px;
overflow: hidden;
}
Here's the additional css that I conditionally add only for IE6 and IE7:
.icon-edit, .icon-delete, .icon-error, .icon-success, .icon-notice, .icon-email
{
display: block;
float: left;
}
Use padding and add a zoom: 1 in your css class
<span id="Span1" class="iconPrinter"></span>
.iconPrinter {background:url(../images/BWIcons.gif) no-repeat 0 0; padding:0 7px; height: 15px; zoom: 1 }