PDA

View Full Version : Floats don't work properly in IE, perfect in Firefox



jux
Sep 4th, 2007, 09:56 PM
Hi!

I'm testing a new design and got it to work perfectly in Firefox but in IE it doesn't look right. It seems that the main content area is being pushed down and starts after left column.

Here's the HTML:

<!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="Everything about the best-selling writer John Grisham. An unofficial website with Grisham's biography, overviews and reviews of his books and movies, interviews, links to other sites, and much more." />
<meta name="keywords" content="john grisham, grisham, author, novels, writer, best-seller, biography, books, bleachers, a painted house, movies, broker, the innocent man, the firm, the testament,, bleachers john grisham, john grisham the broker" />
<meta name="robots" content="index, follow, noarchive" />
<meta name="googlebot" content="noarchive" />
<link rel="stylesheet" type="text/css" media="screen" href="http://www.juxk.com/textpattern/css.php?n=default" />
<title>John Grisham Online</title>
<link rel="shortcut icon" href="http://www.juxk.com/johngrishamonline/favicon.ico" />
</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 &amp; 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>

<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">
<div class="amazon"><a href="http://www.amazon.com/gp/product/0385525001?ie=UTF8&amp;tag=johngrisham0a-20&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;creativeASIN=0385525001"><img src="http://ec1.images-amazon.com/images/P/0385525001.01._PE32_OU01_SCTZZZZZZZ_V29102505_.jpg" alt="Buy Playing For Pizza" /></a>
<a href="http://www.amazon.com/gp/product/0385517238?ie=UTF8&amp;tag=johngrisham0a-20&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;creativeASIN=0385517238"><img src="http://ec1.images-amazon.com/images/P/0385517238.01._PE34_OU01_SCTZZZZZZZ_V47007074_.jpg" alt="Buy The Innocent Man" /></a></div>
<div class="poll">Are you going to buy the new novel Playing for Pizza?<br />Already ordered it<div class="clsGraph" style="background-color:#d7d7d7;"><div style="color:#000; font-size:11px; text-align:right; background:url(http://www.juxk.com/images/122.gif); width:10%; height:17px;"><span class="clsPerc">0%</span></div></div>Yes<div class="clsGraph" style="background-color:#d7d7d7;"><div style="color:#000; font-size:11px; text-align:right; background:url(http://www.juxk.com/images/122.gif); width:10%; height:17px;"><span class="clsPerc">0%</span></div></div>Maybe<div class="clsGraph" style="background-color:#d7d7d7;"><div style="color:#000; font-size:11px; text-align:right; background:url(http://www.juxk.com/images/122.gif); width:100%; height:17px;"><span class="clsPerc">100%</span></div></div>No<div class="clsGraph" style="background-color:#d7d7d7;"><div style="color:#000; font-size:11px; text-align:right; background:url(http://www.juxk.com/images/122.gif); width:10%; height:17px;"><span class="clsPerc">0%</span></div></div>total_votes: 1<br /></div>

<h3>Affiliates</h3>
<ul class="bottom">
<li class="first"><a href="http://www.boekensite.net/indexe.html">Eric's Books Site</a></li>
<li><a href="http://www.dpbolvw.net/pq80qgpmgo368BDBBC3D697AAA" target="_blank" onmouseover="window.status='http://www.ebooks.com';return true;" onmouseout="window.status=' ';return true;">eBooks.com Buy One, Get One Free</a>
<img src="http://www.lduhtrp.net/fd66snrflj479CECCD4E7A8BBB" alt="" width="1" height="1" border="0"/></li>
<li><a href="http://www.kqzyfj.com/i2108dlurlt8BDGIGGH8E9BIDFG" target="_blank" onmouseover="window.status='http://www.legalzoom.com';return true;" onmouseout="window.status=' ';return true;">Online LEGAL Documents</a>
<img src="http://www.ftjcfx.com/n498ax0pvtEHJMOMMNEKFHOJLM" alt="" width="1" height="1" border="0"/></li>
<li><a href="http://www.johngrishamonline.com/contact/">Your website here</a></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>

<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> <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>
<div style="padding-left: 778px;"><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>

And this is the CSS:

/*
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;
font: 22px Verdana, Tahoma, arial, sans-serif;
font-size: 12px;
color: #000000;
background-color: #CCC;
background: url(images/43original.gif) repeat;
}

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: 728px;
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 {
float: left;
width: 728px;
padding: 10px 0 35px 0;
background: #A0B70D url(images/footercolbg.jpg) repeat-x left bottom;
border-bottom: 1px solid #CCA066;
border-bottom: 2px solid #FFF;
}
#column-wrap a {
text-decoration: none;
color: #FFF;
}
#column-wrap a:hover {
color: #000;
}
#column-wrap h2 {
color: #FFF;
margin: 0 0 10px 0;
}

#columns {
color: #888;
margin: 0 auto;
padding: 0;
width: 688px;
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 10px;
width: 96%;
}
#columns .col3, .col3-center {
float: right;
width: 32%;
}
#columns .col3-center {
margin: 0 15px;
}

/* footer*/
#footer {
color: #FFF;
width: 728px;
padding: 5px 0 15px 0;
text-align: center;
}
#footer a {
color: #F3EFBA;
font-weight: bold;
}

"<br style="clear: right;" />" in the end of every news entry is needed to keep entry's bottom background under the image, otherwise it will overlap it.

Appreciate it if someone could take a look and maybe figure out a solution.

Thanks!

dudeson
Sep 5th, 2007, 12:39 AM
the problem is that google ad you have at the top of your content div. Its to wide for the div so IE bumps it down. i think the max width of any element u can have is 440px give or take.

Hawkstra
Sep 5th, 2007, 04:41 AM
I was using floats and it seemed fine to me in both IE and FF until I went onto another computer and went on IE it didn't seem to work. FF did tho. :P

But Im still new and I dont know yet but if I find out which I think I will Ill let you know.

jux
Sep 5th, 2007, 09:35 AM
the problem is that google ad you have at the top of your content div. Its to wide for the div so IE bumps it down. i think the max width of any element u can have is 440px give or take.

You were right, thanks! I increased container width by 30px and content went back up.

Now if I could just fix the code so that images wouldn't overlap news entry's bottom background... I guess "<br style="clear: right;" />" is not working in IE. Any ideas?


I was using floats and it seemed fine to me in both IE and FF until I went onto another computer and went on IE it didn't seem to work. FF did tho. :P

But Im still new and I dont know yet but if I find out which I think I will Ill let you know.

Yeah, it's so weird how browsers render code differently sometimes, even same browsers.

jux
Sep 6th, 2007, 11:47 AM
Basically everything else is done but I'm still figuring out a solution to display news entry's bottom background below image in IE.

Here's the address for the test site if someone could take a look to see what's wrong:


http://juxk.com/

Thanks!

effpeetee
Sep 7th, 2007, 06:36 PM
If you just type your url in to the page thus

http://juxk.com/

It will automatically become a hyperlink

Frank

effpeetee
Sep 7th, 2007, 06:42 PM
This is a screen shot from my PC Windows XP IE7:o

effpeetee
Sep 7th, 2007, 06:50 PM
And the bottom

jux
Sep 8th, 2007, 01:15 AM
I was just trying to hide the link from search engines since I host and try different things there.

Here's the screenshot in Firefox (how it should be):
http://img167.imageshack.us/img167/1582/jgoffjt0.th.jpg (http://img167.imageshack.us/my.php?image=jgoffjt0.jpg)

And in IE7:
http://img511.imageshack.us/img511/7862/jgoieex6.th.jpg (http://img511.imageshack.us/my.php?image=jgoieex6.jpg)

jux
Sep 10th, 2007, 08:30 PM
Anyone? :)