|
HTML - Table Layout - Cross Browser Issue
If anyone can help with this problem I would be very grateful.
It's a problem I notice on a fairly regular basis so I guess I am over looking something when I am working with tables. Basically my table sizes look completely different in IE than they do in Firefox. Here is an example of a table I'm working on that appears massive in firefox yet is keeping its correct dimensions of height 287 pixels in IE. http://www.orolin.co.uk/prices.html Can anyone shed any light on this problem?. It would be much appriciated. Many Thanks, Jamie Similar TutorialsIE8 and Chrome display this as I would like. Firefox does something strange: any cell that doesn't have a corresponding cell in the next row down will be extended into that row. Any ideas? HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Untitled Page
</title>
<link rel="Stylesheet" type="text/css" href="/SMSTool.NET/css/StyleSheet.css" />
<style type="text/css">
table{
border-collapse:collapse;
border:solid black 1px;
}
td, th{
border:solid black 1px;
}
</style>
</head>
<body>
<table>
<tr><td>TD</td><th>TH</th><th>TH</th><td>TD</td></tr>
<tr><th>TH</th><td>TD</td><td>TD</td></tr>
<tr><th>TH</th><td>TD</td><td>TD</td></tr>
<tr><td>TD</td></tr>
</table>
</body>
</html>
When you go to my site www.sforu.com with IE 6 or IE7 the picture is all misaligned, So could you take a look and let me know whats wrong with it, because it's driving me crazy Thank you Using AJAX & php to return a randomly generated number of single column tables, and drop them into a <div> element. ( http://www.thegreatmartinicompany.co...ace-value.html ). I've set the div to text-align: center, and put auto margins on the tables. The result is the tables are centered and equally spaced in the div element regardless of the number of tables returned. As appropriate FF and IE display the tables side by side, but Safari stacks them on top of each other. An example of the returned code is below. Any ideas why Safari does not display this as IE and FF do? <table style="margin-left:auto; margin-right:auto"><tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> </table> <table style="margin-left:auto; margin-right:auto"><tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> </table> <table style="margin-left:auto; margin-right:auto"><tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> </table> I actually feel a bit ridiculous because i can't solve a problem that will probably be as easy as hell... anyway, i have a table with some collspans and rowspans in it, but i can't seem to be able to set the width for the site in IE... Here's a simple representation of the table, since it's generated dynamically with PHP, so the number of rows and columns is not always the same...but the structure is: HTML Code: <table> <tr> <th rowspan=2 style="min-width=120px;">left column header</th> <th colspan=2 style="min-width=120px;">column 1 title</th> <th colspan=2 style="min-width=120px;">column 2 title</th> </tr> <tr> <td style="min-width=60px;">value1</td> <td style="min-width=60px;">value2</td> <td style="min-width=60px;">value1</td> <td style="min-width=60px;">value2</td> </tr> <tr> <td>row1 name</td> <td>row1 col1 value1</td> <td>row1 col1 value2</td> <td>row1 col2 value1</td> <td>row1 col2 value2</td> </tr> </table> So it should look a bit like this: Code: ------------------------------- | 120px | 120px | 120px | | |---------|---------| | |60px|60px|60px|60px| |---------|----|----|----|----| |rowname1 |val1|val2|val1|val2| |---------|----|----|----|----| |rowname2 |val1|val2|val1|val2| ------------------------------- there can be more rows with rowname, and more columns with the colspans... now in mozilla firefox this works just fine, but not in IE...even worse, if one of the values in the columns that are supposed to be 60px wide is negative, IE inserts a break between the '-' symbol and the numbers... i'm using HTML 4.01 Strict by the way... Hi there. Can anybody help me fix this issue. At this test url you will see a simple table layout that I have built in Dreamweaver http://www.mediaminx.com/development/ The css can be viewed here http://www.mediaminx.com/development/pages/test.css The problem is not Firefox as this renders the layout perfectly - as does 3 other popular browsers. The problem is IE - it just wont render the layout correctly. All the table cells are out of proportion and the css just isnt controlling. Note that when the middle cell isnot split into may cells ie will render the table correctly - as in 3 columns with the middle one at 760pix and the two outer set to auto and the height set to 100%. But as soon as I start splitting that middle column it throws IE out? Any ideas out there please? Greetings, This is my first post... I'm a novice web developer and pro drummer running www.ProMusicTeachers.com. The site is php/mysql, we have a search function smack in the middle of the index page that is set up as a <table>. The table should have a background image... this is the code I'm using is <table border="0" bgcolor="#FF9900" background="/images/searchgraphic.jpg" align="center" cellspacing="3" cellpadding="0" width="617"> to create the table, then comes the form. However, the background image shows up only in Safari, but not IE or Firefox. This seems like a very simple tag... and I swear last night it showed up in Firefox too but this morning will not. Any suggestions? Much thanks, Brian This page looks exactly like I want it to in Firefox but not in ie6 or ie7. In ie6 the fieldsets are different heights but I want them to be the same (as in firefox) and in ie7 some of the submit buttons are hidden. Can someone help me with this? Thanks... Hi - Just wondering if anyone can help me figure out layout problems on the following page: www.marchgallery.com/comments.php I'm designing on a mac, and everything looks good in Safari. When I open up in Firefox, though, the comments are way below the intro text and the layout of the submission form is all messed up. I've never experienced this much difference in appearance between these two browsers. Maybe someone (nearly all of you) are viewing on PC? How does it look on that end? I'm really at a loss here. Any clues or suggestions would be much appreciated! this site secretsoffitnessrevealed.com the menu bar links show up correctly in firefox but they show up vertically in IE and the home link doesnt work all together anything that wud fix it? heres the code HTML Code: <head>
<link rel="stylesheet" type="text/css" href="http://wiseones.50webs.com/Css">
<style type="text/css">
body { margin: 0px; padding: 0px; background-position: center top;}
p { font-size: 1; }
h1 {display: block; background-color: #D1CCC6; font-size: 12pt; Text-transform: none; color: black; letter-spacing: 0px; font-family: tahoma; }
h2 {text-decoration: none; font-weight: normal; font-family: tahoma; font-size: 11pt; color: #000000; text-transform:none; }
a:link, a:visited, a:active {
text-decoration: none;
font-weight: bold;
font-family: tahoma;
font-size: 12 pt;
color: #000000;
text-transform:uppercase;
}
a:hover {
background-color: none;
font-weight: bold;
font-family: tahoma;
font-size: 7pt;
color: #1B2B00;
text-transform:uppercase;
}
</style>
<title>Isometric Exercise Secrets Revealed</title>
<meta name="description" content="Energizing Isometrics is the complete health and fitness program which can be performed in only 5 minutes a day!">
<meta name="keywords" content="health,fitness,muscle,musclebuilding,strength,abs,sixpack,fatloss,weightloss,isometrics,sports,benchpress,weights,exercise,antiaging,physicalfitness,aging,youth,flexibility,strong,power,energy,nutrician,isometricsexercise,menshealth,womenshealth,isometric,workout">
<meta name="author" content="Energizing Isometrics">
<meta name="email" content="energizingisometrics@gmail.com">
</head>
<body>
<center><div style=" width: 652 px; ">
<!--BACKGROUND-->
<font size="1">
<body background="Untitled-2.jpg">
<!--TOP BANNER-->
<img src="http://i93.photobucket.com/albums/l77/Xtron12/best-viewed-in-frefox.gif"><BR>
<center><img src="http://i42.tinypic.com/rc20sj.jpg"><BR><img src="http://i42.tinypic.com/10qmow7.jpg"></center>
<!--MENU-->
<div style="position: absolute; left: 500; top: 155px; " <a href="http://secretsoffitnessrevealed.com/index.html">Home</a> :: <a href="scienceofisometrics.html">Isometric Science</a> :: <a href="http://secretsoffitnessrevealed.com/testimonials.html">Testimonials</a> :: <a href="http://secretsoffitnessrevealed.com/buy.html">Buy</a>
</div>
<!--CONTENT BOX 76334a</div>-->
<center> <div style="float: center; width: 800px; height: 970px; background-color: #EDEDED; padding: 0px; margin: 0px 0px; "><h1>About the Program</h1>
<h2>Energizing Isometrics is a complete exercise program which can be performed in as little as 5 minutes a day! Numerous scientific studies have confirmed that the isometric principle is a valid method for enhancing musculature and overall fitness. There are many books available which teach isometric exercises, however, Energizing Isometrics is the only comprehensive program which has been developed to maximize benefits in the least amount of time.<BR><BR>
There are endless devices on the market for developing muscle and losing weight, some with price tags in the thousands. Why use valuable living space in your home, or make monthly payments for an apparatus that will eventually end up in the garage. With Energizing Isometrics, your body is the only device you need!<BR><BR>
Years of research have gone into the creation of the Energizing Isometrics program. The end result of this research is a health and fitness regimen that incorporates all the new findings and understanding about isometrics. Using the other outdated methods on the market will mean poor results and slow progress. Energizing Isometrics teaches the most up to date method of performing this type of exercise, in the most effective and efficient way. This equates to fast results with a very simple program that is easy to follow and perform.<BR><BR>Health and fitness are not as difficult (or expensive) to achieve as most think, or as the infomercials would have us believe. Energizing Isometrics reveals the unique and powerful method for improving our strength and fitness levels in only 5 minutes a day.</h2>
<BR>
<img src="http://i43.tinypic.com/jgs10h.jpg"><BR><div align="center"><a target="_blank" href="http://lightfit1.fatsecret.hop.clickbank.net">
<img border="0" src="http://www.topsecretfatlosssecret.com/images_boats/banners/topsecretfl-468x60b.gif" alt="Click here to Top Secret Fat Loss Secret" /></a></div>
<BR>
<div align="center">
<a target="_blank" href="http://lightfit1.healthebiz.hop.clickbank.net"><img border="0" src="http://www.healthbizinabox.com/images_boats/banners/healthbiab-468x60.gif" alt="Click here to go to Health Biz In A Box" /></a>
<BR><BR><BR>© 1998 - 2009
</div>
<BR><BR><BR><BR><BR>
</div></center>
</body>
Hi All - Check out www.theSalve.org/flashVid.htm - Any ideas why the layout is different in Explorer and Firefox or even Safari and Opera for that matter. I realize I'm not using CSS. Don't know how to yet. Anything I can add to make it look the same on all browsers? Hi all. I'm working on developing a site mostly for practice now, and I'm stumped by the prospect of cross-browser compatibility. My first inclination was to use javascript to write a stylesheet declaration for each browser type and then create each stylesheet so that it is styled for each particular browser. Then I discovered the horrendous rendering differences between even different VERSIONS of the same browsers. The most notable hiccup-fest I've encountered has been IE6 and IE7. IE6 seems to go berserk at just about every possible attribute for the div tag. This means that my styles for IE7 won't display correctly in IE6. So my question is pretty simple. Is the only way for me to make cross-browser compatibility a reality for me to create about 12 different versions of the same stylesheet? I'd really love to avoid that if possible. Alternatives would be much loved. Also, I'm currently using the XHTML 1.1 doctype. Would it be a big no-no for me to simply emphasize that my code conforms to the latest standards and any rendering errors are probably due to an out of date browser? I know this would alienate some users, but as the same time, I also feel that users should be encouraged to upgrade. I have created a web page which is running acquratey on IE8 but not running acqurately on IE7 or other version. I've been designing this site on a mac, and have tested it on several mac compatible browsers without much trouble. I just tried it on IE and a some things are messed up. http://www.jonniedredge.com First, all my images look really grainy and gross in IE (not just the ones on the home page). Anyone know why that is? Next, on the home page is a .swf file that has a black background, but the background appears white in IE. Also that .swf is in a table cell that should make up just the top corner of that main div, with a height of 50 pixels. But in IE, and FF, this cell takes up about 2/3 the height of the div. Here's my CSS in case that helps: Code: /***************Body, etc.*****************/
body {
background-color: #000000;
font-family: times, serif;
}
#container {
margin: 0 auto;
width: 750px;
padding-bottom: 5px;
/***** for layout development background-color:#FFEEEE; *******/
}
a {
text-decoration: none;
color: inherit;
}
a:visited {
color: #b0b0b5;
}
a:hover {
color: #475890;
}
.blank {
height: 100px;
}
.blank2 {
height: 50px;
}
/***************Bottom Links*****************/
.linksBot {
border: 0px;
background-color: transparent;
color: #c0c0c8;
/***background-color: #CCFF66;****/
}
p.linksBot {
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
a.linksBot {
color: #c0c0c8;
text-decoration: underline;
}
a.linksBot:hover {
color: #475890;
}
/***************Banner*****************/
.banner {
padding: 0px;
margin: 0px;
margin-bottom: 75px;
background-color: black;
color: #b0b0b5;
font-size: 20px;
font-family: copperplate, times, serif;
}
td.current {
text-decoration: underline;
}
/***************Home*****************/
#home {
border: 0px;
font-family: copperplate, times, serif;
}
#main {
color: #c0c0c8;
width: 750px;
font-size: 20px;
text-align: center;
outline: 3px solid #222530;
border: 0px;
}
#pno {}
#welccell {
background-color: #444550;
width: 250px;
}
#welcome {
margin: 18px;
color: #d0d0d5;
font-family: times, serif;
font-size: 17px;
text-align: left;
vertical-align: top;
}
/**************Bio*****************/
#headshot {
float: left;
margin-right: 30px;
margin-bottom: 10px;
border: 5px solid #d8d8e0;
}
#bioContainer {
background-color: #6080a2;
color: #d8d8e0;
padding: 20px;
height: 300px;
}
p.bio:first-line {
text-indent: 2em;
}
/***************Audio*****************/
#audioContainer {
margin: auto;
width: 650px;
background-color: #6080a2;
color: #d8d8e0;
padding-bottom: 7px;
padding-top: 7px;
margin-bottom: 75px;
}
.audioClips {
background-color:transparent;
margin:auto;
width: 620px;
}
caption {
font-size: 46px;
line-height: 1;
text-align: left;
font-family: copperplate, serif;
}
.sngDesc {
font-size:13px;
}
.sngDesc:first-line {
font-weight: bold;
width: 300px;
font-size:15px;
}
.sng {
text-align: right;
}
/***************Video*****************/
#vidLeft {
float: left;
width: 225px;
height: 350px;
background-color: #6080a2;
color: #d8d8e0;
margin-bottom: 75px;
}
#vidOutCont {
float: right;
width: 525px;
height: 350px;
background-color: #6080a2;
margin-bottom: 75px;
}
.vidDesc {
font-size: 12px;
margin: 15px;
margin-top: 50px;
}
p.vidDesc:first-line {
font-size: 20px;
}
embed.vid {
margin-left: 22px;
margin-right: 23px;
margin-top: 32px;
}
#vidContainer {
background-color: #333333;
margin:auto;
margin-top: 32px;
width: 480px;
height: 286px;
}
/************Contact*************/
#contactPic {
float: right;
padding: 20px;
}
#contact {
padding: 30px;
height: 280px;
background-color: #6080a2;
color: #d8d8e0;
}
Ideas? This is my first site, so sorry if I'm a little slow with it. If you visit http://jacobkelleydesigns.com/other/SE/index.php in Safari, the menu is lined up correctly, yet in Firefox, the contact button drops below the other buttons, leading me to believe the width in the css is incorrect, but it works well in Safari. If I changed it to be wider, it'd work in firefox but not safari I'm assuming. Here is my style sheet. CSS What could be causing this? Hey Would anyone be able to help me with these cross browser bugs please? 1. FF/IE8 pagination bug Firefox: IE8: (the tiny block behaves like an extension '2' block) The CSS: Code: ul {
border:0;
margin:0;
padding:0;
}
#pagelink li {
border:0;
margin:0;
padding:0;
font-size:10px;
font-family:Arial;
list-style:none;
margin-right:2px;
}
#pagelink a {
border:solid 1px #404040;
background-color:#272727;
margin-right:2px;
}
#pagelink .previous-off,#pagelink .next-off {
border:solid 1px #404040;
color:#dbdbdb;
display:block;
float:left;
margin-right:2px;
padding:2px 3px;
}
#pagelink .next a,#pagelink .previous a {
font-weight:bold;
}
#pagelink .active {
background:#97D5E2;
color:#0e0e0e;
display:block;
float:left;
padding:2px 6px;
}
#pagelink a:link,#pagelink a:visited {
color:#dbdbdb;
display:block;
float:left;
padding:1px 5px;
text-decoration:none;
}
#pagelink a:hover {
border:solid 1px #5F5F5F;
color:#fff;
}
Thats all for now. I entitled it 'bugs' because I'm bound to find others Thank you so much in advance for your time/help! *EDIT* Seems to happen to all non-active links: Hi folks, I'm slowly but surely getting the layout sorted of my website with CSS + HTML. Now the layout looks great in Firefox 3.6 but IE 7 doesn't like it at all! Anyway let me describe the scenario to you. I have my CSS like so Code: body {
font-family: Arial, sans-serif;
font-size: 14px;
color: #333333;
background-color: #CCCCCC;
text-align: center;
}
/*************************DIV ID's****************************/
#whiteBox {
margin: 0 auto;
margin-top: 85px;
width: 946px;
height: 666px;
background-color: #FFFFFF;
text-align: left;
font-weight: normal;
}
#logoBox {
position: relative;
width: 641px;
height: 55px;
top: 33px;
left: 277px;
text-align: right;
}
#navBox {
position: relative;
width: 641px;
height: 50px;
top: 28px;
left: 277px;
text-align: right;
}
#leftBody {
position: relative;
width: 241px;
height: 425px;
top: 55px;
left: 22px;
text-align: left;
}
#rightBody {
position: relative;
width: 641px;
height: 425px;
top: -366px;
left: 277px;
text-align: left;
}
#greenBox {
margin: 0 auto;
/*margin-top: 751px;*/
width: 946px;
height: 28px;
text-align: right;
background-color: #336666;
font-weight: normal;
}
#creditBox {
position: relative;
width: 641px;
height: 20px;
top: 8px;
left:277px;
text-align: right;
font-weight: normal;
}
#socLogoBox {
position: relative;
width: 90px;
height: 20px;
top: -15px;
left: 22px;
text-align: left;
font-weight: normal;
}
And I've laid out the HTML so that the DIV's a nested within the main white and green boxes like so Code: <html> <head> <title>Test layout</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="./css/siteStyle.css" rel="stylesheet" type="text/css"> </head> <body> <div id="whiteBox"> <div id="logoBox"> <font class="logoA">paulstatham</font><font class="logoB">photography</font> <hr> </div> <div id="navBox"> <p class="navA">HOME | PORTFOLIO | NEWS | PRICING INFORMATION | SHOPPING CART | CONTACT</p> </div> <div id="leftBody"> <font class="secHead1">WELCOME</font> <p class="secText">Bla bla bla</p> </div> <div id="rightBody"> Right Body! </div> </div> <div id="greenBox"> <div id="creditBox"> <font class="credits">(c) 2010 Paul Statham - Privacy Statement - Legal Disclaimer</font> </div> <div id ="socLogoBox"> <img src="./images/fbLogo.png"> <img src="./images/twLogo.png"> </div> </div> </body> </html> Now as I said it looks great in firefox But not so much in IE Can anyone offer some advice? Hi All, I have tested my site in IE7, firefox and safari, but i've been told i have a problem with IE6. (Which i can't test without uninstalling IE7) www.lahayna.co.uk I'm told the problem is only with the homepage, and with the media page, I've been given a screenshot which i've attached, but i don't know where to go from here. I've tried checking my CSS to ensure my images, padding and margins don't exceed set widths etc, but i've not made any difference so far. Your help is really appreciated, as i'm not getting any further with this site. Thanks Laura firefox ie what am i missing in the css to make firefox look like ie thanks Heya, I'm working on my new website design for http://nickerson.biz and all was going good. Came to the point where I check compatibility in all browsers. Figured everything would be fine since its 100% xhtml transitional valid. Turns out IE ****s it up real bad. Has 5 noticeable things that SHOULD NOT be happening. Site looks great in FF, but IE... I can't figure out whats going wrong. http://i42.tinypic.com/nntyly.png Ideas? View source to see coding, all seems fine. |
|||||||