Best method for image bordered div?

[midori0x]

http://www.tssarcade.com/test.html

Here's what I have so far. I had the image border working before, but
with tables instead and now this is my method for getting a *gasp* 8
image bordered div. Three images on the top and and bottom of the div
and two images to the side. I used the inner and outer div method to
make the sides expand downwards with the content inside. It's just
about working save for the glitch in the left bottom corner. The other
problem is how or can I get this method to play nice with IE6. In that
version I'm getting some breakage of the border and it's ignoring my
specified height for the top div of 12px. One other thing is mozilla
(not firefox) and the vista version of ie7 is pushing the content div
far off to the right. The margin-left: auto; margin-right: auto;
method is working alright in just about everything else but these two.
Am I going to have to do a margin left of a more specific % value and
just hope for the best?

Thanks for help with anyof these questions!

 

[dorayme]

http://www.tssarcade.com/test.html

Here's what I have so far. I had the image border working before, but
with tables instead and now this is my method for getting a *gasp* 8
image bordered div. Three images on the top and and bottom of the div
and two images to the side. I used the inner and outer div method to
make the sides expand downwards with the content inside. It's just
about working save for the glitch in the left bottom corner. The other
problem is how or can I get this method to play nice with IE6. In that
version I'm getting some breakage of the border and it's ignoring my
specified height for the top div of 12px. One other thing is mozilla
(not firefox) and the vista version of ie7 is pushing the content div
far off to the right. The margin-left: auto; margin-right: auto;
method is working alright in just about everything else but these two.
Am I going to have to do a margin left of a more specific % value and
just hope for the best?

Thanks for help with anyof these questions!

This is pretty much the sort of design that is fraught with cross
browser dangers. You should see how it differs on my Mac browsers. One
thing you could tackle that needs attention is to make it not look bad
or unreadable at user text enlargements, you might then find you do not
have your original problems.

 

[Bergamot]

http://www.tssarcade.com/test.html

It's just
about working save for the glitch in the left bottom corner.

No, there's more to it than that.
http://www.bergamotus.ws/screenshots/tssarcade.png

That's Seamonkey, BTW, not that it matters much. Besides the broken
borders and overlapping text, notice there is no right navigation
column, nor a horizontal scrollbar to get to it. I hope it wasn't
anything important.

Thanks for help with anyof these questions!

I think you've bitten off more than you can chew, i.e. attempting a CSS
layout without having the necessary skill to pull it off. Think KISS.

 

[midori0x]

This is pretty much the sort of design that is fraught with cross
browser dangers. You should see how it differs on my Mac browsers. One
thing you could tackle that needs attention is to make it not look bad
or unreadable at user text enlargements, you might then find you do not
have your original problems.

Indeed, I see the bottom three images aren't expanding with the
content similar to what mozilla is doing. I forgot I set a solid px
height for the select divs, I changed it back and they should expand
with the resized text. Still get the breakage though, even if I remove
most of the text.

No, there's more to it than that.
http://www.bergamotus.ws/screenshots/tssarcade.png

That's Seamonkey, BTW, not that it matters much. Besides the broken
borders and overlapping text, notice there is no right navigation
column, nor a horizontal scrollbar to get to it. I hope it wasn't
anything important.

Wow, it was actually. I didn't notice before, but I guess at a lower
(?) resolution the middle content gets shoved so far to the right the
menu on that side is made not visible.

Thanks for help with anyof these questions!

I think you've bitten off more than you can chew, i.e. attempting a CSS
layout without having the necessary skill to pull it off. Think KISS.

Well I have no problem with a challenge to be honest. I definitely
don't expect anyone to build the site for me, but a specific nudge in
the right direction is always nice. Even sites with web development
teams have near site breaking cross browser oddities so I don't think
my goals are that far off.

Also, anyone know of a decent image border tutorial?

 

[dorayme]

Indeed, I see the bottom three images aren't expanding with the
content similar to what mozilla is doing. I forgot I set a solid px
height for the select divs, I changed it back and they should expand
with the resized text.

<http://dorayme.netweaver.com.au/justPics/midori.png> 2 mins ago.

 

[midori0x]

<http://dorayme.netweaver.com.au/justPics/midori.png> 2 mins ago.

So is that what your getting as of right now? I uploaded an updated
page and now in all browsers for me including Safari(windows) the text
is expanding and not being hidden. Here's what I'm getting when I
resize the text.

http://tssarcade.com/graphics/test.jpg

 

[dorayme]

So is that what your getting as of right now? I uploaded an updated
page and now in all browsers for me including Safari(windows) the text
is expanding and not being hidden.

Right now, it is better in that respect.

But the text probably does not curve around the left curvey border
thingy you have in the way you probably want in all browsers. And,
frankly, the borders around the central bit are badly broken in various
ways cross browser wise...

 

[midori0x]

Right now, it is better in that respect.

But the text probably does not curve around the left curvey border
thingy you have in the way you probably want in all browsers. And,
frankly, the borders around the central bit are badly broken in various
ways cross browser wise...

Yes, as the text gets bigger the alignment is a little off. I noticed
it's still in sync for the most part until I go past about 30px. At
that width, wouldn't a person be somewhat used to seeing broken
sites? The borders are why I posted the thread, that's what I really
needed some advice with or a good tutorial on.

 

[dorayme]

Yes, as the text gets bigger the alignment is a little off. I noticed
it's still in sync for the most part until I go past about 30px. At
that width, wouldn't a person be somewhat used to seeing broken
sites? The borders are why I posted the thread, that's what I really
needed some advice with or a good tutorial on.

I am sorry, have not had time to examine your code properly. One thing I
have on line about borders is, I notice:

<http://netweaver.com.au/alt/fancyBorders/twoCol_fancyBorders.html>

If this does not help I will have to take a closer look at yours or else
call Nick Coughlin in from whatever he is doing...

 

[midori0x]

I am sorry, have not had time to examine your code properly. One thing I
have on line about borders is, I notice:

<http://netweaver.com.au/alt/fancyBorders/twoCol_fancyBorders.html>

If this does not help I will have to take a closer look at yours or else
call Nick Coughlin in from whatever he is doing...

Ah, it took me a while but now I see what you did there. That's a
really simple and practical technique, just let the background repeat
as necessary and use the inner content to appropriately define the
border by hiding the repeats. I think I'm seeing how I might be able
to adapt this to my own layout. I'm experimenting right now and will
check back soon, thanks a lot!

 

[dorayme]

(e-mail address removed) wrote:
....

Ah, it took me a while but now I see what you did there. That's a
really simple and practical technique, just let the background repeat
as necessary and use the inner content to appropriately define the
border by hiding the repeats. I think I'm seeing how I might be able
to adapt this to my own layout. I'm experimenting right now and will
check back soon, thanks a lot!

I notice I had an inappropriate fallback color for the background - it
was a left over from experiments - and I mention to remind you to attend
to this for a serious use in a real webpage. If the background image is
not available, *sometimes* it is better to fall back to the "natural"
colour so no border at all appears... You will see what I mean if you
experiment a bit. Temporarily munge the name of your background image
slightly so you can test what look you want in case of failure.

 

[midori0x]

I notice I had an inappropriate fallback color for the background - it
was a left over from experiments - and I mention to remind you to attend
to this for a serious use in a real webpage. If the background image is
not available, *sometimes* it is better to fall back to the "natural"
colour so no border at all appears... You will see what I mean if you
experiment a bit. Temporarily munge the name of your background image
slightly so you can test what look you want in case of failure.

Oh do you mean using the three letter color code instead of the six
character alpha-numeric color code? I always use six character method,
but if that's not what you meant please fill me in.

 

[dorayme]

....
Oh do you mean using the three letter color code instead of the six
character alpha-numeric color code? I always use six character method,
but if that's not what you meant please fill me in.

3 is just shorthand for 6, no I meant think about what colour you want
as fallback, that is all... it might not look good... so test it in your
page with the background image simulated to be missing.

 

[midori0x]

3 is just shorthand for 6, no I meant think about what colour you want
as fallback, that is all... it might not look good... so test it in your
page with the background image simulated to be missing.

Oh I see, I defined a color for the parent div that holds everything
so hopefully that won't be a problem.

 

[Nik Coughlin]

If this does not help I will have to take a closer look at yours or else
call Nick Coughlin in from whatever he is doing...

You can try to use one of the various skinning techniques to create a box
effect rather than trying to use border images:
http://nrkn.com/skinning/

I have been meaning to play with doing it via border images myself but
haven't had a chance yet, but the link above outlines various ways of
achieving what you are trying to do and their pros and cons.

 

[dorayme]

You can try to use one of the various skinning techniques to create a box
effect rather than trying to use border images:
http://nrkn.com/skinning/

I have been meaning to play with doing it via border images myself but
haven't had a chance yet, but the link above outlines various ways of
achieving what you are trying to do and their pros and cons.

Thanks for helping OP. I have posted the usual cheque to you...

 

[Nik Coughlin]

Thanks for helping OP. I have posted the usual cheque to you...

Last one bounced. I'm sending the goons round. Sleep with one eye open!

 

[midori0x]

Last one bounced. I'm sending the goons round. Sleep with one eye open!

Thanks guys! I can't wait to see if I can get one of these techniques
integrated into the site.

 

[Nik Coughlin]

Thanks guys! I can't wait to see if I can get one of these techniques
integrated into the site.

Nesting is probably best for what you are trying to do

 

[midori0x]

Nesting is probably best for what you are trying to do

Yes, that's the section I was reading now. I was faintly piecing
together exactly what you did by going over each little line in
firebug.