Jump to content

Firefox to IE or IE to Firefox - compatibility problems


markwill2112

Recommended Posts

Hello Everyone,

 

My first post on this excellent forum. I hope someone can help me - apologies for the long post.

 

I am having problems with IE/Firefox compatibility. I have read that it is best to design pages to look right in Firefox and not as I have been doing in IE and then expect them to show properly in Firefox.

 

I believe I am doing something wrong with my <Div> tags as the formatting of the following page looks perfect in IE but is messed up in Firefox and there is also e.g. a vertical dotted line missing when viewed in Firefox.

 

The page is: http://www3.imperial.ac.uk/edudev/workshops/otherworkshops

 

We use a content management system here at work and I go in and copy the html to Dreamweaver and work on it there and then copy and paste when I am done. I do not have control over the header or right hand pane.

 

The code for the main content is as follows (see below). Can someone explain what is missing or what is in the wrong order that is causing the formatting to be wrong in Firefox and for the top shadow line not be centred and for the vertical dotted line to be missing. I did blindly move a <Div> tag around and the vertical line magically appeared but was longer and badly formatted.

 

If possible, I would like to know or be pointed in the right direction to learn the fundamentals behind what I am doing wrong. I don;t really just want the correct code that I can copy and paste, but more to understand why it isn't working properly so I can do it right in the future on other pages:

 

<div class="generic-content-block">

<h1>Specific Teaching Skills Workshops</h1>

</div>

<!-- OPEN TWO COLUMN BLOCK -->

<div class="column-wrapper with-top-shadow">

<div class="two-col-block">

<div class="col">

<ul class="link-list">

<li>

<h4><a href="../../../edudev/workshops/otherworkshops/assessingstudentlearning">Assessing Student Learning</a></h4>

</li>

<li>

<h4><a href="../../../edudev/workshops/core/communicatingknowledge">Communicating Knowledge</a></h4>

</li>

<li>

<h4><a href="../../../edudev/workshops/otherworkshops/designingcurriculaandlearning">Designing Curricula and Teaching</a></h4>

</li>

<li>

<h4><a href="../../../edudev/workshops/otherworkshops/interactivegroupteaching">Interactive Group Teaching</a></h4>

</li>

<li>

<h4><a href="../../../edudev/workshops/otherworkshops/issuesandtechniquesforoneoffteachingsessions">Issues and Techniques for One-off Teaching Sessions</a></h4>

</li>

</ul>

</div>

<div class="col">

<ul class="link-list">

<li>

<h4><a href="../../../edudev/workshops/otherworkshops/laboratoryteaching">Laboratory Teaching</a></h4>

</li>

<li>

<h4><a href="../../../edudev/workshops/otherworkshops/usingfeedbacktoenhancestudentlearning">Using Feedback to Enhance Student Learning</a></h4>

</li>

</ul>

</div>

</div>

</div>

<!-- CLOSE TWO COLUMN BLOCK -->

<div class="generic-content-block">

<h2>Enquiries</h2>

<p>If you wish to discuss your choice of workshops before booking, please <a title="contact us link opens in a new window" href="mailto:edudevcourses@imperial.ac.uk" target="_blank">contact us</a></p>

</div>

Link to comment
Share on other sites

Seems like you just need to add "overflow:auto;" to .two-col-block.

 

That's because you are floating the two cols, and you want to make sure that anything that comes after the cols appears correctly on its own line, not immediately following the floated items.

 

Many thanks for that and the explanation -that make sense. Could you posisbly give an example of how it would look in the code?

Link to comment
Share on other sites

Falkencreative means that in your stylesheet "/2007templates/css/content.css" just before half way down you need to add overflow: auto; like this:-

.two-col-block { overflow: auto;
width: 59.2em; /* changed from 59.1em - PJG */
background: transparent 
url(/2007templates/images/dotted_line_bg.gif) repeat-y 50% 0%;
}

 

It works to move the text

 

Enquiries

 

If you wish to discuss ...........

 

down below instead of alongside the red links. I've tested it.

Edited by Wickham
Link to comment
Share on other sites

Falkencreative means that in your stylesheet "/2007templates/css/content.css" just before half way down you need to add overflow: auto; like this:-

.two-col-block { overflow: auto;
width: 59.2em; /* changed from 59.1em - PJG */
background: transparent 
url(/2007templates/images/dotted_line_bg.gif) repeat-y 50% 0%;
}

 

It works to move the text

 

Enquiries

 

If you wish to discuss ...........

 

down below instead of alongside the red links. I've tested it.

 

Sorry to be such a dumbass, but what does 'down below instead of alongside the red links' mean?

Link to comment
Share on other sites

When you have ONLY floated items inside a div, for example:

<div class="parent">
   <div class="floated_left_div"><!-- Content here --></div>
   <div class="another_floated_left_div"><!-- Content here --></div>
</div>

 

In the above case, the parent div doesn't stretch its height to fully contain the floated children divs. So most probably in the above case the parent div will have a height of 0px. This is a very widely known issue, and there's 2 ways to get around this problem, and have the parent div automatically adjust its height to fully contain the floated children divs.

 

One way is as Wickham explained above: put CSS property "overflow" to value "auto" of the parent div:

<div class="parent" style="overflow:auto;">
   <div class="floated_left_div"><!-- Content here --></div>
   <div class="another_floated_left_div"><!-- Content here --></div>
</div>

 

The other way is to use "break" divs. This one is a little bit less elegant, as it involved adding unused empty tags in the markup, but nonetheless it works just as good as the above solution, and it doesn't really decrease the performance.

 

The way to do it is put an empty div right after the floated children divs, and set its css property "clear" to value "both". For example: (Basing on above example too)

<div class="parent">
   <div class="floated_left_div"><!-- Content here --></div>
   <div class="another_floated_left_div"><!-- Content here --></div>
   <div style="clear:both"></div>
</div>

 

This solution only has 1 drawback that I'm aware of. Sometimes in internet explorer 6, the empty divs create an empty space, even though their height should be 0. In this case what I do is instead of putting the clear:both property on the "style" attribute of the div, i put a class="break" on the div, and in my css:

div.break {
clear:both;
height:0px;
font-size:1px;
}

which usually fixes the IE6 issue.

 

Hope that explains it :lol:

Edited by BeeDev
Link to comment
Share on other sites

When you have ONLY floated items inside a div, for example:

<div class="parent">
   <div class="floated_left_div"><!-- Content here --></div>
   <div class="another_floated_left_div"><!-- Content here --></div>
</div>

 

In the above case, the parent div doesn't stretch its height to fully contain the floated children divs. So most probably in the above case the parent div will have a height of 0px. This is a very widely known issue, and there's 2 ways to get around this problem, and have the parent div automatically adjust its height to fully contain the floated children divs.

 

One way is as Wickham explained above: put CSS property "overflow" to value "auto" of the parent div:

<div class="parent" style="overflow:auto;">
   <div class="floated_left_div"><!-- Content here --></div>
   <div class="another_floated_left_div"><!-- Content here --></div>
</div>

 

The other way is to use "break" divs. This one is a little bit less elegant, as it involved adding unused empty tags in the markup, but nonetheless it works just as good as the above solution, and it doesn't really decrease the performance.

 

The way to do it is put an empty div right after the floated children divs, and set its css property "clear" to value "both". For example: (Basing on above example too)

<div class="parent">
   <div class="floated_left_div"><!-- Content here --></div>
   <div class="another_floated_left_div"><!-- Content here --></div>
   <div style="clear:both"></div>
</div>

 

This solution only has 1 drawback that I'm aware of. Sometimes in internet explorer 6, the empty divs create an empty space, even though their height should be 0. In this case what I do is instead of putting the clear:both property on the "style" attribute of the div, i put a class="break" on the div, and in my css:

div.break {
clear:both;
height:0px;
font-size:1px;
}

which usually fixes the IE6 issue.

 

Hope that explains it :lol:

 

Excellent! Thanks so much. :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...