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;}
Related
We're using the following code as a vertical spacer in an HTML email:
<div style="height:14px; font-size:14px; line-height:14px;"> </div>
This works well everywhere -- except Hotmail where it creates a very large space. We've researched this a bit and it seems Hotmail embeds CSS by default that causes a lot of issues.
We've included the following code to try to address the issue, to no avail:
.ExternalClass, .ExternalClass p, .ExternalClass span,
.ExternalClass font, .ExternalClass td, .ExternalClass div {
line-height: 100%; margin: 0; padding: 0;}
Hoping that someone else here might have a solution or even a workaround.
If its just a spacer then why not use a table with a spacer image instead. Most email clients prefer a table over a div with inline style and will render it correctly. Something as such:
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td height="10">
<img src="http://media.instantcustomer.com/22033/0/5_spacer.png" alt="" width="1" height="10" border="0" style="border:0" />
</td>
</tr>
</table>
Change the height from 10 to whatever height you need. You ll have to specify the height in the td as well as the img element. Replace the spacer image if you like. You might even be able to get away with not using a spacer image at all.
You can use this: <br> <br> or you can wrap it in a font tag to set the height. You can also use padding in your <td>, or a table as saganbyte suggested.
Just note that Outlook wraps <p> tags around tables, which adds about 15-20px of vertical spacing if someone forwards your email. Using a table rows instead adds only a few pixels. With this in mind, always keep your background colors the same so that you don't get an unwanted line.
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
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.
For all my websites so far I have used table layouts but now I wish to try and use a pure CSS layout. But I am really struggling!
How can I emulate the following in CSS:
<table>
<tr>
<td>Some Content 1</td>
<td>Some Content 2</td>
</tr>
</table>
Now lets assume that "Some Content 1" and "Some Content 2" are instead <img> tags. Then the resulting output is two images side by side with centred vertical justification. The size of the two cells in the table are the size of the images plus some padding.
So the table is automatically sized to fit the images or whatever content is inside the cells.
But how do I do this in CSS, it is driving me mad! I am nearly at the point of giving up and just using a table layout, and why not, it is so simple.
Any suggestions most gratefully received.
Thanks,
AJ
Honestly, just stick to tables. Switch to table-less when CSS will offer all the tools needed for grid-like layouts AND all browser will reliably support them.
Your other choice is juggle a lot of hacks and get a spare F5 key for testing.
Then the resulting output is two images side by side with centred vertical justification. The size of the two cells in the table are the size of the images plus some padding.
Do you mean something like this?
<!doctype html>
<html lang="en">
<head>
<title>SO question 2005928</title>
<style>
#images img {
padding: 10px;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="images">
<img src="http://sstatic.net/so/img/logo.png" width="100" height="50">
<img src="http://sstatic.net/so/img/logo.png" width="50" height="100">
</div>
</body>
</html>
Similar layout can be generated using CSS and div tags.
Now a days there many tools available to build such layout using CSS. All modern web page designing tools have these features.
Apart from this tools like Yahoo Grid Builder (link to Yahoo Grid builder) can also be handy for the same.
Change your table, tr, and td tags to div's and make the 'td-divs' float:left. Or, use display:inline-block (with all associated problems), or, use display:table-cell (with all associated problems).
This works in Firefox(haven't tested in other browsers). The borders are just for illustration.
<div>
<div style="float:left; width:49%;border:1px solid black;">
<img style="float:right; width:343px" src="http://www.virginia.edu/german/images/Berlin-City2.jpg"/>
</div>
<div style="float:right; width:49%;border:1px solid black;">
<img src="http://www.virginia.edu/german/images/Berlin-City2.jpg"/>
</div>
</div>
Your question is slightly ambiguous (maybe it's me) but you could also mean this:
<div>
<div style="float:left; width:49%; border:1px solid black;">
<div style="margin:auto; width:343px; border:2px solid red;" >
<img src="http://www.virginia.edu/german/images/Berlin-City2.jpg"/>
</div>
</div>
<div style="float:left; width:49%; border:1px solid black;">
<div style="margin:auto; width:343px; border:2px solid red;" >
<img src="http://www.virginia.edu/german/images/Berlin-City2.jpg"/>
</div>
</div>
</div>
This doesn't satisfy all your requirements but is close.
Forget about the "either or" concept with CSS vs. tables. Both have pros and cons that will drive you up the wall.
I say create as much as you can with CSS, the other layout issues you have, use a table.
Besides, between grid systems and CSS3's TABLE-LAYOUT and template layout module, CSS is really moving towards a "table-based" layout anyway.
The only way I see you can do it otherwise is using <div> tags and setting their properties, such as float in CSS.
I don't think you can actually create a table in CSS, as CSS defines the style of the page and it's elements, not the elements itself.
To make an element behave like a table using pure CSS, use the display property and the values table, table-row, table-cell, inline-table, etc.
This isn't supported by IE, and somewhat defeats the objective of not using tables for columnular layout as the markup is still row based.
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.