|
CSS - Link Background Images Not Showing Up!
I am having a problem with some css image links not showing up in some browsers (IE 7, for example). Seems to work on most Mac browsers (of course!) Any help is appreciated! I've tried a few different things with the code, which explains the few items that are commented out.
HTML: <a href="contact-form.php" class="more-info"><img src="images/spacer.gif" width="156" height="79" /></a> <a href="charity.php" class="community"><img src="images/spacer.gif" width="154" height="72" /></a> CSS: a.more-info:link { display:block; overflow:hidden; text-indent:-9999px; width:156px; height:79px; background:url(../images/more-info2.png) no-repeat 0 0; margin:6px 0 0 3px; } a.more-info:hover{ background-position: -156px; } a.community:link{ display:block; overflow:hidden; text-indent:-9999px; width:154px; height:72px; background:url(../images/community.png) no-repeat 0 0; margin:6px 0 0 3px; } a.community:hover{ background-position:-154px; } Similar TutorialsThis puzzles me for this is the first time EVER that it is not working. I have "background-image" coding and NONE of those images are even showing up, yet when i add them on the index file as a normal image all is well... Any ideas? PROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative? I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow. Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too. Here's the HTML: <a class="button" href="#"><span>Update Profile</span></a> Here's the css: a.button:link, a.button:visited { background:url(button_right.gif) no-repeat right top; } a.button span:hover, a.button span:active { background:url(button_left_hover.gif) no-repeat right top; } a.button span { background:url(button_left.gif) no-repeat left top; color:#fff; cursorointer; display:block; height:20px; line-height:20px; margin:0 2px 0 0; padding:0 10px; position:relative; white-space:nowrap; } The layout I have going is a bit difficult to explain. Here's a diagram.. The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header. I hope this makes sense. What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though. Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts? Thanks in advance for any assistance/suggestions. good evening all, i am new here. tonight i tried to upload a web page that i had already made. i had already seen what it looked like, and the images were displaying just fine, but then when i uploaded the file and viewed it (from the website as opposed to from my hard drive)the images were not showing (except for the first one which was just a test). i don't know why there should be a difference, since the file is exactly the same. any help would be greatly appreciated! thank you. Delete Hi: I have the following in my CSS file: PHP Code: #body { background: url('images/columns.gif') repeat-y; text-align: left; } The problem is that the background image is not showing up un MS Internet Explorer. It works fine in Firefox. Is this a bug? Do I need a hack? Hi, my css is probably a mess as I've been hacking things together for a few days. my site:jasondaydesign.com I have a div where my content divs are contained. In firefox & chrome, the background for the div shows fine. In IE, the background does not show. I'm not sure where the css issue is that's causing this. Could someone point me in the right direction for solving this? Thanks! The only way i can get my backgroud image to show is to explicitly state my body elements within each document. If I put them in css file and refer each page to that css file, my background image does not work, but all the other elements in that css file do. Why? JOhn Hi, I have some simple CSS for a div tag, inwhich there should be a tiling background image. Here is the CSS code: Code: #mainContent{
z-index:5;
padding:0;
margin: 2px;
background-image: url(images/common/bodybg.gif);
background-repeat:repeat-y;
height:100%;
}
Then I have my div tag: <div id="mainContent"> which holds 2 other divs, both without backgrounds. Yet my tiling background doesn't show. Is there anything wrong with my code? I have checked the image path etc, but can't figure it out. Here is the site: http://www.caillouette.com/SouthernLiving/ thanks I'm trying to use stylesheets to make a fixed, no-repeat background. It is working in Mozilla 1.0, but it's not showing up right in IE 5.5. Any ideas why? The site is at http://www.people.virginia.edu/~bjl6d/journal.html. The part that I put in my style sheet is: .journaltext { font-family: "Book Antiqua", Garamond; font-size: 12px; font-weight: normal; color: #000000; background-image: url(../images/layout/Layout_r2_c2.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: left top} Everything is perfect in Mozilla, but when I view it in IE, the background is not fixed. It doesn't repeat, which is good, but it's still not fixed. Any ideas what's wrong here? Hi all, I haven't been working with CSS that long and I've searched for a fix but couldn't get anything to work. I can't get a background color to display in Firefox but it does in IE. Inside my "mainwrap" I have two columns and for some reason when I set my background to white for the "mainwrap" it just doesn't show up in Firefox. Here's xhtml code: xhtml Code: Original - xhtml Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="toparea"> <div id="header"></div> <!--end header--> <div id="menuarea"> <div id="menubox"> </div> <!--end menubox--> </div> <!-- end menuarea--> </div> <!--end toparea--> <div id="middlearea"> <div id="mainwrap"> <div id="topwrap"></div> <!--end topwrap--> <div id="leftcolumn"> <div id="content"></div> <!--end content--> <div id="recentwork"></div> <!--end webwork--> </div><!--end leftcolumn--> <div id="rightcolumn"></div> <!--end rightcolumn--> <div id="bottomwrap"></div> <!--end bottomwrap--> </div> <!--end mainwrap--> </div> <!--end middlearea--> <div id="bottomarea"></div> <!--end bottomarea--> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="toparea"> <div id="header"></div> <!--end header--> <div id="menuarea"> <div id="menubox"> </div> <!--end menubox--> </div> <!-- end menuarea--> </div> <!--end toparea--> <div id="middlearea"> <div id="mainwrap"> <div id="topwrap"></div> <!--end topwrap--> <div id="leftcolumn"> <div id="content"></div> <!--end content--> <div id="recentwork"></div> <!--end webwork--> </div><!--end leftcolumn--> <div id="rightcolumn"></div> <!--end rightcolumn--> <div id="bottomwrap"></div> <!--end bottomwrap--> </div> <!--end mainwrap--> </div> <!--end middlearea--> <div id="bottomarea"></div> <!--end bottomarea--> </body> </html> Heres the CSS: css Code: Original - css Code /* CSS Document */ body { background-image: url(../images/bottombg.jpg); background-repeat: repeat; font-family: Tahoma, sans-serif; margin: 0; } /* Begin top area */ div#toparea { width: 100%; height: 128px; background-image: url(../images/topareabg.jpg); background-position: top; background-repeat: repeat-x; float: left; } div#header { width: 800px; height: 100px; background-image: url(../images/headerbg.jpg); margin-left: auto; margin-right: auto; } div#logo { float: left; margin-top: 25px; margin-left: 5px; } div#tagline { margin-top: 37px; margin-left: 5px; float: left; } div#menuarea { width: 800px; height: 25px; margin-left: auto; margin-right: auto; } div#menubox { float: right; } .buttonbox { float: left; } .buttonbox img { border: none; } /* Begin middle area */ div#middlearea { width: 100%; background-image: url(../images/middleareabg.jpg); background-repeat: repeat; float: left; } div#mainwrap { width: 800px; margin-left: auto; margin-right: auto; background-color: #FFFFFF; } div#topwrap { width: 800px; height: 20px; background-image: url(../images/topNavbg.jpg); float: left; } div#leftcolumn { width: 550px; background-color: #FFF; float: left; } div#content { width: 500px; margin-left: 10px; margin-top: 10px; } div#content p { font-family: Tahoma, Arial, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 15px; } div#recentwork { width: 540px; height: 250px; background-color: #666666; margin-left: 10px; } div#rightcolumn { width: 250px; background-color: #FFF; float: left; } div#bottomwrap { width: 800px; height: 25px; background-image: url(../images/bottombgNav.jpg); float: left; } /* Begin bottom area */ div#bottomarea { width: 100%; height: 200px; background-image: url(../images/bottombg.jpg); background-repeat: repeat; float: left; } /* Text styles */ h1 { font: 100 normal 22px/normal Tahoma, Arial, sans-serif; text-transform: none; color: #999999; } .tagline { font-family: Tahoma, Arial, sans-serif; font-size: 12px; color: #999; } /* CSS Document */ Thanks for your time! For some reason no matter how I structure the code, I cannot get a background image to show up and I'm not sure why. Here is my current code:
Code: background: #cccccc url(/dir/bg.png) repeat-y; I've checked multiple sites just to verify that my code is correct, and it is. I've also tried the code another way: Code: background-color: #cccccc; background-image: url(/dir/bg.png); background-repeat: repeat-y; The image is uploaded to the correct directory as well. Any ideas? I have been trying to implement a shadowed effect on a layout I'm working on. Kind of like on this page . I tried it with 3 nested divs and will show you guys both sets of code. With both methods, the top level div is not showing (the one with top.jpg as a background) because it appears that the middle.jpg is covering it. Here is the code I have: Method 1: HTML Code:
<div id="wrapper">
<?php mosMainBody(); ?>
</div>
CSS Code:
#wrapper {
width: 805px;
height: 100%;
margin: auto;
background: url(../images/middle.jpg) right repeat-y;
}
#wrapper::before {
display: block;
line-height: 0;
background: url(../images/top.jpg) no-repeat top right;
}
#wrapper::after {
display: block;
line-height: 0;
background: url(../images/bottom.jpg) no-repeat bottom right;
}
Method 2 Nested Divs: HTML Code:
<div id="wrap1"><div id="wrap2"><div id="wrap3">
<?php mosMainBody(); ?>
</div></div></div>
CSS Code:
#wrap1 {
background: url(../images/top.jpg) no-repeat top ;
width: 805px;
margin: auto;
clear: both;
}
#wrap2 {
background: url(../images/middle.jpg) repeat-y;
width: 805px;
margin: auto;
}
#wrap3 {
background: url(../images/bottom.jpg) no-repeat bottom;
width: 805px;
margin: auto;
}
The page I'm working on is located at http://www.havenotband.com/index.php Hi all, I've got a jpg background image using CSS and it's not displaying in Opera, but it is in absolutely every other browser back to IE 5.0. If I change the image to a gif, it displays fine. Is there any reason why the jpg wouldn't display in Opera? Hi everyone, I have a design I am working on a design, which has a image for a background, well the image does not show, I am not sure why, it just shows white text. Anyway here is my code. Code: #logo{
background-image: url('logo.png');
background-repeat: no-repeat;
}
#logo .text{
letter-spacing: -0.1em;
font-weight: bold;
font-size: 21px;
text-align: left;
color: #FFFFFF;
}
That does not work, however, this does. Code: <img src="logo.png" alt="Logo" /> Any suggestions? Hello, I have been trying to figure this out, but have been unsuccessful. I am using a modalPopupExtender, but when the popup comes up, my background is still active. I suspect it has to be something in my css file, but would appreciate some help on this. I suspect it is the css that is causing this, but cannot figure out what. TIA! Here is the code for the MPE: <cc1:ModalPopupExtender ID="MPE1" runat="server" TargetControlID="btnShowModalPop" PopupControlID="divPop" BackgroundCssClass="modalBackground" PopupDragHandleControlID="panelDragHandle" DropShadow="true"/> Here is the code in my css file: .modalBackground { background-color:Gray; filter:alpha(opacity=70); opacity:0.7; } .modalPop { background-color:Gray; border-width:3px; border-style:solid; border-color:Black; padding:0; width:250px; color:White; } .drag { background-color:#ff0000; cursor: move; border: solid 2px white; } I found the issue by referencing a blank css file and slowly adding statements in. It was a combination of the following which prevented the backgroundcssclass to not be shown propertly: #body div div { background: url(images/body_tr.gif) top right no-repeat; } #body div div div { background: url(images/body_bl.gif) bottom left no-repeat; } #body div div div div{ background: url(images/body_br.gif) bottom right no-repeat; } #body div div div { background: url(images/body_bg.gif) bottom left no-repeat; } #body div div div div { background: url(images/body_bg.gif) bottom right no-repeat; } #body .inner div { background: none; } I ended up add these bg imgs in my master page div tags directly and is working fine.....for now :P Edit/Delete Message My page works great in firefox, but in IE the top navigation div (top_navigation) SHOULD have a background color of red for testing perposes, but the color doesn't change! It looks like its inheriting the background color #e4dfd7 from the css body tag. I've tried using an inline style, or using !important, nothing works, and I have to make this available in at least IE6 and up. Thanks in advance for any help! html code -> cosmosristorante dot com / ox / index.asp Hey guys, I've recently started working on my css and for some reason my background image isn't showing up in my container. Any idea why? CSS Code: Original - CSS Code /* CSS Document */ * { margin: 0; padding: 0; } body { font-size: 62.5%; background: #344149; } p, li { font: 1.2em/1.8em Tahoma, sans-serif; margin-bottom: 10px; } h1 { font: 2.0em Tahoma, sans-serif; color: white; height: 0px; } h2 { font: 1.8em Tahoma, sans-serif; color: green; margin-bottom: 10px; } ul { margin-left: 25px; } img { border: none; } #page-wrap { background: black; min-width: 780px; max-width: 1260px; margin: 10px auto; width:expression(document.body.clientWidth < 782? "780px" : document.body.clientWidth > 1262? "1260px" : "auto"); } #page-wrap #inside { margin: 10px 10px 0px 10px 10px; padding-top: 10px; padding-bottom: 10px; } #main-content { background: transparent url(/Images/Background_Content.jpg) no-repeat top right; padding-left: 180px; padding-right: 180px; padding-top: 20px; } #header { background: #000000; text-align: center; } #left-sidebar { background: transparent url(/Images/Background_Content.jpg) no-repeat top right; width: 150px; float: left; padding-left: 15px; padding-top: 20px; } #right-sidebar { background: transparent url(/Images/Background_Content.jpg) no-repeat top right; width: 150px; float: right; padding-right: 15px; padding-top: 20px; } #footer { background: #267f23; text-align: center; padding-top: 20px; padding-bottom: 20px; color: white; } /* CSS Document */ It's the Background_Content.jpg that isn't loading for some reason. It resides in the Image folder located in the same directory as the html file. Oh and the reason I had it included so much was to test to see if it was just the main-content that wouldn't load it. The main content should include the left-sidebar and right-sidebar right? Please help! |
|||||||