Hey, I'm having a small problem... On my website the news entry images are overlapping the bottom background image in IE (everything's fine in Firefox), any idea on how to fix it so that the background image would be below image? I used "<br style="clear: right;" />" but it seems to be not working in IE... Here's the address for the test site if someone could take a look to see what's wrong: http://juxk.com Code (markup): <!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" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="robots" content="" /> <meta name="googlebot" content="" /> <link rel="stylesheet" type="text/css" media="screen" href="http://www.juxk.com/textpattern/css.php?n=default" /> <title>John Grisham Online</title> </head> <body> <div id="container"> <div id="header"> <ul id="menu"> <li><a rel="home" href="http://www.juxk.com/">News</a></li> <li><a href="http://www.juxk.com/biography">Biography</a></li> <li><a href="http://www.juxk.com/books">Books</a></li> <li><a href="http://www.juxk.com/filmography">Filmography</a></li> <li><a href="http://www.juxk.com/reviews">Reviews</a></li> <li><a href="http://www.juxk.com/interviews">Interviews</a></li> <li><a href="http://www.juxk.com/facts">Facts & Quotes</a></li> <li><a href="http://www.juxk.com/gallery">Gallery</a></li> </ul> <form id="search" method="get" action="http://www.juxk.com/"> <fieldset> <input name="q" type="text" id="input1" /> <input type="submit" id="input2" value="Search" /> </fieldset> </form> <div style="padding-top: 12px;"><a href="http://www.juxk.com/johngrishamonline/rss/?category=news"><img src="http://www.juxk.com/textpattern/images/feed.gif" alt="John Grisham Online News Feed" title="John Grisham Online News Feed" width="16" height="16" border="0"/></a></div> </div> <div id="left"> <div id="logo"> <h1><a rel="home" href="http://www.juxk.com/">john grisham online</a></h1><br /> <h2>unofficial fansite</h2> </div> <div class="box"> <h3>Text Link Ads</h3> <ul class="bottom"> <li class="first">Your Link Here</li> </ul> </div> <div class="box"> <h3>Resources</h3> <ul class="bottom"> <li class="first"><a href="http://www.jgrisham.com/">John Grisham</a></li> <li><a href="http://www.imdb.com/name/nm0001300/">John Grisham @ IMDB</a></li> <li><a href="http://en.wikipedia.org/wiki/John_Grisham">John Grisham @ Wikipedia</a></li> <li><a href="http://jgrisham1.tripod.com/home.htm">John Grisham fansite</a></li> <li><a href="http://www.johngrisham.ro/">John Grisham Romania</a></li> </ul> </div> <div class="box"> <h3>Video Player</h3> <ul class="bottom"> <li class="first"> <div id="vodpod_recent_videos_137982"></div> <script type="text/javascript" src="http://widgets.vodpod.com/javascripts/recent_videos.js?id=137982&v=2&title=JohnGrishamOnline.com%20Videos&options[theme]=sidebar2&category_id=random&options[color]=FFFFFF"></script> <noscript><a href="http://www.vodpod.com" target="_blank">Create your Video Collection at VodPod</a><br/><a href="http://www.vodpod.com/pod/137982" target="_blank">JohnGrishamOnline.com Videos</a><br/></noscript></li></ul> </div> </div> <div id="content"> <script type="text/javascript"><!-- google_ad_client = "pub-5912240090629775"; google_ad_width = 468; google_ad_height = 60; google_ad_format = "468x60_as"; google_ad_type = "text_image"; //2007-09-03: jgo_top google_ad_channel = "0290302578"; google_color_border = "FFFFFF"; google_color_bg = "FFFFFF"; google_color_link = "87C4DB"; google_color_text = "000000"; google_color_url = "87A019"; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <h2>Latest News</h2> <div class="box"> <h3 class="title"><a rel="bookmark" href="http://www.juxk.com/john-grisham-will-host-a-fundraiser-in-charlottesville">John Grisham will host a fundraiser in Charlottesville</a></h3> <h4><strong>Sep 03, 2007</strong> | <a href="http://www.juxk.com/john-grisham-will-host-a-fundraiser-in-charlottesville#comments">0 Comments</a></h4> <p class="bottom"><a rel="bookmark" href="http://www.juxk.com/john-grisham-will-host-a-fundraiser-in-charlottesville"><img src="http://www.juxk.com/images/182t.jpg" alt="Hillary Clinton" title="Hillary Clinton" class="image" /></a> John Grisham will host a Paramount Theater fundraiser in Charlottesville for Hillary Clinton’s presidential campaign on Sept. 23.<br /><br /><a rel="bookmark" href="http://www.juxk.com/john-grisham-will-host-a-fundraiser-in-charlottesville">Read more...</a><br style="clear: right;" /></p></div> <div class="box"> <h3 class="title"><a rel="bookmark" href="http://www.juxk.com/john-grisham-headlines-fundraiser-for-mississippi-innocence-project">John Grisham headlines fundraiser for Mississippi Innocence Project</a></h3> <h4><strong>Aug 19, 2007</strong> | <a href="http://www.juxk.com/john-grisham-headlines-fundraiser-for-mississippi-innocence-project#comments">0 Comments</a></h4> <p class="bottom"><a rel="bookmark" href="http://www.juxk.com/john-grisham-headlines-fundraiser-for-mississippi-innocence-project"><img src="http://www.juxk.com/images/181t.jpg" alt="John Grisham" title="John Grisham" class="image" /></a> Two writers of legal thrillers, John Grisham and Scott Turow, will headline a fundraising dinner October 22nd for the Mississippi Innocence Project at the University of Mississippi School of Law in Jackson.<br /><br /><a rel="bookmark" href="http://www.juxk.com/john-grisham-headlines-fundraiser-for-mississippi-innocence-project">Read more...</a><br style="clear: right;" /></p></div> <div class="box"> <h3 class="title"><a rel="bookmark" href="http://www.juxk.com/john-grisham-wrote-an-essay-for-his-alma-maters-literary-magazine">John Grisham wrote an essay for his alma mater's literary magazine</a></h3> <h4><strong>Jul 30, 2007</strong> | <a href="http://www.juxk.com/john-grisham-wrote-an-essay-for-his-alma-maters-literary-magazine#comments">0 Comments</a></h4> <p class="bottom"><a rel="bookmark" href="http://www.juxk.com/john-grisham-wrote-an-essay-for-his-alma-maters-literary-magazine"><img src="http://www.juxk.com/images/180t.jpg" alt="John Grisham in 1973" title="John Grisham in 1973" class="image" /></a> Southaven High School’s literary magazine is prepared for record sales this year thanks to a contributed essay from alumnus and best-selling novelist John Grisham.<br /><br /><a rel="bookmark" href="http://www.juxk.com/john-grisham-wrote-an-essay-for-his-alma-maters-literary-magazine">Read more...</a><br style="clear: right;" /></p></div> <div class="box"> <h3 class="title"><a rel="bookmark" href="http://www.juxk.com/john-grisham-helps-southeastern-conference-to-celebrate-its-75th-anniversary">John Grisham helps Southeastern Conference to celebrate it's 75th anniversary</a></h3> <h4><strong>Jul 26, 2007</strong> | <a href="http://www.juxk.com/john-grisham-helps-southeastern-conference-to-celebrate-its-75th-anniversary#comments">0 Comments</a></h4> <p class="bottom"><a rel="bookmark" href="http://www.juxk.com/john-grisham-helps-southeastern-conference-to-celebrate-its-75th-anniversary"><img src="http://www.juxk.com/images/49t.jpg" alt="John Grisham" class="image" /></a> To commemorate its 75th anniversary, the Southeastern Conference will launch a celebration entitled “Stories of Character†which will highlight 75 former student-athletes and the contributions they have made to society since the completion of their collegiate careers. “Storytellers†include Colts quarterback Peyton Manning, best-selling author John Grisham and former President Bill Clinton.<br /><br /><a rel="bookmark" href="http://www.juxk.com/john-grisham-helps-southeastern-conference-to-celebrate-its-75th-anniversary">Read more...</a><br style="clear: right;" /></p></div> <script type="text/javascript"><!-- google_ad_client = "pub-5912240090629775"; google_ad_width = 468; google_ad_height = 60; google_ad_format = "468x60_as"; google_ad_type = "text_image"; //2007-09-03: jgo_top google_ad_channel = "0290302578"; google_color_border = "FFFFFF"; google_color_bg = "FFFFFF"; google_color_link = "87C4DB"; google_color_text = "000000"; google_color_url = "87A019"; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <div class="box"> <h3 class="title"><a rel="bookmark" href="http://www.juxk.com/playing-for-pizza-main-character-is-iowan">"Playing for Pizza" main character is Iowan</a></h3> <h4><strong>Jul 11, 2007</strong> | <a href="http://www.juxk.com/playing-for-pizza-main-character-is-iowan#comments">0 Comments</a></h4> <p class="bottom"><a rel="bookmark" href="http://www.juxk.com/playing-for-pizza-main-character-is-iowan"><img src="http://www.juxk.com/images/179t.jpg" alt="Playing for Pizza" title="Playing for Pizza" class="image" /></a> The main character in John Grisham’s next book “Playing for Pizza†will play football at a Davenport high school and attend the University of Iowa before landing on a fledgling team in Italy, the author said in a telephone call to The Des Moines Register.<br /><br /><a rel="bookmark" href="http://www.juxk.com/playing-for-pizza-main-character-is-iowan">Read more...</a><br style="clear: right;" /></p></div> <div class="box"> <h3 class="title"><a rel="bookmark" href="http://www.juxk.com/disney-opus-will-include-john-grishams-thoughts">''Disney Opus'' will include John Grisham's thoughts</a></h3> <h4><strong>Jun 08, 2007</strong> | <a href="http://www.juxk.com/disney-opus-will-include-john-grishams-thoughts#comments">0 Comments</a></h4> <p class="bottom"><a rel="bookmark" href="http://www.juxk.com/disney-opus-will-include-john-grishams-thoughts"><img src="http://www.juxk.com/images/57t.jpg" alt="" class="image" /></a> 1,000 previously unpublished images will be included in Disney Opus, a 900-page book created by Kraken Opus to be published in October next year. John Grisham will also contribute to this book by giving his own take on what Disney meant to him.<br /><br /><a rel="bookmark" href="http://www.juxk.com/disney-opus-will-include-john-grishams-thoughts">Read more...</a><br style="clear: right;" /></p></div> <div class="box"> <h3 class="title"><a rel="bookmark" href="http://www.juxk.com/grishams-new-book-playing-for-pizza-will-be-published-in-september-2007">Grisham's new book "Playing for Pizza" will be published in September 2007</a></h3> <h4><strong>Jun 01, 2007</strong> | <a href="http://www.juxk.com/grishams-new-book-playing-for-pizza-will-be-published-in-september-2007#comments">0 Comments</a></h4> <p class="bottom"><a rel="bookmark" href="http://www.juxk.com/grishams-new-book-playing-for-pizza-will-be-published-in-september-2007"><img src="http://www.juxk.com/images/179t.jpg" alt="Playing for Pizza" title="Playing for Pizza" class="image" /></a> John Grisham is setting his next book in Italy. “Playing for Pizza,†the story of an American quarterback trying his luck in Italy, will come out in September 2007. The idea for the novel grew out of time Grisham spent in Italy researching his novel, The Broker, which was set in Bologna.<br /><br /><a rel="bookmark" href="http://www.juxk.com/grishams-new-book-playing-for-pizza-will-be-published-in-september-2007">Read more...</a><br style="clear: right;" /></p></div> <a href="http://www.juxk.com/news-archive">News Archive</a> </div> <div id="column-wrap"> <div id="columns"> <div class="col3-right"> <h2>Title</h2> <ul class="recent_comments"> <li><a href="#">x</a></li> <li><a href="#">x</a></li> <li><a href="#">x</a></li> <li><a href="#">x</a></li> <li><a href="#">x</a></li> </ul> </div> <div class="col3-center"> <h2>Title</h2> <ul><li><a href="#">xxx</a></li><li><a href="#">xxx</a></li></ul> </div> <div class="col3-left"> <h2>Title</h2> <ul> <li><a href="#">xxx</a></li> <li><a href="#">xxx</a></li> <li><a href="#">xxx</a></li> <li><a href="#">xxx</a></li> <li><a href="#">xxx</a></li> </ul> </div> </div> </div> <div id="footer"> © 2006-2007 <a rel="home" href="http://www.juxk.com/">JohnGrishamOnline.com</a>. All rights reserved. Design by <a href="http://freecsstemplates.org/">Free CSS Templates</a>. This website and it's creators are not affiliated with John Grisham. All names and movie titles are property of their respective owners. All images, video and audio are copyrighted by their respective owners. </div> </div> <div style="padding-left: 808px;"><script type="text/javascript"><!-- google_ad_client = "pub-5912240090629775"; google_alternate_color = "0000FF"; google_ad_width = 160; google_ad_height = 600; google_ad_format = "160x600_as"; google_ad_type = "image"; //2007-09-03: jgo_right google_ad_channel = "0410610261"; google_color_border = "FFFFFF"; google_color_bg = "FFFFFF"; google_color_link = "87C4DB"; google_color_text = "000000"; google_color_url = "87A019"; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script></div> </body> </html> Code (markup): /* Design by Free CSS Templates http://www.freecsstemplates.org Released for free under a Creative Commons Attribution 2.5 License */ /* ----------elements-------------- */ body { margin: 20px 0; background-color: #CCC; background: url(images/43original.gif) repeat; font: 22px Verdana, Tahoma, arial, sans-serif; font-size: 12px; color: #000000; } h1 { } h2, h3, h4, h5, h6 { color: #2582A4; } p, ol, ul { text-align: justify; } img { border: none; } strong { font-weight: bold; color: #808080; } a { color: #87A019; } img a { border-style: none; } a:hover { text-decoration: none; color: #2582A4; } .box { margin-bottom: 0; padding-bottom: 0; background: url(images/img07.gif) repeat-x left bottom; } .title a { color: #2582A4; text-decoration: none; } .title a:hover { text-decoration: none; color: #87A019; } .bottom { display: block; margin-bottom: 0; padding-bottom: 10px; background: url(images/img08.gif) no-repeat left bottom; } .image { float: right; border: 1px solid #E4E3DF; padding: 3px; margin: 0 0 0 10px; } .img-left { float: left; border: 1px solid #E4E3DF; padding: 3px; margin: 0 10px 0 0; } .poll { padding: 8px 4px 8px 12px; } .amazon { text-align: center; } .amazon img { margin: 0 5px 0 5px; } /* ----------container to center the layout-------------- */ #container { width: 758px; margin-bottom: 10px; margin-left:30px; background-color: #FFFFFF; float: left; } /* ----------header-------------- */ #header { height: 37px; background: #BECF74 url(images/img01.gif) repeat-x; border-bottom: 3px solid #FFFFFF; } /* ----------top menu-------------- */ #menu { float: left; width: 500px; height: 37px; margin: 0; padding: 0 0 0 15px; list-style: none; background: url(images/img02.gif) no-repeat; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } #menu li { display: inline; } #menu a { display: block; float: left; height: 27px; padding: 10px 5px 0px 5px; text-transform: lowercase; text-decoration: none; font-size: 12px; font-weight: bold; color: #FFFFFF; } #menu a:hover { background: #A4B74C url(images/img04.gif) repeat-x; } /* ----------search-------------- */ #search { float: right; height: 28px; margin: 0; padding: 9px 25px 0 0; background: url(images/img03.gif) no-repeat right top; } #search fieldset { display: inline; margin: 0; padding: 0; border: none; } #input1 { width: 100px; padding: 2px 5px; background: #FFFFFF; border: none; } #input2 { height: 20px; background: #87C4DB; border: none; text-transform: lowercase; font-size: 10px; font-weight: bold; color: #FFFFFF; } /* -----------------content--------------------- */ #content { background: url(images/img09.gif) repeat-x; padding: 30px 30px 0 25px; margin: 0 0 0 223px; font-size: 12px; } #content h2 { margin-top: 5px; font-size: 26px; } #content h3 { margin-bottom: 0; font-size: 17px; } #content h4 { margin-top: 0; font-size: 11px; font-weight: normal; } #content .box { margin: 0 -30px 30px -20px; padding: 0 30px 0 20px; } #content .bottom { margin: 0 0 20px -20px; padding: 0 0 20px 20px; } /* --------------left navi------------- */ #left { float: left; width: 220px; background: url(images/img05.gif) repeat-x; } #left h3 { padding: 0 20px; } #left ul { margin-left: 0; padding-left: 20px; padding-right: 20px; list-style: none; } #left li { padding: 5px 0; border-top: 1px solid #EFEFEF; } #left li.first { border: none; } #logo { height: 150px; background: url(images/img06.gif) no-repeat; } #logo h1, #logo h2, #logo a { margin: 0; padding: 0; text-decoration: none; text-transform: lowercase; text-align: center; color: #FFFFFF; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } #logo h1 { padding-top: 15px; font-size: 25px; } #logo h2 { margin-top: -5px; font-size: 12px; } /* -----------footer--------------------------- */ #column-wrap { height: 210px; margin-top: 10px; background: #BECF74 url(images/footercolbg.jpg) repeat-x; } #column-wrap a { text-decoration: none; color: #FFF; } #column-wrap a:hover { color: #2582A4; } #column-wrap h2 { color: #FFF; margin: 10px 0 10px 0; text-transform: uppercase; font: 14px 'Trebuchet MS', Tahoma, Sans-serif; font-weight: bold; } #columns { color: #888; margin: 0 auto; padding: 0; width: 718px; background: transparent; } #columns ul { list-style: none; margin: 10px 0 0 0; padding: 0; background: url(images/footer-dots.gif) repeat-x left top; } #columns li { background: url(images/footer-dots.gif) repeat-x left bottom; } #columns li a { display: block; font-weight: normal; padding: 3px 0 3px 0px; width: 96%; text-align: left; } #columns .col3-left { float: right; width: 265px; } #columns .col3-right { float: right; width: 200px; } #columns .col3-center { float: right; width: 210px; margin: 0 15px; } /* footer*/ #footer { height: 37px; background: #BECF74 url(images/footer.gif); border-top: 3px solid #FFFFFF; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color: #FFFFFF; font-size: 11px; padding: 0px 5px 0px 5px; } #footer a { color: #FFFFFF; } Code (markup):
Rasmus I found that if you use margins and paddings that in order for each browser to display as you desire them is to insert a float value to the style. It seems that the margin and or padding value is not being followed by IE, go figure. So try a float value in the div and its elements that contains the news. I was wondering what image creates the rounded corner for the div. If that is part of the back ground then you might want to use a span to hold that image in order to position:absolute it to the spot you desire. It seems that your code is auto generated and pre-formatted so positioning that span absolute will work perfectly. I am going to suggest you not use a paragraph to insert your text for the words and image of the news. Once you use a span for this use a formatted style both inline and in a class to make sure your specific style is correct. I use loads of both classes and inline to make sure things stay where they should be. Hope this helps.
Hi thechasboi, thanks for answering. Yup, rounded corner is part of the background. It's img08.gif and comes from this CSS bit: .bottom { display: block; margin-bottom: 0; padding-bottom: 10px; background: url(images/img08.gif) no-repeat left bottom; } Code (markup): I changed paragraphs to spans but when I try to give span the position:absolute property, it messes up the site. Do you maybe have an example to give of what exactly I should do? And I can't use float element on news div either, it also messes up the site... Thanks!
Rasmus If i remember correctly you have a div which contains the news. Use floats on the inside of the div not on the div itself. OK, you have a div say is 150w x 75h, you have a span and an h1 and h2 you want the h1 top row then h2 second row then the span which itself contains element. OK, <hi style="float:left;clear:both"> </h1> <h2 style="float:left clear:both;"></h2><span style="float:left;clear:both;"></span> now say for example you have two elements on the same row in the span one you want left justify the other right justify do this <span style="float:left;clear:both;width:150px;"><span style="float:left; width:75px;"></span><span style="float:right;width:50px;"></span></span> What that will do is also allow you to use margin effectively as well. I wrote this shopping cart with some really strict formatting. If you want to see this cart I can send you some sample html/css coding for it just send me a message. Hope this helps.