I'll provide direct link for people who wants to see it live.
Just hover one of the table listing and you'll see there is always a small space under images. I've tried padding, margin, searched stackoverflow for it and used border spacing, border collapse etc. but nothing helped so far.
I would like your help. What's the problem and what am I missing?
Problem isn't the table actually, img tags are inline elements and have that bottom spacing by default (something with line-height I guess, don't really know why).
Solution: div.browseBuilds tr.browseBuilds_piece img { display: block; }
Add display: block to img.
.browseBuilds_piece img{
display:block
}
See this similar question. Because img is an inline element, whitespaces in the HTML source code around the img tag matter and will be displayed. Either remove the whitespaces from the code
<td style="vertical-align: middle;"><img src="./themes/default/images/builds/eski.jpg"></td>
or display the img as a block element, as Michal has pointed out.
User cellpadding="0" and cellspacing="0" as a table attribute.
<table border="0" cellpadding="0" cellspacing="0" >
The problem could be cellspacing and cellpadding but im not sure ... really good tool for this stuff is firebug , inspect element you will see all used styles etc.. or try to fix td height on 50px like your img
Related
I need to center an entire table in xHTML. The tags that work in HTML to do so do not necessarily work in xHTML, but the way to do it is not obvious (to me).
Works in HTML:
<div>
<table border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse:collapse; width:90%;">
Not working in xHTML:
<div>
<table border="0" cellspacing="0" cellpadding="0" style="align:center;border-collapse:collapse; width:90%;">
Using text-align:center instead changes the alignment of text within cells, rather than the alignment of the entire table on the page.
What is the correct method to center align a table in xHTML.
One way to accomplish this is to use margins in the style attribute:
<table style="margin-left:auto; margin-right:auto">
Posting as answer.
I think you're better off using the margins to center it. like:
margin:0px auto;
That works WAY better. Hope that helps!
Keep in mind that you're using CSS to change adjective/styling whereas (X)HTML concentrates on noun constructs (headers, images, paragraphs, etc). XHTML table is a noun, CSS margin and text-align are adjectives used to describe those nouns.
Also it's simpler to use a block/inline catch-all class:
.center {margin: auto; text-align: center;}
I have one div displaying as table-cell and I want to position the another one relative to the first one. But it doesn't work in Firefox.
Open this link in Firefox please, and see the difference. How can I fix it?
http://jsfiddle.net/JFAbM/
I saw someones didn't understand what I need exactly. So I updated the code. I need to position the light gray block.
http://jsfiddle.net/JFAbM/7/
Guys, I have already solved it with wrapping extra div
Ex. here jsfiddle.net/JFAbM/8
just change the position:absolute to position:relative, no need to wrap any extra div
see this Fiddle
update : http://jsfiddle.net/JFAbM/5/
Replace position:absolute; with position:relative;
Check fiddle
I'm also searching for an appropriate solution. As jumancy pointed out and as far as I can see you will need a wrapper-element:
<table>
<tr>
<td><div class = "relative-wrapper">
<!-- Other stuff goes here -->
<div class = "pos-abs">Be relative to me, wrap me, show me on hover!</div>
<!-- or here -->
</div></td>
</tr>
</table>
//CSS
.relative-wrapper{
position: relative;
display: block;
}
.pos-abs{
position: absolute;
}
I have a some images that I need to line up without any gaps. I can get them fine in jsFiddle, see http://jsfiddle.net/QZLSf/2/
But on the actual SharePoint site the images have a gap between them, kind of like http://jsfiddle.net/QZLSf/1/
I have checked with FireBug and the images, and links, have all the properties they should have, but I can't get rid of that gap.
What could I be missing?
EDIT: I know that the second link has footerlinks defined as a class, but I was just using that to illustrate the problem I'm having. That's not what my actual code is.
EDIT: EDIT: Ok guys there seems to be a misunderstanding as to what I am asking here. I know HOW to get the required result, just that it isn't working on the SharePoint site. I just need advice on what might be wrong as everything that should work isn't working.
Remove the whitespace/line breaks between images.
Demo: http://jsfiddle.net/QZLSf/12/
Just posted this solution elsewhere and think it's the same thing.. is your Sharepoint implementation putting the <img> elements on separate lines in the HTML?
In your fiddle you have them all on one line.. if that's the difference then I'm afraid it's natural behaviour for inline elements (space between words).. there are hacks out there that involve HTML comments or removing the spacing or splitting the img tags, but if you can't have (or don't want) an HTML workaround - then something like this should work
CSS:
div {word-spacing: -4px; background: #eee; border: 1px solid #000; width: 600px;}
div p {word-spacing: 0;}
HTML
<div>
<img src="http://dummyimage.com/150x50/dad/fff" alt="my mini thing" />
<img src="http://dummyimage.com/150x50/000/fff" alt="my mini thing" />
<img src="http://dummyimage.com/150x50/dad/fff" alt="my mini thing" />
<img src="http://dummyimage.com/150x50/000/fff" alt="my mini thing" />
<p>the div containing these images and text has it's word-spacing set to -4px which removes the default whitespace</p>
<p>but then you want some text with normal spacing reset the word-spacing to 0 on the <p> elements, which is the default</p>
</div>
this is your code:
#footerlinks a, #footerlinks img{
but footerlinks is class not an id, so use this:
.footerlinks a, .footerlinks img{
ways to skin cats...
http://jsfiddle.net/eCSYt/45/
Update for bazmegakapa:
Sorry assumed the code was pretty easy to follow and I just presented it as an alternative way to approach it..
The gaps were caused by the white space in the HTML formatting - which is significant. By setting the font-size to 1px (actually 0 would be better if it is supported xbrowser) the white space is too small to render. In a real page you may also need to zero the line-height as well.
I used text-align to centre the text just to show an alternative method... and it has the advantage that you don't need to know the total width of the images
That's just the way it is. You have to set the margin-left to -4px
.footerlinks img {
margin-left: -4px;
}
.footerlinks img:first-child {
margin-left: 0px;
}
Demo: http://jsfiddle.net/QZLSf/11/
EDIT: This solution is more correct. I fixed the margin on the first child.
I'm having hard time with Xhtml Strict 1.0 and Css. And I'm almost out of solutions.
My Site Url: http://www.pro-turk.net/beta/
I made a jquery multilevel dropdown menu for my site.
It looks like OK, but I have used inline-block property of css display attribute on navigation menu which is a part of css 2.1 and isn't supported by some browsers (including ie6 and ie7).
I want to make #nav > li elements block level elements, but to do this and having all of them in same line, the only way is using float in #nav > li. But I want to center them in their parent (the menu bar). So I need something like float:center (I know it's pretty stupid and doesn't exist). But is there a way to include block level elements as children elements without linebreaks (I mean without making a block level element).
Regards.
I think there is no solution for it in css2 without using tables.
You can make li float left or right and make the menu itself centered. Make the menu the width of the sum of its elements.
#nav
{
width: 500px;
/* This will center the block within its container */
margin-left: auto;
margin-right: auto;
}
EDIT: Since you don't know the width of the menu (it's dynamic) we're coming to the very case when there is no alternative to tables.
<table border="0" cellpadding="0" cellspacing="0" style="margin: 0 auto;">
<tr>
<td>Menu item 1</td>
<td>Menu item 2</td>
<td>Menu item 3</td>
<tr>
<table>
P.S. There is some substitution for tables with newer CSS3 extensions like display:table | table-cell etc., but it doesn't have a wide-spread support yet.
display:inline-block isn't supported in IE6 or IE7, but you can get the same effect in those browsers by using display:inline and ensuring that hasLayout is set on those element by, say, using zoom:1. Use conditional comments to direct the different css to those browsers only.
I have the following code that I am using to display a search tool with a scrolling results section. In IE the code works fine:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html style="background:black;height:100%;width:100%;">
<head>
<title>Report</title>
</head>
<body style="background:black;">
<table HEIGHT="100%" WIDTH="100%" style="background:red;">
<tr>
<td>
Search Area
</td>
</tr>
<tr>
<td HEIGHT="100%" WIDTH="100%" style="background:orange;">
<div style="overflow-y:scroll;height:100%;">
<table style="width:100px;height:1000px;">
<tr>
<td style="background:white;">
Results Area
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
But when I set the meta tag to use IE8 formatting by adding:
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
The bottom DIV tag expands beyond the page. I have tried a number of options though and can't find a way around it without actually specifying a height for the values. Which will not work as I want the page to take up 100% of the screen no matter the size of the browser window.
Any help would be much appreciated.
This metatag enables correct CSS rendering, and in CSS – by design – height:100% basically doesn't work.
You need to give specific height to every single ancestor of the element, including <body>, <table>, <tr> and even <tbody> element that's automatically inserted by the parser.
Anyway, this layout can be achieved in easier way:
.topBanner {
position:absolute; position:fixed;
height:2em;
top:0; left:0; width:100%;
}
body {padding-top: 2em}
this will degrade nicely in IE6, and unlike overflow, will work properly in Mobile Safari.
Edit:
Removing the DOCTYPE declaration will make height="100%" work but it puts the browser in quirks mode though, which is not desirable.
Generally speaking using tables for layout is discouraged, you should use CSS instead.
For example: http://jsfiddle.net/rf649/7/
HTML
<div id="search">Search Area</div>
<div id="results">Results Area</div>
CSS:
#search {
background-color: red;
position: fixed;
height: 150px;
width: 100%;
}
#results{
background-color: orange;
position: fixed;
top: 150px;
width: 100%;
bottom: 0;
overflow: auto;
}
You should set all margins and paddings for the parent elements to zero in order to get what you want.
Update: Sorry, didn't understand the problem at once. Ben's hint should be the better one I assume. :)
Update 2: Oops, since Ben has deleted his answer my first update doesn't make any sense. Try setting the body's height to 100%, that should solve the problem.
My understanding about cross browser CSS is not that big so it might not be the best solution, but it's a solution.
As far as I've seen, you always have to set the height/width of the container that you want to overflow, so you need to set them.
To deal with the resolution I would suggest you to add a jQuery script at the onReady event that dynamically would fix the height and width making the overflow work.
I had the similar problem like you and finally the solution was to modificate a CSS line entry that had an !important modificator for a fixed height declaration. In the HTML code the class (defined in CSS) had the height assigned to 100%, but the CSS applied the !important during the style loading.