|
CSS - Magic Dissapearing Bg Image
Hi :-)
Im having some troubles with IE and it sometimes displaying and background image and then other times deciding not to: http://www.curlykale.co.uk/dentalplusnew/testingnew3.html the blue section at the bottom has a graduatied blue background which sometimes just refuses to load, but on refresh magicly jumps back into life, everything is fine with firefox and safari, just IE being a bit pesky If anybody could shed any light it would be greatly appreciated! Many Thanks :-) RiverCottage Similar TutorialsThis site..theres supposed to be a menu top-right. In IE it appears then dissappears when page finished loading! freehotsms(dot)com Html code can be viewed from the browser..heres my CSS-its quite messy and long! I think theres an JAVASCRIPT conflict but idk! THANKS..Darned IE..doesnt even support border radius Code: body {margin:0px;
}
input.rad {padding:5px;
background:#0bb9ff;
color:#000000;
font-size:12px;
font-family:Sans-serif;
text-align:center;}
#header {
background:#ffffff;
height:auto;
border-bottom:5px solid #e71b11;
}
#inside {width:100%;
padding-top:0px;
height:211px;
clear:right;
/*border-top:5px solid #e2e2e2;
border-left:5px solid #e2e2e2;
border-right:5px solid #e2e2e2;
-moz-border-radius: 1em 1em 1em 1em;*/
margin-right:auto;
margin-left:auto;
}
#infooter {height:20px;
width:700px;
text-align:center;
margin:auto;
padding-top:10px;
}
#set {width:441px;
margin-right:auto;
margin-left:auto;
background:url(images/info.png);
height:68px;
margin-top:5px;}
td{font-family:arial;
font-size:13px;
}
#out {width:100%;
height:10px;
background:url(images/bottom.png);}
#rightlogin {
float:right;
-moz-border-radius: 0em 0em .5em .5em;
padding:5px;
background:#f7f7f7;
border-left:2px solid #e2e2e2;
border-right:2px solid #e2e2e2;
border-bottom:2px solid #e2e2e2;
margin-right:80px;}
.right_ad{height:80px;
width:auto;
float:right;
margin-top:auto;
margin-bottom:auto;
margin-right:10px;}
.somepadding {padding-left:10px;
padding-right:10px;}
.eco{width:100%;
text-align:center;
padding-right:150px;
}
img.icon{width:60px; height:60px;padding-left:10px;padding-right:10px;}
.center {margin-left:auto;
margin-right:auto;
width:468px;}
.accountbutton {
padding:5px;
background:#0bb9ff;
color:#000000;
font-size:12px;
font-family:Sans-serif;
text-align:center;}
#button {height:17px;
width:80px;
float:left;
-moz-border-radius: 1em 1em 1em 1em;
padding:5px;
background:#0bb9ff;
margin-right:10px;
color:#000000;
font-size:12px;
font-family:Sans-serif;
text-align:center;
}
a.top:hover{text-decoration:none;
color:#ffffff;
font-style:strong;}
a.top:active{text-decoration:none;
color:#ffffff;
font-style:strong;}
a.top:link{text-decoration:none;
color:#ffffff;
font-style:strong;}
a.top:visited{text-decoration:none;
color:#ffffff;
font-style:strong;}
a.in:hover{text-decoration:underline;
color: #448;
font-style:strong;
font-family:arial;
font-size:13px;}
a.in:active{text-decoration:none;
color: #448;
font-style:strong;
font-family:arial;
font-size:13px;}
a.in:link{text-decoration:none;
color: #448;
font-style:strong;
font-family:arial;
font-size:13px;}
a.in:visited{text-decoration:none;
color: #448;
font-style:strong;
font-family:arial;
font-size:13px;}
a.tin:hover{text-decoration:underline;
color: #448;
font-style:strong;
font-family:arial;
}
a.tin:active{text-decoration:none;
color: #448;
font-style:strong;
font-family:arial;
}
a.tin:link{text-decoration:none;
color: #448;
font-style:strong;
font-family:arial;
}
a.tin:visited{text-decoration:none;
color: #448;
font-style:strong;
font-family:arial;
}
a.n:hover{text-decoration:underline;
color:#ffffff;
font-style:strong;}
a.n:active{text-decoration:none;
color:#ffffff;
font-style:strong;}
a.n:link{text-decoration:none;
color:#ffffff;
font-style:strong;}
a.n:visited{text-decoration:none;
color:#ffffff;
font-style:strong;}
#left_logo {width:487px;
height:211px;
background:url(images/logo.png);
float:left;
margin-left:8%;
}
#hold {width:600px;
float:left;
margin-left:346px;
}
#login {width:500px;
margin-right:auto;
margin-left:auto;
background:#f7f7f7;
-moz-border-radius: .5em .5em .5em .5em;
margin-bottom:10%;
margin-top:20px;
padding:5px;
border:2px solid #e2e2e2;
}
#log {background:#f7f7f7;
padding:10px;
}
input.o {height:35px;
width:300px;
font:28px arial;
border:1px solid #cecece;}
input.o:hover {height:35px;
width:300px;
font:28px arial;
border:1px solid #ffd35b;
background:#feff9c;}
h2.login{
font-family:Georgia;
color:#4E443C;
text-transform: none; font-weight: 100;
font-size:35px;
margin-bottom:20px;
text-align:center;
color: #000;
text-shadow: 0px 1px 1px #fff;
margin-top:10px;
margin-bottom:10px;}
#menu_container {height:25px;
padding:10px;
border-top:3px solid #e2e2e2;
width:auto;
margin-right:10px;
float:right;
background:url(images/menub.png);
-moz-border-radius: 0em 0em 1em 1em;
border-bottom:1px solid #e2e2e2;
border-left:1px solid #e2e2e2;
border-right:1px solid #e2e2e2;
}
.newsletter{background:#ffffff;
width:auto;
padding:8px;}
#menuright{height:25px;
padding-top:80px;
padding:10px;
background:url(images/rig.png);
width:auto;
border-top:3px solid #e2e2e2;
float:right;
-moz-border-radius: 0em 0em 1em 1em;
border-bottom:1px solid #e2e2e2;
border-left:1px solid #e2e2e2;
border-right:1px solid #e2e2e2;}
#menu_button {width:auto;
height:30px;
background:#0bb9ff;
float:left;
color:#ffffff;
font-size:13px;
font-family:Sans-serif;
padding-top:10px;
padding-left:20px;
padding-right:20px;}
#maincont{width:950px;
margin-right:auto;
margin-left:auto;
margin-bottom:10px;
background:#f7f7f7;
min-height:800px;
padding-left:10px;
padding-right:10px;
padding-top:0px;
border-top:2px solid #e2e2e2;
-moz-border-radius: 0em 0em .8em .8em;
border-left:2px solid #e2e2e2;
border-right:2px solid #e2e2e2;
border-bottom:2px solid #e2e2e2;
}
#bore {float:left;
width:172px;
height:74px;
background:url(images/bore.png);
clear:right;
margin-top:98px;
margin-right:10px;
}
.boretext {margin-top:34px;
text-align:center;
font-family:Georgia bold;
color:#ffffff;
font-size:15px;}
#rightcolumn {width:250px;
background:#f7f7f7;
min-height:600px;
padding-right:10px;
float:right;
margin-bottom:10px;}
#social{padding-top:10px;
padding-bottom:24px; width:190px; margin-right:auto; margin-left:auto;}
#centercolumn {width:655px;
padding:10px;
min-height:500px;
float:left;
height:auto;
background:#f7f7f7;
margin-bottom:10px;
}
/* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */
/*--------------------------------------------------
REQUIRED to hide the non-active tab content.
But do not hide them in the print stylesheet!
--------------------------------------------------*/
.tabberlive .tabbertabhide {
display:none;
}
/*--------------------------------------------------
.tabber = before the tabber interface is set up
.tabberlive = after the tabber interface is set up
--------------------------------------------------*/
.tabber {
}
.tabberlive {
background:#ffffff;
margin-top:1em;
min-height:500px;
.6em .6em 0em 0em;
}
/*--------------------------------------------------
ul.tabbernav = the tab navigation list
li.tabberactive = the active tab
--------------------------------------------------*/
ul.tabbernav
{
margin:0;
padding:10px;
background:#f7f7f7;
font: bold 12px Verdana, sans-serif;
}
ul.tabbernav li
{
list-style: none;
margin: 0;
display: inline;
-moz-border-radius: .6em .6em 0em 0em;
}
ul.tabbernav li a
{
padding:10px;
margin-left: 3px;
-moz-border-radius: .6em .6em 0em 0em;
border-bottom: none;
background: #DDE;
text-decoration: none;
}
ul.tabbernav li a:link { color: #448; }
ul.tabbernav li a:visited { color: #667; }
ul.tabbernav li a:hover
{
color: #000;
background: #AAE;
border-color: #227;
}
ul.tabbernav li.tabberactive a
{
background-color: #fff;
}
td.images {text-align:center; color:#448; font: bold 12px Verdana, sans-serif;}
ul.tabbernav li.tabberactive a:hover
{
color: #000;
background: white;
-moz-border-radius: .6em .6em 0em 0em;
}
/*--------------------------------------------------
.tabbertab = the tab content
Add style only after the tabber interface is set up (.tabberlive)
--------------------------------------------------*/
.tabberlive .tabbertab {
padding:5px;
-moz-border-radius:.6em .6em .6em .6em;
border-top:0;
/* If you don't want the tab size changing whenever a tab is changed
you can set a fixed height */
/* height:200px; */
/* If you set a fix height set overflow to auto and you will get a
scrollbar when necessary */
/* overflow:auto; */
}
/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
display:none;
}
.tabberlive .tabbertab h3 {
display:none;
}
/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
height:200px;
overflow:auto;
}
#leftcolumn {
margin-right:0px;
background:#f7f7f7;
min-height:500px;
float:left;}
.intro {height:auto;
border:2px solid #e2e2e2;
background:#f7f7f7;
margin:20px;}
.holdvideo {margin-left:auto;
width:400px;
margin-right:auto;}
.int{width:450px;
padding:10px;
margin-right:auto;
margin-left:auto;}
.testing {font-size:12px;
color:blue;
float:right;
margin:6px;
font-family:Verdana;
}
.anothercontain{width:350px;margin-right:auto;margin-left:auto;}
.containbutton {float:right;}
.containbuttonl {float:left;}
td.buttnreg {float:right;
margin:6px;
height:50;
text-align:center;
background:url(images/late.png);
border:3px solid #ffffff;
-moz-border-radius: 1em 1em 1em 1em;
padding-top:11px;
padding-bottom:11px;
width:180px;
color:#0261ab;
font-family:Verdana;
font-size:14px;
font-style:strong;
padding-right:6px;
padding-left:6px;}
td.buttnreg:hover {float:right;
margin:6px;
height:50;
text-align:center;
background:url(images/late.png);
border:3px solid #ffffff;
-moz-border-radius: 1em 1em 1em 1em;
padding-top:11px;
padding-bottom:11px;
width:180px;
color:#ffffff;
font-family:Verdana;
font-size:14px;
font-style:strong;
padding-right:6px;
padding-left:6px;}
.scroll{overflow:auto;
height:600px;}
p.red{
font-family:Serif bold;
text-shadow: 1px 1px 2px #fff;
font-size:20px;
color:#000;
padding-bottom:6px;
margin-bottom:5px;
padding-top:6px;
text-align:center;
background:#f3f3f3;
border:2px solid #e2e2e2;
}
p.black{text-shadow: 2px 2px 3px #818173;
font-family:arial;
font-size:16px;
color:#000;
padding-bottom:10px;
margin-bottom:5px;
padding-top:16px;
text-align:center;
}
p{font-family:Verdana;
font-size:13px;
color:#000000;
margin-top:0px;
}
p.small{font-family:Sans-serif;
font-size:12px;
color:#5f5f55;
line-height:160%;
margin-top:0px;
}
p.blue{color: #448; font: bold 14px Verdana, sans-serif;}
ul {font-family:arial;
font-size:16px;
line-height:15px;
list-style-image: url(images/arrow.png);
margin-right:7px;
color:5f5f55;}
li {margin-top:7px;
margin-bottom:7px;}
#footer {-moz-border-radius: 1em 1em 0em 0em;
background:#f7f7f7;
height:40px;
clear:left;
clear:right;
border:2px solid #e2e2e2;
width:970px;
margin-right:auto;
margin-left:auto;
}
#contain {width:900px;
margin-left:auto;
margin-right:auto;}
table.fh {border-collapse:collapse;
font-size:13px;
color:#ffffff;
text-decoration:none;
width:950px;
}
.foothead { border-bottom:1px solid #f3f3f3;
height:30px;
}
tr.top {padding-top:4px;
font: strong Georgia,serif;
font-size:15px;
}
th.top {height:30px;
padding-right:50px;
text-align:left;
font: strong Georgia,serif;
font-size:15px;}
td.t {padding-right:50px;
font-style:strong;
padding:2px;
}
Hi I have a CSS drop down menu but when I hover over one of the dropped down items the text the text on the original hover button dissapears. This is because the text is the same color as the rollover color. How could I make it so that the rollover text color is different? At the moment only the drop down items text changes color on hover Code:
#navMenu {
margin:0;
padding:0;
}
#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background-color:#f0eccd;
}
#navMenu ul li a {
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
text-decoration:none;
width:95px;
height:30px;
display:block;
color:#ff9a29;
}
#navMenu ul ul {
position:absolute;
visibility:hidden;
top:30px;
}
#navMenu ul li:hover ul {
visibility:visible;
}
#navMenu li:hover {
background-color:#ff9a29;
}
#navMenu ul li:hover ul li a:hover {
background:#ff9a29;
color:#FFF;
}
#navMenu a:hover {
color:#FFF;
}
Thanks Thomas I'm using some light box variation to overlay a form ontop of a page. When the form shows up the caret ( text cursor) doesn't. Any ideas? If you want to check it out: http://mark2.netriver.net/lightbox/index.php Mark I am wokring with a complex form layout that is within a rounded corner box. The problem is that in Explorer it makes the H2 dissapear... I have bugtracked it down to line 71 in this document: Code: 71 float: left; I have published the files I used for bugtracking. With the error included: http://www.student.uib.no/~st11920/...1_included.html and with the troublesome line 71 outcommented: http://www.student.uib.no/~st11920/...1_excluded.html As you can see I really need that float. But is there a way to di this and not making my H2 dissapear? Can someone please help me? I am trying to get my left side column to meet my footer image... just like on this website: newcastlegateshead.com See how they side bar goes all the way down and meets the footer? Mine has a one inch gap between the bottom of the column and the footer. Does anyone know what they did to make it meet perfectly?Or the proper css code & where to put it? I've been trying to get this solved for dayyyssss Thank you so much... Hi, I have a question about setting up the Body background-image via a linked external stylesheet. I have a index.html file and a myStyle.css file. I want to setup the background to load an image file, test.JPG. When I embed the following in my index.html, I see the background show up: ** inside index.html file ** <BODY STYLE="background-image: url(test.JPG);"> blah </BODY> BUT, when I define my background in the externally linked myStyle.css file, the background does not load: ** inside myStyle.css file ** BODY { background-image: url(test.JPG); } ** inside index.html file ** <LINK REL="stylesheet" TYPE="text/css" HREF="myStyle.css"> <BODY> blah </BODY> </LINK> Please help. thanks! Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!) Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text. What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at: www.markmcm.co.uk/test/test.html The CSS is as as follows: Code:
/*
* Page Stylesheet
*/
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #eaeaea;
border:0; margin:0; padding:0;
height: 100%;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#container {
margin-left: auto;
margin-right: auto;
min-height: 100%;
width: 936px;
}
* html #container {
height: 100%;
}
#content {
float:left;
position: relative;
height: 528px;
width: 936px;
z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
position: absolute;
float: left;
display: block;
width: 312px;
height: 176px;
}
.miniscreen1 {
top: 0;
left: 0;
}
.miniscreen2 {
top:0;
left: 312px;
}
.miniscreen3 {
top: 0;
left: 624px;
}
.miniscreen4 {
left: 0;
top:176px;
}
.miniscreen5 {
left: 312px;
top:176px;
}
.miniscreen6 {
left: 624px;
top:176px;
}
.miniscreen7 {
left: 0;
top:352px;
}
.miniscreen8 {
left: 312px;
top:352px;
}
.miniscreen9 {
left: 624px;
top:352px;
}
.info {
height: 30px;
top:3px;
left: 40px;
width: 265px;
float: left;
position: absolute;
}
.infobar {
left:0px;
position: absolute;
top: 140px;
width: 312px;
height: 36px;
outline: none;
color:#000;
background: url("data/infobar.png") no-repeat 0 0;
z-index: 650;
}
.infobar:hover {
background-position: 0 -36px;
outline: none;
color:#fff;
}
#infobar span {
display: none;
outline: none;
}
.clip_title {
outline: none;
font-size: 85%;
font-weight: 700;
vertical-align: top;
text-align: left;
}
.clip_sub {
outline: none;
height: 13px;
font-size: 80%;
line-height: 13px;
font-weight: 700;
vertical-align: top;
text-align: left;
}
And the HTML is: Code: <!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"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <meta name="description" content=" " /> <meta name="keywords" content=" " /> <meta name="generator" content=" " /> <link rel="stylesheet" type="text/css" href="page.css" media="screen" /> </head> <body> <div id="container"> <div id="content"> <span class="miniscreen1"> <a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen2"> <a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen3"> <a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen4"> <a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen5"> <a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen6"> <a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen7"> <a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen8"> <a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen9"> <a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> </div> </div> </body> </html> There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!) Trying to delete my post but no option to delete so just removing content. On button on my website store on CSS but when user turn off "load image automatically" then images don't display. Please show me how to fix it. Thanks a lot. I am using a single gif file as an image sprite and want to link the file name in another style sheet so i can reuse this sheet without having to have many copys of the style sheet with a different file names example: Currently like this Code: #store{left:-200px;width:158px;}
#store{background:url('mred.gif') -150px -161px;}
#store a:hover{background: url('mred.gif') -150px 0;}
#fourms{left:0px;width:158px;}
#fourms{background:url('mred.gif') -304px -161px;}
#fourms a:hover{background: url('mred.gif') -304px 0;}
want like this
#home{left:-200px ;width:150px;}
#home{background:inherit;background-position: 0 -161px;}
#home a:hover{background-position: 0 0;}
with the background:url('mred.gif') specified in another style sheet once insted of repeating over the entire sheet. effectively so i can just change the other external style sheet to change the gif file and keep this one the same. HOW? possible? Here's the deal. I want to have one generic button image that I can use for all buttons. Therefore, I don't want to have words on the image but instead want to write them in afterward. Normally, you could just do something like Code: <input type="image" src="..." and things are fine. However, like I said, I don't want to do that because this forces me to create an image with the words already on them. I want a black button that I can write the words on, but want it to still behave like a submit button. Which means, once I type in my username and password, I just want to be able to hit enter (and not be forced to click on the button) and submit the form. Am I asking for too much? Hi, Instead of organising an image sprite as follows: image image image image image image i'm wondering if there are any negative effects to organising the images in a linear fashion as follows image image image image image image I know that Flash will only render images that are a certain width or height but is there any such limitations when using css sprites? Thanks Figured this was simple, but I can't seem to figure it out. Using CSS, I want to put an image on the left with text to the right aligned to the bottom. I could easily do this with a table, but I'd like to find a CSS way. With CSS like: .imginfo {float:none;clear:both;margin-top:1em;} .imginfo img {float:left;margin-right:1em;} and code like: Code: <div class="imginfo"> <img src="..." /> Line of Text<br /> Line of Text<br /> Line of Text<br /> </div> I get the image on the left and the text on the right, but, the text starts at the top of the image. I want it to end up aligned to the bottom of the image. Attempting to use vertical-align: bottom doesn't do anything with the text. The effect I am looking for is like below. If you assume the XXX are the image... Code: XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX Line of Text XXXXXXXXXXXX Line of Text XXXXXXXXXXXX Line of Text I cant seem to get this to position correctly in firefox. Looks great in IE though... Perhaps I should just use divs with margins rather than ul's Hi I am redesigning my blog and took it down completely. I want to place the day's text post on the day's photo post on top of the latter, while graying out the photo. Is that possible without using flash? I'm trying to create a little background image for each image on this page. A kind of crappy looking polaroid type background image. It works fine in Firefox, but not in IE. Any ideas? http://www.rhizaowns.com/holly/index.php Hello. So I have this situation (on the right): h t t p : / / img339.imageshack.us/img339/6958/1stb.png and when I change my browser resolution, I get this (on the right): h t t p : / / img35.imageshack.us/img35/3892/2ndhw.png Is it possible to do that the image wouldn't change the place on a screen even you when change the resolution of the browser? And yes, the image must be behind the text. Thanks in advance for any suggestions and tips. Code: div.top {
border: 10px solid #CCCCCC;
border-bottom-width: 0px;
padding: 0px;
background-image: url(menutile.jpg);
}
The code above yields this . It is uneven with the normal image, though both are the same size. I simply want to tile the bg image to the border even with the normal menu images. What am I doing wrong? |
|||||||