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********@hot mail.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.

--
______PretLette rs:
| 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********@hot mail.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.or g/check?uri=http% 3A%2F%2Fwww.red-enet.com%2Fesse nceofspain%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.

--
______PretLette rs:
| 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********@hot mail.com> wrote:

No [...]

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

<URL:http://www.safalra.com/special/googlegroupsrep ly/>
<URL:http://www.spartanicus .utvinternet.ie/help_us_help_yo u.htm>

--
______PretLette rs:
| 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********@hot mail.com> wrote in message
news:11******** *************@g 44g2000cwa.goog legroups.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('eossnowfla ke2a.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******@earth link.net> wrote in message
news:0I******** **********@news read2.news.pas. earthlink.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********@hot mail.com> wrote in message
news:11******** *************@g 44g2000cwa.goog legroups.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('eossnowfla ke2a.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