I'm working on a pagination sort of thing, which is simply just a bunch of floated anchor-tags inside a div. Now, in IE7, it inserts empty text nodes here and there, seemingly at random, which breaks the layout.
Result:
Example of how it looks on different pages. Note the empty text nodes. Neat, huh?
CSS:
.nwsPaging {
width:200px; /* Have also tried fluid size */
height:30px;
display:block; }
.nwsPaging a {
width:auto; /* Have also tried fixed size */
margin:0 0 0 1px;
padding:2px 8px;
border:solid 1px #ccc;
background:#eee;
float:left;
line-height:20px;
display:block;
zoom:1;
vertical-align:top; /* Should not do any difference */ }
.nwsPaging a:hover, .nwsPaging .isActive {
background:#D150A1;
color:#fff;
display:block; /* Should be redundant, but just in case */
zoom:1; }
As you can see, I've tried some different things, including setting a fixed width for the container and the floated -tags, plus giving it hasLayout. The .isActive class has nothing special in it, and it makes no difference if I never add the class.
I had the exact same problem in a different system, however I can't remember how I fixed it. I don't have access to the code, and the inspector is no help.
Bonus info:
The site is built on HTML5Boilerplate, which uses normalize reset CSS.
Edit:
The markup is very simple, and although the tags are dynamically created, there should be no line breaks which could possibly create empty text nodes.
How the markup should be presented as parsed:
<div class="nwsPaging clearfix">
Previous
1
2
3
Next
</div>
This could actually be caused by line-breaks in your code.
Strip them and see if it still does that.
Related
I've been trying format a new webpage header/nav bar with the html5 mark-up. I'm having difficulties getting my css to format things correctly. Using divs and tables I was able to produce the following:
I want to produce the above image without using divs or tables, the following is a summary of my attempt that didn't work. I believe my understanding of display:table-cell is missing something.
Changing to the html below and using the following css attributes display:table,display:table-row,display:table-cell,ect. is causing an undesired anchor height - I poked around with some dev tools and I'm fairly certain the anchor height is the issue. (complete css is on this JsFiddle):
<header>
<nav>
<img class="logo" src="img.png"/>
<h1>Home</h1>
<h1>Blog</h1>
<h1>About</h1>
<h1>Contact</h1>
</nav>
</header>
trying to set the anchor and header tag max-height:100px didn't work (along with a handful of other attempts), it keeps getting computed to ~130px.
Please see JsFiddle for the code.
replace your CSS with mine
nav h1{
color:lightgray;
font-size: 150%;
border-left:2px solid whitesmoke;
padding:0px;
min-width:50px;
padding-right:30px;
}
nav a{
float:left;
width:20%;
max-height:100px;
}
nav a h1:hover{
color:lime;
}
nav{
height:100px;
background-color:#000000;
box-shadow: 0px 0px 10px #000000;
}
header{
background-color:black;
background-position:-50px 0px;
float:left;
width:100%;
max-height:100px;
}
header img.logo{
background-size:contain;
background-repeat:no-repeat;
width:430px;
float:left;
}
key is to add float:left instead of using display:table,display:table-row,display:table-cell
The extra 30px is coming from the 15px padding on the h1 tags as padding is not included in the max-height
Alternative Solution and explanation using display:table,display:table-row,display:table-cell
Alternatively I figured out what was causing the obscure height. when using table, tr, and td tags the max-height of the table-cell (td) was never overwritten.
When I changed the tags to header,nav elements the anchor tag, even thought it had display:table-cell and max-height:100px was still allowing the height to be overwritten, by it's internal contents, the h1 tag. The h1's margin was causing the height of the anchor tag to be higher than desired. I resolved the issue by setting margin:0px of the h1 tag.
Using float it caused the anchor tags to re-render below the logo. I wanted it to stay in scale in the same line. I didn't specify this is my question, so I'm leaving the previous selected answer selected.
This fiddle shows I can widen/narrow the page and keep the navigation elements scaled and spread out accordingly.
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 have a menu, based on nested, unordered lists. All styling and display is done via css.
The menu is wrapped in a fixed-width div. For some top-level items, the submenu contains too many items for one line and these wrap onto a second or even third line, expanding the div height. This works fine.
What I am trying to do is to add a horizontal line/divider/border between the rows of submenu items, irrespective of the number of rows, and equal in width to either the row below or above (preferably below). Obviously, no line will be present if there is only one row of items.
I tried to add a background along the top of the entire <ul id="submenu"> and then remove it from just the first line using ul#submenu:first-line{}, then realised that this cannot be done (headslap).
I then altered the structure of the menu to use <p> elements nested in divs, again using div#submenu:first-line{}, but testing this gives me strange results. For example, a background colour will show in the first line, but only half the height of the submenu items; background images appear halfway up the submenu items. Sometimes nothing shows until I click on the current top level menu item.
I even tried replacing the list structure with a single <p> element, containing a series of <a> elements, and got the same results.
The evidence suggests that I am not using the :first-line pseudo-element properly, but reading around the web suggests that this should work.
Any suggestions as to what I am doing wrong and how to get these horizontal lines, preferably with CSS and without JS?
Here's my code:
#subMenuContainer {
width:100%;
margin-top:20px;
}
#subMenu {
width:600px;
margin:0 auto;
text-align:center;
background:#ddd;
}
#sub {
border-top:2px solid green;
padding:0px;
line-height:30px;
}
#sub::first-line {
border-top:2px solid red; /* doesn't work */
background-color:pink; /* works */
color:yellow; /* doesn't work */
}
#sub p {
display:inline-block;
padding:0px;
}
#sub p a {
padding:0px 0px;
line-height:1em;
}
<div id="subMenuContainer">
<div id="subMenu">
<div id="sub" >
<p>MenuItem1</p>
<p>MenuItem2</p>
<p>MenuItem3</p>
<p>MenuItem4</p>
<p>MenuItem5</p>
<p>MenuItem6</p>
<p>MenuItem7</p>
<p>MenuItem8</p>
<p>MenuItem9</p>
<p>MenuItem10</p>
</div>
</div>
</div>
And the same in jsfiddle.
I think you should be using the :first-child rather than the :first-line pseudo class.
:first-line refers to the first line of a text element
:first-child refers to the first child element of a parent. e.g. the first li in your ul.
See http://www.w3schools.com/css/css_pseudo_classes.asp for more details.
If that doesn't sort you out, can you post your markup?
V.
My head is about to explode after looking into why this is not working for me. All is ok in Firefox but in IE nothing shows up to click unless I have text or something in the <a>'s. I've searched for a long time and would prefer not using un-needed .gifs. You can ignore the high z-index values. I've also tried putting <a> in a <span>. Basically what I want is an empty div and empty a that links to an image.
.gallery
{
position:absolute;
width:400px;
height:100px;
margin-left:300px;
margin-top:0px;
z-index:1000000;
}
.gallery a
{
position:relative;
cursor:pointer;
display:block;
width:400px;
height:100px;
z-index:999999999;
}
<div class=\"gallery\"><a title=\"Front Entrance of the new Pontiac branch.\" href=\"images/Pontiac/P5020002.JPG\"></a></div>
The problem is IE needs a background. You can fool it with a spacer image or just a dummy image like:
background:url(/no-image.jpg);
That should fix it.
I'm not sure if you're using that HTML directly, but you don't have to escape the double quotes.
Your example works for me in IE once I fixed the quote issue: http://jsfiddle.net/U2yeJ/
Are you sure you clicked in the right area?
I am trying to visualize a sort of TV program guide, a line for each channel. The HTML structure is:
<DIV id="channel2_new" class="channel"> // id different for each channel
<IMG src="channel2.png"> // logo source different for each channel
<DIV class=program">
<P style="width:200"> // actual width value reflects program length
<SPAN class="time">06:00</SPAN> // actual time
<SPAN class="title">TG2</SPAN> // actual title
</P>
</DIV>
</DIV>
The CSS is:
.time{
visibility:hidden; width:0px; margin:0px; padding:0px; float:left;
}
.channel{
height:30px; white-space:nowrap; margin:0px; width:1000px; overflow:hidden;
}
.logo{
border:none; float:left; height:20px; margin-top:5px;
}
.program{
position:absolute; left:80px;
}
P{
float:left; border-style:solid; border-width:thin; height:20px; overflow:hidden; margin-top:0px;
}
The idea is to show only the programs that fit within the "channel" width (corresponding to a specified time window, i.e., from 6pm to 10pm). For the programs that start within this window (i.e., at 9pm) but end later (i.e., 11pm), only a partial box should be shown (this is what I hope the "overflow:hidden" attributes should do).
See this example web site to understand better what I'm trying to do: http://it.tv.yahoo.com/
In my case, this happens only in an apparently random way: for some channels it works, for other channels the last "program" rectangle is completely missing (no border, no text). If I change the window width, the same channel that was showing correctly might not be working any more, while others might work!
Do you havee any suggestion?
Thanks.
What you may be looking for is text-overflow: ellipsis; if you apply it to your p like I've done here: http://jsfiddle.net/P8V4e/6/ you get the ellipsis when the text from .title overflows the p element. Is this the behavior you're looking for?
I also added a min-width: 1em; property to the p, that way it won't collapse completely and not show the ellipsis, but will still retain the width of the other elements. I don't know if that will mess up your formatting.