CSS - Div's Not Sitting Flush In Ie
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; } Similar TutorialsI have a div that should be sat at the bottom of its containing div (absolute positioned, bottom: 0, right 0) and it does so in Firefox, but in IE it is raised by about 20px or so. Any help to iron this out would be great. The page and its effects can be seen at www.prioritypie.f2s.com/KSA/KSA6/index.htm and the css at www.prioritypie.f2s.com/KSA/KSA6/styles/KSA6style.css It's the "menuContainer" div which isn't sitting right, nested in the "header" div. Many thanks for any help i have a two div tags but the upermost tag sits outside the boundary of the one below and the page seems to be over stretched in IE7 the page address is www.ftpimage.com does anyone have any suggestions my css is as follows Code: body { margin: 0px; background: url(../img/top_bg.gif); background-repeat: repeat-x; font-family: Verdana, Arial, sans-serif; font-size: "15"; } p { line-height: 50px; margin: 11px 0 10px 0; padding: 0px; } h2 { color: #9f9f9f; margin:0px; padding:0px; font-size: 15px; } ul { font-size: 10px; margin:0; padding:0; list-style-image: url(../img/bullet.gif); } a { color: #93B300; } a:hover { text-decoration: none; } blockquote{ background: #F7FDE3; color: #606060; padding: 0px; } /**** Main Container ***/ #wrap { margin-left: 10px; margin-right: auto; width: 640px; } /**** Top ***/ #top { width: 155%; height:85px; color: #fff; background: #000 url(../img/top_bg.gif); overflow:hidden; } #top h2 { color: #87CEFA; letter-spacing: 3px; font-size: 2.4em; font-weight: normal; position: relative; margin: 0px; top: 33px; display: block; float: left; background: url(../img/bg_t.gif) no-repeat; padding-left: 8px; } #top h2 a { color: white; text-decoration: none; } #top h2 a:hover { color: #93B300; } #page { margin-right: 20px; max-width: 10px } /**** Main Menu ***/ #menu { display: block; float:right; } #menu ul { margin: 0; list-style: none; } #menu li { display: block; float: left; white-space: nowrap; } #menu li a { display: block; padding: 20px 10px 12px 20px; text-decoration: none; color: #fff; font-weight: bold; } * html #menu a {width:1%;} #menu li a:hover { background: url(../img/bg_menu.gif); } #menu li a.current { letter-spacing: 1px; color: gray; background: url(../img/bg_menu.gif); } #menu li a.current:hover { color: #fff; } /**** Content Container ***/ #content { width: 65%; margin-top:30px; border: solid 2px black; } #content h2 { margin: 0; padding: 10px 0 10px 0; } /**** Content ***/ #left ul { padding: 15px 0 15px 35px; margin:0; } #left li { margin-bottom:5px; } #left .box { width: 390px; float:left; display: block; margin-left: 20px; display: inline; } /**** Sidebar ***/ #right { width: 315px; float: right; display:block; margin-top: 10px; } #right .box { width: 20em;/*280px*/ background: #87CEFA; border: 1px solid #E1E1E1; padding:10px 10px 55px 10px; float: right; } #right .box h2 { font-size: 3.1em; margin: 0px 0 0px 0; padding:0px 0 5px 0; } #right .box a { margin: 10px 0 10px 0; color: #93B300; font-size: 20px; } #right .box p { margin: 5px 0 10px 0; line-height: 15px; } #right .box ul { padding: 0 0 0px 20px; margin:10px 0 10px 0; } #right .box li { margin-top:5px; } html>body .box { width: auto; min-width: 20em; } #nav{ list-style: none; margin: 2.0em 0; width: 25em; float: right;} #nav li{ padding: 0; margin: 0; } #nav a{ display: block; height: 2.0em; padding: 0.3em 0.3em 0.3em 0.8em; border:solid; border-width:medium; border-bottom: 2px; /*solid #1a1a1a*/ border-top: 2px; /*solid #1a1a1a*/ border-color:Black; color: black; background-color: #87CEFA; font-weight: bold; text-decoration: none; font-size:medium } #nav a:hover{ color: #1a1a1a; background: url(../img/bg_t.gif) no-repeat; background-color: #fff; font-weight: bold; } /**** Clear Div ***/ #clear { display: block; clear: both; width: 100%; height:1px; overflow:hidden; } /**** Footer ***/ #footer { margin: 40px auto 0 auto; text-align: center; border-top: dotted 1px gray; padding: 20px 0 20px 0; width: 70%; } #footer p { margin: 0px; padding: 0; Hi, As you no doubt can tell from the title of this thread I'm a newb. I'm familiar with html but moving into learning css. Self taught, I no doubt have a lot to learn but I'm attempting to alter a template and would really appreciate some assistance. The site is www . inspirationz . info. I look at the site on my main monitor which is a large one and all looks fine. The two boxes in the main content area sit side by side, however when I look at it on my laptop or on a smaller monitor the navigation box on the right appears to sit still to the right, but beneath the box on the left. It didn't appear this way in firefox browser at first on my laptop, only Internet Explorer, but it appears that way on my other pc monitor in firefox so I assume it's likely to be a coding error. I have included some of the stylesheet coding below. Is anyone able to help me work out what's causing this? Thank you in advance. /*================================================================ Typography and links ==================================================================*/ a:link, a:visited { color: #999999; text-decoration: none; } h1 a:link, h1 a:visited, h2 a:link, h2 a:visited, .sidebar_nav a { text-decoration: none; } h1, h2, h3, h4, h5, h6 { font-size: 1em; font-weight: bold; letter-spacing: .16em; } .featured h2 { font-size: 1.8em; font-weight: normal; text-transform: uppercase; } .post_header h2 {font-size: 1.2em; font-weight: normal; margin-top: 10px;} .post_header_page h1, .post_header_single h1 { font-size: 2em; font-weight: normal; text-transform: uppercase; } #footer h3 {margin-bottom: 25px; border-bottom: 1px dotted gray; padding: 5px;} .featured p { font-size: .8em; font-style: italic; } p { margin: 15px 0px; } .post_body_page p, .post_body_single p {margin: 0; padding: 15px 0px;} small { font-size: 0.8em; font-style: italic; } strong {font-weight: bold;} .post_body p { font-size: 1em; margin: 10px 0px; } .more { margin-top: 10px; margin-right: -10px; float: right; } .more_big { margin-top: -20px; margin-right: 20px; float: right; width: 139px; height: 73px; } .footer_comments { float: left; margin-left: 20px; margin-top: 20px; } .comment_count { font-weight: bold; font-size: 1.8em; } .featured_datetime {margin: 6px 0px} .featured_more { float: right; font-weight: bold; margin-right: 20px; text-decoration: underline; } .post_body_page ol, .post_body_single ol { list-style-type: upper-roman; margin: 30px 0px; } .post_body_page ol li, .post_body_single ol li { list-style-type: upper-roman; margin-left: 60px; } .post_body_page ul, .post_body_single ul { list-style-type: upper-roman; margin: 30px 0px; } .post_body_page ul li, .post_body_single ul li { list-style-type: disc; margin-left: 60px; } blockquote { margin: 0px 30px; padding: 20px; border: 1px dotted gray; font-style: italic; } /*================================================================ Site Structure ==================================================================*/ body { font-size:100%; line-height:1.125em; font-family: Georgia, "Times New Roman", Times, serif; background-color: #f0f0f0; background-image: url(images/index/body.jpg); background-repeat: repeat-x; color: #7C7C7C; } #page_wrapper { width: 976px; margin: 0px auto; position: relative; } #featured { height: 230px; margin-right: 3px; margin-bottom: 30px; border: 0px solid red; padding: 15px; background-image: url(images/index/featured.jpg); background-repeat: no-repeat; } #header { width: 667px; margin: auto; height: 109px; background-image: url(images/index/header.jpg); } #container { width: 990px; margin: 140px auto; font-size:0.875em; } #main_content_left_index { width: 600px; float: left; } #main_content_left { width: 600px; float: left; } #main_content_right { width: 343px; float: right; } #footer { height: 250px; padding: 130px 130px 50px 130px; margin: auto; clear: both; background-color: #eeefef; background-image: url(images/index/footer.jpg); background-repeat: repeat-x; background-position: top; } #footer_contents {width: 990px; margin: auto;} #footer_left {width: 460px; margin: auto; float: left;} #footer_right {width: 460px; margin: auto; float: right;} /*================================================================ The columns ==================================================================*/ #first_column { float: left; width: 280px; } #second_column { float: right; width: 280px; } /*================================================================ The posts ==================================================================*/ .posts { background-image: url(images/index/posts.jpg); height: 333px; width: 275px; margin-bottom: 60px; } .post_header { height: 38px; width: 255px; padding: 10px; border: 0px solid red; } .post_body { width: 255px; height: 180px; padding: 10px; overflow: hidden; font-size: .9em; } .post_footer { height: 58px; width: 275px; margin-top: 15px; } .post_header_page, .post_header_single { background-image: url(images/index/PostHeaderPage.jpg); height: 38px; width: 547px; padding: 25px; text-align: center; } .post_body_page, .post_body_single { background-image: url(images/index/PostBodyPage.jpg); background-repeat: repeat-y; width: 547px; padding: 0px 25px; } .post_footer_page, .post_footer_single{ clear: both; background-image: url(images/index/PostFooterPage.jpg); height: 90px; width: 477px; margin-bottom: 20px; padding: 0px 60px; font-style: italic; } .next_prev { border: 0px dotted gray; height: 29px; clear: both; margin-bottom: 20px; background-image: url(images/index/next_prev_posts.jpg); width: 577px; padding-top: 10px; padding-right: 10px; padding-left: 10px; } .next_prev_comments { border: 0px dotted gray; height: 29px; clear: both; margin-bottom: 20px; background-image: url(images/index/next_prev_comments.jpg); width: 535px; padding-top: 10px; padding-right: 10px; padding-left: 10px; } /*================================================================ The sidebars ==================================================================*/ .sidebar_header { background-image: url(images/index/sidebar_header.jpg); height: 91px; width: 340px; } .sidebar_body { display: block; float: left; margin:0 0 0px 0; width: 290px; padding: 25px; background: url(images/index/sidebar_body.jpg) repeat-y; } .sidebar_bottom { background-image: url(images/index/sidebar_footer.jpg); height: 56px; width: 340px; clear: both; margin-bottom: 40px; } /*================================================================ Sidebar Navigation ==================================================================*/ .sidebar_nav ul {} .sidebar_nav li {} .sidebar_nav ul li { display: block; padding: 4px; border-bottom: 1px dotted #515151; font-size: .8em; } .sidebar_nav ul ul li {margin-left: 10px; border-bottom: none; font-size: 1em;} .sidebar_nav ul ul ul li {margin-left: 10px;} .sidebar_nav { margin-bottom: 20px; } .sidebar_nav ul { } .sidebar_nav a {display: block; padding: 4px; } .sidebar_nav a:link, #navlist a:visited { color: #666666; text-decoration: none; } .sidebar_nav a:hover { background: #d8d8d8 } /*================================================================ Top navigation ==================================================================*/ #top_nav_menu { position: absolute; top: 132px; left: 0; width: 950px; } /***** drop menu *****/ #dropmenu, #dropmenu ul { list-style-positionutside; position:relative; line-height:1.5em; z-index:300; width:100%; font-weight: normal; letter-spacing: .18em; margin: 0px 0px 0px 0px; } #dropmenu a { display:block; padding: 5px 15px; text-decoration:none; color: #666666; font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; letter-spacing: .18em; } #dropmenu a:hover { color:#000; text-decoration: underline; } #dropmenu li { float:left; position:relative; } #dropmenu ul { position: absolute; display: none; width: 18em; top: 1.9em; left: 0px; } #dropmenu ul a { background: url(images/index/dropmenu_bg.png) } #dropmenu ul a:hover { } #dropmenu li ul { width:14.1em; margin-top: 4px; } #dropmenu li ul a { width: 250px; height: auto; float: left; } #dropmenu ul ul { top:auto; } #dropmenu li ul ul { left: 265px; margin:0px 0 0 10px; } #dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul { display:none; } #dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul { display:block; } /*================================================================ Categories Navigation ==================================================================*/ #main_categories { margin: auto; height: 20px; width: 976px; margin-bottom: 30px; } /* Horizontal Category List (frontpage) */ ul.horizontal_categories { clear: both; } .horizontal_categories li { display: inline; background: url(images/index/cat_bullet.png) no-repeat right center; font-size: 1.2em; font-weight: bold; letter-spacing: .08em; } .horizontal_categories a { padding: 0px 25px; } .horizontal_categories a:link, .horizontal_categories a:visited { } .horizontal_categories a:hover { } Hi again, i've built an image gallery using an unordered list and php to grab 'em from the database. when you first go to the page (both in FF and IE) the footer bar sits in the middle of the page, until you refresh, then it's fine. same thing happens when you click to enlarge it. Here's the page Here's the CSS; Code: /* SHOWCASE STYLE - firefox */ html>body ul.showcase { margin:5px 1px; margin:auto; list-style: none; width:760px; } html>body li.showcase { margin-top:5px; margin-left:10px; float:left; width:180px; } /* SHOWCASE STYLE - IE */ * html ul.showcase { margin:5px 1px; margin:auto; list-style: none; width:750px; } * html li.showcase { margin-top:5px; margin-left:8px; float:left; width:179px; } img.showcase { border:1px solid #CCCCCC; } i'm sure it's somethin' to do with clearing the floats, but i just don't get why it's cool after you refresh. thanks! 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 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? 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> Hi, 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> 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> 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 |