|
CSS - Table Not Flush With Image
Hello.This should be simple enough.
I have an image on my page(image1.bmp),immediatly folowed by a table(class=table1). The thing is I want the image to be flush with the top of the table with no gap,but there is a small gap,How can I fix this? Thanks note(I left a //here mark on the html page where the problem is. css sheet: Code:
#menu {
clear: both;
margin: 30px;
padding: 0;
background: url(menu.jpg) repeat-y center top;
font: 12px/26px Courier New;
height: 26px;
background: #006633;
text-align: center;
}
#menu ul {
float: none;
list-style: none;
margin-top:0; padding: 0;
margin-right:0; padding: 0;
margin-bottom:0; padding: 0;
margin-left:90; padding: 0;
}
#menu ul li {
display: inline;
}
#menu ul li a {
display: inline;
float: 0 auto;
padding-top: 8px;
padding-right: 28px;
padding-bottom: 8px;
padding-left:8px;
color: gold;
text-decoration: none;
}
#menu ul li a:hover {
background-color:003300;
color: gold;
}
#menu ul li#current a {
background-color: #eee;
color: #333;
}
a { color: black;font-size: 10pt; text-decoration: none;
border-bottom-style: solid; border-bottom-width: 0px }
a:link { border-bottom-color: navyblue }
a:visited { border-bottom-color: purple }
a:hover { border-bottom-color: green }
a:active { border-bottom-color: red }
H1.texter {
font-family: 'Lucida Console';
font-size: 15pt;
color: #black;
font-variant: normal;
text-decoration: none;
}
H1.texter2 {
font-size: 14px;
color: #black;
font-family: 'Lucida Console';
font-variant:normal;
FONT-WEIGHT: normal;
}
H1.texter3 {
font-family: 'Lucida Console';
font-size: 10pt;
FONT-WEIGHT: normal;
color: navyblue;
text-decoration: none;
}
TABLE.Table1
{
height: 150px;
width: 380px;
top-border-style:hidden;
border-top:hidden;
border-bottom:solid;
border-left:solid;
border-right:solid;
border-color: #000000;
background-color:white;
border-width: 1px;
margin: 0px;
padding: 0px ;
}
TABLE.Table2
{ margin: 0px;
padding: 0px;
height: 199px;
width: 430px;
background-color:limegreen;
}
html sheet: Code:
<html>
<head>
<title>Keep track and review golf scores</title>
<meta name="description" content="Keep track of and review golf scores"/>
<meta name="keywords" content="Golf","records","review","tabulation"/>
<meta name="robots" content="index" />
<link rel="stylesheet" type="text/css" href="style.css" title="BlueSky 3.0
CSS"></head><body>
<style>
body
{
background-color: limegreen;
<font FACE="Lucida Console">
}
H1.texter1 {
font-family: 'H1.texter2 {
font-family: 'Lucida Sans Unicode';
font-size: 75pt;
color: black;
FONT-WEIGHT: normal;
font-variant:Not Set;
}
</style>
</head>
<body>
<div id="menu">
<ul align="center">
<li><a
href="golfgame/Users/register.php">Join</a></li>
<li><a
href="golfgame/Users/Log_in.php">Login</a></li>
<li><a href="golfgame/Users/help/tour.html"
>Tour</a></li>
<li><a href="golfgame/Users/contact.php">Contact</a></li>
</ul>
</div>
<br>
<IMG SRC="green4.bmp" align="left">
<IMG SRC="green4.bmp" align="right">
<br>
<center>
<table width=300><tr><td align='left'><IMG SRC="golf.bmp">
</td ><td align='center'>
<IMG SRC="golf.bmp">
</td><td align='right'>
<IMG SRC="golf.bmp">
</td></tr></table>
</center>
<br><br><center>
<IMG SRC="logo.bmp" align="center">
</center>
<br><center>
<IMG SRC="image1.bmp">
//here
<table class=table1>
<tr><td align='left'><br>
<h1 class=texter2><li>content here
scores!</li></h1></td></tr>
<tr><td><h1 class=texter2>
<li>content here</li></h1>
</td></tr>
<tr><td><h1 class=texter2>
<li>content here</li></h1>
</td></tr>
<tr><td><h1 class=texter2>
<li>content here</li></h1>
</td></tr>
</table>
</center>
</body></html>
Similar TutorialsHi, This might be a case of an easy fix thats being over-looked but I've tried everything I haven't been able to find to 'fix' this. FF is cool, IE is giving me 'teh gap' I have attached an image, I highlighted the pic so it shows the black bar of space right under the top image. There are two DIVs that are 'stacked' The top one has the top half of the image, the bottom one has the gold bar as a background image, with the bottom half of the pic in it. I can't make the images the background of the div because i'm adding a rollover and link to the images. So, CSS: Code: #interior_top_image{
text-align:center;
vertical-align:bottom;
display:block;
height:85px;
margin:0px;
padding:0px;
}
#interior_header{
background-image:url("images/interior_bottom.jpg");
background-position:bottom center;
background-repeat:no-repeat;
background-color:#263F7F;
display:block;
height:85px;
text-align:center;
margin:0px;
padding:0px;
}
HTML: Code: <div id="interior_top_image"><img src="images/cross_top.jpg" name="cross_top" border="0"></div> <div id="interior_header"><img src="images/cross_bottom.jpg" name="cross_bottom" border="0"></div> I want to center my site, which I have found I can do by giving an absolute position to the main content area - but I also want to repeat an image in the background behind the main content, and I cannot do the both and prevent some empty white space at the top of the page. Can you help? (I am new at this.) What am I doing wrong? So, to recap: I want a centered site, an image behind the main content area, and no empty white space in the browser above my bg image. I am currently using IE (7). TIA. #body { margin: 0px; padding: 0px 10px 0px 10px; width: 100%; background: #ff9900 url('bg_repeat.jpg') repeat-x; } #container { top: 0px; left: 0px; padding: 0px 10px 10px 10px; margin: 0 auto; --> this will center my site, but I still cannot see the bg image stated in the body div border-right: #ffff99 solid 1px; border-left: #ffff00 solid 1px; background: #fff; width: 75%; } I would like to align left images so that they touch against each other. Here is a capture of my problem. dollhedz.com/test [CODE] <style type="text/css"> body{ background-color:#000033; color:#00cc33; } #wrapper{ background-color:#000000; margin:15px auto 0px; width:700px; height:800px; } #sitenav{ background-image:url(sitegrax/sitenavback.jpg); background-repeat: no-repeat; height:55px; padding-left:213px; border: 0px; margin:0px; text-align:left; } #one{ float:left; text-align:left; align:left; margin:0px; padding:0px; } </style> </head> <body> <div id="wrapper"> <div id="banner"><img src="sitegrax/banner.jpg" alt=" yellow Jacket dodging a 355 smoothbore slug" border="0" /> </div> <div id="sitenav" > <div id="one"><a href=""><img src="sitegrax/bt_game_nav.jpg" alt="site navigation games" border="1" /></a> <a href="" align="left"><img src="sitegrax/bt_history_nav.jpg" alt="site navigation history" border="1" /></a> <a href=""><img src="sitegrax/bt_pilot_nav.jpg" alt="site navigation pilot"border="1" /></a></div> </div> </div> </body> </code> Problem: There is a 5 to 6 pixel space between each image that I would like gone. The 1px border around each image is there to show the edge of each image. thank you for your time HI guys I'm basically ultra confused as to why a particular div in my layout won't line up on the following page.. http://hcl.uk.com/test/instaffs/enews1/ I'm talking about the orange box on the right hand side. As you can see, in Firefox it sits right against the line above it, yet in IE 6 theres a 4 or 5 pixel gap forcing the box down. I have been through both my CSS and markup and still can't figure out why this happening.. the only thing I can think of is that it's an IE bug that I don't know about. If anyone can take a look and give me some pointers on what it might or could be that would be great. Thanks in advance for all your help. Stu Hi Um basically I have 2 divs inside in another main layout div, and basically i cant get them to sit to there is no space between them in IE, in firefox its fine. if you go here and open it in firefox then IE you'll see what i mean, any ideas? Html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html> <head> <title>lost layout test</title> <link rel="stylesheet" type="text/css" href="layout.css" /> </head> <body> <div id="outerBox"> <div id="topBox"> <div id="leftTop">left part1</div> <div id="rightTop">right part1</div> </div> </div> </body> </html> CSS: (not all is used in this example) Code:
body {
background: url("images/grad_bg.jpg");
background-color: #d53e3e;
background-repeat: repeat-x;
text-align: center;
}
#outerBox {
width: 700px;
height: 800px;
margin-left: auto;
margin-right: auto;
background-color: purple;
padding: 0px;
margin-top: 0px;
border: 0px;
}
#topBox {
width: 700px;
height: 200px;
color: white;
text-align: left;
padding: 0px;
margin: 0px;
background-color: green;
border: 0px;
}
#leftTop {
width: 500px;
height: 200px;
background-color: pink;
padding: 0px;
margin: 0px;
float:left;
border: 0px;
}
#rightTop {
height: 200px;
margin-left: 500px;
background-color: orange;
padding: 0px;
border: 0px;
}
#bodyBox {
width: 700px;
height: 540px;
color: red;
background-color: blue;
float:left;
text-align:left;
}
#leftContent {
width: 500px;
height: 540px;
background-color: blue;
}
#rightContent {
width: 200px;
height: 540px;
background-color: grey;
float:right;
}
#footBox {
height: 60px;
width: 700px;
color: red;
text-align: left;
background-color: black;
float:right;
}
Not strictly css but css may be the solution :-) I have created a sample page where you can see the problem: http://www.virtual-league.com/demo/ I want the images to sit flush above one another. If I take the text out of any of the lines then the images on those lines will join up nicely. Any ideas? Good day, I'm hoping to have this content right up against the top of the browser window. I've played around with padding values, but they don't seem to do anything and I'm unsure of what to try next. Any advice appreciated. Code: #sectionHeader {
width: 800px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
}
Code: <body> <div id="sectionHeader"> <img src="images/header.jpg" alt="Welecome to Doctor Martin's Site" width="800" height="321" border="1" /> </div> </body> Hi there just wanted to ask a question. I got a table in css and i just want to know what is the command to move an image to the centre of the table. Thank you Hi all! I am stuck with writing my first CSS style based website. First you should know that I'm using a external CSS script. What do I have? I have a page with a background image. Then I need text right? Well I need to align the text, to do so, I created this (for the index page): Code: <div id="content"> <div id="colOne"> <p></p> </div> <div id="colTwo"> <p></p> </div> </div> To style it with CSS, I wrote this in my external STYLE.CSS script: Code:
#colOne {
float: left;
width: 500px;
}
#colTwo {
float: right;
width: 184px;
}
This all works, I have 2 'tables' almost next to each other. Well now you know how my script works, it may help you find a solution for my question: ----- Because my background has light and dark colours, I want to create a 50% invisible background for my table, so the text is more visible and I am still able to see the background. I found out, that I have to use a image and use this code: Code: <div style="width:250px;margin:0 auto;"> <span style="float:left;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;"> <img src="image.gif"></span> </div> Let say image.gif is a black image100*100, when you apply this code, you will be able to look trough the image. so I thought I could use it onto my tables, take a small black image, make it the background, let it repeat it so the whole table would be black, and then apply the code... but I don't know how, because the script is not written for a external CSS script, and I don't know how to use a image as a table background. Can anyone please tell me how to do this? I prefer that you complete my script(A) Thanks for helping me out, Stef Wasn't sure if this was a CSS issue or an issue with the HTML. I am not using a DOCTYPE declaration, so that may also be the issue. I have a portion of a page where I want an image to appear. It is a static image that sits in between 2 scripts. When placed, in both IE and Firefox, there is a 1-2px white space between it and the next TD. The original code was like this: Code: <td width="144"> <SCRIPT> write_minorlinks_xml() </SCRIPT> <img src="images/site/database.gif"/> <SCRIPT> write_dblinks_xml() </SCRIPT> </td> Which makes it appear as this in either browser: I added a div into there so now it reads: Code: <div class="db"><img src="images/site/database.gif"/></div> Stats as follows: image width = 144px I've tried changing the TD, Table and Image attributes both in the CSS and in the HTML itself. No change. It is also important to show what the scripts do. You can't view it in the source but if you could, it would show up like this: Code: <td width="144"> <TABLE class="links" border="0" cellspacing="0" cellpadding="0"> <TR><TD class="minor_link"><span class="minor_link"> <a href="url" target="_top">name</a></span> </tr></td></table> <img src="images/site/database.gif"/> // </td> Also to note, the XML in the script name is in the name only. And the class "minor_link" does not exist. I am thinking that the extra space could be because of the code the scipts put in there. However, Since putting the image code into a div, I changed the background color to #FF7A7A (which is the pink color of the trailing edge of the image, which matches the border to the right of it.) As a result, Firefox now displays it as: Which is fine for cheating sake, but it still displays as the first image in IE. Here is the portion of the CSS that concerns the div (which has made no change in either IE or Firefox) Code: div.db
{
background-color: #FF7A7A;
padding: 0px;
margin: 0px;
}
Any help or ideas would be appreciated. Hi. I've got a question regarding placing an image within a table cell and using CSS to achieve a certain result. The table cell's width is determined at 530px, but the height is dependent on the actual length of the copy. What I'm looking to accomplish is have an image ghosted in the background of the text. It is supposed to appear in the lower right hand corner of the cell. I've already created the image with a transparent background, but it's not implementing correctly. Can I use a Z-Index style to achieve the item being placed under the text? Also, how do I make sure that the image is positioned in the lower right hand corner of the cell regardless of the height of the cell? Thanks! Simon315 I haven't had much luck on converting the html table with an image in it to a css <div> that can look like a html table in a way. Old Way Code:
<table border="1" cellpadding="5" cellspacing="2">
<tr>
<td>
<img src="test.gif">
</td>
</tr>
</table>
New Way Code:
<style type="text/css">
div.divTest
{
margin: 12px 0px 0px 30px;
padding: 8px 8px 8px 8px;
border: 3px double #000000;
/* width: 0px; */
}
</style>
<div class="divTest">
<img src="test1.gif">
</div>
Since the html table is for displaying the data and the image isn't one of them as stated by the w3.org's rule. Thanks.. he http://www.cyclomedia.co.uk/?ie6escape.html i worked out a much better way to do this layout (no inner tables) but this bug in IE6 still persists in this version. the html and css validate so i doubt it's something i've done. kudos to anyone who can figure it out but as a note, if you add another floated div (just containing enough content to wrap e.g. "...") then it holds the image in! This post can be deleted, I solved my problem. 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 Hi, my rollover image for my table does not work. It does not seem to preload the images as expected, so the rollover effect does not look good. There seems to be some type of a lag when I rollover. I don't understand why? Below is the code. It can also be found at http://members.lycos.co.uk/eflix/junk.html Code: <html>
<head>
<SCRIPT language="JavaScript">
if (document.images){
var preloadPic1 = new Image();
preloadPic1.src = 'http://members.lycos.co.uk/eflix/TBOFF.gif';
var preloadPic2 = new Image();
preloadPic2.src = 'http://members.lycos.co.uk/eflix/TBON.gif;';
}
</SCRIPT>
<STYLE>
.topbar {background-image:url('http://members.lycos.co.uk/eflix/TBOFF.gif'); }
.topbar2 {background-image:url('http://members.lycos.co.uk/eflix/TBON.gif;');}
</STYLE>
</head>
<body>
<br><br><br><br><br><br><br>
<table cellspacing=0 cellpadding=0 border=0 width=770>
<tr><td>
<table cellspacing=0 cellpadding=0 width=770 border=1 bordercolor=#6DBEE8
style="border-collapse: collapse; border-width: 1px;">
<tr height=20>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
<a class="topbarlink" href="">A</a>
</td>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
<a class="topbarlink" href="">B</a>
</td>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
<a class="topbarlink" href="">C</a>
</td>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
<a class="topbarlink" href="">D</a>
</td>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
<a class="topbarlink" href="">E</a>
</td>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
<a class="topbarlink" href="">F</a>
</td>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
<a class="topbarlink" href="">G</a>
</td>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
<a class="topbarlink" href="">H</a>
</td>
</tr>
</table>
</td></tr>
</table>
</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 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 I have an image I want to display in a <td> cell, that scales with the cell dimensions. How do I do that? I have a web page shell that loads various content into different cells. The entire page is essentially a table. I have 4 graphic overlays that I want to impose on each cell to round the corners. I've tried doing it this way: CSS: Code: .LeftPanelTable {
WIDTH: 182px;
border-style: none }
.LeftPanelCell {
WIDTH: 160px;
vertical-align: Top;
border-style: none }
.ActionOptionsPanel {
background-color: #DDDDDD;
color: #000000;
font-family: verdana;
font-size: 12px;
border-style: none}
#soft_corner_ul {
background:url("http://www.fourfreedomsblog.com/images/corner_ul.gif") no-repeat top left}
#soft_corner_ur {
background:url("http://www.fourfreedomsblog.com/images/corner_ur.gif") no-repeat top right}
#soft_corner_ll {
background:url("http://www.fourfreedomsblog.com/images/corner_ll.gif") no-repeat bottom left}
#soft_corner_lr {
background:url("http://www.fourfreedomsblog.com/images/corner_lr.gif") no-repeat bottom right}
HTML: Code: <table class="LeftPanelTable">
<tr>
<td class="ActionOptionsPanel">
<div id="soft_corner_ul"><div id="soft_corner_ur"><div id="soft_corner_ll"><div id="soft_corner_lr">
This is the table cell content
</div></div></div></div>
</td>
</tr>
</table>
However, I still see a faint border around the cell, which spoils the effect of the rounded corners. If I change it like this: Code: .ActionOptionsPanel {
background-color: #DDDDDD;
background-image:url("http://www.fourfreedomsblog.com/images/corner_ul.gif");
background-repeat: no-repeat;
background-position: bottom right;
color: #000000;
font-family: verdana;
font-size: 12px;
border-style: none}
Code: <table class="LeftPanelTable">
<tr>
<td class="ActionOptionsPanel">
This is the table cell content
</td>
</tr>
</table>
then the border doesn't appear, but I don't know any way to do this with more than one image. Suggestions? Thanks... |
|||||||