I am going through my style sheets in an attempt to make my CSS for IE friendly and I am running into an issue with my padding-left for some reason. It is only applying the padding to the first line of text in my 'span' tag. When the text runs to the next line it goes all the way to the left inside the 'span' element.
(Can't show screenshot for NDA purposes)
BROWSER: IE7
CSS:
#rightContent .rightNav a,#rightContent .rightNav a:visited{
color:black;
display:block;
width:92px;
padding-right:12px;
height:35px;
background:url("../images/nav_off.png");
}
#rightContent .rightNav span{
display:table-cell;
vertical-align:middle;
height:28px;
padding-left:13px;
font-size:9px;
}
HTML:
<li>
<a href="">
<span>This text is too long.</span>
</a>
</li>
IE7 does not support display: table-cell: http://caniuse.com/css-table
You'll have to find an alternative technique, if only for IE7.
Try adding *float: left to the span - it will only apply to IE7 and lower. Maybe that will be a "good enough" fix.
It looks like you're using display:table-cell; vertical-align:middle for vertical centering. If it's absolutely vital to have that in IE7, it is possible without resorting to JavaScript, but it's a pain in the ass.
It seems similar to the question asked here: Why Doesn't IE7 recognize my css padding styles on anchor tags? I'm not sure exactly why it does that, it seems to be an IE bug. I would suggest either wrapping your text in something else(a div or a p tag), or just putting the text straight in the a tag and if you need specific styles for it just give the a tag a class.
Related
I have a ul with the following structure
<ul>
<li> text goes here <span></span> </li>
<li> text goes here <span></span> </li>
</ul>
Now initially the span tag is empty. Im trying to add a number into the span tag using the jQuery .html() function ,Works fine however in Chrome the text gets cut off. The strange thing is when i use the web inspector and click on the li the width of the span tag increase according to the content and the li too.
Any ideas ?
The css is as follows
li{
list-style:none;
float:left;
padding: 0 5px;
}
span{
display:inline-block;
min-width:5px;
min-height:5px;
}
you can't. span is an inline element, either set it's display property to inline-block or block to set its dimensions, or use a block element instead of span.
white-space: nowrap; // will force it not to wrap around
See effect on this fiddle: http://jsfiddle.net/Abp8y/11/ [UPDATED].
Last diagnosis: text-transform bug caught in the li tag. Removing text-transform solves the problem.
The Chrome bug is also discussed here: text-transform: uppercase causes layout error on Chrome as posted by #Christoph
Use can try this and fix the width of span-
span{
word-wrap:break-word;
}
I need to vertically align the Facebook and Twitter share buttons. This is how I render them:
<a name="fb_share" type="button" share_url="http://www.livkontrol.com/blog?id=1"></a>
Tweet
Even though they are almost the same size, one appears much on higher than the other. They also seem to ignore any kind of CSS rule I apply to the link element. Does anyone knows how to override the CSS of these elements and have them vertically aligned side-by-side?
I've had the same issue. Facebook uses an inline tag that sets the text on the bottom, causing it to render below twitter and facebook. My solution is to override it by placing CSS after the actual button call. Works nicely:
<style media="screen" type="text/css">
.fb_iframe_widget span
{
vertical-align: baseline !important;
}
</style>
The call modifies facebook's own CSS style.
the answer provided by Marie doesn't seem to work anymore.
For me this does the trick:
html:
<ul class="social">
<li> put button markup here </li>
<li> and next button </li>
...
</ul>
css:
.social li{
display:inline;
}
.fb-share-button{
position:relative;
top:-7px;
}
it might be neccesary to adjust the value for top, depending on the button style/size, future changes.
ps: I know this is an old question, but google likes it..
The correct answer is here
style="height:20px; vertical-align: top;"
I got it to align by styling the first Facebook span with !important to override its inline style:
.fb-like > span {
vertical-align: baseline !important;
}
Tho I'm not sure if this will work on all browsers.
This worked for me, added to my own css.
.fb_iframe_widget span{vertical-align:inherit !important;}
<style type='text/css'>
#span1{
background-image:url("http://www.reoiv.com/images/rss.jpg");
background-repeat:no-repeat;
cursor:pointer;
display:block;
float:left;
height:15px;
width:15px;
vertical-align:text-bottom;
}
</style>
<span id='span1'></span>觀看次數
What I would like to do is to achieve the vertical align: text-bottom effect but I am not doing it on a image element. I am doing it on an element with background-image set.
If you paste the above codes here: http://htmledit.squarefree.com/
You will see that the text failed to vertically align to bottom.
I would like to know how it can be done without adding extra html element if possible.
Many thanks to you all.
You closed the span tag before your text:
<span id='span1'></span>觀看次數
Use this:
<span id='span1'>觀看次數</span>
Hope that helps.
You can't do that with floats. You could try using display: inline-block, but browser support is sketchy.
EDIT: http://www.quirksmode.org/css/display.html
You can't get pixel perfect results. Here is a work around I've been using:
<span style="background: url(http://www.reoiv.com/images/rss.jpg) no-repeat left center; padding-left: 20px;">觀看次數</span>
This vertically center-aligns the icon nicely with the text. padding-left works nicely with inline elements.
If you paste the following code into a test.html and browse with firefox,it's ok.
But if you browse with IE,you can see that there are more space to the right of <a> element.:
<style>
li {
display:inline;
margin:0 90px;
padding:6px 12px;
background:#777777 none repeat scroll 0 0;
}
li a {
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
}
</style>
<div id="tabs">
<div class="nav">
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</div>
EDIT:How to make the text even in IE?
To answer your question simply: put all your li elements on a single line or float them.
I did look at your source and tried it for myself.
In Firefox 3.0.11 and Internet Explorer 8 I was showing pretty much identical pages.
One thing I can say is that the pages looked different initially because my browsers were at different widths but not the margin problem you were having. In my case resizing the browser worked.
But the problem you're having is common. Internet Explorer will almost always display pages different than a typically standards-compliant browser will. One way that people have found to work around this (and this may very well solve your problem) is to use a CSS Reset sheet.
Some good ones are:
Eric Meyer's Reset CSS
Yahoo! YUI Reset CSS
The problem is an unfortunate disagreement between the browsers as to where the CSS box model decides what to do about the padding:
IE decreases the space for the content within a div when you increase the padding, so keeping the div size the same
Firefox increases the div size with the padding, keeping the content size the same.
Tested in IE6, it seems to add an extra space to the anchor tags. Copy and Paste it and you will see for yourself. Firefox does not add the extra space.
You can change the margin for IE if you want. Its not a perfect solution, but it may help you to make the tabs look similar. If you need it to be identical in all browsers, you could always use an image instead. But try this:
li a {
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
}
*html li a {
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
margin-right:-3px;
}
*+html li a {
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
margin-right:-3px;
}
I have a WordPress site where the li width changes in my navigation depending on the width/length of the link in my navigation ul li list. I am trying to add a rounded-border background image to each of the li elements, yet since each one is different in size, I am lost on how to implement this.
How can I create a background image that will change in width with rounded borders for each of my li links? Any help would be greatly appreciated.
I suggest starting with defining the CSS3 rounded corners styles (see also here). In the long run every browser should support this.
As a fallback mechanism you could use background images with the sliding door technique.
Adjusting the size of a background image is not possible without heavy Javascript and possibly even server-side stuff.
Two workaround ideas (both not tested):
CSS 2 only:
You could give the li "position: relative" and then position a DIV or other element with rounded corners and "position :absolute" within it. Give it "left:0px;right:0px;top:0px;bottom:0px" so it should always be as large as the li. To avoid the content being overlaid by the element, give the content "position: relative" and a z-index.
Cross browser code swamp:
Give the li position:relative and position four rounded corner images using "position:absolute" and "left:0px;top:0px", "right:0px;top:0px" and so on.
Here's a technique I "borrowed" that doesn't require images!:
http://blog.benogle.com/2009/04/29/css-round-corners/
He fully explains the technique so you know how he does it.
Future way
Pros: easy and simple
Cons: non IE compatible
-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius
Javascript way
Pros: Simple
Cons: Do not work if javascript is turned off
Use Jquery and the JQuery Corner plug-in
<script type="text/javascript">
$("#menuItem1").hover(function(){
$('#menuItem1').corner();
});
</script>
Pure CSS way
As described in http://blog.benogle.com/2009/04/29/css-round-corners/
Pros: Pure css
Cons: Add lots of unneeded markup
.b1f, .b2f, .b3f, .b4f{font-size:1px; overflow:hidden; display:block;}
.b1f {height:1px; background:#ddd; margin:0 5px;}
.b2f {height:1px; background:#ddd; margin:0 3px;}
.b3f {height:1px; background:#ddd; margin:0 2px;}
.b4f {height:2px; background:#ddd; margin:0 1px;}
.contentf {background: #ddd;}
.contentf div {margin-left: 5px;}
<b class="b1f"></b><b class="b2f"></b><b class="b3f"></b><b class="b4f"></b>
<div class="contentf">
<div>Round FILL!!</div>
</div>
<b class="b4f"></b><b class="b3f"></b><b class="b2f"></b><b class="b1f"></b>
The only solution that will be readily compatible with all browsers everywhere is slicing your background image up and making the corners their own little images.