Printer Friendly Version
Email this thread to a friend
|
Featured Web Site Template |
|
There are 0 guests and 1 members in the forums right now.
Reflects user activity within the last 5 minutes
|
|
| Member |
Message |
taitai
Joined: Eons Ago
# Posts: 6
|
Posted: 2005-Mar-09 23:59
I have spent hours trying to solve this problem - a gap which appears between the top and bottom image, in a table cell.
Any help is appreciated:
[link]
Note to moderators: This is just a link to the problem, not a website.
|
 |
vanachte
Joined: Feb 10, 2004
# Posts: 404
|
Posted: 2005-Mar-10 00:24
Hmm. not sure, but this may be due to natural spacing when wrapping lines. I suggest breaking the table into two rows (be sure to keep the cell spacing and padding at "0" ) . Place the top half in the top cell, and the bottom half in the bottom cell.
I would expect this to fix things for you... I tried saving the source code and loaded it into dreamweaver, and things looked fine... when I previewed it in a browser, it put in the gap. ... Try the table thing (worked on my end) and let me know if it solves your problem. 
|
|
lizardz
Joined: Nov 12, 2004
# Posts: 1394
|
Posted: 2005-Mar-10 01:28
That's a browser issue, combined with the doctype. If you get rid of the doctype, the gap goes away, at least it does in mozilla type browsers. Also, if you have the image linked, you need to set its border property to 0 in CSS, or you can use the old border="0". That's not actually a bug by the way, it's caused by using tables to do layout, with image slices. The w3c specs state that there is supposed to be a space inserted, since <img> is an inline thing. If you get rid of your doctype on your sample page you'll see that it goes away.
There are other ways to get rid of it too, set a class for the container cell, set its font-size:0, line-height:0, display:block; and that also gets rid of it, different browsers treat this differently. But it's caused by incorrect use of tables and images, by the standards anyway, even though everyone uses that method.
Gecko browsers have this issue, since they followed the specs, IE doesn't if I remember right.
|
|
taitai
Joined: Eons Ago
# Posts: 6
|
Posted: 2005-Mar-10 02:28
Many thanks - I solved that problem with lizardz's CSS solution.
I have a second problem - the bottom image in the left column is not lining up with the bottom row to its right. (I have added the rest of the table since making my original post)
Suggestions appreciated - at a minimum to save me pulling out the last few hairs on my head.
|
|
lizardz
Joined: Nov 12, 2004
# Posts: 1394
|
Posted: 2005-Mar-10 02:58
There were two problems, I took a look, you have to check this in several browsers to find them all:
seems to do the trick. Note the <br> added between the two images, the removal of the space between the </td> and the end of the <td> line of html, without the <br> IE 5.x displays a space. Without the CSS gecko displays a space. If you use display block it works on gecko but IE splits the images apart.
The rest of your stuff is too time consuming to figure out. Remember, always test on the following: IE 5, 5.5, 6, Gecko, Safari, Opera. Results can and will vary.
|
|
lizardz
Joined: Nov 12, 2004
# Posts: 1394
|
Posted: 2005-Mar-10 03:09
Took a quick look, why on earth are you mixing up css and tables like that? there's many better ways of getting that layout, if you want to use css, use css. That layout would be simple to do with a single bar across, no li top nav, straight links, or li if you really insist, div for the cross page bar, the ball as a floated image going over the bar. Or other ways. All those tables though, what's the point? You're just making this much more complicated than it needs to be, you can position the stuff in the header absolutely in a single div tag, your top bar can be a second div tag, your nav you can make however you want, straight links or li made to display inline, not my favorite method due to cross browser display issues. Anyway, good luck.
|
|
g1smd
Staff
Joined: Jul 28, 2002
# Posts: 10418
|
Posted: 2005-Mar-10 21:00
Don't print your email address in mailto: links!
It will be harvested by spammers in just a few days.
|
|
vanachte
Joined: Feb 10, 2004
# Posts: 404
|
Posted: 2005-Mar-11 00:20
off topic, but I agree with g1smd - I always use online forms for incoming mail, that way they only get my address if I want to give it to them.
|
|
taitai
Joined: Eons Ago
# Posts: 6
|
Posted: 2005-Mar-15 00:07
OK, I took your hints and bit the bullet to do it all in CSS. This has taken me a few days. The new page is here:
[link]
The page now is much simpler and much better overall however, I have the following problems:
A. Internet Explorer
1. Can't get div id="topnav" to extend all the way to the right edge thus the topnav ends suddenly - the wider the window size, the worse it looks.
2. Can't get the background image to the div id="contentcontent" to align correctly. I have used background-position:right; but the top of the background image is hidden - i.e. it's too high. Using background-position:bottom; only makes the problem worse. Using background-position:top; everything aligns correctly vertically, but the image doesn't extend to the right border of that div. I am missing something simple, but what?
B. The rest - Opera, Gecko etc.
1. After solving the gap issue between the top and bottom halves of the "Have a question" images in IE, I now have the problem in these browsers. How can this be?
2. There are vertical spacing issues with all of the horizontal navigation plus theleft column. Is the answer to employ the Tantek Celik hack?
All suggestions appreciated.
|
|
taitai
Joined: Eons Ago
# Posts: 6
|
Posted: 2005-Mar-15 00:23
PS. I know there is still a mix of tables and CSS but the page "template" part (top, left column and footer) are all CSS. The rest of the content contains tables because that's where we need to cut and paste the "content" of each page. It is just too big a job to covert the entire site to 100% CSS at this stage.
|
|
lizardz
Joined: Nov 12, 2004
# Posts: 1394
|
Posted: 2005-Mar-15 00:36
Do yourself a favor, make the site in HTML 4, either loose or strict, especially if you have to import legacy content like you said. Calling error filled HTML XHTML does not make it XHTML. Don't even think of using the XHTML 1.0 strict doctype until you actually understand what that entails.
Too many problems to answer, easiest solution to columns etc is this:
<div main container>
<div header></div
<div top nav></div>
<table main content>
<tr>
<td left nav></td>
<td content></td>
</tr>
</table>
</div>
" I now have the problem in these browsers. How can this be?"
It can be because CSS is hard to do, it's hard to learn, and all the browsers treat it differently in key areas, and in trivial areas. IE 5, 5.5, and 6 are all different, they handle the box model differently. This is my pet peeve, people keep trying to sell CSS as if it were just HTML, but it's not, it's much harder to learn, by a factor of 10 I'd say, not as hard as programming languages, but hard, mainly because cross browser support is not, and never has been, consistent. Don't expect that to change in the near future, although it's much better today than it was in 2000.
Using XHTML makes for more problems by the way, it triggers certain behaviors that are technically correct in Opera and Gecko sometimes, but which aren't what you want to happen.
|
|
g1smd
Staff
Joined: Jul 28, 2002
# Posts: 10418
|
Posted: 2005-Mar-15 10:45
>> This is my pet peeve, people keep trying to sell CSS as if it were just HTML, but it's not, it's much harder to learn, by a factor of 10 I'd say <<
CSS for styling the content is quite easy to learn, and doesn't have too many problems. Use @import (instead of the link tag) to hide the stylesheet from NS4.
CSS for positioning is full of problems. It doesn't work in some browsers, and works differently in all of the others.
I can handle step one, but not step two, so I still do layouts with a certain amount of tables for positioning.
However, just getting rid of font tags, and other clutter, and then reducing the page to headings, paragraphs, lists, tables, and forms, has already cut the code bloat by 80% or more.
[ Message was edited by: g1smd 03/15/2005 03:12 am ]
|
|
lizardz
Joined: Nov 12, 2004
# Posts: 1394
|
Posted: 2005-Mar-15 20:29
"However, just getting rid of font tags, and other clutter, and then reducing the page to headings, paragraphs, lists, tables, and forms, has already cut the code bloat by 80% or more."
Absolutely true, but even when you escape the css for ns 4, there are other issues, even with text styling, but as you note, start now, learn, and by next year it will start making some sense.
Positioning, floats, anything like that, requires extensive testing, and even once complete often will not work in IE 5x mac due to its numerous and well documented bugs that tend to blow up the most finely tuned css layout. Sigh.
Even for stuff like <ul><li> combined with a float on a page, I've seen IE < 6 do really freaky stuff, like move the list bullets to the opposite side of the list item.
I'm doing a project now, reasonably complex, but to keep development time down and stability up, I used two tables for layout, one for the top nav, and one for the 3 body columns. Tables styled purely with css of course, zero onpage attributes of any type. Mix and match, works decently, full css -- and remember, css does not equal positioned div construction, it means that you have done all page styling off page on the stylesheet.
anytime you need columns to maintain a vertical relationship you need to use a table, if IE supported min and max height plus a few other things that wouldn't be the case.
|
|
taitai
Joined: Eons Ago
# Posts: 6
|
Posted: 2005-Mar-15 23:25
I figured out the answers - pretty simple, actually. eg I didn't know that you can set two positions for background images eg background-position:top right; rather than just background-position:top; or background-position:right;
"I can handle step one, but not step two, so I still do layouts with a certain amount of tables for positioning."
Dunno whether you have seen these:
[link] and
[link]
I used Kevin's one and it works great for getting 3 columns to vertically extend to the same length.
|
|
lizardz
Joined: Nov 12, 2004
# Posts: 1394
|
Posted: 2005-Mar-16 02:32
I wouldn't say those work great, they kind of work, and kevin's depends on javascript to actually work, always an extremely bad idea for a layout.
The columns didn't extend all the way down in any browser I tested them in, turn javascript off, which could be upto 5% of site visitors depending, and you have a weird looking layout.
3 columns are possible, but not like that, those are old methods. Plus they depend on either background images for the left and right columns, or you have to have the same column colors.
it's a lot easier to use a table, css zealots call using a table a hack, but it's a lot less hack filled, and a lot more stable, than trying to do that with tags that were never meant to be sized vertically relative to each other.
Best 3 column method for divs is to just not bother having the columns go all the way down, that's what most sites end up doing, for a very good reason: it works better. But even then you run into issue with which column is longest, that is solvable, but these guys didn't solve it.
Before you say something works great, make sure to test it to see that it actually works cross browser, does it work in konqueror? I can check, might, might not. Does it work in IE 5 or 5.5? Sort of but not completely. Will it work in Mac IE 5x, don't know, that's always a question.
Make no mistake about it, these are serious hacks, and I don't mean that as a compliment. The code to make a 3 column table is only a few lines, and it displays perfectly on every browser out there, including text browsers.
The reason g1smd says he doesn't mess with much css 2 positioning is that he's well aware of issues like this; the only reason to do something like that, since it takes more code to do it, is if you need some source ordered html, if you just want to do it for the heck of it to see if you can, or just to practice.
personally, I like the newer solutions, where designers aren't trying to make divs and css act like tables, they use them like divs, correctly, doesn't require any hacks, looks great, it's flexible.
In firefox, for example, the left column on the second example you posted, is I guess supposed to go all the way down, with a border, doesn't. It's doable but not like that, and I wouldn't use those techniques commercially, it's too much time for no gain. I've done it, it's a pain. I've only used that technique once, no way I can justify it to clients, 2 columns are easy though, but always there's that footer issue, real world your display does not depend on javascript, can't.
Check this for yourself, try 'seeing it in action for yourself' with javascript turned off, not very impressive, is it? This can be done, but not like that.
It's like, oh, bummer, where's the footer gone?
[ Message was edited by: lizardz 03/15/2005 06:47 pm ]
|
|
You are not permitted to post messages in this forum or topic, because of one or more of the following reasons:
- You have not yet logged in, or registered properly as a member
- You are a member, but no longer have posting rights.
- This is a private forum, for which you do not have permissions.
If you are a recent member, it's possible that you simply have not yet confirmed your account. Please
check your email for a message entitled 'JimWorld Forums: Confirm Your Account' and follow the instructions
contained within.
If you cannot find this message, click here to Re-Send it.
|
If you are still experiencing problem, please read the
Login Assistance
Article for some advice on what may be causing your login not to work properly.
|
Switch to Advanced Editor and ...
Create a New Topic
or Reply to this Thread
|
|
Inbox
