K_Drive Posted September 7, 2006 Share Posted September 7, 2006 Hello.I am trying to work with text buttons. These are buttons that are created by using a background image with some text. I have been trying to simplyfy the code to create these buttons.Here is my website with some buttons:http://www.geocities.com/alcovespring/text_button.htmlAs you can immediately see, there is a gap between the middle and right end of the buttons.If I take out the text ("Link to Page 01") the gaps disappear.Any suggestions?K_Drivep.s.I made the page background black temporarily so that the gaps are easier to see. Link to comment Share on other sites More sharing options...
Err Posted September 7, 2006 Share Posted September 7, 2006 You're using span tags for background images, which is not very good, <div> is the proper tag to use. Also you are using the CSS display: inline, which looks very different when veiwing them with different browsers, which is probably the reason there is a gap between your images (in firefox you can't even tell what it's suppose to be). They have float: left you can use, which is a lot better becuase it's widely supported and it functions like it's suppose to on all browsers. As to fix it, I recommed doing what I suggested.Here's one I did in about 10min going from your code (displays correctly on serveral browsers):css: .bg_box div { float: left;}.bg_box { height: 50px; width: 195px; background-image: url(http://www.geocities.com/alcovespring/graphics/red_middle.bmp); margin-bottom: 2px; dispaly: block;}.bg_left { height: 50px; width: 25px; background-image: url(http://www.geocities.com/alcovespring/graphics/red_left.bmp);}.bg_right { height: 50px; width: 25px; background-image: url(http://www.geocities.com/alcovespring/graphics/red_right.bmp);}.text { width: 145px; padding-top: 15px; text-align: center;} html: <div class="bg_box"> <div class="bg_left"></div> <div class="text">Link to Page 01</div> <div class="bg_right"></div></div><div class="bg_box"> <div class="bg_left"></div> <div class="text">Link to Page 02</div> <div class="bg_right"></div></div> Link to comment Share on other sites More sharing options...
S@m Posted September 7, 2006 Share Posted September 7, 2006 Give this a try. This is pretty quick and rough. I haven't tested it in any browsers, so results may vary. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">body, html {background-color:#000;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:#fff;}* {margin:0;padding:0;}#buttonlist {margin-top:10px;}#buttonlist ul {list-style-type:none;}#buttonlist ul li a {position:relative;top:-20px;line-height:50px;font-weight:bold;color:#fff;background-color:#ff0000;border-top:5px solid #800000;border-bottom:5px solid #800000;padding:14px 50px 14px 50px;text-decoration:none;}#buttonlist ul li a:hover {text-decoration:underline;}</style></head><body><div id="buttonlist"><ul> <li><img src="red_left.gif" alt=""/><a href="" rel="" title="Link 1">Link 1</a><img src="red_right.gif" alt=""/></li> <li><img src="red_left.gif" alt=""/><a href="" rel="" title="Link 2">Link 2</a><img src="red_right.gif" alt=""/></li> <li><img src="red_left.gif" alt=""/><a href="" rel="" title="Link 3">Link 3</a><img src="red_right.gif" alt=""/></li> <li><img src="red_left.gif" alt=""/><a href="" rel="" title="Link 4">Link 4</a><img src="red_right.gif" alt=""/></li></ul></div></body></html> Link to comment Share on other sites More sharing options...
K_Drive Posted September 7, 2006 Author Share Posted September 7, 2006 Thank you for both replies.I will give them a try.I come from the old "<tables>" school of web pages. This CSS is new to me, but I like it a lot. More tools to use. I definitely like the separation of content and styling. It makes things more clear when I am building a page. It is just going to take some getting used to.K_Drive Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now