Xerxes Posted April 19, 2007 Share Posted April 19, 2007 Hey guys,This is the website I am working on: http://www.samplechamber.comIt looks great in everything except.. IE (why can't Microsoft just drop off the face of the earth??)Anyway, I was wondering if anyone could tell me why the content gets pushed way down to the bottom when you look at it in IE.Thank you! Link to comment Share on other sites More sharing options...
ste Posted April 19, 2007 Share Posted April 19, 2007 its not floating correctly in IE. it could be that IE is picking up on some padding or margin that FF isnt which is making the floated column wider than the space for it in the container so, it drops down to the bottom. 1) you could get rid of all the default margins by adding the css* {margin: 0; padding: 0;}2) use condtional comments to make an IE specific style sheet in which the width of the right column is smaller 3) add overflow:hidden on the overall container (this should allow the elements within to float correctly but may cause some clipping of the content) Link to comment Share on other sites More sharing options...
Xerxes Posted April 20, 2007 Author Share Posted April 20, 2007 I added the {margin: 0; padding: 0;} to the stylesheet (the margin and padding was already 0 in the body) I also added the overflow: hidden; to the #wrap: #wrap { width:910px; background-image:url(graphics/wrap-bg.gif); background-repeat:repeat-y; margin: 0 auto; overflow:hidden; } I even reduced the width of the #interior (main content div for interior pages) by 200 pixels to see if that would move everything up, but it didn't. still no luck. Link to comment Share on other sites More sharing options...
Xerxes Posted April 26, 2007 Author Share Posted April 26, 2007 any other suggestions out there? Link to comment Share on other sites More sharing options...
pulpfiction Posted April 26, 2007 Share Posted April 26, 2007 The left div which contains the menu has a width:900px [covers the whole mid section]. reduce that width and float it to left. #content_wrap { width:200px; margin: 0 auto; text-align:left; float:left; border:1px solid #fff; } Link to comment Share on other sites More sharing options...
Xerxes Posted May 2, 2007 Author Share Posted May 2, 2007 Well, that is actually the div that contains all of the content below the header. It isn't just a left div. So, when I put the width down to 200px, it screwed it up in every browser. Thanks for your help though! Link to comment Share on other sites More sharing options...
pulpfiction Posted May 2, 2007 Share Posted May 2, 2007 Tried to trace where the div open and close. seems like the container div "content_wrap" is closed after the "left_col" and the "welcome_join" and other divs are outside the container div. so they are moved to the bottom <div id="content_wrap"> <div id="left_col"> <div id="nav"> <ul class="nav"> <li class="item1"><a class="first" href= "index.php?src=gendocs&ref=AboutSampleCity&category=Main&PHPSESSID=3c0eea866da0ca0b84527386ee8eaa17">About Sample City</a></li> <li class="item2"><a href="index.php?src=gendocs&ref=AbouttheChamber&category=Main&PHPSESSID=3c0eea866da0ca0b84527386ee8eaa17">About the Chamber</a></li> <li class="item3"><a href="index.php?src=events&category=Events&PHPSESSID=3c0eea866da0ca0b84527386ee8eaa17">Programs & Events</a></li> <li class="item4"><a href="index.php?src=news&persist_cat=1&srctype=lister&newssearch=yes&kw=&PHPSESSID=3c0eea866da0ca0b84527386ee8eaa17">Press Room</a></li> <li class="item5"><a href="index.php?src=gendocs&ref=GovernmentAffairs&category=Main&PHPSESSID=3c0eea866da0ca0b84527386ee8eaa17">Government Affairs</a></li> <li class="item6"><a href="index.php?src=dining&persist_cat=1&srctype=lister&newssearch=yes&kw=&PHPSESSID=3c0eea866da0ca0b84527386ee8eaa17">Dining Guide</a></li> <li class="item7"><a href="index.php?src=nightlife&persist_cat=1&srctype=lister&newssearch=yes&kw=&PHPSESSID=3c0eea866da0ca0b84527386ee8eaa17">Nightlife Guide</a></li> <li class="item8"><a href="index.php?src=directory&view=businesses&view=businesses_lister&PHPSESSID=3c0eea866da0ca0b84527386ee8eaa17">Business Search</a></li> <li class="item9"><a href="index.php?src=products&persist_cat=1&srctype=lister&newssearch=yes&kw=&PHPSESSID=3c0eea866da0ca0b84527386ee8eaa17">Marketplace</a></li> <li class="item10"><a href="index.php?src=forum&PHPSESSID=3c0eea866da0ca0b84527386ee8eaa17">Members Forum</a></li> <li class="item11"><a href="index.php?src=faq&PHPSESSID=3c0eea866da0ca0b84527386ee8eaa17">FAQ</a></li> <li class="item12"><a href="index.php?src=blog&view=blog&PHPSESSID=3c0eea866da0ca0b84527386ee8eaa17">Chamber Blog</a></li> <li class="item13"><a href="index.php?src=gendocs&ref=AdvertisingInformation&category=Main&PHPSESSID=3c0eea866da0ca0b84527386ee8eaa17">Advertising Information</a></li> <li class="item14"><a class="last" href="index.php?src=forms&ref=Contact Us&PHPSESSID=3c0eea866da0ca0b84527386ee8eaa17">Contact</a></li> </ul> </div> <!-- END OF NAV --> <div id="poll"> <form action="index.php" method="post" style="margin-bottom:3;"><input type="hidden" name="PHPSESSID" value="3c0eea866da0ca0b84527386ee8eaa17" /> <div class="pollHomeQuestion">What is your favorite thing about Sample City?</div> <div class="pollHomeChoices"><input type="radio" name="myvote" value="1">The People</div> <div class="pollHomeChoices"><input type="radio" name="myvote" value="2">The Nightlife</div> <div class="pollHomeChoices"><input type="radio" name="myvote" value="3">The Events</div> <input type="hidden" name="id" value="1" /> <input type="hidden" name="src" value="poll" /> <input type="hidden" name="srctype" value="process" /> <input type="hidden" name="category" value="Polls" /> <div class="pollHomeVote"> <input type="image" src="http://www.samplechamber.com/graphics/vote.gif" border="0" name="vote" value="Vote" /> </div> </form> </div> <!-- END OF POLL --> <div id="banner"><p align="center"><a class="fba_links" href="index.php?src=fba&srctype=click&id=1&PHPSESSID=3c0eea866da0ca0b84527386ee8eaa17" onclick="window.open(this.href); return false;"><img src="cache/sql/fba/fs_1.jpg" style="border:0px;width:120px;height:90px" alt="Indy Star" /></a></p></div> </div> <!-- END OF LEFT_COL --></div> <!-- END OF CONTENT_WRAP --><!-- THIS DIV ABOVE MUST COME AFTER AT THE BOTTOM, JUST BEFORE THE FOOTER DIV --><!-- ======== Header Page Layout Ends ========= --><div id="welcomejoin"> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now