Curved edges without Images

Hi All,

I was browsing in the internet just to check is it possible just to have a block with curved images without using images.

Many of the links are as usual only, but there was one link which said doing without images, i got excited and opened the link, as they mentioned it was like that.

So i just thought of sharing with you all.

Many of you might think it is just copying and pasting the code, but believe me i tried it out and then only i am posting it here :) :)

I will explain the logic at the last.

HTML:

< class=" b1 ">< / b >< class=" b2 ">< / b >< class=" b3 "> < / b > < class=" b4 ">< / b >
< class="content">
<>
<> <>You can see me with curved edges.< / td >< / tr >
< / table >
< / div >
< class=" b4 ">< / b >< class=" b3 ">< / b >< class= " b2 "> < / b > < class=" b1 "> < / b >

CSS:

<>
.b1 { DISPLAY: block; FONT-SIZE: 1px; OVERFLOW: hidden }
.b2 { DISPLAY: block; FONT-SIZE: 1px; OVERFLOW: hidden }
.b3 { DISPLAY: block; FONT-SIZE: 1px; OVERFLOW: hidden }
.b4 { DISPLAY: block; FONT-SIZE: 1px; OVERFLOW: hidden }
.b1 { BACKGROUND: #888; MARGIN: 0px 5px; HEIGHT: 1px }
.b2 { BORDER-RIGHT: #888 2px solid; BACKGROUND: #ddd; MARGIN: 0px 3px; BORDER-LEFT: #888 2px solid; HEIGHT: 1px }
.b3 { BORDER-RIGHT: #888 1px solid; BACKGROUND: #ddd; MARGIN: 0px 2px; BORDER-LEFT: #888 1px solid; HEIGHT: 1px }
.b4 { BORDER-RIGHT: #888 1px solid; BACKGROUND: #ddd; MARGIN: 0px 1px; BORDER-LEFT: #888 1px solid; HEIGHT: 2px }
.contentb { BORDER-RIGHT: #888 1px solid; BACKGROUND: #ddd; BORDER-LEFT: #888 1px solid }
.contentb DIV { MARGIN-LEFT: 5px }
.contentb TABLE { MARGIN-LEFT: 5px }
< / style >

save the code as html file and TADA you can see the curved edges without images.

As i promised the logic is just simple, setting the margin for the bold tag would actually make a curved apperance to the edges

Reference : http://www.html.it/articoli/nifty/index.html

Have a happy coding


Venkat :)

how to get the styles from a parent window in javascript

Hi,

Recently i had a scenario, which i had to load a page in a iframe, it was working fine, but the problem was the styles was not setting up in the child window, i cannot hard code the styles as the style sheets will be generated dynamically and i will be able to get the styles, i tried to find out a way, did some googling and found the way in javascript.
call the javascript function in child window onload, it will take care of the rest

function setParentStyle()
{
if(window.top && window.top.location.href != document.location.href)
{
// all parent's <link> tag's
var linkrels = window.top.document.getElementsByTagName('link');
// my head - child window head tag
var small_head = document.getElementsByTagName('head').item(0);
// loop through parent's links
for (var i = 0, max = linkrels.length; i < max; i++)
{
// are they stylesheets
if (linkrels[i].rel && linkrels[i].rel == 'stylesheet')
{
// create new element and copy all attributes
var thestyle = document.createElement('link');
var attrib = linkrels[i].attributes;
for (var j = 0, attribmax = attrib.length; j < attribmax; j++)
{
thestyle.setAttribute(attrib[j].nodeName, attrib[j].nodeValue);
}
// add the newly created element to the head
small_head.appendChild(thestyle);

}
}
}
}

i am just copying and pasting it what i got, there is nothing which i did on my own :) :)

Thanks
Venkat