Help | Site Map
Connecting Tech Pros Worldwide
 
 
LinkBack Thread Tools
  #1  
Old July 20th, 2005, 09:24 PM
David Ehmer
Guest
 
Posts: n/a
Default Inconsistent border display

I have some buttons I'm working on at this address

http://www.boatingaccessories.com.au/test3.htm

In NS7, Mozilla and Opera, the borders don't render. IE6 displays as
intended.

Appreciate any insights.

David


  #2  
Old July 20th, 2005, 09:25 PM
Steve Pugh
Guest
 
Posts: n/a
Default Re: Inconsistent border display

"David Ehmer" <ehmer@optusnet.com.au> wrote:
[color=blue]
>I have some buttons I'm working on at this address
>
>http://www.boatingaccessories.com.au/test3.htm
>
>In NS7, Mozilla and Opera, the borders don't render. IE6 displays as
>intended.[/color]

Okay, can you guess which browser is correct and which is wrong?

Your code is as follows:
border: 2px solid;
border-top: #AEAED5;
border-left: #8D8DBF;
border-bottom: #000000;
border-right: #000000;

The first line says to set all four borders to 2px width, solid style
and the color of the element (e.g. white for your links).
The next four lines set the colours on each side but also set the
width and style back to their initial values. And the initial value
for border-style is none.

Hence there should be no borders, beacuse that's what you've told the
browser to draw. IE is wrong, the other browsers are correct.

I would use the following instead:

border-width: 2px;
border-style: solid;
border-color: #AEAED5 #000000 #000000 #8D8DBF;

You also have other problems, because the buttons are sized in pixels
they break when the text is reszied, and there is no way to
distinguish between visited and unvisited links.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>
  #3  
Old July 20th, 2005, 09:25 PM
Brian
Guest
 
Posts: n/a
Default Re: Inconsistent border display

David Ehmer wrote:[color=blue]
>
> http://www.boatingaccessories.com.au/test3.htm[/color]

before asking for help here, please validate your code.
http://validator.w3.org/
[color=blue]
> In NS7, Mozilla and Opera, the borders don't render. IE6 displays as
> intended.[/color]

I don't have IE 6, so I don't know what borders you want. I do see
uniform spacing between td elements. This does not, btw, look like
tabular data.

--
Brian
follow the directions in my address to email me

  #4  
Old July 20th, 2005, 09:25 PM
Barry Pearson
Guest
 
Posts: n/a
Default Re: Inconsistent border display

Steve Pugh wrote:
[snip][color=blue]
> Your code is as follows:
> border: 2px solid;
> border-top: #AEAED5;
> border-left: #8D8DBF;
> border-bottom: #000000;
> border-right: #000000;
>
> The first line says to set all four borders to 2px width, solid style
> and the color of the element (e.g. white for your links).
> The next four lines set the colours on each side but also set the
> width and style back to their initial values. And the initial value
> for border-style is none.
>
> Hence there should be no borders, beacuse that's what you've told the
> browser to draw. IE is wrong, the other browsers are correct.
>
> I would use the following instead:
>
> border-width: 2px;
> border-style: solid;
> border-color: #AEAED5 #000000 #000000 #8D8DBF;[/color]
[snip]

I use a slightly different approach, and I wonder whether you see any harm in
it? I'll translate it to this case.

{ border: solid #000000 2px; border-top-color: #AEAED5; border-left-color:
#8D8DBF; }

In other words, be specific enough to stop the last 2 declarations changing
anything other than the colour.

(I have a reason for doing it that way which isn't really important here).

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/


  #5  
Old July 20th, 2005, 09:25 PM
Steve Pugh
Guest
 
Posts: n/a
Default Re: Inconsistent border display

"Barry Pearson" <news@childsupportanalysis.co.uk> wrote:
[color=blue]
>Steve Pugh wrote:[/color]
[color=blue][color=green]
>> I would use the following instead:
>>
>> border-width: 2px;
>> border-style: solid;
>> border-color: #AEAED5 #000000 #000000 #8D8DBF;[/color]
>[snip]
>
>I use a slightly different approach, and I wonder whether you see any harm in
>it? I'll translate it to this case.
>
>{ border: solid #000000 2px; border-top-color: #AEAED5; border-left-color:
>#8D8DBF; }
>
>In other words, be specific enough to stop the last 2 declarations changing
>anything other than the colour.[/color]

Yes that should work just as well.
I prefer my definition as I'm defining like with like all the way down
but it makes no difference to the end result. (I can't think of any
browser bugs that would be triggered by one and not the other.)

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>
 

Bookmarks

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are Off
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over network members.
Post your question now . . .
It's fast and it's free

Popular Articles