Hi all, this is my first post here and have heard great things about digital point forums. I am helping a friend modify a purchased template for a BANS site. I've modified other templates to BANS before without trouble. This particular one is tables based, and has tables within tables. I modified the template to convert it to a BANS template per the manual, but the top half of the table (where the flash screen is) does not align with the lower half (which seems fine). The strange thing is that when I view it with Firefox's Web Developer toolbar and outline the table cells, everthing suddenly aligns. When I turn the cell outlines off, it shifts again. When I resize the browser window, the top half of the table shifts, but not the bottom half. Can anyone help me figure this out? Did I accidentaly delete a closing table row or table data tag? Any help is appreciated in advance. My next step is to start over with the template conversion process. Here is the link: http://nichestore.newaffiliatediscoveries.com/
BTW, I've tried it without the flash element as well by commenting out that entire row, and I still get the same troubles. Thanks again.
Ho-ly... crap. Well, normally the first thing we ask people to do if they can is validate the site through the HTML validator (to see if it's something like you said, an unclosed tag or whatnot, rather than css being bitchy). However, you don't have a doctype at the top. There's nothing to validate against. Second, what are you using to highlight stuff? The actual Web Developers Toolbar or Aardvark? I used aardvark and to the left of the actual Flash screen, there was a td which was simply wider than you want (assuming the Flash is supposed to butt up right against the left side instead of the space there). Then, the size of the Flash looks bigger than the screen itself (I only see the place where the movie should be, because I have Flash turned off-- maybe the movie really is that wide?) which is pushing that right image really far to the right. The tables in tables is really hard to set the page up nicely. If there were like just a header div with the side images and the Flash, you could easily center it with CSS using margin: 0 auto; or something. If I were you, here's what I'd do: if you know how to do it, change those nested beasts into semantic divs. I would also add a doctype. Not sure what that is or which one to use? http://www.eskimo.com/~bloo/indexdot/html/tagpages/d/doctype.htm gives a technical explanation. If I were you, I'd go ahead and try for HTML4.01 Strict. You can do XHTML1.0 Strict if you want, but don't use XHTML1.1 as that's really for XML documents, need an XML prologue at the top, which means everyone using Internet Exploder can't see anything right. If you just can't validate it with Strict, drop down to HTML4.01 Transitional until you can. Transitional allows sloppier code : ) Here's where you validate a page (after it has a doctype): http://validator.w3.org/ Here's what a doctype usually looks like on a page: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Need A Title Here</title> <meta name="description" content="nameofcontent"> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <meta name="generator" content="youreditorofchoice"> <link rel="stylesheet" type="text/css" href="http://www.yourwebpagefolder/nameofcssfile.css"> </head> Code (markup): When you get that far, we can help you further... though possibly someone here is willing to crawl through to tables to find the unclosed tag or whatever, but really, changing everything over so you can let the validator find all the faults for you is much easier, plus easier maintanence later on : ) Good luck : )
Wow, thanks for the tips. I'm using WebDeveloper addon for Firefox. I never thought about trying a validator! No, the flash is not that wide, even when I take the whole flash row out, it still does not align. i was hoping this woudl be a quick & dirty conversion, the original template looks fine, it was only when I took it apart that it broke. I'll try your suggestings tomorrow, but maybe first I'll just try starting over again, it only takes about 10 minutes to convert a working HTML page to a BANS template.
Check out Aardvark. It's an element-border-maker thingie which appears when you mouse over part of the page. You launch it with right-click and it goes away when you either refresh the page or go to another page or tab. It doesn't show nested stuff, just gives you ideas-- really best for when looking at a page by someone else, so you can find the name of the box you see a problem with. Works with Iceweasel too.