|
CSS - Image Spacing Weird Using Divs And Tables
I haven't tried this before, so if I'm way off beat, I'll take directions.
What I'm trying to do is take a psd file and make a webpage from it. So far, I think I've got the images cut correctly. I tried using divs to begin with, but found I had to apply position:relative to compensate for extra spacing coming after images and divs. I'm placing an image then a div then an image. The spacing between the two are different. I've tried padding:0 and margin:0 just about everywhere I could think of putting it, but that didn't fix it. So, I used RP. But, after getting it to look right in Safari, but not Firefox [just checked before posting here], I found that making the text bigger caused the divs and images to overlap. So, I thought about tables. Yeah, same thing, so I figure I must not know something pretty basic and was wondering if anyone could help. Both pairs of files validate. Here are the links for the: div based layout and it's css file AND table based layout and it's css file Just in case this looks absolutley nuts on other browsers, here is a picture of where I'm trying to get to. I'm feeling a little tortured over this one Similar TutorialsHey guys, First post here. I've scoured the web for answers, searched this forum, and visited many CSS sites (alistapart, maxdesign.com.au, positioniseverything, htmldog, etc.) and haven't seen a problem like this. I'm learning CSS as we speak (or more correctly, as I type), and here's the issue. I have a space between my #header and #page. I can't get rid of it unless I put a border around the #page. I've posted four screens here so you can see what's going on in Safari and Firefox (the two browsers I use). #1 is what the site looks like now (as the code is below). #2 is with the #header removed, #3 is with the #header removed and a 1px border put around the #page, and #4 is with the #header there and the #page has a 1px border. It seems to me that the #page has a top margin, and I've tried margin-top: 0px; and tons of other combos, but I can't get that space to go away unless I put a border around #page. Here's my css: Code: /* basic elements */
body {
font: 8pt/16pt georgia;
color: #000000;
background: #AEAEAE url(images/butterflybg.gif) no-repeat top center;
}
p {
font: 8pt/16pt georgia;
margin-top: 0px;
text-align: justify;
}
h1 {
font: italic bold 14pt georgia;
letter-spacing: 1px;
margin-bottom: 0px;
color: #000000;
}
h2 {
font: normal bold 12pt georgia;
letter-spacing: 1px;
margin-bottom: 0px;
color: #000000;
}
h3 {
font: normal 12pt georgia;
letter-spacing: 1px;
margin-bottom: 0px;
color: #000000;
}
a:link {
font-weight: bold;
text-decoration: none;
color: #FFFFFF;
}
a:visited {
font-weight: bold;
text-decoration: none;
color: #D4CDDC;
}
a:hover, a:active {
text-decoration: underline;
color: #9685BA;
}
/* divs */
#header {
background: url(images/2006_Header.png) no-repeat;
width: 697px;
height: 127px;
padding: 0px;
margin: 0px auto;
}
#page {
width: 697px;
background: url(images/2006_WideExt.png) repeat-y center;
margin: 0px auto;
padding: 0px;
}
#nav {
background: url(images/2006_LNav.png) no-repeat left;
padding: 0px;
margin: 0px;
width: 175px;
height: 306px;
float: left;
}
#content {
background: none transparent;
margin-top: 0px;
}
#text {
}
#footer {
text-align: center;
}
And my html: 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" > <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title></title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="header"> </div> <div id="page"> <div id="nav"> </div> <div id="content"> <div id="text"> <p>put text here</p> </div> <div id="footer"> <a href="http://devshed.com" title="Forums">xhtml</a> </div> </div> </div> </body> </html> Am I overlooking something simple? IE strikes again! My problem is that in ie there seems to be a space in between the main header images and the navigation. In firefox it works great. Any ideas where I might be going wrong? You can see what I mean he html: http://www.kenjones.co.za/norman/ css: http://www.kenjones.co.za/norman/styles/screen.css And it should look like this: http://www.kenjones.co.za/norman/images/norm2.jpg Hello. I've got a header div that my banner is in, below that, another div called "welcome". The background-color I set on the welcome div is somehow appearing at the very top of the container, right above my banner... I've tried adding a height to it but that just makes it worse. Not sure what else to do... The site is LeetWebmasters. My css: Code: p {
margin:0px;
padding:0px;
color:#006699;
line-height:20px;
}
h2 {
padding:0px;
margin:0px;
font-size:24px;
color:#006699;
font-weight:100;
border-bottom:1px dotted #ccc;
}
h3 {
padding:0px;
margin:0px;
color:#006699;
color:#006699;
}
html,body {
padding:0px;
margin:0px;
background-image:url(main-bg.gif);
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#container {
margin: 0 auto;
width: 922px;
}
#header {
width: 922px;
float: left;
height: 130px;
margin: 10px 0px 5px 0px;
}
#leftcolumn {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background-image:url(col_gradient.jpg);
margin: 0px 5px 5px 0px;
padding: 10px;
height: 900px;
width: 195px;
float: left;
}
#welcome {
text-align:center;
padding:5px;
background:#EAEAEA;
color:#006699;
}
#latest_tuts {
color:#006699;
}
#latest_tuts h3 {
border-bottom:1px dotted #ccc;
}
#who_online h3 {
border-bottom:1px dotted #ccc;
}
#search {
position:absolute;
margin-top:0px;
margin-left:0px;
}
#newsletter {
position:absolute;
margin-top:0px;
margin-left:0px;
}
#welcome a:link {
color:#0066CC;
}
#content {
color: #333;
margin: 0px 5px 5px 0px;
padding: 10px;
width: 456px;
display: inline;
float:left;
background-image:url(content_gradient.jpg);
}
#content a:link, a:visited {
color:#0066CC;
}
#rightcolumn {
color: #333;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background-image:url(col_gradient.jpg);
margin: 0px 0px 5px 0px;
padding: 10px;
height: 900px;
width: 196px;
float: left;
}
#footer {
text-align:center;
width: 900px;
clear: both;
color: #878787;
border: 1px solid #ccc;
margin: 0px 0px 10px 0px;
padding: 10px;
height:35px;
font-size:12px;
background-image:url(footer_gradient.jpg);
}
#footer a:link {
color:#0066CC;
text-decoration:none;
}
#footer a:visited {
color:#0066CC;
text-decoration:none;
}
#footer a:hover {
color:#006699;
}
#menu3 {
width: 200px;
border:1px solid #BCD2E6;
border-style: solid solid none solid;
}
#menu3 li a {
height: 24px;
text-decoration: none;
}
#menu3 li a:link, #menu3 li a:visited {
color: #8BADCF;
display: block;
background: url(menu3.gif);
padding: 8px 0 0 10px;
}
#menu3 li a:hover {
color: #627EB7;
background: url(menu3.gif) 0 -32px;
padding: 8px 0 0 10px;
}
#menu3 li {
list-style:none;
}
#menu3 ul {
padding-top:0px;
margin-top:0px;
padding-left:0px;
margin-left:0px;
margin-bottom:0px;
}
#description {
font-size:10px;
color:#006699;
}
Using tables, I can evenly space the cells apart. For instance: Code: <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th align="center"> qwerty1 </td>
<th align="center"> qwerty2 </td>
<th align="center"> qwerty3 </td>
</tr>
</table>
There's nothing terribly wrong with this - it works! But I'm trying to switch to using CSS whereever possible. How would you achieve the same effect using stylesheets? Alright, here's the situtation: Imagine a bunch of random DIVs... let's say a hundred. These DIVs come in three different widths, but their heights are entirely variable. Now, let's give these DIVs margins of 5px each. I want all of the DIVs to show up, in their respective dimensions, in order as much as possible... but I want them all 10px apart from all sides... including top and bottom. How would I achieve this effect? I tried floats, but that doesn't quite work for EDIT* - vertical spacing in all cases. Basically, if a smaller DIV can fit in an empty space, I want it to go there, so everything--despite the randomness--is uniformly spaced. Is this possible using CSS? Maybe with Javascript? I'm in the early stages of creating a Web site without tables, and am stuck on what appears to be a minor display issue in Firefox/IE. Please check out the following test page in both browsers and note the spacing issue between the navigation boxes on the left. IE displays about how I want them look. Firefox, on the other hand, blows the navigation boxes wide apart. I've been dinking around long enough and would love some advice, before I go and start using tables again, and I know how CSS purists would love that. Ha ha. (URL address blocked: See forum rules)/testsite/index.htm WELL, AS IT TURNS OUT, I AM UNABLE TO POST A LINK TO THE PAGE. WHY ON EARTH WOULD A HELP FORUM NOT ALLOW ME TO POST A LINK TO THE PAGE IN QUESTION? (That makes two questions I have now.) Well, despite extremely restrictive rule, I would very much appreciate any help you can provide. - Scott Here's the CSS, which is probably useless now without the page: Code: #bannerback {
background-image: url('images/bannerback.gif');
background-repeat: repeat-x;
}
body {
margin: 0px;
background-repeat: repeat-y;
background-image: url('images/leftbar.gif');
background-position: left;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-weight: bolder;
color: #FFFFFF;
vertical-align: middle;
text-indent: 27px;
margin-top: 12px;
}
#content {
width:990px;
}
#expertise, #talent, #projects {
width: 230px;
margin-left: 11px;
float: left;
background-color: #E8E8E8;
background-image: url('images/navheadback.gif');
background-repeat: repeat-x;
position: absolute;
}
#expertise {
margin-top: 10px;
}
#talent {
margin-top: 235px;
}
#projects {
margin-top: 419px;
}
#content-main {
width: 730px;
margin-left: 260px;
padding-top: 10px;
position: absolute;
}
a.nav {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #000000;
text-decoration: underline;
}
p.nav {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #000000;
text-decoration: underline;
padding-left: 27px;
margin-bottom: -4%;
}
Here's the page code. Gee, sure would like to give you a link. 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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled 1</title> <link rel="stylesheet" type="text/css" href="transtyles.css" /> <style type="text/css"> </style> </head> <body> <div id="bannerback"> <img alt="" src="images/banner.gif" width="990" height="116" /></div> <div id="content"> <div id="expertise"> <h3>Our Expertise</h3> <p class="nav"><a class="nav">Traffic Engineering</a></p> <p class="nav"><a class="nav">ITS</a></p> <p class="nav"><a class="nav">Transportation Planning & Environmental Documentation</a></p> <p class="nav"><a class="nav">GIS/CAD</a></p> <p class="nav"><a class="nav">Surveying, Mapping & PLATS</a></p> <p class="nav"><a class="nav">Transportation Design</a></p><br/> </div> <div id="content-main"> <p>Nullam sagittis velit porttitor mi mollis nec varius leo molestie. Phasellus pretium pretium bibendum. Praesent pharetra ante et nibh facilisis pharetra. Phasellus a sem enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus commodo iaculis neque, sed cursus massa consequat in. Ut elementum, risus in dictum condimentum, enim elit luctus justo, eget malesuada augue ante luctus velit. Quisque lobortis sapien sed dui porta quis adipiscing magna luctus. Suspendisse nunc justo, ultrices et tristique et, dapibus eu neque. Praesent vel orci neque. Integer magna nunc, luctus vitae lobortis in, vulputate id eros. Cras sem nunc, suscipit a rutrum vitae, consectetur in tortor. Sed est metus, dapibus a sodales semper, cursus in augue. Aenean non leo eros, quis consequat nisi. Nam massa orci, commodo et pharetra quis, convallis in tortor. Fusce imperdiet mi nisi.</p> <p>Nullam sagittis velit porttitor mi mollis nec varius leo molestie. Phasellus pretium pretium bibendum. Praesent pharetra ante et nibh facilisis pharetra. Phasellus a sem enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus commodo iaculis neque, sed cursus massa consequat in. Ut elementum, risus in dictum condimentum, enim elit luctus justo, eget malesuada augue ante luctus velit. Quisque lobortis sapien sed dui porta quis adipiscing magna luctus. Suspendisse nunc justo, ultrices et tristique et, dapibus eu neque. Praesent vel orci neque. Integer magna nunc, luctus vitae lobortis in, vulputate id eros. Cras sem nunc, suscipit a rutrum vitae, consectetur in tortor. Sed est metus, dapibus a sodales semper, cursus in augue. Aenean non leo eros, quis consequat nisi. Nam massa orci, commodo et pharetra quis, convallis in tortor. Fusce imperdiet mi nisi. </p> <p>Nullam sagittis velit porttitor mi mollis nec varius leo molestie. Phasellus pretium pretium bibendum. Praesent pharetra ante et nibh facilisis pharetra. Phasellus a sem enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus commodo iaculis neque, sed cursus massa consequat in. Ut elementum, risus in dictum condimentum, enim elit luctus justo, eget malesuada augue ante luctus velit. Quisque lobortis sapien sed dui porta quis adipiscing magna luctus. Suspendisse nunc justo, ultrices et tristique et, dapibus eu neque. Praesent vel orci neque. Integer magna nunc, luctus vitae lobortis in, vulputate id eros. Cras sem nunc, suscipit a rutrum vitae, consectetur in tortor. Sed est metus, dapibus a sodales semper, cursus in augue. Aenean non leo eros, quis consequat nisi. Nam massa orci, commodo et pharetra quis, convallis in tortor. Fusce imperdiet mi nisi. </p> <p>Nullam sagittis velit porttitor mi mollis nec varius leo molestie. Phasellus pretium pretium bibendum. Praesent pharetra ante et nibh facilisis pharetra. Phasellus a sem enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus commodo iaculis neque, sed cursus massa consequat in. Ut elementum, risus in dictum condimentum, enim elit luctus justo, eget malesuada augue ante luctus velit. Quisque lobortis sapien sed dui porta quis adipiscing magna luctus. Suspendisse nunc justo, ultrices et tristique et, dapibus eu neque. Praesent vel orci neque. Integer magna nunc, luctus vitae lobortis in, vulputate id eros. Cras sem nunc, suscipit a rutrum vitae, consectetur in tortor. Sed est metus, dapibus a sodales semper, cursus in augue. Aenean non leo eros, quis consequat nisi. Nam massa orci, commodo et pharetra quis, convallis in tortor. Fusce imperdiet mi nisi. </p> <p> </p> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> content<br /> content<br /> <br /> adsfdasfdas<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </div> <div id="talent"> <h3>Our Talent</h3> <p class="nav"><a class="nav">Experience</a></p> <p class="nav"><a class="nav">Meet the Staff</a></p> <p class="nav"><a class="nav">Careers</a></p> <p class="nav"><a class="nav">Awards / DBE Certification</a></p> <p class="nav"><a class="nav">Contact Us</a></p> <br /> </div> <div id="projects"> <h3>Our Projects</h3> <p class="nav"><a class="nav">Project Map</a></p> <p class="nav"><a class="nav">Wisconsin</a></p> <p class="nav"><a class="nav">Illinois</a></p> <p class="nav"><a class="nav">Minnesota</a></p> <p class="nav"><a class="nav">National</a></p><br/> </div> </div> <div id="footer"></div> </body> </html> So I am using tables for a specific part of a website and I'm running into a problem with how IE vs Everything else is treating the CSS for it. I have the padding and margins set to 0 for the table/cells/rows etc and this works perfectly in everything BUT.......wait for it...........wait for it........ IE where it is putting what I believe to be a 2px cellpadding which wouldn't matter except that the background color and border are different colors so it looks bad. Now the only way I've been able to solve this is by adding a 'cellspacing="0" cellpadding="0" in the HTML of the table...but this then messes things up for every OTHER browser..... Anyway around this seeing as how apparently css has no 'cellpadding or cellspacing' attribute? This is a simplification of my problem, but in general: I have one row in a table whose width is defined by the width of the image in the <td> tag. On the second row, I have two <td>'s and the first one has a width=10 and the second one is supposed to dynamically fill whatever is left between 10px and the width of the image. Unfortunatly, the first <td> on the second row, with a width declared to 10px expands across the entire bottom of just leaving a 1px sliver of the <td>with no width declared. So it looks like this: PHP Code: ----------------- | | | Image | | | ----------------- |________________|| <10px td> <other td> It should look like this: PHP Code: ----------------- | | | Image | | | ----------------- |__|______________| <10px td> <other td> Here is my code: PHP Code: <table> <tr> <td colspan=2><img src="flountt.jpg" style="border: 1px solid #FF0000;"></td> </tr> <tr> <td width=10 height=10 style="border: 1px solid #FF0000;"></td> <td style="border: 1px solid #00FF00;"></td> </tr> </table> Is there an alternative way to use <div>'s and CSS to produce the desired results? Hello folks. I am normally pretty handy with the CSS. I develop my sites in the latest of Firefox then test in IE 6.0. My latest site looks like gargabe in IE 6. Looks 99.99% perfect in Firefox. Here are the two problems: 1) I can't get the sliced image on the right lined up in IE 6 for the life of me! 2) On the front page, I have 2 tables underneath a paragraph. I don't like tables but for displaying 37 small icons... you get the idea. Anyway when you first go to the home page in IE the tables look okay. But if you navigate away then back, the icons go crazy! Please help! http://www.TattooSeek.info Hi Folks, I'm still struggling to make table-less pages - CSS layout is NOT easy at all, even with a good book. This page however has a table for displaying images in amongst text [it's in the Content Management System - I have to work with it]. http://www.johniwhite.com/tests/indextest.html The trouble is: the table is longer than its container DIV at some browser dimensions, so it breaks out of the bottom of it - overlapping it, ALSO: pushing the following DIV out of the way. I don't know either (A): Why the table doesn't just stay in the containing DIV or (B): why the containing DIV doesn't stretch with it. Can anyone help? Thanks John Hi - I have been using xhtml coding for most of my web projects this year, thankfully they have been pretty simple. I have a new one, the client has requested it be xhtml compliant. I was not consulted during the design phase, so i have been give the task of programming a very table centric layout. Can all designs be rendered with div's instead of tables? I have a diagram of the structure of a template page and I am not sure how to go about tackling it. Do i start with each individual section? I just need a little push and confimation the below layout is doable in css/divs... Thanks Hi, I'm developing a database driven site in php, which outputs results in a table. The problem I'm having is with styling the table. I need each row to have a thin a bottom-border to seperate them, but when I use tr { bottom-border: 1px solid #dedede; } nothing happens - no border, nothing. I can get the border to appear if I give the tr a display of block, but that breaks the table and it appears like an ordinary div. Is there any way I can use divs to 'fake' a table so it's easier to style. Can I set the main div's display to table and each row div to table-row etc. to get them to display right. The reason I need the table is that the site needs to be uber accessible, so I need screen readers to read the data as it would a table. Can anyone enlighten me? Thanks. Hey there, I'm pretty new to CSS, but am learning more everyday so bare with me. I recently went over to www.csscreator.com and used their Layout creator to create a page with a header, left column, main column, right column, and footer. This whole thing is to be centered in the browser. That went all well and good, but When I tried to put my main Header and Nav Menu in the Header Div, the entire thing gets garbled up in IE and FF. More specifically, the menu buttons and spacer gifs all become misaligned. Should I go about this some other way or is there anything im just plain missing? Thanks a lot... Hi, this is my first effort (which will be obvious when you look at it) at using divs and css instead of tables .. http: //pastie.org/935502 Two things that I have been unable to do at the moment are to make the text "Photographs by award winning film sound editor Michael Redbourn" a few pixel lower, and, I tried centering the container that holds the text, "Most pictures are available for sale as Cards, Matted Prints, Laminated Prints, Mounted Prints, Canvas Prints and Framed Prints" by using a spacer but it doesn't display correctly. The two images are here, http: //i42.tinypic.com/kb60q9.jpg and here, http: //i42.tinypic.com/20zqsmr.gif I'm sure you'll know how to replace the adsense banner with a placeholder. Any help with the above two things and also any criticm and hints would be much appreciated. Thanks, Michael Hi all, I know there are certain tricks to vertically center texts or images in a div area. And I have read somewhere there are plans to avoid current complexity compared with tables. For example, provided I use same CSS... Code:
div,table{
width: 250px;
height: 100px;
border: 1px solid red;
text-align: center;
}
...we optain well vertically centered text in this table... Code: <table> <tr><td>this IS vertically centered</td></tr> </table> ...but not in this div based one... Code: <div>this IS NOT vertically centered</div> I ask, do you know an easy way to acomplish the same we get with tables? Thanks! The objective: Produce page content which behaves as if it were 'tabbed' as seen on many websites and programmes. I have done this many times before, but only with absolute positioning from the document base level. This time, the div containing the information to be tabbed has to appear relative (for re-sizability) and contain the tab divs within it. I am using a short javascript to change the z-index of the divs in order to produce the tab effect. The problem: The whole thing works fine, except for: - If I leave the css height off the divs, IE chops the bottom off, and does not allow a scroll. - If I put a height and auto (or scroll) overflow on the divs they display correctly in IE, but disappear in firefox - Until a table contained within one of the divs becomes larger than the stated height. At which point that div (not any of the others) disappears from IE as well. The question: Is this a known bug? If so, what is the work-around? Have I done something dumb? If so, what? The source: source files are available for download (they are quite large, and I don't want to trim them in case something in the trim is the problem. Plus they need to be large to demonstrate the length issue correctly). Text within these examples is copyrighted by various people and is used without permission, for illustrative purposes only. the xhtml page - click through the tabs to see the effect. Add extra rows to the table in the 'dates & prices' tab to see the disappearing problem. the javascript file - the function is at the bottom, 'layer_z_lift'. the css stylesheet - the styles for the tabs are in the middle, commented as tour details tabs. any questions, post and I shall answer. Jz. 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 am presently new at CSS, and I need help with this little problem. Basically, I am creating a design and on Photoshop I have the following.. jerrytavares[dot]com/phpform/ex1.gif Then when I convert it into HTML i have this.. jerrytavares[dot]com/phpform/ex2.gif Now I need help spacing out the checkmark/rss image from the text. What is the best and easiest way to do this with CSS? Thanks, Peter hey guys I am quite new to CSS, so i am hoping someone will be able to enlighten me - i am sure this is one of those "easy to sort out when you know how to work with IE7" problems... Anyway - this page is causing me problems anambar. co. uk/ listings / The page displays fine in Firefox, but in IE7, the Square images for each event are cut off halfway. Seems like they are hidden behind another div layer... Any ideas why? or how this is solved? Any feedback on dodgy CSS / code also welcome - I had loads of problems with the dreaded Operation Aborted in IE7 yesterday with conflicting JS, hence the lightbox code being right at the end of the page, so if anyone knows a cleaner solution or why its happening, i would love to know! Cheers guys Jim Hi guys, I've been struggling with this for some hours now and can't get this to work... I'm no css expert but this is driving me mad... The problem happens in firefox3, in IE7 it displays fine. My code is (copied from firebug): <div id="mydiv" style="margin: 0px; padding: 0px; position: absolute; z-index: 1; opacity: 0.9; left: 763px; top: 143px;"> <div style="border: 1px solid rgb(68, 68, 68); padding: 2px; font-size: 7pt; color: rgb(68, 68, 68); white-space: nowrap; background-color: rgb(255, 255, 255);" id="otherdiv"> Text goes here </div> <div style="position: relative; top: -1px;" id="yetanotherdiv"> <img src="images/bico_w.png" style="margin: 0px; padding: 0px; width: 14px; height: 7px;"/> </div> </div> This is a balloon like tooltip, with a div on top with the text, and a div on the bottom containing the handle image, all wrapped by another nice div. In Firefox, there's space on top and below the image that I can't figure out where it comes from (no space in IE7). If I put a "vertical-align:top" on the image, it sticks to the top div correctly (both IE and firefox), but then I can't get rid of space BELOW the image. Can you help me figure this out? |
|||||||