CSS - Space Added In Firefox Preventing Proper Positioning
There is a big amount of space that shows up in firefox and not IE on a page I am trying to develop.
temporary site <--- fixed. in a state of constant change. The css is layout.css . I have had two people try to design a template in photoshop for me but they are dragging their butts. I decided to just start without them with a simple template. I know there are problems. I probably coded things wrong and not efficient and the image is also too big. It also doesn't validate if anyone checks that(it is because of my transparencies). I really would like to know what is causing the extra space in firefox. If you have comments on other stuff feel free to comment because this is my first attempt at a css template. Also if anyone has an idea for a design feel free to draw something up. Similar Tutorialsi am currently making a page which makes use of some JS that swaps between three div containers by changing the display to hide on all but one... anyhow... i here is the page.. if you click on "best reviews" it adds a huge gap but if then click on "worst reviews" the gap disapears clicking back onto "best reviews" the gap is gone too... it is very tricky... i've used this JS before, and it worked fine... and it this page looks and acts fine in IE6... i just thing the space of one of the containers is remaning, even tough it is being hidden... here is the page... i've put a 1px dashed #900 border around all divs so as to make it easier to debug... Mini Catalog Hi, Can anyone please explain why the more text I add to the main content area 'full-size' div.... the more spacing gets added below it. Is there a way to stop this? example herel Code: /*begin normal CSS ----------------------------------------------------*/ body { text-align: center; background: #362f25; color: #333; font: 12px "Trebuchet MS", Arial, Helvetica, sans-serif; } #wrap { margin: 0 auto; width: 960px; text-align: left; background: #f8f4f2 url(images/bg-wrap.gif) repeat-y 0px 0px; padding-bottom: 5px; } /*classes ----------------------------------------------------*/ .full-size { margin-left:20px; margin-top:20px; width: 700px; font: 12px; position:relative; left:180px; top:-370px; } /*header ----------------------------------------------------*/ #header { height: 50px; background: #362f25; color: #d2cccb; font: 15px "Palatino Linotype", Arial, Helvetica, sans-serif; } /* left nav menu ----------------------------------------------------*/ #navcontainer { width: 170px; border-right: 1px solid #000; padding: 0 0 0 0; margin-bottom: 10px; font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; background-color: #90bade; color: #333; position:relative; left:0px; top:-30px; } #navcontainer ul { list-style: none; margin: 0; padding: 0; border: none; } #navcontainer li { border-bottom: 1px solid #90bade; margin: 0; } #navcontainer li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 15px solid #006865; border-right: 10px solid #203654; background-color: #2175bc; color: #fff; text-decoration: none; width: 100%; } html>body #navcontainer li a { width: auto; } #navcontainer li a:hover { border-left: 15px solid #203654; border-right: 10px solid #006865; background-color: #2586d7; color: #fff; } I know it has to be a padding or margin issue, but I cannot figure out where it is coming from. I have spent several days going back to this and trying to look at it with fresh eyes with no luck. I am sure it will be a 'duh' type of thing when I get a solution. Here is the webpage: http://www.palmettobaydesigns.com/new/layout.html I am getting extra space of about 10px it looks like between the white rounded top image that makes the top of my box and the div below it called .box - in ff4. In IE 8 I am getting about 1px space below the box. Thanks in advance! I've been searching high and low, and tried every idea I can think of to fix this. It's really hard to explain what it is I'm looking for, but I'm going to try to be as clear as possible. I've been working on my blog: http://tkthebadomen.blogspot.com/ And I almost got it to the point I want, except I've hit a brick wall with this one. I have the background fixed, and a layer of buildings that scrolls with the page. The problem is filling the area below the scrollable buildings with black. I'm not going to go into detail about all the things I've tried. But if I make a section black, it only fills the screen once, so if I scroll, the next page shows through; and then when I look at just a single post, it makes the bottom of the page go down past the footer. So my question is: Is there a way to fill the background with a color, from a certain point on the page to the end of the content? Here's the css I currently have for the front scrolling sections: Code: div.front { background-image:url(http://www.tksheppard.com/blog/front.png); background-repeat: no-repeat; background-attachment: scroll; position:absolute; width:1284px; height:100%; top: 500px; left: 0px; bottom: 0px; } div.middle { background-color:#000000; color:#000000; position:absolute; overflow:hidden; width:1284px; height:100%; top: 150%; left:0px; bottom:0px; } If you need anymore code posted, let me know. I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it. The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox? You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html). css Code: Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; } #main-nav html4strict Code: Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div> <div id="main-nav"> The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers. Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem. Hi All- For some reason when I use a bunch of DIV tags to position elements on my page, the page keeps getting longer and longer with white space. Does anyone know what will remedy this extra whitespace? Thanks, infinity003 Hi, I have centered a table horizontally and vertically. To do this I put a table inside a table. so i don't want to use absolute positioning, as the position would change if the window size changes... My problem, with relative positioning, is that I can't figure out how to put my "some text" over an image -which is inside the table cell- in the exact position i want, without "collateral damage"... The collateral damage is that if I put the <div> tag inside the table (see example 1), it will occupy the space and as result the image wll be moved down and layout won't be centered vertically anymore... If I put the <div> tag outside the table (see example 2), as result there will be more occupied space at the top, and the layout isn't centered anymore... Here you can see the code i used for both example 1 and example 2: example 1: <html> <head> <title>relative problem - example 1</title> </head> <body> <table width="100%" height=100% border="1"> <tr> <td width="100%" height="100%" align="center" valign="middle"> <table border=1> <tr> <td width="640" height="480"> <div id="Layer1" style="position:relative; left:50px; top:50px; width:50px; height:200px; text-align:left; overflow: auto; z-index:1;"> some text some text some text some text some text some text some text some text some text some text some text some text </div> <img src="http://www.pbworks.net/images/help.jpg" width="640" height="480"> </td> </tr> </table> </td> </tr> </table> </body> </html> example 2: <html> <head> <title>relative problem - example 2</title> </head> <body> <table width="100%" height=100% border="1"> <tr> <td width="100%" height="100%" align="center" valign="middle"> <div id="Layer1" style="position:relative; left:0px; top:200px; width:50px; height:200px; text-align:left; overflow: auto; z-index:1;"> some text some text some text some text some text some text some text some text some text some text some text some text </div> <table border=1> <tr> <td width="640" height="480"> <img src="http://www.pbworks.net/images/help.jpg" width="640" height="480"> </td> </tr> </table> </td> </tr> </table> </body> </html> thx for letting me know... Hi Ya'll, I am currently working on a site and am having a few issues with Firefox. One of the issues is a big space that appears in a product display page between the first and second product. The spacing between the rest of the products is always correct. Since this page is generated from a database I can't understand why the gap only appears in that place and not anywhere else. The code for each block is the same: http://www.cdrom-businesscard.co.uk...?category_id=19 Thanks for any pointers! I created what I thought was a simple layout using css, but I have some odd space above my layout in Firefox that I can't get rid of. The background peeks through above the text at the top so it's easy to see: http://sundaysermons.heikou.net/brickaday/ As you can see, the layout should be flush against the top of the browser. I renders correctly in IE but not in Firefox. I checked my code and both the html and css validate so I'm assuming there's something wrong with my css: Code: body { margin: 0px; padding: 0px; font-family: Arial, Verdana, sans-serif; font-size:12px; color: #000000; background: #FFFFFF url(images/bg.gif) repeat-y left; } #heading { height: 44px; } #heading h1 { font: bold 18px "Trebuchet MS", Tahoma, Arial, "Microsoft Sans Serif"; color: #E77F04; text-align: left; } #banner { height: 73px; background-color: #E29722; border-top: 1px solid #9D3E1F; border-bottom: 1px solid #9D3E1F; } #tagline{ height: 17px; background-color: #F0DCA2; border-bottom: 1px solid #9D3E1F; } #leftcontent{ width: 210px; background-color: #FCF1D0; padding-top: 20px; } #leftcontent ul { margin-left:0; padding-left:0; display:inline; } #leftcontent ul li { margin-left: 0; list-style: none; padding-left:10px; line-height:26px; } #rightcontent{ width: 470px; float:left; } Any help you guys could give me would be greatly appreciated. Thanks. I dont understand why the textboxes at the following site have no spaces in between unlike with ie. http://www.refinethetaste.com/html/?Section=myaccount&SubSection=signup Hello. I have just finished migrating my vbulletin template to XHTML 1.1 strict and it validates just fine. The css shows 2 errors but they are known and have no effect on the display (effective for windows resizing). My question is why do I have ~500px of white space to the site of my http://forums.xedge.net ? I did a * { border: 1px solid red; } to see where the space lined up in the scheme of things and it looks like it's part of the main div (siteWrap). Code: /* *** This wrapper sizes the appearance of the entire site *** */ div#siteWrap { width: 95%; min-width: 770px; margin-left: auto; margin-right: auto; background-color: #606A8C; } siteWrap sets the page to render at 95% of the current window. I also have a div for contents which gives 15px to the left and right to give spacing for all following elements. In researching this problem I have read that percentage widths sometimes can be problematic with static paddings, but it was working at one time. I just can't figure out what I did wrong. The white space only appears in firefox, in ie and opera the site renders perfectly. Thanks. First of all here is the page: http://xander6669.com/ It looks like I want in IE, but there is a still a white space on top of the page with firefox/opera. I've tried hundreds of things but I can't seem to be able to fix it. Anyone could give me a hand? Here is the HTML and CSS: HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/><title>Xander6669</title> <link rel="stylesheet" href="body/body.css"/></head><body> <img src="images/border1.gif" alt="" height="5" width=779"/></body></html> CSS: Code: body { margin: 0px; padding: 0px; } Well from everything I can read this has something to do with collapsing margins; however, I have maintained a 0 margin, padding, and border throughout the document and just now does this space problem appear. If you pull up the page in IE I have a black bar directly underneath my nav bar. In Firefox that black bar appears about 10 pixels or so below the nav bar. What gives? I have tried everything and nothing works. If anyone can please look at what I have so far I would appreciate it. Thanks again. The CSS is in the HTML doc (no seperate CSS file yet) Link: http://trinitylifebaptistchurch.org/test/index3 Quick question, can someone tell me why do i get a white space on the right side of the screen http://www.impulsanl.org/testing.htm on IE 7 and IE 8? It seems to work ok with firefox and google chrome. (all screen). CSS code: Code: #extraDiv1 { background: url(images/header1.png) repeat-x; position: absolute; top: 0px; left: 0px; width: 100%; height: 100px; margin: 0; padding: 0; } HTML Quote: <div id="extraDiv1"></div> thanks. Hey everyone, I am just touching up an old design I made, and I just noticed that Firefox has a weird white-space next to the top menu. Not sure what is causing it, but it is there. Here is a screenshot of what is happening in Firefox. Also, in IE, the container doesn't extend past the bottom menu. Here is a screenshot of what is happening in IE. So far I am just testing in Firefox 2.0.0.11 and IE7. Here is my code: html4strict Code: Original - html4strict 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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title></title> <style type="text/css">/* <![CDATA[ */ * { padding: 0; margin: 0; } body { background-color: #6AB2DA; color: #000000; text-align: center; font-size: 13px; font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif; /* Thank you, Kravvitz */ } a { color: #6AB2DA; } a:focus { outline: 0 none; } #container { margin: 0 auto; text-align: justify; width: 50%; } #page { background-color: #FFFFFF; } #header { background-image: url( http://img443.imageshack.us/img443/8114/bg1bp4.jpg ); background-position: bottom left; height: 120px; width: 100%; } #header span { padding-left: 150px; padding-top: 50px; font-size: 21px; font-weight: bold; letter-spacing: -0.1em; color: #666666; display: block; } #menu { background-color: #6DC3DE; width: 100%; } #menu li { float: left; padding-top: 10px; padding-bottom: 11px; list-style-type: none; } #menu a { background-color: #6DC3DE; padding: 10px 20px; boreder: 2px solid transparent; color: #000000; } #news { clear: both; margin-top: 34px; overflow: auto; padding: 15px; height: 100px; border-bottom: 1px solid #0AA; } #news h1 { color: #6DC3DE; font-size: 21px; } #content { margin-top: 15px; padding: 15px; } #content h2 { padding-top: 10px; float: left; color: #6DC3DE; padding-right: 25px; font-size: 31px; border-right: 3px solid #6DC3DE; } #content .info { padding-top: 10px; padding-left: 25px; float: left; font-size: 11px; height: 31px; } #content p { text-indent: 45px; clear: both; border-bottom: 1px dotted #6DC3DE; padding-top: 10px; padding-bottom: 10px; } #bottom { border-top: 1px solid #6DC3DE; margin-top: 10px; padding: 5px; } #bottom ul#one { float: left; } #bottom ul#two { float: right; } #bottom li { padding-top: 10px; padding-bottom: 11px; list-style-type: none; display: block; } #bottom a { background-color: #6DC3DE; padding: 10px 20px; boreder: 2px solid transparent; color: #000000; display: block; width: 250px; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ /* ]]> */ </style> </head> <body> <div id="container"> <div id="page"> <div id="header"><span>i.love.summer</span></div> <div id="menu"> <ul> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> </ul> </div> <div id="news"> <h1>welcome</h1> Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. </div> <div id="content"> <h2>I rock</h2> <div class="info"> author: BlackNine<br /> date: Today<br /> cat: eventually, right now I want a horse </div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras felis. Aliquam erat volutpat. Nunc sapien. Nunc ante felis, convallis eget, viverra sit amet, porttitor mollis, odio. Maecenas ut lorem sed eros pharetra euismod. Fusce quis est ac erat posuere elementum. Praesent id libero. Phasellus aliquet. Suspendisse pharetra sapien vitae mi. Suspendisse enim lectus, condimentum in, dictum sed, convallis in, sapien. Pellentesque mollis, quam sit amet tincidunt lacinia, urna erat interdum diam, vel aliquam enim nisl vitae velit. Nam sagittis tristique ipsum. Sed auctor eros non tortor. Vestibulum eros mauris, ultrices in, pulvinar ut, placerat in, metus. Nullam est odio, ullamcorper vitae, consequat a, laoreet non, sem. Mauris porttitor diam vel nisl. Curabitur vitae mauris a sem ornare congue. Morbi eu nibh sed enim molestie aliquet. Mauris auctor auctor mi. Nunc ultricies sem eget ipsum. Maecenas risus. Mauris pharetra, quam at luctus nonummy, diam magna porta urna, in fermentum massa enim vel augue. Morbi elit. Quisque posuere tincidunt ipsum. Integer vel metus ac risus venenatis vehicula. Duis lacus. In pellentesque diam at dui. Nunc feugiat elementum nisi. Phasellus auctor viverra sem. Pellentesque erat. Pellentesque mauris velit, posuere a, facilisis ac, gravida in, augue. Vestibulum at sem eu nulla nonummy ultricies. Ut a dui. Aenean sem. Etiam adipiscing, mauris nec mollis congue, quam dolor pretium nisi, vitae adipiscing urna diam a velit. In pellentesque massa vel massa. </p> <h2>I rock</h2> <div class="info"> author: BlackNine<br /> date: Today<br /> cat: eventually, right now I want a horse </div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras felis. Aliquam erat volutpat. Nunc sapien. Nunc ante felis, convallis eget, viverra sit amet, porttitor mollis, odio. Maecenas ut lorem sed eros pharetra euismod. Fusce quis est ac erat posuere elementum. Praesent id libero. Phasellus aliquet. Suspendisse pharetra sapien vitae mi. Suspendisse enim lectus, condimentum in, dictum sed, convallis in, sapien. Pellentesque mollis, quam sit amet tincidunt lacinia, urna erat interdum diam, vel aliquam enim nisl vitae velit. Nam sagittis tristique ipsum. Sed auctor eros non tortor. Vestibulum eros mauris, ultrices in, pulvinar ut, placerat in, metus. Nullam est odio, ullamcorper vitae, consequat a, laoreet non, sem. Mauris porttitor diam vel nisl. Curabitur vitae mauris a sem ornare congue. Morbi eu nibh sed enim molestie aliquet. Mauris auctor auctor mi. Nunc ultricies sem eget ipsum. Maecenas risus. Mauris pharetra, quam at luctus nonummy, diam magna porta urna, in fermentum massa enim vel augue. Morbi elit. Quisque posuere tincidunt ipsum. Integer vel metus ac risus venenatis vehicula. Duis lacus. In pellentesque diam at dui. Nunc feugiat elementum nisi. Phasellus auctor viverra sem. Pellentesque erat. Pellentesque mauris velit, posuere a, facilisis ac, gravida in, augue. Vestibulum at sem eu nulla nonummy ultricies. Ut a dui. Aenean sem. Etiam adipiscing, mauris nec mollis congue, quam dolor pretium nisi, vitae adipiscing urna diam a velit. In pellentesque massa vel massa. </p> </div> <div id="bottom"> <ul id="one"> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> </ul> <ul id="two"> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> </ul> </div> <div class="clearfix"></div> </div> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Any suggestions would be great. The Page The problem is the div with the controls in it (wheel: <dropdown>, etc.). I need it to be bumped up against the bottom of the large image above it, and it's working fine in Firefox. Unfortunately, IE is bumping it downward to it wraps instead of of nestling into position. The css for it: .controls { clear: both; width: 660px; text-align: center; } And the instructions box it's bumping up against: #instructions { float: left; width: 300px; display: inline; margin-left: 5px; } The problem has been there for a while, but wasn't really noticeable until I added the default text for counters section, which pushed the rest off the bottom of the screen (at 1280 x 1024). Any help would be greatly appreciated. Take a look at the Firefox positioning and the disastrous positioning in IE and let me know what I need to do fix the div tag: Code: function areYouSure(){ var newDiv = document.createElement("div"); newDiv.setAttribute('style', 'position: absolute; left: 200px; top: 250px; text-align: center; width: 500px; height: 120px; z-index: 3; background-color: #999999;'); newDiv.setAttribute('id', 'add_to_db'); newDiv.innerHTML = "<div style='float: left; margin: 10px 10px 10px 10px;width: 480px; height: 100px; background-color: #D2C5A0;'>Are you sure you want to add it to the database?<br /><span style='position: absolute; left: 200px; top: 50px; text-align: center;'><input type='button' value='Yes' style='float:left; text-align: center; margin: 5px 5px 5px 5px; background-color: #4C5454; color: #FFFFFF; font-weight: bold; font-size: 12px; border-color: #98A9A9;' onClick='addToDb();' /><a href='javascript: cancelAddToDb();'><span style='float:left; text-align: center; margin: 5px 5px 5px 5px; background-color: #4C5454; color: #FFFFFF; font-weight: bold; font-size: 12px; border-color: #98A9A9; width: 60px; height: 20px; display: block;'>Cancel</span></a></span></div>"; // And then inject it: document.body.appendChild(newDiv); } function cancelAddToDb(){ var olddiv = document.getElementById('add_to_db'); if (olddiv && olddiv.parentNode && olddiv.parentNode.removeChild){ olddiv.parentNode.removeChild(olddiv); } } For some reason the table isn't being positioned properly in firefox, but it is in IE. The attribute top:15% seems to not be used in firefox, does anyone know if I should be doing it another way? Here is my css: Code: div.leftBorder { position:absolute; height:100%; width:15%; background-color:#DDDDDD; } p.imgText{ font-size:18px; position:absolute; left:1%; top:1%; color:#CC0000; } table.menuTable{ position:relative; top:15%; } Here is the html: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="specs.css"> <title></title> </head> <body> <div class="leftBorder"></div> <p class="imgText">MEDITECH Interface Specifications</p> <center> <table class="menuTable" cellspacing=0> <!-- Spec number menu Title --> <tr> <th class="menuTitle">Spec. Number</th> <th class="menuTitle">Description</th> </tr> <!-- Spec number menu --> <tr> <td class="menuSpec"><a href=".\R404.htm" target="iframe">R404</a></td> <td class="menuDesc">MEDITECH MAGIC C/S Admissions System to Other Vendor Ancillary System</td> </tr> <tr> <td class="menuSpec"><a href=".\R469.htm" target="iframe">R469</a></td> <td class="menuDesc">EDI Integration: ANSI Formats 270 and 271 for Insurance Eligibility </tr> <tr> <td class="menuSpec"><a href=".\R948.htm" target="iframe">R948</a></td> <td class="menuDesc">MEDITECH MAGIC C/S ITS Orders to Other Vendor Image Viewing System</td> </tr> <tr> <td class="menuSpec"><a href=".\R949.htm" target="iframe">R949</a></td> <td class="menuDesc">MEDITECH MAGIC C/S ITS Reports to Other Vendor Image Viewing System</td> </tr> <tr> <td class="menuSpec"><a href=".\R953.htm" target="iframe">R953</a></td> <td class="menuDesc">Other Vendor Image Status Updates to MEDITECH ITS Application</td> </tr> </table> <iframe name="iframe" frameborder=0 marginwidth=10 width=70 height=70></iframe> </center> </body> </html> http://www.iusedtoloveher.com/wheelofgod/ I'm trying to move up the right-side box. I'm using Firefox but it's the same in IE7. This is REALLY basic and annoying the hell out of me. http://www.magikwebs.co.uk/chromeborder/ This looks fine in Firefox, but in IE there is a small gap between the images in the top div and the one in the bottom. I've tried styling the divs to remove padding, margins etc but to not avail. Can anyone tell me how to fix this for stupid IE? Thanks, John. |