 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / September 2003Inconsistent 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 >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. 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  Signature"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/> [snip] > Your code is as follows: > border: 2px solid; [quoted text clipped - 17 lines] > border-style: solid; > border-color: #AEAED5 #000000 #000000 #8D8DBF; [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). SignatureBarry Pearson http://www.Barry.Pearson.name/photography/ http://www.BirdsAndAnimals.info/ http://www.ChildSupportAnalysis.co.uk/ >> I would use the following instead: >> [quoted text clipped - 11 lines] >In other words, be specific enough to stop the last 2 declarations changing >anything other than the colour. 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 Signature"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/> > http://www.boatingaccessories.com.au/test3.htm before asking for help here, please validate your code. http://validator.w3.org/ > In NS7, Mozilla and Opera, the borders don't render. IE6 displays as > intended. 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. SignatureBrian follow the directions in my address to email me |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.