CSS Custom Borders

[Dy]

Hi all

I'm trying to creat a custom border like this:

#container {
width:770px;
background: url(images/background.gif) repeat-y;
padding:0; margin:0;
}

The customer image has the left and right border, each side's border is
10px.

Therefore I've created the #main and #rightnav with margins of 10px.

While it displays correctly on MS IE6, it doesn't display the border at
all on Opera, Netscape or Firefox.

The margin attributes should be transparent, so what am I doing wrong.

Thanks in advance

[Barbara de Zoete]

On Sat, 04 Feb 2006 11:25:46 +0100, Dy <dy********@hotmail.com> wrote:

I'm trying to creat a custom border like this:

#container {
width:770px;
background: url(images/background.gif) repeat-y;
padding:0; margin:0;
}

The customer image has the left and right border, each side's border is
10px.

Therefore I've created the #main and #rightnav with margins of 10px.

While it displays correctly on MS IE6, it doesn't display the border at
all on Opera, Netscape or Firefox.

The margin attributes should be transparent, so what am I doing wrong.

This really makes no sense to me. Please provide URL so we can se the
problem child.

--
______PretLetters:
| weblog | http://www.pretletters.net/weblog/weblog.html |
| webontwerp | http://www.pretletters.net/html/webontwerp.html |
|zweefvliegen | http://www.pretletters.net/html/vliegen.html |

[Dy]

Here you go:

http://www.red-enet.com/essenceofspain/

Looks great on IE6 - doesn't work on Opera, Firefox or Netscape.

Thanks!

[Barbara de Zoete]

On Sat, 04 Feb 2006 11:35:19 +0100, Dy <dy********@hotmail.com> wrote:

Here you go:
? Please learn how to quote properly:
<URL:http://www.html-faq.com/etiquette/?quoting>
http://www.red-enet.com/essenceofspain/

Looks great on IE6 - doesn't work on Opera, Firefox or Netscape.

Might have something to do with the odd div that is before the start tag
of the body element:
<URL:http://validator.w3.org/check?uri=http%3A%2F%2Fwww.red-enet.com%2Fessenceofspain%2F>

Didn't look any further. First get that corrected and see what happens
then. Usually with only one mistake, I don't take that very seriously. But
this is a mistake one really shouldn't make. It could make all the
difference, since a browser thrying to render your document will put a
start tag for the body element before that 'premature' div. Hence the
second start tag for the body element could just not be doing anything
anymore.

--
______PretLetters:
| weblog | http://www.pretletters.net/weblog/weblog.html |
| webontwerp | http://www.pretletters.net/html/webontwerp.html |
|zweefvliegen | http://www.pretletters.net/html/vliegen.html |

[Steve Pugh]

Dy wrote:

Here you go:

http://www.red-enet.com/essenceofspain/
Did you validate your code before posting? If so, why do you have a div
outside the body?
Looks great on IE6 - doesn't work on Opera, Firefox or Netscape.

Please quote part of the message you are replying to. Not everyone will
have seen the earlier messages in the thread and hence have no idea
what you are talking about.

IE is getting it wrong, as usual. The other browsers are doing what
you've asked them to do.

#main is floated left.
#rightbar is floated right.
Hence #container has its height determined by #top alone.

Floated elements are taken outside the document flow and hence do not
contribute to the height of their parent elements. So your background
image is constrained to a shorter portion of the page. Add an element
with clear: both; after the two columns but inside #container to extend
the parent to encompass the full height of both columns. Then you can
get to work on the real problems such as the fixed font size.

Steve

[Dy]

No - it's not that because I only put that div in for testing.

Anyway - it's corrected and makes no difference

Thanks

[Barbara de Zoete]

On Sat, 04 Feb 2006 13:02:00 +0100, Dy <dy********@hotmail.com> wrote:

No [...]

'I don't want to be helped here, really, you know'

<URL:http://www.safalra.com/special/googlegroupsreply/>
<URL:http://www.spartanicus.utvinternet.ie/help_us_help_you.htm>

--
______PretLetters:
| weblog | http://www.pretletters.net/weblog/weblog.html |
| webontwerp | http://www.pretletters.net/html/webontwerp.html |
|zweefvliegen | http://www.pretletters.net/html/vliegen.html |

[Dy]

Please quote part of the message you are replying to. Not everyone will
have seen the earlier messages in the thread and hence have no idea
what you are talking about.

OK - no problem - will do :)
IE is getting it wrong, as usual. The other browsers are doing what
you've asked them to do.

#main is floated left.
#rightbar is floated right.
Hence #container has its height determined by #top alone.

Floated elements are taken outside the document flow and hence do not
contribute to the height of their parent elements. So your background
image is constrained to a shorter portion of the page. Add an element
with clear: both; after the two columns but inside #container to extend
the parent to encompass the full height of both columns. Then you can
get to work on the real problems such as the fixed font size.

I must confess, I was a bit suspicious that IE was getting it wrong -
thanks for your help on this, it works a treat.

[Windsun]

The border has to be on the CONTAINER not the image.

-------------------------------------------------------------------------
"Dy" <dy********@hotmail.com> wrote in message
news:11*********************@g44g2000cwa.googlegro ups.com...

Hi all

I'm trying to creat a custom border like this:

#container {
width:770px;
background: url(images/background.gif) repeat-y;
padding:0; margin:0;
} ----------------------------------------
#container {
border-left:10px solid #008000; border-right:10px solid #008000;
background-image: url('eossnowflake2a.gif'); background-repeat: repeat;
background-attachment: scroll; padding-left:4px; padding-right:4px;
padding-top:0; padding-bottom:0
}


The customer image has the left and right border, each side's border is
10px.

Therefore I've created the #main and #rightnav with margins of 10px.

While it displays correctly on MS IE6, it doesn't display the border at
all on Opera, Netscape or Firefox.

The margin attributes should be transparent, so what am I doing wrong.

Thanks in advance

[Windsun]

"Windsun" <wi******@earthlink.net> wrote in message
news:0I******************@newsread2.news.pas.earth link.net...

The border has to be on the CONTAINER not the image.
NM - I misread your message - thought you were trying to put a border on the
outside overall.

-------------------------------------------------------------------------
"Dy" <dy********@hotmail.com> wrote in message
news:11*********************@g44g2000cwa.googlegro ups.com...

Hi all

I'm trying to creat a custom border like this:

#container {
width:770px;
background: url(images/background.gif) repeat-y;
padding:0; margin:0;
}

----------------------------------------
#container {
border-left:10px solid #008000; border-right:10px solid #008000;
background-image: url('eossnowflake2a.gif'); background-repeat: repeat;
background-attachment: scroll; padding-left:4px; padding-right:4px;
padding-top:0; padding-bottom:0
}

The customer image has the left and right border, each side's border is
10px.

Therefore I've created the #main and #rightnav with margins of 10px.

While it displays correctly on MS IE6, it doesn't display the border at
all on Opera, Netscape or Firefox.

The margin attributes should be transparent, so what am I doing wrong.

Thanks in advance