Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

DOCTYPE Expert Needed! Gaps in layout... 1

Status
Not open for further replies.

bdichiara

Programmer
Oct 11, 2006
206
US
Ok, here's what's going down. I'm trying so desperately hard to get a div to float at the bottom of the browser window for both IE and Firefox (more-so for IE). I finally found code that works in both browsers, however the code requires me to use a DOCTYPE for my document. Now I know it's important to do so, but I can't find one that doesn't cause gaps in my layout. I don't really understand all the jargon and what it does inside a DOCTYPE, however this is the closest I've gotten to work:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]

This doesn't cause any gaps in Firefox, but in IE, i get some gaps in some tables or maybe at the top of some images.

If I remove the DOCTYPE all together, the layout all looks fine, but my floating bottom aligned fixed div doesn't stay at the bottom in IE.

I feel i'm very close on this. I either need to figure out what causes those gaps and fix that, or find the right DOCTYPE that won't cause these gaps, but will still allow this div to float in IE.

Let me know if I need to show any code. I would link to it, but it's on an intranet, so not available publicly.

Thanks.

_______________
_brian.
 
I've seen that with images that are not surrounded with <Td>'s immediately will cause some gaps.

Good Example:
<td><img src="hello.jpg"></td>

Bad Example:
<Td>
<img src="hello.jpg">
</td>
 
well, i went back and added margin:0px as well as aligning the cells the images were in to valign="top" to my images and that fixed one part, but now i'm getting a 3px gap at the bottom of a table row. If I can fix that, I think i'll be satisfied.

I'll check for extra spaces between tags.. Thanks for the tip.
I think there's 1 cell in the row that's extending the size, and the rest are getting larger because of it.

_______________
_brian.
 
OK, i have pinpointed exactly which cell is causing the gap, but i can't figure out what in the code is doing it. If I remove the code completely, the gap is gone.

Code:
<td width="200" height="64" align="left" valign="top" style="background-image:url(img/ieleft_bg.jpg); background-repeat:repeat-x; background-position:top; padding-top:3px; background-color:#0E2C4E;"><table width="200" border="0" cellspacing="0" cellpadding="0" style="margin:0px;"><tr><td align="center" valign="middle" style="font-size: 10px;">fri</td><td width="2" align="center" valign="middle" style="font-size:16px;">|</td><td align="center" valign="middle" style="font-weight:bold; font-size:14px;">DEC</td><td width="50" align="center" valign="middle" style="font-size:26px; font-weight:bold; font-family: Lucida Sans Unicode;">22</td><td align="center" valign="middle" style="font-weight:bold;">2006</td></tr></table></td>

this was copied and pasted straight from the source in IE7

_______________
_brian.
 
If you have an invalid doctype or no doctype, then IE will render your page in 'quirks' mode. (Let's just say that this is a bad idea.)

Removing spaces in your page will often correct display problems in IE. (Good luck in that regard.)

The best solution for layout problems is to use CSS rather than tables for layout. Tables should only be used for tabular data.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
I feel like when i use CSS and no tables, I end up spending way more time in getting it to look right in all browsers and I usually end up with a ton of nested DIVs rather than a few nested tables...

I don't mind dealing with a few extra spaces...

_______________
_brian.
 
I posted my last response before I saw your code. Have you tried adjusting the table width to be smaller than the enclosing cell?
Code:
...<table width=[COLOR=blue]"190"[/color] border="0" cellspacing="0" cellpadding="0" style="margin:0px;">...

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
When buiding anything in XHTML/CSS, I add this to my css file.

This will save you lots of time having to deal with cross-browser design issues by removing spaces on all <tags>.
Code:
* {
	margin: 0px;
	padding: 0px
}
then over-ride the <tags> as you see fit.
Code:
* {
	margin: 0px;
	padding: 0px
}

body {
	margin: 5px;
}

M. Brooks
 
I suggest you listen to traingamer's advice on using css rather than tables for design. No design would require to have more complex html using css than using tables for layout. If you end up with that, then you're still designing CSS layouts with tables mindset.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top