|
CSS - Table Background Image Problem
i have table in which i display bunch of query results. i use
<table width="80%" ....background="something.gif"> when the user's screen resolution is high the table still takes 80% of the space but the background image starts repeating. is there a way to automatically extend the image width in case the user's screen resolution is high? thanks for the help in advance Similar TutorialsHello, I recently started creating websites again and I have been pulling my hair out on this Firefox compatibility issue. The site navigation looks great in IE but in Firefox a couple of the background images are skewed down and to the left. Since all my tricks from years ago are so outdated now, I decided to try CSS for a simplified navigation setup. The code is probably pretty messy since I chopped it together from numerous sources and still am not completely sure how it works. Background: I created a large 794x1200 PNG image that contains two complete border and navigation sets. I am using CSS to both position the appropriate portion in each table/cell as well as switching to a slice on the 2nd image set for rollover purposes. An example of the current test is he (URL address blocked: See forum rules) *not sure if this is okay but would be best to see the example. If it is not allowed as a non-clickable then feel free to delete. It is here - classtime . org / test6 . htm and the navigation image is he (URL address blocked: See forum rules) *classtime . org / navigate . png I would be eternally grateful to anyone that can help me figure out why the site works great in IE but is coming up skewed in Firefox. As a side note, when I pull up the site in Frontpage, it shows the left-most cell as being larger than it is supposed to be even though it is hardcoded. To get my left image bar to show up in the correct place I had to use a value of "left: -40px;" I'm not sure why that is but I suspect it has something to do with the problem. Thank you very much for taking a look. My jumbled code is as follows: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"(URL address blocked: See forum rules)">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<title>Ultrasonic Blind Company - Elk Grove Village, Illinois</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css" media="screen">
a:link {color: #FFF4D1;}
a:visited {color: #FFF4D1;}
a:hover {color: #74060c;}
a:active {color: #FFF4D1;}
.top a
{
display: block;
width: 794px;
height: 120px;
background-image: url('navigate.png');
}
.top a:hover {
background-position: 0px -601px;
}
#left {
left: -40px;
width: 150px;
height: 460px;
display: block;
background: url('navigate.png');
background-repeat: no-repeat;
background-position: 0px -120px;
position: relative;
}
#left li {margin: 0px; padding: 0px; list-style: none; position: absolute;
text-align: center;
font: bold 18px Batang;
line-height: 50px;
}
#left li, #left a {height: 50px; width: 146px; display: block;}
#panel1b {top: 10px;}
#panel2b {top: 63px;}
#panel3b {top: 116px;}
#panel4b {top: 169px;}
#panel5b {top: 223px;}
#panel1b a:hover {background: transparent url('navigate.png') 0px -730px no-repeat}
#panel2b a:hover {background: transparent url('navigate.png') 0px -785px no-repeat}
#panel3b a:hover {background: transparent url('navigate.png') 0px -839px no-repeat}
#panel4b a:hover {background: transparent url('navigate.png') 0px -890px no-repeat}
#panel5b a:hover {background: transparent url('navigate.png') 0px -945px no-repeat}
#right {
width: 154px;
height: 460px;
display: block;
background: url('navigate.png');
background-repeat: no-repeat;
background-position: -640px -120px;
position: relative;
}
#right li {margin: 0px; padding: 0px; list-style: none; position: absolute;
text-align: right;
font: bold 18px Batang;
}
#right li, #right a {height: 85px; width: 154px; display: block;}
#panel1r {top: 0px;}
#panel2r {top: 100px;}
#panel3r {top: 200px;}
#panel4r {top: 300px;}
#panel1r a:hover {background: transparent url('navigate.png') -640px -721px no-repeat}
#panel2r a:hover {background: transparent url('navigate.png') -640px -821px no-repeat}
#panel3r a:hover {background: transparent url('navigate.png') -640px -921px no-repeat}
#panel4r a:hover {background: transparent url('navigate.png') -640px -1021px no-repeat}
</style>
</head>
<body bgcolor=#74060c>
<div align=center>
<table id="Table_01" width=794px height=600px border=0 cellpadding=0 cellspacing=0>
<tr>
<td colspan="3" height="120" width="794" bgcolor="#FFF4D1">
<div class="top">
<a href="(URL address blocked: See forum rules)"></a>
</div>
</td>
</tr>
<tr>
<td align=left valign=top height=674px width=150px bgcolor="#FFF4D1">
<ul id="left">
<li id="panel1b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Contact</a></li>
<li id="panel2b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Residential</a></li>
<li id="panel3b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Commercial</a></li>
<li id="panel4b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Coupons</a></li>
<li id="panel5b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Questions</a></li>
</ul>
</td>
<td align=left valign=top width=490px height=674px bgcolor="#FFF4D1">
aaa</td>
<td align=left valign=top width=154px height=674px bgcolor="#FFF4D1">
<p align=right> <ul id="right">
<li id="panel1r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
<li id="panel2r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
<li id="panel3r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
<li id="panel4r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
</ul>
</td>
</tr>
</table>
</div>
</body>
</html>
Hey all, a fairly simple situation which is driving me crazy! =p I have a table row which has two columns. Now using css I have set the row to have a background image like so: Code: background-image:url(images/newsmiddle.jpg); background-repeat:repeat-y; } Now in firefox this works fine ( he content box has the image run through both columns as intended ). But in Internet Explorer on the second column the bg image starts again as if I had set the background image for that cell which is not what I want. Anyone able to help for an IE solution? Thanks hello, i have a few tables with different background-image (style attribute) in my page. how can i print the page with the background images i know @media print should help, but i don't know how. * does the css have to be external, or can i use the tag <style> PLEASE HELP I have a table and whatever background i put in it it only shows a part of the background at the bottom of the table. if i put another table in the excisting one and then put a background in the new one then it works , But this way it ruins the layout . <tr> <td colspan="4" background="images/Untitled-3.s_12.gif" bgcolor="#FFFFFF"></td> </tr> by removing the bgcolor i get the same result.. CSS is simple and includes : body { background-image: url(images/bg.gif); } .style4 {color: #000000} .style5 { color: #FF0000; font-weight: bold; } .style6 {font-size: 10px} --> Regards , Kevin sorry for posting this in HTML forum also. So I know that tables are a no-no now-a-days, but I am trying to help troubleshoot this problem without having to rebuild the site. So this problem only occurs in IE, of course! When you go to this page: http://dysonracing .com/company/news/archive.php?archive_year=2010 The grey box on the left that displays the news/events nav get a bit out of wack. What I mean by that is that the grey background on the table does not totally flow anymore. The left and right edges of the table dislay white at the top, then the grey about 1/2 way down and then black at the bottom, when the whole thing should be grey. It has a repeating background image. Even if I remove the image and just us the #333333 for the background color, issue is not solve. It is strange because this problem only happens if you are viewing one of the archive links at the bottom of the page. If you just click News+Events from the main nav, it looks fine. But go to an archive link and it get funky. Any ideas why this is displaying this way...and only in IE?! my page is at http://pageshree.com/index.php . In the left hand column of the site, u see two titles of "navigation" and "support". the image is 80px and show fine for navigation, but for support it stops and doesnt finish off the image on the right hand side. CSS is: Code:
.subheads {
height:18px;
width:80px;
margin:0;
padding: 0 1em;
background:#FFF url(images/subhead.gif) no-repeat;
color:#FFF;
font-size:12px;
font-weight:bold;
text-align:center;
}
HTML: Code: <span class="subheads">Navigation</span> Any help? I don't know if this has been adressed or not but I am having a problem using the background:url(images/stuff.jpg); and the background-image: .... I been trying to set an elements background but I get nothing for the background it will not apper even if I do a simple code like this this is just an example : Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> CSS Code:
div#top p {
background:url('image/logo.gif');
}
I would do something like this and it will not show the bg image I mean this is just a simple code I have done it in the past but I don't know why I am not able to see the bg image is there a rule I missed somewhere if so which one well hope you can help me Hey all. I've been putting together a website for my friend, and my css chops are admittedly pretty old and not that great anyway. I'm wondering if anyone could give me some advice. I can't get a background-image in a <div> to load at all in a firefox browser, though it loads in safari. I've highlighted the particular image tag. Does anything look wrong? _____________________________________ a:link { text-decoration: none;} a:visited { text-decoration: none;} a:hover { text-decoration: underline;} a:active { text-decoration: none;} body { background-image: url("images/backcolor.jpg"); } #site { position: absolute; top: 0px; left: 0px; width: 864px; height: 576px; background-image: url("images/backdrop.jpg"); overflow: auto; } ____________________________ (snippet from html) <body> <div id="site"> <div id="nav"> <a href="about.html"><img src="images/about.jpg" border="0"></a> <a href="resume.html"><img src="images/resume.jpg" border="0"></a> <a href="portfolio.html"><img src="images/portfolio.jpg" border="0"></a> <a href="links.html"><img src="images/links.jpg" border="0"></a> </div> <div id="image"> </div> <div id="text"> <span class="main"> <span class="title">There is music in everything.</span><br> <span class="link">In the very core of the emotions we emit as human beings there is sonic substance. Much like music, sound contains rhythm, texture, timbre and tone. It has the incredible capability of evoking and opening all of our senses: sight, taste, touch and smell. When a sound design is successful it is an art, a piece that is honored individually for its strength and intelligence, rather than its ability to support a production.</span> <br><br> <span class="link">These are the qualities I strive for in my designs, to create sensory events that evoke emotional responses and aesthetic meaning. Sound can have great presence in a performance. It should always be welcomed. </span> <br><br> <span class="link">Anthony Mattana is a junior sound design major at Carnegie Mellon University's School of Drama. Please feel free to contact at any time.</span> </span> </span> <br><br><br> <span class="main2"> <a href="mailto:anthmattana@gmail.com"><img src="images/sig.jpg" border="0"></a> </span> </div> </div> </body> </html> my code is below Code: <style>
.myclass{
color:white;
background: black
url(http://img-cdn.mediaplex.com/ads/3976/22164/408x27_uom.gif)
no-repeat fixed
top left;
height:100%;
}
</style>
<table height=100% width=100%>
<tr><td class=myclass>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
</table>
result of IE http://img103.echo.cx/img103/7196/ie7ab.png and Moz http://img103.echo.cx/img103/9229/moz0jq.png this code works with IE without being any problem in IE, if scroll is bottom, background image doesnt come to bottom. but Moz, it does please help me.. I have a problem with my CSS in IE6 (surprise, surprise). If you look at www.bluehatmedia.co.uk you will notice that the left hand menu is for some reason on the far right (needing to scroll). But if you look in FireFox, Netscape, Opera, Safari they all work fine. But if you mouse over a link then the menu goes back to the left had side where it should be. and when i remove the following from my CSS: background-image:url(images/picture.gif); background-repeat: repeat-y; background-position: right top; the background image doesnt display (obviously) and then menu goes back to the left. Any ideas much appreciated Tom Hello, I'm currently developing a new website for a clan but Internet Explorer isn't displaying the background image of the content area correctly. It pushes the content area ~4px to the right from where it should be. I've tried reducing the size of the navigation element but that didn't work and in fact had the opposite effect of what I was looking for. For some reason I can't link to an image, nor to the site itself to show you the error. This is the code applicable to the content area. Code: #content
{
width:770px;
background-image:url(images/backgrounds/conbg.png);
background-repeat:repeat-y;
font-size:11px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 70px;
margin-left: 130px;
margin-right: 0px;
vertical-align:top;
}
#contentlimit
{
width:690px;
}
#condiv
{
width:770px;
margin-left: 130px;
margin-right: 0px;
}
And this the Navigation element: Code: #nav
{
width:130px;
display:block;
float:left;
vertical-align:top;
margin: 0px 0px 0px 0px;
}
.mlink a
{
display: block;
color: #666666;
background-image:url(images/backgrounds/link.jpg);
width: 130px;
padding: .0px .0px;
height:15px;
text-decoration: none;
text-indent: 10px;
}
.mlink a:hover
{
color: #333333;
text-decoration: none;
background-image:url(images/backgrounds/linkhov.jpg);
}
At last check, with this current style sheet, the code was valid. Any help appreciated, Cold Hello, I'm currently trying to learn css and have run into a problem in IE. http://www.nggc.net/test/test.html At the top the background image is extended and I can't figure out why. If anyone can help me out or help me improve my current code it would be greatly appreciated. Here's my css file. Code: body {
margin-top: 0px;
background-color: #000000;
color: #777777;
font-size: 11px;
padding: 0px;
font-family: verdana,arial,tahoma;
}
#container {
margin-left: auto;
margin-right: auto;
width: 760px;
}
#topbar {
width: 760px;
height: 7px;
background-image: url('http://www.nggc.net/media/images/header_top.gif');
}
#topnav {
width: 760px;
height: 9px;
}
#bottombar {
width: 760px;
height: 15px;
background-image: url('http://www.nggc.net/media/images/header_3.gif');
}
#logo {
float: left;
width: 552px;
height: 68px;
background-image: url('http://www.nggc.net/media/images/banner.gif');
}
#login {
float: right;
width: 208px;
height: 68px;
background-image: url('http://www.nggc.net/media/images/login_bg.gif');
}
.clear {
clear: both;
}
#leftnav {
float: left;
padding: 0;
width: 152px;
background-image: url('http://www.nggc.net/media/images/nav_bg.gif');
}
div.navcat {
padding-top: 9px;
color:#102434;
font-size:9px;
font-family: verdana, tahoma;
font-weight: bold;
padding-left: 4px;
height: 14px;
background-image: url('http://www.nggc.net/media/images/nav_title.gif');
}
div.navlink {
color:#102434;
font-size:9px;
font-family: verdana, tahoma;
font-weight: bold;
padding-left: 16px;
padding-top: 6px;
height: 18px;
background-image: url('http://www.nggc.net/media/images/nav_main.gif');
}
.navlink a:link { color:#7D8488; text-decoration:none; }
.navlink a:visited { color:#7D8488; text-decoration:none; }
.navlink a:hover { color:#A8AFB3; text-decoration:none; }
#header {
float: left;
width: 608px;
height: 23px;
background-image: url('http://www.nggc.net/media/images/body_1.gif');
}
#content {
float: left;
width: 596px;
padding: 3px 6px 3px 6px;
background-color: #0F0F0F;
}
#block1 {
padding: 1px;
height: 194px;
border-top: 1px solid #818080;
border-left: 1px solid #525151;
border-bottom: 1px solid #525151;
border-right: 1px solid #393737;
}
#featuredgame {
float: left;
width: 387px;
height: 192px;
}
#latestnews {
float: right;
width: 201px;
height: 17px;
border: 1px solid #6F6E6E;
}
#newsblock {
float: right;
width: 197px;
border: 1px solid #6F6E6E;
border-top: 0px;
padding: 2px 2px;
}
div.newstitle {
text-align: center;
color:#5BA920;
font-size:11px;
font-family: verdana, tahoma;
font-weight: bold;
background-color: #404040;
width: 194px;
height: 14px;
padding: 1px;
border: 1px solid #000000;
border-bottom: 0px;
}
#newstext {
text-align: center;
width: 194px;
background-color: #222222;
padding: 1px;
border: 1px solid #000000;
}
and here's the html file 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="NGGC - Gaming News, Reviews, Ladders, Tournaments, Forums, and More!" />
<meta name="keywords" content="games, video games, playstation, psp, xbox, socom, ladders, wars, clans, generation, next, gaming, community" />
<title>Test</title>
<link rel="stylesheet" href="http://www.nggc.net/test/main2.css" type="text/css" />
<script type="text/javascript" src="{#url#}/tooltip.js"></script>
<script type="text/javascript" src="{#url#}/global.js"></script>
<script type="text/javascript" src="{#url#}/slider.js"></script>
</head>
<body>
<div id="container">
<div id="topbar"></div>
<div id="topnav"><img src="http://www.nggc.net/media/images/header_1.gif" alt="" /><a href="http://www.nggc.net/"><img src="http://www.nggc.net/media/images/header_home.gif" border="0" alt="" /></a><img src="http://www.nggc.net/media/images/header_spacer.gif" alt="" /><a href="http://www.nggc.net/"><img src="http://www.nggc.net/media/images/header_pc.gif" border="0" alt="" /></a><img src="http://www.nggc.net/media/images/header_spacer.gif" alt="" /><a href="http://www.nggc.net/"><img src="http://www.nggc.net/media/images/header_ps2.gif" border="0" alt="" /></a><img src="http://www.nggc.net/media/images/header_spacer.gif" alt="" /><a href="http://www.nggc.net/"><img src="http://www.nggc.net/media/images/header_ps3.gif" border="0" alt="" /></a><img src="http://www.nggc.net/media/images/header_spacer.gif" alt="" /><a href="http://www.nggc.net/"><img src="http://www.nggc.net/media/images/header_psp.gif" border="0" alt="" /></a><img src="http://www.nggc.net/media/images/header_spacer.gif" alt="" /><a href="http://www.nggc.net/"><img src="http://www.nggc.net/media/images/header_rev.gif" border="0" alt="" /></a><img src="http://www.nggc.net/media/images/header_spacer.gif" alt="" /><a href="http://www.nggc.net/"><img src="http://www.nggc.net/media/images/header_xbox.gif" border="0" alt="" /></a><img src="http://www.nggc.net/media/images/header_spacer.gif" alt="" /><a href="http://www.nggc.net/"><img src="http://www.nggc.net/media/images/header_x360.gif" border="0" alt="" /></a><img src="http://www.nggc.net/media/images/header_spacer.gif" alt="" /><a href="http://www.nggc.net/"><img src="http://www.nggc.net/media/images/header_ladders.gif" border="0" alt="" /></a><img src="http://www.nggc.net/media/images/header_spacer.gif" alt="" /><a href="http://www.nggc.net/"><img src="http://www.nggc.net/media/images/header_tournaments.gif" border="0" alt="" /></a><img src="http://www.nggc.net/media/images/header_spacer.gif" alt="" /><a href="http://www.nggc.net/"><img src="http://www.nggc.net/media/images/header_forums.gif" border="0" alt="" /></a><img src="http://www.nggc.net/media/images/header_2.gif" alt="" /></div>
<div id="bottombar"></div>
<div id="logo"></div>
<div id="login"></div>
<div id="leftnav">
<div class="navcat">NGGC</div>
<div class="navlink"><a href="#">Home</a></div>
<div class="navlink"><a href="#">News</a></div>
<div class="navlink"><a href="#">Ladders</a></div>
<div class="navcat">Channels</div>
<div class="navlink"><a href="#">PC</a></div>
<div class="navlink"><a href="#">Playstation 2</a></div>
<div class="navlink"><a href="#">Playstation 3</a></div>
<div class="navlink"><a href="#">Sony PSP</a></div>
<div class="navlink"><a href="#">Nintendo Wii</a></div>
<div class="navlink"><a href="#">Xbox</a></div>
<div class="navlink"><a href="#">Xbox 360</a></div>
</div>
<div id="header"></div>
<div id="content">
<div id="block1">
<div id="featuredgame"><img src="http://www.nggc.net/media/images/featured.gif" alt="" /></div>
<div id="latestnews"><img src="http://www.nggc.net/media/images/latestnews.gif" alt="" /></div>
<div id="newsblock">
<div class="newstitle">Testing 123</div>
<div class="newstext" style="border-bottom: 0px;">NGGC plans on opening Mid-April Stay Tuned NGGC plans on opening Mid-April Stay Tuned NGGC plans on opening Mid-April Stay Tuned</div>
<div class="newstitle">Testing 123</div>
<div class="newstext">NGGC plans on opening Mid-April Stay Tuned NGGC plans on opening Mid-April Stay Tuned NGGC plans on opening Mid-April Stay Tuned</div>
</div>
</div>
</div>
</div>
</body>
</html>
Thanks. Hi Guys, I hope you can help me, I have spent all day trying to figure this out. Basically I am trying to learn CSS and an explanation as to how this works (and what code to look for where) would be helpful. The template page I am looking at to learn from is a web site CSS template included with dreamweaver. The code I am looking at is this: <div id="globalNav"> <img alt="" src="gblnav_left.gif" height="32" width="4" id="gnl"> <img alt="" src="glbnav_right.gif" height="32" width="4" id="gnr"> <div id="globalLink"> <a href="#" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">global link</a><a href="#" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">global link</a><a href="#" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">global link</a><a href="#" id="gl4" class="glink" onmouseover="ehandler(event,menuitem4);">global link</a><a href="#" id="gl5" class="glink" onmouseover="ehandler(event,menuitem5);">global link</a><a href="#" id="gl6" class="glink" onmouseover="ehandler(event,menuitem6);">global link</a><a href="#" id="gl7" class="glink" onmouseover="ehandler(event,menuitem7);">global link</a> </div> <!--end globalLinks--> <form id="search" action=""> <input name="searchFor" type="text" size="10"> <a href="">search</a> </form> </div> <!-- end globalNav --> <div id="subglobal1" class="subglobalNav"> <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> </div> <div id="subglobal2" class="subglobalNav"> <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href=".... ... and it goes on. Also the CSS that I think is relavent is: #globalNav{ position: relative; width: 100%; min-width: 640px; height: 32px; color: #cccccc; padding: 0px; margin: 0px; background-image: url("glbnav_background.gif"); } #globalNav img{ margin-bottom: -4px; } #gnl { position: absolute; top: 0px; left:0px; } #gnr { position: absolute; top: 0px; right:0px; } #globalLink{ position: absolute; top: 6px; height: 22px; min-width: 640px; padding: 0px; margin: 0px; left: 10px; z-index: 100; } What I want to know is: - behind the global nav links there is a long image in the background that is BEHIND the links. The links themselves appear over top and there is a CSS rollover image that appears above the background image. I can't figure out how this background image got there. (I wish I could include a screen shot to point it out) Can anyone see what Im talking about? The site is basically a replica of macromedia.com (and the top menu is what I am talking about) Thanks for any help! Thinklogos This only causes a problem in IE6, not Firefox or Opera. The page in question is: http://www.kbs.com.au/index2.asp CSS is at: http://www.kbs.com.au/kbs2.css The problem is that the 'Business Services' rollover is appearing further down the problem where it shouldn't. If I take the links (<a> tags) from the two <p> tags further down the page, the images disappear, so it's somehow linked to the classes assigned to links, but I can't figure out how or why or how to fix it. I tried adding a class just for the offending <p> tags which sets background: none, but that didn't work either. Anyone got any ideas what's going wrong? I'd like to have a table with a background image that does not repeat, and if the table extends below the height of the image, I want a solid background color. But this does not seem to work. Why? Code:
table.main {
border: 1px solid #01228a;
border-collapse: collapse;
background: url(./images/bluehills.jpg) no-repeat top
background-color: #01228a;
}
[EDIT] Sorry, the problem is while the bg image is there and does not repeat, the solid bg color isn't there... Imagine that the background image is supposed to fade into the background color... Thanks... Hi: I recently posted this issue (http://forums.devshed.com/css-help-116/border-image-problems-with-ie-312603.html) and got half the problem solved. I have an image as the background of a <td> tag. Also I have a border-top and border-bottom surrounding the image. My problem is that in IE, the borders are not lining up agains the image. They are a pixel away, which screws up my tabs. CSS: Code:
html, body {
margin: 0px;
padding: 0;
background: #EEF;
font: 11px/13px Verdana, Arial, Helvetica, sans-serif; color: #000;
}
table#main {
margin: 3px;
padding: 3px;
width: 99%;
}
#header {
background: #FFF;
background-image: url(include/head.jpg);
background-repeat: no-repeat;
height: 136px;
width: 100%;
background-position: right top;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
}
#nav {
margin: 0;
padding: 0;
position: absolute;
top: 125px;
float: left;
}
#nav li {
list-style: none;
float: left;
margin-left: 4px;
padding-left: 15px;
font-size: 10px;
line-height: 17px;
white-space: nowrap;
background: url(include/tab.gif) 0 0 no-repeat;
border-bottom: 1px solid #999;
}
#nav a {
display: block;
float: left;
padding: 0 16px 0 0;
text-decoration: none;
background: url(include/tab.gif) 100% 0 no-repeat;
color: #999;
width: .1em;
}
html>body #nav a {width: auto;} /* fixes IE6 hack */
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#nav a {float: none;} /* End IE5-Mac hack */
#nav a:hover {color: rgb(62%,35%,22%);}
#nav #current, #nav #current a {
color: #FDB;
background-image: url(include/tab.gif);
}
.title {
font: bold 24px/26px "Times New Roman", Times, serif; color: #000;
display: block;
margin-left: 4px;
}
The pertinant declaration is the #header id. I used the background-position: right top as was suggested which solves the the problem at the top, but now there are two pixels separating the image and the border on the bottom! Please help! As a side note, this works perfectly in Firefox (of course). If any other info is warranted, please let me know! The link to the page is: http://www.wiu.edu/users/mujas2/test/ i am trying to have the background of all pages appear like this one: www(dot)grimebikes(dot)com/events/ however it will only fill its parent container, like this www(dot)grimebikes(dot)com/media/ fade1000.png is the image i need to cover the entire pages content. /* HTML Tag Redefinition */ html { height: 100%; background: #000000 url(images/background.png) center center fixed; background-size: cover;} body { padding: 0px; margin: auto; height:100%; font-family:Arial, Helvetica, sans-serif; font-size:12px; } img { border: 0px; } a {cursorointer; } /* Page Structure / Navigation */ #page { position:relative; width: 1000px; margin: auto; text-align:left; background: url(images/fade1000.png) repeat-y; min-height:200%;} #page.logo {position:absolute; top:0; left:0; width:330;} #page input { color: #c2d826; background-color: #000000; border-style:solid; border-width:1px; border-color:#444444; padding:2px; font-size:10px;} #page #content {width: 900px; margin:auto; text-align:left; position:relative; height:100%; } #page #content #header{ position:relative; width:900px; float:left; } Hi I'm trying to add a background image to a list box however it works in firefox well but in IE i cannot see the background image. Can someone helpme Here is the code Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
.listbox_picture {
padding-left:22px;background:url(icon_photo.gif) left center no-repeat;border:solid 1px white;border-bottom-color:#f0f0f0;
}
.listbox_video {
padding-left:22px;background:url(icon_video.gif) left center no-repeat;border:solid 1px white;border-bottom-color:#f0f0f0;
}
-->
</style>
</head>
<body>
<form name="form1" method="post" action="">
<select name="select" size="2">
<option value="sss" class="listbox_picture">sss</option>
<option value="sss" class="listbox_video">ssssa</option>
</select>
</form>
</body>
</html>
I have a div in which I wish to have image repetition. It works fine on all pc's I've tried, it's just not working (no image shows up whatsoever) on Macs. Here's the code for the div: Code: #header {
position:absolute;
top:0px;
height:87px;
width:95%;
padding-left:5%;
background-image:url(/images/headerbg.gif);
background-repeat:repeat-x;
font-family:Lucida Sans, Verdana, Arial, Helvetica, sans-serif;
font-size:28px;
color:white;
z-index:3;
}
Can someone please tell me why this is the case? Thanks in advance for any help. |
|||||||