HTML - Table Aligns Properly In Ie 6&7, But Not Any Other Browser. Has Valid Css/html
I recently finished creating this html/css layout design. It's been put together with the use of tables, and is valid CSS and XHTML 1.0. However it just won't seem to show up correctly in any browser other than Internet Explorer. What is up!?
Can someone please check my code over and help me out? I need to have this done by tomorrow and am totally lost! Thanks in advance! Here's the URL: http://barrel-house.ca/test/ 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> hi, i know the resources including java script files ,images and css files are cacheable. i really doubt, is HTML table elements ,tr elements and td elements are cacheable ? how does it works? I figured I would just post this since having a problem with it this morning... Please bear in mind that I do recommend following the strict doctype - its just that I'm stuck with a CMS written about 8 years ago for this particular site I had the problems with. Anyway - our client noticed that there are styling discrepancies in IE... I checked the source code and found the following (the document is served as HTML4.01 Transitional): HTML Code: <p><font face="Verdana, Arial, Helvetica, Sans Serif" size="1">Blah<br> </p><p>More blah</p> What was happening in IE was that the unclosed <font> element was being terminated when the browser encountered the </p> tag... What was happening in FF was that the <font> element was being closed and then a new element placed in subsequent paragraphs... Hence, discrepancies in style between the two browsers... So - even when using an older doctype, it is important to check your code is well-formed and valid... As for me - I've now got to sit with our application developer and fix the CMS software... Hi, I have been searchign aroudn for some free scripts for scrollign news. All the ones i find use Iframes or have other elements whcih dotn validate for me. Any ideas where i can find one? The main requirements are below: Editable container size which the news scrolls in Editable speed of scrolling Ability to put links in the scrolling news news to scroll when loads, but on mouse over the news pauses so people can read the items. Cheers Rick We probably all know that if we run our HTML through the W3C validator, it will inform us if we've illegally nested one element inside another (e.g. placing a div within a span). Likewise, it will inform us if we've placed an element on the page but haven't used the correct containing element (e.g using a br, but not placing it within a p). What I'm looking for is some kind of documentation or reference guide that I can use, so I don't have to do a Google search every time I want to know if I'm correctly nesting elements! I would have thought that this would be defined by the XHTML schema at http://www.w3.org/2002/08/xhtml/xhtml1-strict.xsd. While this schema does define all the elements, it doesn't define how they are allowed to be nested in one another. Where can I find the documentation that defines correct nesting of elements? It must exist somewhere... I am trying to get this table to align properly but to no avail so far. Also, I'd like to be able to put a form in the middle of the pictures. Here is the code for the section I am referring to: Code: <table border="10"><tr><td><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"></td><br></tr><tr> <td align="left"><img src="bal.gif"><img src="bal.gif"></td> <td align="right"><img src="bal.gif"><img src="bal.gif"></td></tr><br><tr> <td align="left"><img src="bal.gif"><img src="bal.gif"></td> <td align="right"><img src="bal.gif"><img src="bal.gif"></td></tr><br><tr> <td align="left"><img src="bal.gif"><img src="bal.gif"></td> <td align="right"><img src="bal.gif"><img src="bal.gif"></td></tr><br><tr> <td><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"></td></tr> </table> Hi everyone! On a site I am making there's a table which -- only in the IE-s including version 7 -- is not properly displayed: the column containing the text is only approx. half filled in width. Most (not to say all) other browsers get this right... Anyone got an idea, why this could be? Thx and best, T Well, I am new to HTML and I would just like to say that I appreciate anyone who takes their time to busy themselves with my concerns. I have a simple problem that I am not sure how to fix. My problem is that in all the tables I create, the first row of the table (the titles) are all centered, but pushed a bit to the left. I use the the text align center and <center> tags and it works on everything except the table titles, which are centered, but a bit to the left. It is fairly noticeable and is extremely annoying. Can someone try helping me out? Thanks. -fenzo666 I apologize if it is improper protocol to post a link rather than the actual code but since View>Source exists for seeing both the html and css code and there is a fair amount of code...here is the link: http://nicolemuller.com/IMS/FINAL/ne...al/signin.html I don't know what I'm doing wrong but I cant get all the elements in the 2 rows to align and center with the rule of the menu strip. Any help would be great-thanks! Hi, I'm new to HTML. I have not yet started using CSS. I'm just using basic html. I'm having problem creating a nested table as shown in the attachment without using CSS style sheets. I appreciate anyone's suggestions in this. I pasted the code that tried below. <h3> 5) - Nested Table </h3> <table align="left" width="350" bgcolor="#ffff00" border="1"> <tr height="75" align="left"> <td height="100" > </td> <td height="75"> test2 </td> <td height="75"> </td> </tr> <clear="left" /> <tr> <td> <table align="left" bgcolor="f5f5dc" border="1"> <tr> <td width="100%" height="75"> a nested table </td> <td width="100%" height="75"> With this text at the top </td> </tr> <tr> <td width="100%" height="75"> </td> <td width="100%" height="75"> </td> </tr> </table> </td> </tr> <tr height="75" align="left"> <td></td> <td></td> <td></td> </tr> </table> Thanks in advance Im hoping someone can help me out on this one im just getting back into coding so im a little rusty but i am somewhat stumped by this issue i have a table that the text refuses to align to top middle unless its divided up into a new cell. The best it will do is align middle left of the cell but refuses to go to the top. The site that it is on with the issue is www.gamersjoy.com the table in question is the center table with updates, as you can see everything is pushed halfway down and aligned to the left Any help would be greatly appreciated as it is slowing me down from finishing my project thanks in advance Tcanuth This form uses a wordpress plugin so it works fine but it just looks bad because it doesn't fit into the theme nicely. Can anyone tell me how to make it fit? Code: http://reveretaxi.com/order-a-taxi-cab What value do i adjust in the HTML to get it to fit? Code: <div align="center"> <center> <pre> <table width="69%" height="690" cellspacing="0" cellpadding="0" border="0"> <tbody><tr> <td width="50%" height="25" bgcolor="#ff0000" align="right"> </td> <td width="50%" height="25" bgcolor="#ff0000"> </td> </tr> <tr> <td width="50%" height="25" align="right"><b><font size="5" color="#000000">*</font><font color="#000000">Leaving From</font></b></td> <td width="50%" height="25"> <!--webbot bot="Validation" b-value-required="TRUE" -->[text* LeavingFrom]</td> </tr> <tr> <td width="50%" height="25" align="right"><b><font size="5" color="#000000">*</font></b><font color="#000000"><b>Cross-Street:</b></font></td> <td width="50%" height="25"> <!--webbot bot="Validation" b-value-required="TRUE" -->[text* Cross-Street:]</td> </tr> <tr> <td width="50%" height="25" align="right"><b><font size="5" color="#000000">*</font></b><font color="#000000"><b>Location Type:</b></font></td> <td width="50%" height="25"> <!--webbot bot="Validation" b-value-required="TRUE" -->[select* LocationType: "Choose One" "House" "Business" "Apartment" "Other"]</td> </tr> <tr> <td width="50%" height="25" align="right"><b><font size="5" color="#000000">*</font></b><font color="#000000"><b>City:</b></font></td> <td width="50%" height="25"> <!--webbot bot="Validation" b-value-required="TRUE" -->[text* LeavingFromCity]</td> </tr> <tr> <td width="50%" height="25" align="right"><b><font size="5" color="#000000">*</font></b><font color="#000000"><b>State:</b></font></td> <td width="50%" height="25"> <!--webbot bot="Validation" b-value-required="TRUE" -->[text* LeavingFromState]</td> </tr> <tr> <td width="50%" height="25" align="right"><b><font size="5" color="#000000">*</font></b><font color="#000000"><b>Date:</b></font></td> <td width="50%" height="25"> <!--webbot bot="Validation" b-value-required="TRUE" -->[text* Date]</td> </tr> <tr> <td width="50%" height="25" align="right"><b><font size="5" color="#000000">*</font></b><font color="#000000"><b>Time:</b></font></td> <td width="50%" height="25"> <!--webbot bot="Validation" b-value-required="TRUE" -->[select* Hour "Hour" "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12"]<!--webbot bot="Validation" b-value-required="TRUE" -->[select* Minute "05" "10" "15" "20" "25" "30" "35" "40" "45" "50" "55" "00"]<!--webbot bot="Validation" b-value-required="TRUE" -->[select* AMorPM "AM" "PM"]</td> </tr> <tr> <td width="50%" height="21" bgcolor="#ff0000"> </td> <td width="50%" height="21" bgcolor="#ff0000"> </td> </tr> <tr> <td width="50%" height="25" align="right"><b><font size="5" color="#000000">*</font><font color="#000000">Destination:</font></b></td> <td width="50%" height="25"> <!--webbot bot="Validation" b-value-required="TRUE" -->[text* Destination]</td> </tr> <tr> <td width="50%" height="25" align="right"><b><font size="5" color="#000000">*</font></b><font color="#000000"><b>City:</b></font></td> <td width="50%" height="25"> <!--webbot bot="Validation" b-value-required="TRUE" -->[text* DestinationCity]</td> </tr> <tr> <td width="50%" height="26" align="right"><b><font size="5" color="#000000">*</font></b><font color="#000000"><b>State:</b></font></td> <td width="50%" height="26"> <!--webbot bot="Validation" b-value-required="TRUE" -->[text* DestinationState]</td> </tr> <tr> <td width="50%" height="21" bgcolor="#ff0000" align="right"> </td> <td width="50%" height="21" bgcolor="#ff0000"> </td> </tr> <tr> <td width="50%" height="25" align="right"><b><font size="5" color="#000000">*</font></b><font color="#000000"><b>Vehicle Type Preference:</b></font></td> <td width="50%" height="25"> <!--webbot bot="Validation" b-value-required="TRUE" -->[select* VehicleTypePreference "Taxi - 4 Door preferred" "Taxi - Van preferred"]</td> </tr> <tr> <td width="50%" height="25" align="right"><b><font size="5" color="#000000">*</font></b><font color="#000000"><b>Payment Type:</b></font></td> <td width="50%" height="25"> <!--webbot bot="Validation" b-value-required="TRUE" -->[select* PaymentType "Choose One" "Cash" "Visa" "Master Card" "American Express" "Voucher"]</td> </tr> <tr> <td width="50%" height="25" align="right"><font color="#000000"><b>Number of Passengers:</b></font></td> <td width="50%" height="25">[select NumberofPassengers "1" "2" "3" "4" "5" "6" "7" "8" "9" "10"]</td> </tr> <tr> <td width="50%" height="21" bgcolor="#ff0000" align="right"></td> <td width="50%" height="21" bgcolor="#ff0000"></td> </tr> <tr> <td width="50%" height="25" align="right"><b><font size="5" color="#000000">*</font></b><font color="#000000"><b>Contact Name:</b></font></td> <td width="50%" height="25"> <!--webbot bot="Validation" b-value-required="TRUE" -->[text* ContactName]</td> </tr> <tr> <td width="50%" height="25" align="right"><b><font size="5" color="#000000">*</font></b><font color="#000000"><b>Contact Phone Number<br> (w/ Area Code):</b></font></td> <td width="50%" height="25"> <!--webbot bot="Validation" b-value-required="TRUE" -->[text* ContactPhoneNumber]</td> </tr> <tr> <td width="50%" height="25" align="right"><b><font size="5" color="#000000">*</font></b><font color="#000000"><b>Contact Email:</b></font></td> <td width="50%" height="25"> <!--webbot bot="Validation" b-value-required="TRUE" -->[text* ContactEmail]</td> </tr> <tr> <td width="50%" height="21" bgcolor="#ff0000" align="right"> </td> <td width="50%" height="21" bgcolor="#ff0000"> </td> </tr> <tr> <td height="59" align="right" colspan="2"> <p align="center"><b><font color="#000000">If you require service to meet an arriving flight, please provide the following:</font></b></p> </td> </tr> <tr> <td width="50%" height="25" align="right"><font color="#000000"><b>Airline:</b></font></td> <td width="50%" height="25">[text Airline]</td> </tr> <tr> <td width="50%" height="25" align="right"><font color="#000000"><b>Flight Number:</b></font></td> <td width="50%" height="25">[text FlightNumber]</td> </tr> <tr> <td width="50%" height="21" bgcolor="#ff0000" align="right"> </td> <td width="50%" height="21" bgcolor="#ff0000"> </td> </tr> <tr> <td height="40" align="right" colspan="2"> <p align="center"><b><font color="#000000">If paying by voucher, please provide the following:</font></b></p> </td> </tr> <tr> <td width="50%" height="25" align="right"><font color="#000000"><b>Voucher Account Name:</b></font></td> <td width="50%" height="25">[text VoucherAccountName]</td> </tr> <tr> <td width="50%" height="25" align="right"><font color="#000000"><b>Voucher Account Number:</b></font></td> <td width="50%" height="25">[text VoucherAccountNumber]</td> </tr> <tr> <td width="50%" height="25" bgcolor="#ff0000" align="right"> </td> <td width="50%" height="25" bgcolor="#ff0000"> </td> </tr> </tbody></table> </pre> </center> </div> <p align="center"><font color="#000000"><b>Please provide any special requests or instructions in the field provided below:<br> [textarea specialrequestsorinstructions] </b></font> [submit]</p> Hey, I'm trying to set something so simple as the TD width for 1 specific column, but it will NOT listen to me! http://www.unreal-deals.com/ebook/ad...i-showdata.php I've set the td width on the second column Item_Name to be 5000px, just to see if it would work. It does nothing. No matter if I set the table width to 100% or 300%, setting the TD width does not affect that TD... What am I missing here? Thanks Hello all! I was going to give my website a new structure, so i would be able to make more stylesheets, without making different HTML's. And to give my website more differences between the stylesheets, i decided to put the leftpanel buttons into the css stylesheet too, so i was able to give them different looks just by changing the css. So i changed the source (src) to an transperant .png file called "linky.png", and then i gave each button an id. Each ID was named the name of what the button refers to, and what it is (Example: ID="Homebutton"). Now as you can guess, each button can't be seen, only be pressed on. So i went to my stylesheet (Classic.css) and entered the names and gave them properties (look below to see an example). Code: #Homebut { background-color: #FFFFFF; background-image: url("Classic/Home.png"); background-repeat: no-repeat; } And i was really excited over the result. I opened index.html using Firefox, but my excitement was over. The buttons didnn't show up. All i could 'see' was my invisible button. I don't think that this is a really big and hard problem to solve, it's probaly just something i spelled wrong or wrote wrong. But i checked everything, and i couldn't find any things that looked like that at all. That's why i kindly ask you to help me. Download everything you need for solving my problem right here! If there is anything else you need to solve my problem*, just ask for it and i'll see what i can do. *=anything else than money xP in the development of a website i've been given about 50 Word files as my client would have them designed as a webpage - i've NEVER had success doing a simple conversion - is there any good way to convert these .doc files to html without total destruction of the layout? anyone? many thanks, Glenn Hi Guys. I recently updated my website, I moved my company logo so it would be above my main navigation, however by doing this I needed to change the .css slightly (the "Stage" width was altered - this was the only thing I changed). By doing this it allowed for a slightly newer navigation layout which you can view HERE. However since I have done this, the website is no longer viewable properly using a Mac (it still looks fine on a PC) why would this have changed? (I took a screen grab of what I mean - you can view it HERE I'm not a pro by any means, I have self taught myself but I am seriously stumped by this. Any help is welcome! I created a simple table with 2 rows 2 columns. I minimize the browser window into smallest window and I noticed that It screwing up my tables and the contents of it. They get squeezed as I resize the IE windows. How can I make the tables and its contents not to resize with the windows? Please help. Hello, Was wondering if any one could please help me on this problem thats been hurting my brain for days. I deisgned a site for a friend orginally done the artwork in PS then sliced it up and over into dreamweaver. I ran over the code made sure every thing was ok I got rid of the <img> tags and put the graphics in as cell backgrounds except for the 2 links on the site which i left as anchored image tags, everything works fine but only in Firefox. As soon as you view the site in IE the links push the other cells down by a few pixels destroying the table layout. This only happens in IE for sum reason i have made sure that there are no borders around linked images in my style sheet and checked and re-checked the html. Please can someone cast an expert eye over the coding and see if there is a solution to this annoying problem. I hope this isnt too long and stupid as this is my first real post so if there is anymore info u mite need just let me know thank you. Im in the process of redoing my website. I originally did it in dreamweaver with a very cheesy method of just using hotspots. So Im going through and redoing it by hand in html. Im doing the index page right now and playing around with the idea of having the whole page in one table. My problem is the table isnt starting in the top left corner where I want it. I have the border set to "0" but theres still space around the table. How do I get rid of this space? |