|
CSS - Css Background Image Not Rendering Properly
Similar TutorialsHey folks, here's an odd problem that's got me totally stumped. I've got a nine item unordered list, each of which is a link that contains both text and a background image. The background image is a large spritebox. I'm using background-position to shift the spritebox to display the sprite specific to the a:link and also to display a separate a:hover version. Looks great in Safari and CSSEdit, but in Firefox four of the links are misplaced and the sprite is incorrect. The hover state is correct, however. This is hard to explain, but the example should help illustrate the problem. My thought was that it was related the psuedo class of a:link, but nothing I've tried seems to help. Any thoughts? The example file contains both the HTML and the CSS (just to simplify this problem for this forum). The full background image and the file containing the sprites is at my website, artmeetsearth dot org slash 2011 slash codetest dot html. To get the image type socialmediaicons.jpg instead of codetest. Thanks for any help you can offer! I have edited this page down to be bare-bones for ease... The background image only shows behind the 'branding' div. It used to show all the way down. The problem is somewhere in the style sheet because it looks the same even when I take out all content between the body tags. I am not sure what mistake I made. When you look at the style sheet you will find html#orchid to be commented out. I realized how to work with that to fix the problem, however I want to know what is causing this problem in the first place, for my further education. http://www.centerpointpilates.com/welcome2.html code: Code:
<?xml version="1.0" encoding="iso-8859-1"?><!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" xml:lang="en">
<head>
<title>CENTERPOINT PILATES :: a Santa Barbara pilates studio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="/centerpoint.css" rel="stylesheet" type="text/css" />
</head>
<body background="/images/orchidYellowOverlay2.jpg" style="background-repeat: no-repeat; background-position: top left;">
<div id="branding">
<h1>CenterPoint Pilates - Exercising the Body and Mind</h1>
</div>
<!--end branding-->
<div id="content">
<div id="navigation">
<ul>
<li><a href="/welcome.html">WELCOME</a></li>
<li><a href="/studio.html">STUDIO</a></li>
<li><a href="/getting-started.html">GETTING STARTED</a></li>
<li><a href="/classes.html">CLASSES</a></li>
<li><a href="/schedule.html">CLASS SCHEDULE</a></li>
<li><a href="/workshops.html">WORKSHOPS</a></li>
<li><a href="/pricing.html">PRICING</a></li>
<li><a href="/instructors.html">TEACHERS</a></li>
<li><a href="/contact-us.html">CONTACT US</a></li>
</ul>
</div>
<!--end navigation-->
<div id="text">
<h2>Welcome</h2>
<p>CenterPoint Pilates was founded in 2001 with the goal of inspiring each
individual on a program of exercising the body and mind. Our certified teachers
provide exceptional guidance in private, group, and class settings. The
studio is equipped with classic and contemporary exercise apparatus and
boasts a stunning view of the Santa Ynez Mountains and downtown Santa Barbara.</p>
</div>
<!--end text-->
</div>
<!--end content-->
</body>
</html>
style sheet code: Code:
/* Normalizes margins, padding */
body, div, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, blockquote, th, td {
margin: 0;
padding: 0;
}
/* Normalizes font-size for headers */
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
}
/* Removes Styles from lists */
ol, ul {
list-style: none;
}
/* Normalizes font-style and font-weight to normal */
address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;
}
/* Removes list-style from lists */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Removes border from fieldset and img */
fieldset, img {
border: 0;
}
/* Left-aligns text in caption and th */
caption, th {
text-align: left;
}
/* Removes quotation marks form q */
q:before, q:after {
content: '';
}
/* normalizes links */
a:link {
text-decoration: none;
color: #6b9d98;
}
a:hover {
color: red;
}
a:visited {
text-decoration: none;
color: #0B6E64;
}
/*----------------------------------------------------------------*/
html {
background-color: #F6EEC2;
text-align: center;
}
body {
font-family: Arial, sans-serif, Geneva, sans-serif;
color: #6B9D98;
width: 770px;
margin: 0 auto;
margin-left: 10px;
text-align: left;
position: relative;
}
bodyBold {
font-family: Arial, sans-serif, Geneva, sans-serif;
font-weight: 700;
color: #6B9D98;
width: 770px;
margin: 0 auto;
margin-left: 10px;
text-align: left;
position: absolute;
}
/*html#orchid {
background-image: url(/images/orchidYellowOverlay2.jpg);
background-repeat: no-repeat;
background-position: top left;
}*/
#branding {
background: url(images/logo.gif) top left no-repeat;
text-indent: -9999px;
height: 70px;
margin: 0 0 30px 0;
}
div#content {
position: relative;
width: 100%;
}
div#navigation {
position: absolute;
left: 0;
width: 13%;
padding-top: 1em;
}
div#navigation li {
font-weight: bold;
font-size: .9em;
border: 1px solid #6B9D98;
width: 115px;
padding-bottom: 3px;
padding-top: 3px;
text-align: center;
margin: 0 0 20px 0;
}
div#text {
position: absolute;
left: 17%;
width: 80%;
border-left: 1px solid #6B9D98;
padding-left: 10px;
}
div#site_info{
text-align: center;
margin-top: 10px;
font-family: Arial, sans-serif, Geneva, sans-serif;
font-size: .9em;
font-style: italic;
color: #6B9D98;
padding-bottom: 3px;
}
h2 {
font-size: 1.35em;
}
indentBox {
border: 1px solid #6B9D98;
width: 115px;
padding-bottom: 3px;
padding-top: 3px;
text-align: left;
margin: 0 0 0 0;
}
Hello all - I am currently having a problem with a background image not being repeated properly. There are two images that need to be repeated, div#topbg and div#leftbg. Topbg is being repeated-x correctly, but I am having problem with Leftbg being repeated-y. The Leftbg will repeat vertically but stops repeating until it reaches the end of the background image of div#wrapper. Could someone provide a solution to this? I need it to repeat all the way down the page! Here is the code for those that know of a simple solution. For those that need to look a bit more into it I have included a zip file as attachment to show just exactly what is wrong.. Please help! The CSS code: Code:
html, body
{
height: 100%;
}
body
{
margin: 0px;
padding: 0px;
font : 12px/14px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #000000;
text-align: left;
}
div#topbg
{
width: 100%;
height: 145px;
background : url(../images/top-bg.gif) repeat-x top left;
}
div#leftbg
{
position: absolute;
top: 0px;
left: 0px;
height: 100%;
background : url(../images/left-bg.gif) repeat-y;
}
div#wrapper
{
position: absolute;
top: 0px;
left: 0px;
width: 758px;
height: 100%;
margin: 0px;
padding: 0px;
background: url(../images/bg.jpg) no-repeat top left;
}
div#container
{
padding: 145px 0px 0px 125px;
}
div#content
{
width: 100%;
margin: 0px;
padding: 0px;
float: left;
}
The HTML code: Code: <body> <div id="topbg"></div> <div id="leftbg"></div> <div id="wrapper"> <div id="container"> <div id="text">content</div> </div> </div> Hello, im trying to do some 3column layout with css menu, but in the middle column i have <div class="attachment_pdf"><a href="/xxx/xxx.pdf">XYZ (PDF, 2 MB )</a></div and in this div there is a background image of pdf icon. Everything works in Firefox, Mozzilas but in same cases on IE they are not shown. If i have 10 icons, 3 of them are not shown. After i go with mouseover on the link, i can see them, or if i scroll the window some of them are showing... have somebody met this problem? Or where can be problem? I know, that maybe you have to see the css, and its rather complicated. Thanx. Even when there is no text in the div... http://www.megasouldrill.com/test/ When viewed in firefox and IE7, the 'footer' div maintains it's styled height of 15px. In IE6, however, it seems as though the 'footer' div is ignorign the styled height completely. What gives? Code: <!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" xml:lang="en">
<head>
<style type='text/css'>
body{
background-color: #9e9e9e;
}
#footer{
background: url('images/footer.gif');
width: 1042px;
height: 15px;
}
</style>
<title></title>
</head>
<body>
<div id='footer'></div>
</body>
</html>
EDIT: made problem simpler and gave a better title if you're already viewed this. I have since realized that adding overflow: hidden; to the footer styles fixes this as well as changing the background style to include no-repeat I have been working on a site for the past week and I am trying to get it to work in every browser. I have tested it with 32 different browers, ranging from different versions to different operating systems. From my review, the following browsers are not rendering the website properly: Phoenix 0.5 on PLD Linux Phoenix 0.4 on PLD Linux Dillo 0.8.6 on PLD Linux MSIE 6.0 on Windows XP MSIE 5.5 on Windows XP MSIE 5.01 on Windows XP MSIE 5.5 on Windows XP Phoenix 0.5 on PLD Linux Navigator 4.8 on PLD Linux They all seem to take the sidebar and push it to the bottom of the page rather than have it to the right. If you view the site in any firefox, you will see exactly how I want it displayed. Please let me know what error exist within my css and then post it here! I have run the site through validator.w3.org and it shows that my site is perfect in terms of validation... I have the doctype specified properly too. Bristol Cove's Validator The website to view the code is: http://www.gc40.com/b2/ I also added the website to www.browsershots.org to view the different browser displays and how different browsers render them... So please, anyone that is willing to go through the snapshots, please tell me the errors you notice and what to do to fix them. BrowserShots.org - Different browser rendering for Bristol Cove's Site Note: as a new user it would not let me use a link(url) Problem:when viewing in IE8 - the text looks grainy notes: Using this page as an example: fineprintnotes.com/bergincapital1210/about-us-bergin-co-difference -text looks smooth and easy to the eye when viewing in Firefox and Chrome -text looks smooth when using the "compatibility view" feature in IE8 - but want that look as a default for visitors -for example - when visiting other website using IE8 such as: savantcapital.com The text renders- when viewing in IE8- like Firefox and Chrome or in other words smooth and not grainy -i have the same font face as that site and not sure what a fix could be - read up on what possible fixes I could find on the internet - such as "emulate IE 7" tag for example on this page: url blocked -- Welcome to Internet Explorer 8 Readiness Toolkit Questions - has anybody had this issue? - i don't notice the savantcapital.com website defaulting to Ie7 (using emulate ie 7 tag - how does their text look cleaner than my website? same goes for morganstanley.com (as another example) - i find it hard to degrade the wesbite to fix the text issue- i am not sure if thats how to put it- but would like it to use a more DOM compliant browser like ie8 if it has option in stead of reverting to IE7 view. Any thought? or fixes? Thanks in advance. one other note: I tried to do screen shots but it wasn't communicating the issue - the images altered the drasticness of the difference - i feel - right now i have the website not emulating ie7 Jamie http://codymays.net/~private_ftp/theed When viewing this page in IE6, I see the background of the content div rendered below the footer. The second you select all, click on another window and click back, or minimize the maximize the window, it goes away. Is this a problem with my code or a bug in IE (because it works in IE7). Either way, what should I do to go about fixing it? I've got a mostly-css layout he http://highballsociety.com/~lwco/test.php Using the following CSS page he http://highballsociety.com/~lwco/lwc.css For some reason, the div on the right will not display the off-white background color in IE 6. It looks fine in Firebird and even on IE 5 for Mac. I have a feeling that this has something to do with the fact that I've not done very precise sizing of various divs and haven't really implremented the IE box-model hack for much of the site. Let me know if you can help. Also, when I force IE to redraw, by moving the page off the screen and back on, or if I hover over the text in the div, it seems to try redrawing the off-white background, but never actually completes. Thanks, m__ Ive noticed this is only a problem in IE6(and probably some more older browsers)...Firefox 3 and IE 7 it works fine. Visit this site: (you will have to do it twice because you need to login first.) http://ronnieswietek.com/flashden/newsletter/newsletter.php?do=preview&id=2 u: admin p: testadmin I put a blue background on the div so you can understand what I am talking about. If you look at it in firefox, the blue covers the whole newsletter, text and images, but if you look at it in IE, it only does a small portion of it...Can anyone figure out this mystery??? CSS for that section: Code:
#newsletter_subject
{
padding: 5px;
font-size: 18px;
color: #ffffff;
background-color:#999999;
}
#newsletter_preview
{
overflow: auto;
background-color:#000066;
}
#recipients
{
padding: 5px;
font-size: 18px;
color: #ffffff;
background-color:#999999;
}
and then the corresponding html: Code: <div id="newsletter_subject">flashden newsletter!</div> <br> <div id="newsletter_preview"><font size="6"><span style="font-weight: bold; color: rgb(153, 255, 153); font-family: georgia;">flashden <span style="text-decoration: line-through;">is</span> <span style="color: rgb(204, 0, 0); background-color: rgb(0, 0, 0);">awesome</span> <span style="font-family: impact; font-style: italic; text-decoration: underline; color: rgb(153, 255, 0); background-color: rgb(0, 51, 204);">I</span>!</span></font><br> <br> <img style="width: 202px; height: 261px;" alt="" src="http://flashden.net/new/site_flashden.net/interface/logo_top.gif" align="left"><br> </div> <br> <div id="recipients">This Newsletter WILL be sent to the following users:</div> etc..... Hey, I use div's to create my page structure (you can see it on the screenshot) http://img144.imageshack.us/img144/...tructurege3.jpg The green part is the navigation and the blue part the contents of the page. But as you see the colors both dont fill up till the bottom of the document. And if i set: height: 100%; then it will fill up to the bottom, but when the contents gets to big and a scrollbar is needed, then the part that you scroll down is not filled up with the colors anymore. Does anybody know how to fix this? Thanks in advance. Just when I think I've finally seen it all, every way these browsers can **** up, there's always one more. This morning I discovered that Netscape 7 / Win does not properly render an a element with image content. My example demonstrates that both IE 6 / Win and Netscape 7 / Win both have issues rendering a elements with text content also. This seems like really basic stuff . . . how, HOW could Netscape 7 not be able to render the a with image content correctly??? (Another good question is why this forum doesn't allow you to upload HTML files . . . WTF?? -- you'll have to rename the file to .html) Hello. This is probably not good practice but I have two problems arising with the same piece of code. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My site</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
body {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 0.8em;
background: #cfcf00;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
padding-bottom: 2em;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #303030; } /* end body */
#logo_search {
width: 100%;
min-width: 957px;
max-height: 79px;
padding: 32px 0 0 0;
border: 0;
margin: auto;
overflow: hide;
background: #ffffff; } /* end #logo_search */
#logo_container {
width: 40%;
float: left;
background: #ffffff;
text-align: right;
border: 0;
border-bottom: 1px solid #ffffff;
height: 51px;
padding: 0;
margin: auto; } /* end #logo_container */
#base {
clear: both;
padding-top: 1px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
width: 100%;
background: #c0c0c0; } /* end #base */
#main_block {
background: #ff0000;
margin: auto;
text-align: left;
width: 955px; } /* end #main_block */
#main_content {
background: #ffffff;
border-left: 1px solid #ff0000;
padding-top: 1em;
padding-bottom: 1em;
border-right: 1px solid #ff0000; } /* end #main_content */
#top_main_content ul {
float: left;
list-style-type: none;
border-spacing: 0;
padding: 0;
text-align: right;
border-top: 1px solid #00ff00;
height: 243px;
width: 266px; } /* end #top_main_content #links_table */
#top_main_content ul li {
vertical-align: middle;
color: #0000ff;
border-bottom: 1px solid #00ff00; } /* end #top_main_content #links_table td */
#top_main_content ul li a {
line-height: 26px;
padding-right: 1em;
display: block;
color: #0000ff;
width: 259px; } /* end #top_main_content ul li a */
#top_main_content ul li a:hover {
background: #cfcf00;
color: #000000; } /* end #top_main_content ul li a:hover */
#top_main_content img {
border-bottom: 1px solid #00ff00;
border-top: 1px solid #00ff00;
margin-top: 12px;
text-align: right;
vertical-align: top; } /* end #top_main_content img */
</style>
</head>
<body>
<div id="logo_search">
<div id="logo_container">
</div>
</div>
<div id="base">
<div id="main_block">
<div id="main_content">
<div id="top_main_content">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
</ul>
<img src="#" alt="" id="main_graphic" height="243" width="687"/>
</div>
</div>
</div>
</div>
</body>
</html>
Problem 1 (Opera rendering): Opera (and only Opera from what I've noticed) is extended the border for the menu options into the side border. How can I eliminate this behavior? I added a margin-left: 1px to the menu and that will render it correctly in Opera but have an extra 1px of whitespace everywhere else. Problem 2: I'm trying to position this menu such that it lines up exactly with an image 243px high. One question I have is that if I add a 1px top and bottom border to an image that is 243px high, would that object still be 243px high or now 245px high? Also, I want to indent the menu options slightly so that they aren't exactly next to the image but I still need the entire bar to serve as a link. What would be the best approach to line up these objects. I can sort of do it with margin-top but I'm sure that's not the best way to go. Edited to add: Problem 3: The menu does not align with the left edge of the main section in IE and only IE. What can I do to fix this? im trying to get the menu tabs to line up properly, if you notice they are slightly floating higher than they should and was stuck in trying to figure out how to fix this. here is my css code i used: Code:
a:hover#index, a:hover#search, a:hover#ucp, a:hover#members {
background: url("./images/home-button.gif") 0 0 no-repeat;
background: url("./images/design-and-engineering-button.gif") 0 0 no-repeat;
background: url("./images/how-to-rebuild-button.gif") 0 0 no-repeat;
background:url("./images/installation-button.gif") 0 0 no-repeat;
}
a#index, a#design, a#howto, a#articles {
width: 77px;
height: 28px;
float: left;
}
a#index {
background: url("./images/home-gray.gif") 0 0 no-repeat;
}
a#design {
background: url("./images/design-and-engineering-gray.gif") 0 0 no-repeat;
}
a#howto {
background: url("./images/how-to-rebuild-gray.gif") 0 0 no-repeat;
}
a#articles {
background:url("./images/installation-gray.gif") 0 0 no-repeat;
}
I'm working on a website that I'm having issues with in the CSS. I'm fairly new to CSS and I don't know how to get an image banner to show up next to each other. I though with the css in place I could do that, but some how I'm missing where the nav drops down in to the next div which is suppose to be a slideshow type div. The page is at ukindesigns.com/EBB/ebb.html and the style sheet can be found at ukindesigns.com/EBB/CSS/style.css Thanks, Franky Hi, I'm having an issue with the image not laying out properly. Please go here http://sixtwentyfour.com/ See how "November's Issue" is overlapping my paragraph background? I want it contained within the paragraphs, not outside. Could someone please point out what I'm doing incorrectly or otherwise lead me in the right direction? Thanks. 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. In short, I'm trying to get this one image to tile down the page to the bottom, underneath a static background image. Basically, it's a 2pixel high image that's ready to tile vertically, just having a tough time getting it to work. You can clearly see the problem here, a gap at the bottom: http://www.groundedgroup.com/clients/NWR/ Here's the relevant css: http://www.groundedgroup.com/client...WR-GG/style.css I've googled and subsequently tried out some solutions, but no luck. Got any ideas? Thanks in advance. PS - Is there a way to keep the spiders from indexing my links above? The site is on a test server, so I don't want the url indexed. 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! |
|||||||