|
CSS - Div Problem: Alignment Background-image And Image In Container
Similar TutorialsSounds simple... but I can't find an answer. I've a simple table row with a css background image. In the row I've my text links and two images that are links. While in firefox everything lines up nice and straight... in intercrash exploder it's all over the place, the images are almost subtext and the text is almost text top.. Any advice? The page can be seen at addcolour (co uk extension) CSS in a folder css the file name is addcolour Many thanks d hi i have following xhtml Code: <body> <div id="content" class="centrehack"> <div id="header" class="centrehack"> <div id="topRightLogin"> <form action="#" method="post"> <input type="text" name="uname" value="username" /> <input type="password" name="passwd" value="password" /> <input type="image" src="images/headerlogin.gif" /> </form> </div> and following css Code:
.centrehack { margin: 0 auto 0 auto; }
#content { width:960px; text-align:center; height:100%; overflow:visible; background:url(images/headerback.gif) repeat-x; }
#header { width:960px; height:47px; text-align:center; }
#topRightLogin {
width:450px;
height:47px;
float:right;
color:#fff;
font-weight:bold;
font-family:Verdana, Geneva, sans-serif;
border:#000 solid 1px;
height:30px;
display:block;
padding:0;
}
#topRightLogin input,submit {
display:inline;
padding:0px;
margin-left:5px;
height:21px;
margin-top:0px;
}
i want to display form fields and submit button in a single line with perfectly aligned horizontally. but the form fields are showing empty area above them and going down than the submit button. the problem remains same in all browser. i am attaching a screenshot of the problem as well. any help is much apprecated. thanks 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? 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 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 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 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.. 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? 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 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. 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> Hi all Having some problems with background image positioning - all CSS/XHTML has been validated See http://community.foe.co.uk/tmp/quote_and_image_test.html Relevant CSS : Code: #imageleft {padding:0px; float:left; width:auto; margin-right:5px; margin-bottom:5px}
.imagecaptionleft{padding:0px; margin:0px; text-align:left; font-size:8pt}
blockquote {
background: transparent url(/images/common/quote1a.gif) left top no-repeat;
margin:0px;
padding: 0px;
font-weight: normal;
color:#000;
}
blockquote div {
padding: 2px 30px;
background: transparent url(/images/common/quote2a.gif) right bottom no-repeat;
}
Relevant html Code: <div id="imageleft">
<img src="/images/common/dummy.gif" alt="Test image" width="100" height="100" />
<div class="imagecaptionleft">Caption goes here</div></div>
<blockquote><div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum augue odio, condimentum et, iaculis quis, facilisis nec, quam. Aliquam eros. Nulla ut lorem. Cras bibendum orci at ligula lobortis bibendum.</p>
</div></blockquote>
The opening quote mark is hidden behind the image - as you can see it has a position of left, and for some reason the <div> within the <blockquote> is including the image so is full width. Any help appreciated 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'm trying to get a repeating background image to show up in my Firefox browser but can't get it to work. Grateful if somebody can tell me what is wrong with this code? Code: <?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="all">
#header {
background:#A31135 url(images/fill.gif) repeat-x fixed;
height:100px;
}
</style>
</head>
<body>
<div id="header">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
</body>
</html>
Many thanks. 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 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'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... 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. 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; } |
|||||||