PDA

Click to See Complete Forum and Search --> : Border/Wrapper (?) glitch

notJustin
10-29-2008, 12:42 AM
Hi,

I have been trying to get this nice, smooth looking border to work. At certain window widths, the images I'm using in this table (yes, tables. I haven't ventured into div's yet) seem like they want to start repeating. It's not a lot, maybe a one pixel wide difference, but to me it just ruins the 'look'. Most of the people viewing the site are using IE and it works fine there. I've also tried Safari and Chrome and they seem to render the page just fine. I personally use FireFox and of course that is the browser that has the issue.

Here is a comparison of what I'm talking about....
http://www.notjustin.com/miscimgz/borderGlitch.jpg

Or you can try it yourself at....
http://www.ll774.org

Just resize the width of your window to witness the magic I have created.

After reading thru some of the threads here, I am confident you experienced web developers can help me solve this.

thanks
justin
infinityspiral
11-05-2008, 04:45 PM
Doesn't seem to do it in FF2... You could try collapsing and then rebuilding the borders in CSS though
notJustin
11-12-2008, 12:05 AM
First of all, I would like to say thank you for your input Chris. I would also like to say you have a very nice site. Very clean.

Your suggestion about rebuilding the border with CSS...I wish I had the knowledge to do that. I am trying to learn, but my CSS page is very simple and minimal. I've haven't concentrated too much on stylesheets because I see so many sites where the text starts to float past the container it is supposed to be in. I could not get your site to do that so that proves to me that it can be done and your stylesheet will be a great example for me to learn from.

If you know of an example of a site with CSS borders that resize with the content, I would be glad to learn from it.

thanks,
justin
notJustin
11-12-2008, 01:39 AM
Ok, I tried making a border with CSS. My code is rough and choppy, but it has fixed that alignment problem. Now I just have to learn everything about positioning things with CSS.
(out of the frying pan, into the fire???)
Of course making it work in different browsers will be easy. </sarcasm>

results:

image... http://www.ll774.org/imgz/bordertest.jpg
page... http://www.ll774.org/cssbordertest.htm

Thanks again for your help Chris.

justin
infinityspiral
11-12-2008, 11:15 AM
Looks like you're on your way there. If you want a collection of areas to center on the page you can align a wrapper div to the center of the page assigning margin:0 auto; in the css to that element. You'll need to give it a width also. From there you can float areas left or right inside that wrapper to position them. This is the method I'm using in my site.

The heirarchy looks like this
<html>
<body>
<div id="wrapper">
<div id="area1">
</div>
<div id="area2">
</div>
</div>
</body>
</html>
notJustin
11-13-2008, 01:25 AM
Thanks for the example.

I am getting there. (sorta)

It's amazing where things end up when you don't know what your doing.
infinityspiral
11-13-2008, 12:37 PM
I uploaded a quick example here
http://www.mediafire.com/file/vyz1ogvmyom/wrapperExample.zi (http://www.mediafire.com/file/vyz1ogvmyom/wrapperExample.zip)p
WebJoel
11-13-2008, 10:39 PM
I have not examined your code, but if you want to continue to use TABLE for this, you could throw some mad CSS at the TABLE-form itself:<style>
table {border-collapse:collapse;....}
</style> I think is the correct syntax. What this does is cause default table cell paddings and cell margins to 'collapse'.
I don't work much with TABLE other than tabular data, and don't get the problem demonstrated in the image. Additional declaration would be needed to style, hence the "...."

Might help. Or not... Read more: http://htmldog.com/reference/cssproperties/border-collapse/

Best would be non-TABLEs, but this can be salvaged as-is, too.
notJustin
11-14-2008, 01:19 AM
Chris,
Since firefox is my default, I didn't even notice there should be a red background until i started looking thru the stylesheet. So I opened up IE and sure enough....RED.

IE is the only one that shows the red, so does this mean that IE is the only 'correct' browser?
http://www.ll774.org/imgz/example.jpg

WebJoel,
I know that I should get away from using tables, but I don't know why.
What is the bad thing about using them?

Thanks both of you for helping me try to understand this.
justin
infinityspiral
11-16-2008, 01:37 PM
well if you add <div class="clear"></div> just after the closing of the right side div then you should be able to see the color in both. I think I forgot to add that in the html document but the class exists in the css file. Generally I've found that if I build my projects in IE6 then test in IE7 or FF or Safari then I have less backtracking to do to make sure the styles work across the board. You can install multiple versions of IE by using a free program called MultipleIEs. Try searching around on google for it.

IE is probably the most frustrating browser because while lots of new techniques like png transparency manipulation work in Firefox and Safari, IE throws them out the window.

So the main question is, why is tables not ideal right? While a small table might be easy to edit, a large table layout is very confusing. Say for instance you have a FEATURES section and the client wants it to be on the left instead of the right. In a table layout you're almost assured of having to redo the entire page from scratch. In a CSS layout however you can move this section around fluidly. It might even be as easy as changing a float right to a float left and then done deal.

The difference is structure. A table layout organizes the code based on the position within the layout, TR and TD separates the content. In a CSS layout however you can organize information in a way that shows how the content relates to each other. For example for a features list on a product you can do this with CSS:


<dl>
<dt>Features</dt>
<dd>This thing is amazing!</dd>
<dd>Second feature is this.</dd>
<dd>Third feature is this.</dd>
</dl>


The dl is a definition list. DT is a title and DD is the definition item. It's really easy to understand what is what.

As a general rule I do use tables in CSS, but ONLY for tabular data. That's still appropriate. If it's a data table done in excel it should probably be a table, but otherwise CSS is a much more flexible option in the long term.