Hi. I want to create a simple link with css border around it. here is the code. It works just fine under firefox, but doesn't under IE 6 and 7. In those 2 browsers I can see only the left and right border, why? <code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <title>a title</title> </head> <body> <div style="margin-top:20px; text-align:center; width: 95%; "> <a href="#" style="text-decoration:none;border: #000000 solid 2px; ">Some sample text</a> </div> </body> </html> </code> Mike.
Hi Mike, If you add "display:block" it corrects the border issue you're experiencing, however, it makes it full width, I am not sure how wide you wanted the border, but try switching your link style to the following to see what I mean. <a href="#" style="display:block;text-decoration:none;border: #000000 solid 2px; ">Some sample text</a> HTML:
I want the border to be only around the text, I don't want to specify the width of the border, cause it should adjust to the text length... Mike.
You DID state the width of the border (2px). Nowhere in the "border" statement can you say the size of what the border is going around, so it will do as you want, go by how big (long) the text is. However, if you copy/pasted your html, then I see a problem: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" [b]"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <---no html start tag [/b] <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <title>a title</title> </head> <body> <div style="margin-top:20px; text-align:center; width: 95%; "> <a href="#" style="text-decoration:none;border: #000000 solid 2px; ">Some sample text</a> </div> </body> [b]</html><---------end tag[/b] Code (markup):
i hate IE!!! so much issues with css, javscript!!! it's annoying.. i have stopped working on compability for IE...i do my site exclusively for firefox now..hence encouraging people switching to firefox. yep for ur problem... you must put display:block but you will have to specify the width...that's not very convenient
If only the world we lived in made sense. It's easy to abandon IE, and everyday I wish I can, however being an experienced web developer, I realize that IE is just part of the problem and needs to be dealt with. Hiding the problem under the rug isn't going to help you or all your viewers in the end. You have to realize that the IE market share is still close to 60% and if your website doesn't show up properly in IE, then expect a lot of complaints from visitors and/or less traffic simple because you won't spend an extra little bit of time fixing your own code.
Again, this is not a case of IE being 'at fault', but at a lack of understanding the behavior of CSS... Either way, the solution is simple: display:inline-block; fixes things right up. Add that to the anchor and you are good to go. For all the bitching about IE, it's NOT that bad if you take the time to code correctly. Oh, and in your initial example, it might help to actually open the HTML... and even when testing concepts I REALLY advise against inlining the presentation in the BODY. That's what the <STYLE> tag is for IMHO. Try this, works fine. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>a title</title> <style type="text/css"> * { margin:0; padding:0; } .testbox { margin:20px auto 0; text-align:center; width:95%; } .testbox a { text-decoration:none; padding:0 4px; border:2px solid #000; display:inline-block; } </style> </head><body> <div class="testbox"> <a href="#">Some sample text</a> </div> </body></html> Code (markup): *** NOTE *** I added 4px padding on each side just to 'pretty it up' a little.