Accessibility

CSS Advisor

Right sidebar not displaying in Firefox, Safari OK

by Snapper57 on November 9, 2010 Avg Rating Not yet rated   |   Log in to rate post.

Tagged with Float , Firefox 3.5

Problem

Used Dreamweavers template to create a three column layout, have updated to fit my design, but stopped displaying correctly in Firefox and I cannot find the problem.

Solution

No reported compatibility errors in Dreamweaver

Detailed description

<!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" />
<title>andypages [Home]</title>
<link href="css/andypages.css" rel="stylesheet" type="text/css" /><!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.andypages #sidebar1 { width: 180px; }
.andypages #sidebar2 { width: 190px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.andypages #sidebar2, .andypages #sidebar1 { padding-top: 30px; }
.andypages #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
</head>

<body class="andypages">

<div id="container">
  <div id="header">
    <img src="images/masthead2.gif" width="780" height="52" alt="andypages masthead" />
  <!-- end #header --></div>
    
  <div id="TopNavBar">
     <a href="index.htm">Home</a> |
     <a href="unit04.htm">Unit 04</a> |     
     <a href="unit10.htm">Unit 10</a> |
     <a href="unit11.htm">Unit 11</a> |
     <a href="unit17.htm">Unit 17</a> |
     <a href="fs.htm">Functional Skills</a> |
     <a href="https://ssl.chelmsford-college.ac.uk/whalecom3cbea4/whalecom0/fdrive/MEDIA/mediasite/home.htm">Media Site</a> |
      <!-- Accessibility --------------->      
     <a href="javascript:void(0);"onclick="javascript:body.style.fontSize='.83em'">a</a>   
     <a href="javascript:void(0);"onclick="javascript:body.style.fontSize='.93em'">A</a> |
     <a href="javascript:void(0);"onclick="javascript:centre.style.background='lightblue'">Blue</a>
  <!-- end #TopNavBar --></div>
 
 
      
  <!-- start #sidebar1 --------------------->
  <div id="sidebar1">
 
    <h2>Useful Links</h2>
    <div id="navcontainerl4">
    <a href="http://en.wikipedia.org/wiki/Category:Films_by_year">Films by year</a>
    <a href="images/Carpe Diem.pps">Carpe Diem</a>
    <a href="http://www.ducksoftware.com/movies/">Movie Lists</a>
    </div>

    <h2>OCR Site</h2>
    <div id="navcontainerl5">
    <a href="http://www.ocr.org.uk/qualifications/ocrnationals/media">OCR</a>
    </div>
    
  <!-- end #sidebar1 --></div>
 
 
 
  <!-- start #sidebar2 --------------------->
  <div id="sidebar2"><img src="images/graphic2.gif" width="190" height="163" alt="Abstract graphic" />
 
      <div id="sidebar2Content">
        <h2>Notices</h2>
          All Referral is now submitted
          Well done to those who handed in
      <!-- end #sidebar2Content --></div>
 
  <!-- end #sidebar2 --></div>
    
    
 
  <!-- start #mainContent --------------------->
  <div id="mainContent">
 
    <h1> Main Content </h1>
    <p>
    
    
    </p>
    <!-- end #mainContent --></div>
    <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
    <br class="clearfloat" />
 
 
  <!-- start #footer --------------------->   
  <div id="footer">
    <p>Footer</p>
  <!-- end #footer --></div>
 
 
 
<!-- end #container --></div>



</body>
</html>

Related files for download

css file
andypages1.css




Tagged with Float , Firefox 3.5

Tag it on del.icio.us or Digg

Text ID: SNAPPER57



Comments (0)

To add a comment, please Log in.








CSS Advisor home
Submit a post

rss

CSS ADVISOR RSS FEEDS
Recent: POSTS | COMMENTS | EDITS


Browsers
Internet Explorer (103)
Mozilla/Firefox (52)
Opera (18)
Safari (38)
CSS Properties
Background (25)
Border (10)
Color (10)
Float (23)
Font (6)
Margin (11)
Padding (9)
Position (40)
Text (30)
Width/Height (27)