One single problem (a gap) after making my site table-less

[tayiper]

Hey all. Today something "triggered" me to finally convert (it wasn't at all that hard, 10 minutes or so) my newest general personal website from layout with tables (not many tables though, in fact it was just one, and on some pages two; also see further below) to a completely table-less layout, and you can imagine that I am quite proud of it, LOL. The website's URL is http://tadejpersic.50webs.com/index.html (and http://tadejpersic.50webs.com/about-me.html is important too for this issue), while the .css file used is http://tadejpersic.50webs.com/sheet.css ...


1. However, I see that there is one problem after doing so. It's that there is one big gap that appeared below the following rows of links:

"xmldata.xml | contact me | disclaimer | copyright | site policy | site label | valid xhtml | valid css"

... and above the Google AdSense ad, which is itself above the following text:

"The favicon file and other icons used on this site are from the Famfamfam's silk icons collection."


2. And on a related note; already during a "trial & error" when I was testing the code with floats (btw. I've just recently started to learn about them) I saw a similar gap. Similarly to above (i.e. to finished state of documents), I wanted to get rid of it with "clear: left;" and "clear: both;" (see "about-me-mod1.html" or "about-me-mod2.html" links below), to no avail, although I must confess that I don't quite understand the "clear" property's principle.


And here are also few links/examples for a better picture; note that I changed them so that they use an outdated sheet-old.css stylesheet file.

http://tadejpersic.50webs.com/index-table.html (index.html page, an old design with the use of tables)

http://tadejpersic.50webs.com/about-me-mod1.html (about-me.html page, an old design with the use of tables, just the "inner" table is changed to "float")

http://tadejpersic.50webs.com/about-me-mod2.html (about-me.html page, a totally new table-less design, although not yet completely finished)


thanks for any help that you can provide, tayiper

[tayiper]

Oh and totally forgot to also ask this; is there any way to get the same effect (as it was before with a table) so that I don't need to use this long line of "brs" (see below) after the list with links, i.e. the one floated to the left:

<div id="twist"><div id="content"><ul id="navmenu"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><li><a href="index.html" title="index">index</a></li>

(please check the source-code directly on the website if you want/need to)


thanks again, tayiper

[sgtsloth]

Take out the "height: 664px;" from here:

div#content {

    float: left;
    font-family: tahoma, verdana, sans-serif;
    height: 664px;
    width: 120px;

}

That fixed it on my laptop. IIRC, height isn't well supported by all browsers...

Hope that helps!

[Dan Schulz]

Height is supported by all browers except Internet Explorer 5, 5.5 and 6, which treat height as min-height (to use height as HEIGHT in those three browser versions of IE, you have to use the * html hack to add overflow: hidden; to the mix). This was fixed in Internet Explorer 7.

Also, using height on elements other than images is usually a bad idea, since the height should be allowed to adjust to fit the text and other objects contained therein. If you're going to use a set height, make sure you add overflow: auto; to the style rule with the height declaration so the text can have room to grow (if necessary).

[tayiper]

Originally Posted by sgtsloth

Take out the "height: 664px;" from here:

div#content {

    float: left;
    font-family: tahoma, verdana, sans-serif;
    height: 664px;
    width: 120px;

}

That fixed it on my laptop. IIRC, height isn't well supported by all browsers...

Hope that helps!

Hmmm thanks much for the reply, but IIRC (from the testing) it must be there, i.e. otherwise the menu with links is not placed correctly (or as it was before with the use of a table); maybe I only need to lower the number a bit??! Anyways, I guess I need to perform some further testing ...


tayiper

[tayiper]

And do you guys have any ideas about the question in my second post above??!


tayiper

[tayiper]

Originally Posted by tayiper

Hmmm thanks much for the reply, but IIRC (from the testing) it must be there, i.e. otherwise the menu with links is not placed correctly (or as it was before with the use of a table); maybe I only need to lower the number a bit??! Anyways, I guess I need to perform some further testing ...

OK folks, now it's finally fixed. You were of course right, the problem/culprit was the height: 664px; line for the "content" div id (btw. now I changed it to height: 480px;), however I was right about it (i.e. see my post last above), i.e. if there is no height for this div, the third paragraph of text is displayed below the image (I am talking about the about-me.html page) or IOW, the image floated to the left needs to have a height for all the three paragraphs to be displayed correctly.


tayiper

[tayiper]

Originally Posted by tayiper

And here are also few links/examples for a better picture; note that I changed them so that they use an outdated sheet-old.css stylesheet file.

http://tadejpersic.50webs.com/index-table.html (index.html page, an old design with the use of tables)

http://tadejpersic.50webs.com/about-me-mod1.html (about-me.html page, an old design with the use of tables, just the "inner" table is changed to "float")

http://tadejpersic.50webs.com/about-me-mod2.html (about-me.html page, a totally new table-less design, although not yet completely finished)

So here's again that part from the original post:

And here are also few links/examples for a better picture; note that I changed them so that they use an outdated sheet-old.css stylesheet file.

http://tadejpersic.50webs.com/sample/index-table.html (index.html page, an old design with the use of tables)

http://tadejpersic.50webs.com/sample/about-me-mod1.html (about-me.html page, an old design with the use of tables, just the "inner" table is changed to "float")

http://tadejpersic.50webs.com/sample/about-me-mod2.html (about-me.html page, a totally new table-less design, although not yet completely finished)

Best regards, tayiper

[tayiper]

Uhhh, sorry for so many consucetive posts, but I think that I've just learned/discovered something after validating the code and noticing that I missplaced one of the <p> starting tags compare to the <div> one (you know, inline vs. block elements), and it's basically further about the "height:" being required ...


You two guys who are already familiar with the code know that there are three <div> ids: "twist", "content", and "inner". And I used/intended for the "twist" one to wrap around so that it would be "clear" for rendering where the float (i.e. menu with links) ends, and where the text that's effectly on the right side of the float. But then after placing correctly that <p> tag mentioned above (and modifying other code too) I noticed that the "twist" id is actually not needed at all!!!


Further, I guess that there are two basic options:

... to use yet another such <div> (beside/additionally to the "twist" one), and then the "height" property isn't required at all

... to not use any such "wrapping" <div> (like the "twist" was mentioned to be), but then the "height" property is required


And I mean "height" property being/not being required in both cases, i.e. in case of menu with links/three paragraphs of text wrapped with div with id "content" (which requires or would require somewhere around height: 480px;), and in case of picture/first paragraph which are both also inside "content" div (while the "inner" div that wraps/should wrap them requires around height: 130px;), where the first/left item in the two pairs above is floated to the left, and the second/right is consequently "moved" to the right.


So please tell me guys: I am right in this "discovery" of mine??!


Regards, tayiper

[tayiper]

And the definitely last question: what about "clear" propertly mentioned in my first/initital post?? I mean is it OK that I don't apply it to some element after the floated div element?? Or is maybe "clear" meant to be used only in cases when you don't want for some stuff (text for example) that's inside the floated element's tags to not be floated (or consequently "moved"; see my post above)??!


tayiper