|
CSS - Image Not Aligning In Table, Need Ie Fix
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. Similar TutorialsI am trying to put labels below images on my new site design. See: www.jwsuretybonds*com/jw09 I figured out how to get them vertically aligned, but I am having problems with the horizontal, as when I change the browser size, they move. Here is one of the examples: Code:
#homepage-bar h2.construction {
position:fixed;
top:225px;
left:505px;
}
I tried changing to position: absolute; I also tried to use percentages on the left: I know this is easy, but I can't find the fix after googling for 30 minutes. Help! http://www.gaminghybrid.com/cms_design/ I would like to get the top tab table (#top-tabs) and the sub tabs (#sub-tabs) centered, instead of the semi-left alignment they are in. What is the best way to go about it? (I've tried <center> and text-align:center) Also, as you can see in FireFox, the bottom bite doesn't go to the bottom of the other two content bits, but it does in IE. Any help is appreciate I have decided to move another of my sites over to css, but I seem to be stuck at the first problem. I have added a small code sample... What I am wanting to do is remove the table and acheive the same result with css and div tags. How can I align text to the bottom right with css like the sample code? PHP 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" xml:lang="en" lang="en"> <head> <title>Text aligned bottom right</title> </head> <body> <table border=0 height="90px" width="100%"> <tr><td style="vertical-align: bottom;background:white;text-align:right;"> <a href="">Home</a> | <a href="">About</a> | <a href="" >Contact</a> </td></tr></table> </body> </html> I seem to have messed up while slicing...If my font size is too large, it'll mess up my table positioning...I'd like to know if there's any way to align text to the bottom of a table collumn? Is there anything I can put in my style sheet to do this? Am I not being clear enough? Please help. EDIT : I've got a picture uploaded. See how on the left there's that white space? And under "Welcome" there's also a lot of space? I figure if I could align the text to the bottom, it'd fix both problems. =/ I can't post URLs here, so please copy/paste the URL below. Look at the "email to friend" and "post to facebook" links on this page (url) proofs.gentryfoto.com/p/rswedding/1281copy27 (/url). My goal is to: 1. underline the text only, not the icon. 2. center the icons over the large image on the screen 3. Have it look the same in IE and FF. Currently, the icons are in the same row in IE, but are breaking into multiple lines in FF. I want them all on one line. What am I doing wrong? I am doing all kinds of experiments but can't get this right. Thanks. The problem that I am having stems from attempted compatability for 1. IE/other browsers, and 2. Not scrolling or having an absurd amount of dead space on different resolutions. Given that I'm currently using a 16:9 laptop, anything that I make for my resolution is very likely to scroll vertically on anything else. I would like to preface this by saying that, while I am a young person and am .. relatively web savvy, I'm also pretty miserable at CSS. I'll pick it up whenever I need to use it, but these times generally end up being a year plus apart, and so I generally .. forget everything that I picked up the last time, and have to re-learn. I am very good at nesting tables, and using an absurd number of them to get things to look how I want, but .. I really want to get away from that. CSS is cleaner and less .. well, less flat out dumb than using seven tables in one page to align things the way you want them? The Actual Problem I Have: (Do ignore the hideously coloured background, the green/blue combo is temporary until I get the code working properly. Anyway, so apparently I can't post URLs so: clocktock.com is the website in question, code on it is Code: <html> <head> <link rel="stylesheet" type="text/css" href="poing.css"> <link rel="icon" type="image/png" href="img/RL16.png"/> <title>[ eroding.net ]</title></head> <body> <table cellspacing="0" cellpadding="0" class="main" height="100%" width="100%" valign="bottom"><tr><td width=100% align=center valign="bottom"> <table border="0" cellspacing="0" cellpadding="0" height="90%"> <tr><td background="img/top_left.png" width=14 height=39></td> <td background="img/top.png" width=622 height=39><img src="img/top_left2.png" border=0></td> <td background="img/top_right.png" width=14 height=39></tr></td> <tr><td background="img/left.png" width=14 height=1></td> <td bgcolor="black" width="700" height="800" border=0 cellspacing=0 cellpadding=0 background="img/table_bg_grunge.png" valign="top"> <br><br> <center> aaa <br><br> </center> </td><td background="img/right.png" width=14></tr></td></table> </tr></td></table> </body></html> CSS Code: body { font-style: normal; font-variant: normal; font-weight: normal;
font-size: 12px;
font-family: Tahoma, Arial; background-color: #0F0F0F;
color:
#424242; background: url(img/damask.png);
background-attachment:
fixed; background-repeat: repeat; margin-bottom: 0px; vertical-align:
bottom;}
table { color: #424242; font: 11px Tahoma, Arial; margin: 0px;
}
sm {font-size: 0.9em; }
a:link { color: #424242; }
a:visited { color: #595959; }
a:hover { color: #424242; text-decoration:none; }
a:active { color: #424242; }
What I would, ideally, like to have is for the box to take a percentage of space. Say, vertically 80 or 90%, and then a blank remainder on the top. Horizontally, say, 10 or 15% on either side and then 70 or 80% for the "box." But, google as I might, I just can't find the right CSS commands to do it. It just gets funny looking and shrinks all my border images (Though I erased the code that caused that). Hi Guys, I am having trouble working out how to line up the hover background image with the background image for a mouseover effect. It is currently putting the hover BG image ''x.gif' over the text instead of in the same position as 'bullet.gif' HTML ---------- <div id="vertmenu"> <ul> <li><a href="#" tabindex="1">Home</a></li> <li><a href="#" tabindex="2">About Us</a></li> <li><a href="#" tabindex="3">Computing</a></li> <li><a href="#" tabindex="4">Web Sites</a></li> <li><a href="#" tabindex="5">Games</a></li> <li><a href="#" tabindex="6">Links</a></li> </ul> </div> CSS ---------- PHP Code: #navcontainer ul { list-style-type: none; text-align: left; } #navcontainer ul li a { background: transparent url(images/bullet.gif) left center no-repeat; padding-left: 15px; text-align: left; font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:14px; color:#33CC00; font-weight:bold; text-decoration: none; color: #999; border-bottom: 1px dashed #FF9933; } #navcontainer ul li a:hover { background: transparent url(images/x.gif) left center no-repeat; color: black; border-bottom: 1px dashed #FF9933; } #navcontainer ul li a#current { background: transparent url(images/x.gif) left center no-repeat; color: #666; border-bottom: 1px dashed #FF9933; } I have a logo and would like to align an H1 and an H2 beside it. So, I would have: Code:
| H1 text
image|
| H2 text
If I add a display inline to both elements, I get the H2 beside the H1 instead of under. If I add it to only the H1, I get the H1 beside the image, and the H2 under the image. What would be the proper way to do this? Hi, Just upgraded my monitor and am now operating on a 1280*1024 resolution. Previous website I have built have been for 1024*768 resolutions. Problem is now that some of my images are placed at the top of the screen when I want them in the middle... not with a load of blank space beneath them. I want the blank space equally around them. Anyway, I'm specifically talking about the website I have: http://www.atari-music.co.uk The front and home-pages suffer from this problem when viewed on > 1024*768 resolutions. I have attempted to fix the problem (though it is not in the code for the on-line version) by putting this into the style sheet:- IMG.middle { vertical-align: middle; } In the HTML for the image map I have:- <IMG class="middle" src="images/home.jpg" height="570" width="760" alt="ATARI - The Official Website" border="0" usemap="#siteMap"/> Am I not referencing the CSS code correctly? The image is still sitting, vertically aligned to the top. Cheers, Rob. I'm trying to figure out how to align the text with the text so that it text starts up and to the top right of the image. And I"m talking about the top middle div. http://kansasoutlawwrestling.com/v3/index.html Hi all, I have a pesky little problem that I can not seem to figure out on my own. I have a set up like this PHP Code: <span class='navitem'><a href='index.php'> <img src='myimage.gif'>Go Home</a></span> My Css Code is PHP Code: #leftnavcontent .navitem { border-bottom:1px dotted #DADADA; font-size:12px; font-weight:normal; line-height:16px; } #leftnavcontent .navitem img { margin-right:5px; border:none; } My problem is that the image is not aligning with the text. As in there is just a slight maybe 1 or 2 pixel border bottom from the image that makes it dip just above the navitem box which makes it look a little funky. Any ideas? Hey everyone, I am trying to do a rollover CSS image. Though, with this image it doesn't want to align on the bottom of the table that it will be in. Why is this? I have no clue; so I decided to come here! With the smart people! Here is the website page that I am trying to do it on: http://www.automationfoodtech.com/test.html Here is the desire look (these are the buttons, but client wants to be able to change them himself and without me adding buttons): http://www.automationfoodtech.com/ Here is the CSS for both (the test page is at the bottom) http://www.automationfoodtech.com/style.css Remember we are working on the horizontal navigation. I have a line item where I'm pulling in text and an image from a dB. I would like the text to align at the top and not sure how to do it. Code: <li>Song name <img src="beatles.jpg"> Artist Test page: Played songs I have tried margins but then the image moves and the text is always aligned at the bottom of the image. Thanks for your help! I currently have been trying to align an h1 tag over top of a css background image. I have tried a whole bunch of things but have returned the code back to its most basic form My external css div looks as follows: #content_funny{ width: 315px; height: 51px; background-image:url(images/funnyvideos1.gif); background-repeat:no-repeat; float:left; clear:left; margin:0px 0px 0px 0; display:inline; } My index file is as follows <div id="content_header"><div id="content_funny"><a href="http://www.tokenhumor.com/categories/7/funny_videos.html"><h1>Funny Videos</h1></a></div> For some reason the text in its natural state is laying differently for IE and FF, preventing me from using any positioning lines within my external style sheet. Any help with this is much appreciated, I m pulling my hair out http://www.kafadrian.com/juggernaut/index.html is what i have so far I want it to look like: http://www.kafadrian.com/juggernaut/layout.jpg The problem im having is that the image links that have mouseover effects dont align (touch) the blue bar below them and apparently in some browsers the image links themselves have gaps between them I spent hours, and yes im relatively noobish about all this, trying all sorts of different display commands and border/margin commands to try and get rid of any spaces, the way the site is now (10.01.08) is the best i could get it. in IE7 the mouseover images connect horizontally but not vertically with other images. am i going about this all wrong? my experience in building websites is mostly from the early eras of netscape when IE was new, back when you put stuff in a table a certain way with no cellpadding/spacing/border and everything aligned no problem. I appreciate any help with this as I undertand it will take time to give me an answer that no only makes sense (to me) but will work. the code for the site is: 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=utf-8" />
<title>Juggernaut - Monolith - Order</title>
</head>
<body marginheight="0" marginwidth="0" leftmargin="0" rightmargin="0" topmargin="0">
<script type="text/javascript">
<!--
var image1 = new Image();
image1.src = "news1.jpg";
var image2 = new Image();
image2.src = "news2.jpg";
var image3 = new Image();
image3.src = "news3.jpg";
var image4 = new Image();
image4.src = "roster1.jpg";
var image5 = new Image();
image5.src = "roster2.jpg";
var image6 = new Image();
image6.src = "roster3.jpg";
var image7 = new Image();
image7.src = "forums1.jpg";
var image8 = new Image();
image8.src = "forums2.jpg";
var image9 = new Image();
image9.src = "forums3.jpg";
var image10 = new Image();
image10.src = "files1.jpg";
var image11 = new Image();
image11.src = "files2.jpg";
var image12 = new Image();
image12.src = "files3.jpg";
var image13 = new Image();
image13.src = "info1.jpg";
var image14 = new Image();
image14.src = "info2.jpg";
var image15 = new Image();
image15.src = "info3.jpg";
var image16 = new Image();
image16.src = "founded.jpg";
//-->
</script>
<script type="text/javascript">
<!--
function roll(img_name1, img_src1, img_name2, img_src2)
{
document[img_name1].src = img_src1;
document[img_name2].src = img_src2;
}
//-->
</script>
<table border="0" cellspacing="0" cellpadding="0" style="margin:0">
<tr height="34">
<td rowspan="4">
<img style="display:block" src="juggernaut.jpg" width="560" height="110"/>
</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="index.html" style="display:inline-block"
onmouseover="roll('news','news2.jpg','text','news3.jpg')" onmouseout="roll('news','news1.jpg','text','founded.jpg')">
<img style="display:inline-block" src="news1.jpg" name="news" width="48" height="48" border="0"/>
</a>
<a href="index.html" style="display:inline-block"
onmouseover="roll('roster','roster2.jpg','text','roster3.jpg')" onmouseout="roll('roster','roster1.jpg','text','founded.jpg')">
<img style="display:inline-block" src="roster1.jpg" name="roster" width="48" height="48" border="0"/>
</a>
<a href="index.html" style="display:inline-block"
onmouseover="roll('forums','forums2.jpg','text','forums3.jpg')" onmouseout="roll('forums','forums1.jpg','text','founded.jpg')">
<img style="display:inline-block" src="forums1.jpg" name="forums" width="48" height="48" border="0"/>
</a>
<a href="index.html" style="display:inline-block"
onmouseover="roll('files','files2.jpg','text','files3.jpg')" onmouseout="roll('files','files1.jpg', 'text','founded.jpg')">
<img style="display:inline-block" src="files1.jpg" name="files" width="48" height="48" border="0"/>
</a>
<a href="index.html" style="display:inline-block"
onmouseover="roll('info','info2.jpg','text','info3.jpg')" onmouseout="roll('info','info1.jpg','text','founded.jpg')">
<img style="display:inline-block" src="info1.jpg" name="info" width="48" height="48" border="0"/>
</a>
</td>
</tr>
<tr>
<td>
<img style="display:block" src="line_right.jpg" width="240" height="4"/>
</td>
</tr>
<tr>
<td>
<img style="display:block" src="founded.jpg" align="right" name="text" width="144" height="20"/>
</td>
</tr>
</table>
</body>
</html>
Hi, I need some help for aligning text inside a css box. let me first say, that i am using a wysiwyg editor and i am aware of this being a red flag for some folks .... to make my problem better understandable, please see following picture - this is how i want it to be: the area of interest is a 3 column box (left and right are fixed widths, middle column is variable), the middle box (highlighted in blue) is the box, which has a background picture ('Melanie Wanders') on the top/left .... then it has some text (one looong line) and also a picture to the right (alignment: right). what i wanted is, that when the user resizes the window, that the text is able to wrap around the image on the top right - and it does exactly that (you can also view the online version here) well, what happens is this: my problem: when i try to use the 'p' tags to enter a paragraph, it messes up the appearance in FF (completely) and it still shows the text right on the top, above the background image. I also tried to align the text line to the bottom of the box, but it wouldn't do so. i did also try to have the image ('Melanie Wanders') as an actual image aligned Top/Left, but it wouldn't wanna work for me with the other image next to it. i might get it to work, if this is my only option .... finally, here the code used (you will also find the code online, if you follow the above link) Code:
.inner_middle_content_row { width: 100%; height:300px ; }
.inner_middle_content_row_left { background-image: url(images/inner_table/left.png); background-repeat: repeat-y; background-position: right 0; width:125px; height:300px; float:left; }
.inner_middle_content_row_right { background-image: url(images/inner_table/right.png); background-repeat: repeat-y; width:20px; height:300px; float:right; }
.inner_middle_content_row_middle { background-color: white; background-image: url(images/about_us/melanie_title.jpg); background-repeat: no-repeat; background-position: left top; width:auto; height:300px; margin-left:125px; margin-right:20px; }
Code: <div class="inner_middle_content_row"> <!--agl:cssobject id="inner_middle_content_row" type="Column Middle Scale" /--> <div class="inner_middle_content_row_left"> <p class="submenu_brown">Melanie Wanders</p> <p><a class="submenu_gray" href="wilhelm%20wanders.html" onmouseover="this.className='submenu_brown';return true;" onmouseout="this.className='submenu_gray'">Wilhelm Wanders</a></p> <p><a class="submenu_gray" href="philosophie.html" onmouseover="this.className='submenu_brown';return true;" onmouseout="this.className='submenu_gray'">Philosophie</a></p> <p><a class="submenu_gray" href="history.html" onmouseover="this.className='submenu_brown';return true;" onmouseout="this.className='submenu_gray'">History</a></p> </div> <div class="inner_middle_content_row_right"></div> <div class="inner_middle_content_row_middle"> <img src="images/about_us/melanie_portrait.jpg" alt="" width="160" height="180" align="right" border="0" />Chef Melanie Wanders received her Culinary Arts and Management degree .... their own hand-made chocolate company - Wanders Artisan Chocolaterie.</div> it would be great to find a solution to this - the easy way out would be to just skip the background image and have the text start right on top left .... but i like the idea of having a nice title like this - please tell me your opinion though another thing i realize is, that the whole alignment is off in IE ... this is an issue i think i have read before and it has to do with this 3px or 5px off thing in IE right? i think i will look into this some other time. Thanx for reading this - please bare with me, as my mother-language is not english and i might have expressed myself not clearly Hey guys, I'm totally new to the css thing and I'm having issues placing an image where and how i want it. If you look at my WIP here you'll see that in IE, the image of the paint brush etc. i have on the left goes beyond the div box its placed in and then into the next... how can I float it left only within the specified box so that the text flows around it in that box? Image placement is a pain, eh?... Thx! crash_x Hi: I need a simple code for displaying two things side by side. I want to attach an image of what I need to do, but I can't figure out how to attach images. Basically, to describe the image, I need to have an unordered list on the left and a graphic on the right. These need to be between to blocks of text (above and below). I would prefer not to use tables. I am assuming there is a simple way to do that using <div> and <span> and floats, but I can't figure it out. Can someone please help. Thanks. hey all, i have a page that has text on it and i am trying to add another div with a photo in it so that i can place the photo on the right had side and get the text to wrap around it. buti am having probs. the text doesn't wrap around the photo ... so the photo just ends up at the bottom of the text on the right... here is the code i am currently using for it Code:
#rightphoto {position: absolute; right: 10px; border: 1px solid #ccc; padding: 2px 2px 2px 2px;}
i have had various ideas but none have worked,,,,this is the latest... any ideas?? thanks RF Help, I'm trying to combine two effects I came across. The code works well but I have a problem when the image changes width. The caption box doesn't size accordingly. I tried multiple iterations for the transbox width without success. Any help would be greatly appreciated. Here is the code source: Dropshadow Image Caption Code: <html>
<style type="text/css">
div.image_wrapper img {
background-color: #fff;
border: 1px solid #a9a9a9;
display: block;
margin: -5px 5px 5px -5px;
padding: 4px;
position: relative;
}
div.image_wrapper {
background: url('_images/shadow.gif') no-repeat bottom right;
clear: right;
float: left;
margin: 0 0 0 25px;
padding: 0;
position: relative;
}
.transbox {
margin: 0;
padding: 0px;
background-color: #000;
opacity:0.6;
filter:alpha(opacity=60);
position: absolute;
top: 0;
right: 11px;
width: 95%; /*PROBLEM RIGHT HERE*/
height: 5em;
}
.image_wrapper p {
margin: 0;
padding: 10px;
color: #FFF;
position: absolute;
top: 0;
right: 5px;
font-size: 36px;
font-weight: bold;
font-family:Georgia, "Times New Roman", Times, serif;
text-shadow: 3px 3px 3px #000;
}
</style>
<body>
<div class="image_wrapper"><img src="_images/_main/HomePageGraphic.png" width="475" height="400" border="0" /><div class="transbox"></div><p>HOME</p></div>
</body>
</html>
|
|||||||