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;
}
Related
How to reduce the gap between two video tag, I have tried with margin and padding its not worked any help are appreciated
DEMO
My HTML
<div class="videoTest">
<video controls="controls"></video>
<video controls="controls"></video>
<video controls="controls"></video>
<video controls="controls"></video>
</div>
My CSS
.videoTest > video{
border:1px solid red;
margin:0;
padding:0;
}
The <video> element is an inline element by default. That's why there are gaps between them representing the whitespaces and/or line-breaks in your markup.
.videoTest > video {
display: inline-block;
border:1px solid red;
margin:0;
padding:0;
}
.videoTest {
font-size: 0;
}
By using font-size: 0, the line-breaks and whitespaces are being kind of ignored and you get rid of the gaps. Their size is set to 0.
Updated Fiddle
This is a common workaround when working with inline-blocks and is in some situations superior to floats when it comes to centering for example.
try this
http://jsfiddle.net/Ng6XU/5/
.videoTest > video{
border:1px solid red;
margin:0px;
padding:0;
float:left;
}
TRY THIS CSS :
.videoTest > video{
border:1px solid red;
margin:0;
padding:0;
float:left;
}
I have found the link which gives various method to solve this issue, may be helpful to some one Reference : http://css-tricks.com
Published April 21, 2012 by Chris Coyier
Here's the deal: a series of inline-block elements formatted like you normally format HTML will have spaces in between them.
In other words:
<nav>
One
Two
Three
</nav>
nav a {
display: inline-block;
padding: 5px;
background: red;
}
Will result in:
Often highly undesirable (check the link for the output)
We often want the elements to butt up against each other. In the case of navigation, that means it avoids the awkward little unclickable gaps.
This isn't a "bug" (I don't think). It's just the way setting elements on a line works. You want spaces between words that you type to be spaces right? The spaces between these blocks are just like spaces between words. That's not to say the spec couldn't be updated to say that spaces between inline-block elements should be nothing, but I'm fairly certain that is a huge can of worms that is unlikely to ever happen.
Here's some ways to fight the gap and get inline-block elements sitting directly next to each other.
Remove the spaces
The reason you get the spaces is because, well, you have spaces between the elements (a line break and a few tabs counts as a space, just to be clear). Minimized HTML will solve this problem, or one of these tricks:
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
or
<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul>
or with comments...
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
They're all pretty funky, but it does the trick.
Negative margin
You can scoot the elements back into place with negative 4px of margin (may need to be adjusted based on font size of parent). Apparently this is problematic in older IE (6 & 7), but if you don't care about those browsers at least you can keep the code formatting clean.
nav a {
display: inline-block;
margin-right: -4px;
}
Skip the closing tag
HTML5 doesn't care anyway. Although you gotta admit, it feels weird.
<ul>
<li>one
<li>two
<li>three
</ul>
Set the font size to zero
A space that has zero font-size is... zero width.
nav {
font-size: 0;
}
nav a {
font-size: 16px;
}
Matt Stow reports that the font-size: 0; technique has some problems on Android. Quote: "Pre-Jellybean does not remove the space at all, and Jellybean has a bug whereby the last element randomly has a tiny bit of space." See research.
Also note, if you're sizing fonts in ems, this zero font size thing can be an issue, since ems cascade the children would also have zero font size. Rems would be of help here, otherwise any other non-cascading font-size to bump it back up.
Another weirdness! Doug Stewart showed me that if you use #font-face with this technique, the fonts will lose anti-aliasing in Safari 5.0.x. (test case) (screenshot).
Just float them instead
Maybe they don't need to be inline-block at all, maybe they can just be floated one way or another. That allows you to set their width and height and padding and stuff. You just can't center them like you can by text-align: center; the parent of inline-block elements. Well... you kinda can but it's weird.
Just use flexbox instead
If the browser support is acceptable to you and what you need out of inline-block is centering, you could use flexbox. They aren't exactly interchangeable layout models or anything, but you might get what you need out of it.
Since the video tag defaults as an inline-block element, simply make the video tag a block element in CSS. Bob's your uncle.
video {display: block;}
In my case, I was using 640x480 for the video size. I changed it to 640x360 and that removed the white space above the video.
I would say that in my case setting this css helped:
height:auto;
I've gotten stuck on how to code the css for these inverted curvy tabs that were supplied by a design agency.
see here: http://max-guedy.com/images/tab.png
EDIT added example with hover state.
I created a demo how I would do it:
jsBin demo
We set the brown color to the whole ul element
a 25x52 sprite image .png of the curve : (will change bg-position on hover)
http://img401.imageshack.us/img401/258/bg2d.png that we will set to the li element but with no bg color.
The most importsnt here is to setup a higher z-index to the li elements, decreasing it on hover
Take care to set to the a elements left padding and respective -left margin to allow the anchor to 'hide' below the previous element image.
Done that you can have wide and wider links and your template will do the work!
and this CSS:
ul#nav{
height:26px;
background:#A15049;
border-bottom:1px solid #fff;
}
ul#nav li{
position:relative;
background:transparent url(http://img401.imageshack.us/img401/258/bg2d.png) no-repeat right top;
height:26px;
display:inline;
float:left;
padding:0 25px 0 5px;
z-index:1;
}
ul#nav li a{
padding-left:24px;
margin-left:-24px;
height:26px;
display:block;
color:#fff;
}
ul#nav li:hover{
z-index:0;
background: url(http://img401.imageshack.us/img401/258/bg2d.png) no-repeat right -26px;
}
ul#nav li:hover a{
background:#CE392C;
}
It is just about possible to achieve this kind of thing with CSS.
Very difficult, but possible.
By default, border-radius of course only gives you regular rounded corners.
You can stretch them to some interesting shapes by adjusting the radius values. This will get you some of the way to your goal.
But the real trick here, to get the round-out parts of the tabs, is to use the CSS :before and :after pseudo-selectors to create additional styling elements, to which you need to add further border-radius.
The technique is described here: http://css-tricks.com/better-tabs-with-round-out-borders/ ... albeit for a fairly simple vertical-shaped tab. But it does a good job of explaining how to achieve the turn-out effect, which will be critical to you if you want to do this in CSS.
Bear in mind also that none of this will work in old versions of IE. IE8 does support :before and :after, but not border-radius. And while hacks like CSS3Pie exist to fix that, I wouldn't recommend using them for this kind of thing. It is likely to break.
If all the above sounds quite tricky and not really worth it, I would tend to agree. I think you'll find that a few simple images will work much better for your tabs in this instance. You could also try SVG to draw them if you want to be clever, but this will also have issues with old versions of IE.
Hope that helps.
You're easier off using images.
But if you insist on using CSS, I'd say that you need to use a lot ofborder-radius
That's an interesting challenge.
My first idea was to apply a skew transform to the tabs, a border radius to the top right corner and take care of the rounded lower part using a pseudo-element.
Unfortunately, this looks ugly http://dabblet.com/gist/2759785
Still, it bugs me that there must be a better way to do it with pure CSS.
I would say it's possible, but the amount of time that it would take would not be worth it, especially because it won't work in IE < 9...
There is a good tutorial that I have used in the past at css-tricks
However, as others have pointed out, I would recommend using images.
It really doesn't take THAT much CSS to achieve this anymore. Granted you'll have to toy with the radius' to get the desired slant.
HTML
<div role="tablist">
active tab
inactive tab
inactive tab
</div>
<div class="pane">
<section id="active-tab1" role="tabpanel">
<p>Show whatever</p>
<p>You Want</p>
<ul>
<li>inside</li>
<li>This</li>
<li>Section</li>
</ul>
</section>
<section id="active-tab2" role="tabpanel">
</section>
<section id="active-tab3" role="tabpanel">
</section>
</div>
CSS
[role=tablist]{padding:15px 15px 0;margin-left:88px;}
[role=tab]{
color:#222;
display:inline-block;
padding-left:15px;
padding-right:15px;
text-decoration:none;
line-height:44px;
position:relative;
min-width:150px;
text-align:center;
border-radius:15px 15px 0 0}
[role=tab]:hover{background-color:#ecf0f1;color:#222;}
[role=tab][aria-selected=true]{
background-color:#3498db;
color:white; }
[role=tab]:before,
[role=tab]:after{
content:'';
border-bottom:10px solid #3498db;
position:absolute;
bottom:-10px;
width:44px;
height:22px;
z-index:1; }
[role=tab][aria-selected=true]:before{
left:-44px;
border-right:10px solid #3498db;
border-bottom-right-radius:25px;
}
[role=tab][aria-selected=true]:after {
right:-44px;
border-left:10px solid #3498db;
border-bottom-left-radius:25px;
}
.pane{
background-color:#3498db;
padding:25px;
margin-left:5px;
margin-right:5px;
color:white;
border-radius:15px;
}
And odds are you can slim even that down, made it in about 10 minutes.
http://jsfiddle.net/darcher/819yz9Ly/
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.
Scenario: I have an unordered list < ul > of width (lets say 200px) with four < li > elements that are sized equally. Therefore each should be 50px. When I add a 5th < li > element each width should re-size to 40px. If I change the width of the < ul > to 500px with 5 < li > elements, each < li > element should be 100px.
Is this possible with only CSS? If yes, how is it implemented?
Currently, I have a solution that meets the above requirements but it includes jQuery to re-size the < li > elements based on mathematical calculations.
Thanks for the attention.
Aparently you can fake tables like here, but I am not sure if this works in all browsers(edit: it works on winxp ie8, chrome 7, firefox).
<div id="menu">
<ul>
<li>
...
</li>
<!-- other list items -->
</ul>
</div>
#menu {
display: table;
}
ul {
display: table-row;
}
li {
display: table-cell;
}
Also example on fiddle.net here
Your question doesn't completely make sense to me. If you leave the widths off, the list will be as wide as it needs to be. But here's a crack at your question:
<style type="text/css">
ul
{
width:500px;
}
li
{
width:100px;
}
</style>
<ul>
<li>1. one</li>
<li>2. two</li>
<li>3. three</li>
<li>4. four</li>
<li>5. five</li>
</ul>
Using CSS expressions it is possible, but CSS Expressions come with a very heavy performance penalty. JavaScript (and jQuery for that matter) is the appropriate tool to use to create the effect you want.
CSS should only be used for styling, HTML should only be used for structure, and JavaScript should be used whenever you want to create dynamic content.
Until such a time as browsers implement the calc(), min() and max() functions this isn't possible outside of scripting (either server-, or client-, side) or using a table.
Currently, and surprisingly (perhaps only to me), neither Firefox, Webkit or Opera support calc() function, not even with the various flavours of vendor prefix.
That said, one day something like the following might work (but not today, sadly):
ul {
counter-reset: numListItems;
width: 60%;
}
ul li {
counter-increment: numListItems;
width: calc(100%/numListItems);
}
But, obviously, for that to work browsers would need to implement some form, and understanding, of variables within the scope of calc(), which doesn't appear to be necessarily on the road-map (I'm not sure that the counter() is, or is intended to be, interoperable with the calc()).
I'm having a weird problem with IE8.
Page DOCTYPE is QuirksMode and I CANNOT change it (I wish I could, but there's no way at this time). Widths are hacked to fix the difference of box modem interpretation between IE and other browsers.
It's a simple horizontal navigation bar. It has a border all along, and the selected item should be a little bigger in order to "cover" the outer border. Works like a charm at FF, but in IE, the #container ignores it's height property and expands to fit it's childs, gets up to 34px and the border is not covered.
The simplified HTML is this:
<style>
#container {
padding:0px;
margin:0px;
height:30px;
border-bottom:#000 2px solid;
background-color:#ccc;width:780px
}
#list {
padding:0px;
margin:0px;
height:100%;
float:left;
background-color:#CCFFFF
list-style-type:none;
}
#list li {
float:left;
}
.selected_item {
height:30px;
*height:32px;
border-bottom:#FFF 2px solid;
background-color:#FFCCFF
}
.nonselected_item {
height:28px;
}
</style>
<div id="container">
<ul id="list">
<li class="selected_item">First item</li>
<li class="nonselected_item">Second item</li>
</ul>
</div>
Any ideas?
Thanks in advance.
Andrea.
Try adding position:absolute to #list
Thank you for your answer Alohci, that did the trick!
MSW, thank you for your answer too, but this application is used by about 5 thousand users a day, along 40 productive websites that run on the same code, and we should upload and test about 2 thousand pages in order to change doctype. AND... we don't have this kind of CSS problems often because structure doesn't change ofte. We may have one or two of this ones a year, so the effort to change doctype is not justified right now. We'll change it the day that we need to implement a change that affects all 40 websites and cannot be achieved otherwise.
With a Quirks DOCTYPE, you are asking IE to pretend it is IE6 (more-or-less). If it is truly an immutable DOCTYPE, then you either have to code to IE6 quirks and proper markup as a decade of webslingers have had to or find some way to tell IE8 to never respect Quirks.
Engineering is about tradeoffs; yeah, I understand that you may not be able to change that one word in that mission critical page and that it will cost you immense effort to code to browser standards from 2001, but if those are the constraints, so it goes.
first line, no type defined, try <style type='text/css'>
on the 7th line you missed a semicolon after width background-color:#ccc;width:780px
try adding max-height:32px; to #list li