Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   Best method for image bordered div? (http://www.velocityreviews.com/forums/t651655-best-method-for-image-bordered-div.html)

midori0x@yahoo.com 01-07-2009 10:47 AM

Best method for image bordered div?
 
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 01-07-2009 08:48 PM

Re: Best method for image bordered div?
 
In article
<e69f2780-d754-4c58-9eb4-b0885f720e66@r10g2000prf.googlegroups.com>,
midori0x@yahoo.com wrote:

> 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.

--
dorayme

Bergamot 01-07-2009 10:54 PM

Re: Best method for image bordered div?
 

midori0x@yahoo.com wrote:
> 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.

--
Berg

midori0x@yahoo.com 01-08-2009 03:23 AM

Re: Best method for image bordered div?
 
On Jan 7, 12:48 pm, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> In article
> <e69f2780-d754-4c58-9eb4-b0885f720...@r10g2000prf.googlegroups.com>,
>
>
>
> midor...@yahoo.com wrote:
> >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.
>
> --
> 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. 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 01-08-2009 03:46 AM

Re: Best method for image bordered div?
 
In article
<4fc846e1-aa3d-4899-a944-7720ba3633f2@d42g2000prb.googlegroups.com>,
midori0x@yahoo.com wrote:

> On Jan 7, 12:48 pm, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> > In article
> > <e69f2780-d754-4c58-9eb4-b0885f720...@r10g2000prf.googlegroups.com>,
> >
> >
> >
> > midor...@yahoo.com wrote:
> > >http://www.tssarcade.com/test.html

> >
> > > Here's what I have so far. ...

> > 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.


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

--
dorayme

midori0x@yahoo.com 01-08-2009 04:10 AM

Re: Best method for image bordered div?
 
On Jan 7, 7:46 pm, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> In article
> <4fc846e1-aa3d-4899-a944-7720ba363...@d42g2000prb.googlegroups.com>,
>
>
>
> midor...@yahoo.com wrote:
> > On Jan 7, 12:48 pm, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> > > In article
> > > <e69f2780-d754-4c58-9eb4-b0885f720...@r10g2000prf.googlegroups.com>,

>
> > > midor...@yahoo.com wrote:
> > > >http://www.tssarcade.com/test.html

>
> > > > Here's what I have so far. ...
> > > 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.

>
> <http://dorayme.netweaver.com.au/justPics/midori.png> 2 mins ago.
>
> --
> 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. Here's what I'm getting when I
resize the text.

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

dorayme 01-08-2009 04:33 AM

Re: Best method for image bordered div?
 
In article
<ee5fca5b-71f2-433d-94a6-640d32d8780b@g3g2000pre.googlegroups.com>,
midori0x@yahoo.com wrote:

> On Jan 7, 7:46 pm, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> > In article
> > <4fc846e1-aa3d-4899-a944-7720ba363...@d42g2000prb.googlegroups.com>,
> >
> >
> >
> > midor...@yahoo.com wrote:
> > > On Jan 7, 12:48 pm, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> > > > In article
> > > > <e69f2780-d754-4c58-9eb4-b0885f720...@r10g2000prf.googlegroups.com>,

> >
> > > > midor...@yahoo.com wrote:
> > > > >http://www.tssarcade.com/test.html

> >
> > > > > Here's what I have so far. ...
> > > > 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.

> >
> > <http://dorayme.netweaver.com.au/justPics/midori.png> 2 mins ago.
> >
> > --
> > 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...

--
dorayme

midori0x@yahoo.com 01-08-2009 05:47 AM

Re: Best method for image bordered div?
 
On Jan 7, 8:33 pm, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> In article
> <ee5fca5b-71f2-433d-94a6-640d32d87...@g3g2000pre.googlegroups.com>,
>
>
>
> midor...@yahoo.com wrote:
> > On Jan 7, 7:46 pm, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> > > In article
> > > <4fc846e1-aa3d-4899-a944-7720ba363...@d42g2000prb.googlegroups.com>,

>
> > > midor...@yahoo.com wrote:
> > > > On Jan 7, 12:48 pm, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> > > > > In article
> > > > > <e69f2780-d754-4c58-9eb4-b0885f720...@r10g2000prf.googlegroups.com>,

>
> > > > > midor...@yahoo.com wrote:
> > > > > >http://www.tssarcade.com/test.html

>
> > > > > > Here's what I have so far. ...
> > > > > 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.

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

>
> > > --
> > > 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...
>
> --
> 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.

dorayme 01-08-2009 07:00 AM

Re: Best method for image bordered div?
 
In article
<6c002fe7-48c0-44ef-b4b3-3bbabfe38f3f@w1g2000prk.googlegroups.com>,
midori0x@yahoo.com wrote:

> On Jan 7, 8:33 pm, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> > In article
> > <ee5fca5b-71f2-433d-94a6-640d32d87...@g3g2000pre.googlegroups.com>,
> >
> >
> >
> > midor...@yahoo.com wrote:
> > > On Jan 7, 7:46 pm, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> > > > In article
> > > > <4fc846e1-aa3d-4899-a944-7720ba363...@d42g2000prb.googlegroups.com>,

> >
> > > > midor...@yahoo.com wrote:
> > > > > On Jan 7, 12:48 pm, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> > > > > > In article
> > > > > > <e69f2780-d754-4c58-9eb4-b0885f720...@r10g2000prf.googlegroups.com>,

> >
> > > > > > midor...@yahoo.com wrote:
> > > > > > >http://www.tssarcade.com/test.html

> >
> > > > > > > Here's what I have so far. ...
> > > > > > 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.

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

> >
> > > > --
> > > > 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...
> >
> > --
> > 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...

--
dorayme

midori0x@yahoo.com 01-08-2009 02:18 PM

Re: Best method for image bordered div?
 
On Jan 7, 11:00 pm, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> In article
> <6c002fe7-48c0-44ef-b4b3-3bbabfe38...@w1g2000prk.googlegroups.com>,
>
>
>
> midor...@yahoo.com wrote:
> > On Jan 7, 8:33 pm, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> > > In article
> > > <ee5fca5b-71f2-433d-94a6-640d32d87...@g3g2000pre.googlegroups.com>,

>
> > > midor...@yahoo.com wrote:
> > > > On Jan 7, 7:46 pm, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> > > > > In article
> > > > > <4fc846e1-aa3d-4899-a944-7720ba363...@d42g2000prb.googlegroups.com>,

>
> > > > > midor...@yahoo.com wrote:
> > > > > > On Jan 7, 12:48 pm, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> > > > > > > In article
> > > > > > > <e69f2780-d754-4c58-9eb4-b0885f720...@r10g2000prf.googlegroups.com>,

>
> > > > > > > midor...@yahoo.com wrote:
> > > > > > > >http://www.tssarcade.com/test.html

>
> > > > > > > > Here's what I have so far. ...
> > > > > > > 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.

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

>
> > > > > --
> > > > > 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...

>
> > > --
> > > 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...
>
> --
> dorayme


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!


All times are GMT. The time now is 07:17 AM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.