Ok, it works, with one exception. The way I have it set up, the span it's in uses a border for the left and top, when I use your example it adds the border line over the image because it is in the span.
Any way around that? Would it be possible to nest two spans, or something like that.
Originally posted by thejoker101
Ok, it works, with one exception. The way I have it set up, the span it's in uses a border for the left and top, when I use your example it adds the border line over the image because it is in the span.
Any way around that? Would it be possible to nest two spans, or something like that.
Yes, you could use 2 spans if you like, with the second only containg the backgrund.
Alternativly you could put the image back into the page and float it left too, but that is more tedious if you decide to modify the layout in the future as you then have to change it on every page.
Perhaps this would be the best actually
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
body {background:#ccc;}
Adding the non-breaking space did add the picture. however, it added it about 2 pixels lower than it needs to be. I thought it might be because some of the text is larger than I wanted it to be, so I added some font changing CSS. Also, instead of useing the <EM> tag, I used another <span> flag, but I also added Class names to them, and in my style sheet I referenced them by: .tab span.SpanClassName This seemed to work.
Another problem that seemed to happen was that the first line of the text below became centered, not sure on that. Again, you can view the test page at:
Originally posted by thejoker101
Adding the non-breaking space did add the picture. however, it added it about 2 pixels lower than it needs to be.
You controll the hor & vert position of the background with the values you give in % or px
eg
background:url(corner4.gif) 2px 3px no-repeat;
Also, instead of useing the <EM> tag, I used another <span> flag, but I also added Class names to them, and in my style sheet I referenced them by: .tab span.SpanClassName This seemed to work.
Yepp it works fine that way too. I just used <em> since it made scence both structurally in the markup but also alowed for a much shorter code.
If both are spans you will have to add the class="whatever" to each and every span on the page which bloats the code unnessecarily in this case.
Another problem that seemed to happen was that the first line of the text below became centered, not sure on that.
That looks like a small IE bug.
Should be easy enough to work around. I presume simply specifying the height of the tab div should fix that
Reply With Quote
Bookmarks