Solved

CSS Help with IE6 block display problem

Posted on 2007-03-26
6
332 Views
Last Modified: 2013-11-19
CSS block problem in Joomla template. My div column block keeps going underneath my main content in IE6. It displays fine in FF and IE7.

Basically I want to include a flash menu to the left and content to the right.I can't get my text to wrap around a div block. Look at: http://www.bestcompanies.ie/index.php?option=com_content&task=view&id=114&Itemid=80 in IE6 for example.

The section in my template shows:

 <div id="wrapper">
            <div id="content"><?php mosMainBody(); ?></div>
 </div>
       
 <div id="navigation">
      <img src="http://www.bestcompanies.ie/templates/gptw-flash/images/betsy.gif" width="220" height="228" align="left" />
</div>

My CSS code includes:
div#wrapper{
      float:right;
      width:100%;
      height:auto;
      margin-left:-200px;
}

div#content{
      margin-left:200px;
      padding:0px 15px 0px 15px;
      text-align:justify;
      float:left;
}

div#content p{
      line-height:1.4;
}

div#navigation{
      float:left;
      width:200px;
      vertical-align:top;
}


Many thanks in advance
0
Comment
Question by:otooles
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 18

Accepted Solution

by:
Eternal_Student earned 250 total points
ID: 18793210
Its possibly a width issue. Check all of your width settings + padding + margin and make sure it all adds up in IE. Remember IE handles the box model differently than Mozilla.

This could also be the IE float bug. That is where IE doubles the margin on any element that is floated. So if you float something and give it a margin 8px IE will render that as margin 16px. Double margin bug can be fixed by adding this to the element that is floated:

display:inline;
0
 

Author Comment

by:otooles
ID: 18793407
If I decrease the width of my menu it fits in. However I want my column menu to flyout over the conent on mouse over so my flash file needs to be wider.

So my menu will overlap as below. Small menu box to the left with larger content box to the right.

--------------------
|----/---|----------/  |
|     /    |              /  |
|     /    |              /  |
|----/---|             /  |
|     /--------------/  |
-----------------------
     
--------------------
0
 
LVL 3

Assisted Solution

by:dtocci
dtocci earned 250 total points
ID: 18805736
By the looks of your layout, you could use absolute positioning on your menu and content divs to solve your cross-browser problems.  They appear to always be the same distance from the top of the page.  If this were my layout, and I understand you correctly, I would actually place both at 0 on the left, but with the menu on top of the content. You can then set the left padding on the content to make room for the menu.  You can even set the content div to contain the background image, which would help fix the issue with the content spilling over the bottom as it does currently.  The menu would also be positioned at 0 left, but with no left margin and a higher z-index.  Of course, this would not allow content to *wrap* under the menu, but it doesn't appear to do that now anyway even in firefox.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Drop Down not working in mobile- Bootstrap 14 31
uploading Theme in Wordpressn - geting error 4 20
Can't get js code to execute 8 31
HTML question 2 24
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

756 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question