[Solved] This is driving me nutty! Gap in IE7, but not in FF.

djkirstyjay · Post by **djkirstyjay** » Mon Aug 18, 2008 5:43 pm

Hi folks... This have been driving me nutty for about 3 days now.

I am in the process of setting up a site for a friend and I have done the design and all is looking good, apart from a gap on the sidebar in IE7. I have searched the net and tried every trick on every site I've come across, but it's still there!!! GRRRRRR.

Can anyone have a look at the code with fresh eyes and give me a hint as to where I'm going wrong?

I am running CMSMS 1.4.1 Spring Garden

Ta in advance!

Kirsty

Site address : http://www.coolroomsspain.com/coolrooms ... y-islands/

Template :

Code: Select all

{process_pagedata}
<!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" xml:lang="en" lang="en">
{* Change lang="en" to the language of your site *}

<head>

<title>{sitename} - {title}</title>

{metadata}

{stylesheet}

{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}

<!--[if IE]>
<__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
<![endif]-->

</head>

</__body>

<div id="pagewrapper">

    <ul class="accessibility">
      <li>{anchor anchor='menu_vert' title='Skip to navigation' accesskey='n' text='Skip to navigation'}</li>
      <li>{anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}</li>
    </ul>


   {* Start Header *}
    <hr class="accessibility" />

   <div id="header">
           
   <hr class="accessibility" />
   </div>
   {* End Header *}


      {* Start Navigation *}
      <div id="menu_vert">
         {menu template='cssmenu.tpl'}
      <hr class="accessibility" />
      </div>
      {* End Navigation *}



   {* Start Content *}
   <div id="content">


   {* Start Search *}
   <div id="search">
          {search}
   </div>
   {* End Search *}


   {* Start Breadcrumbs *}
   <div class="breadcrumbs">
        {breadcrumbs starttext='You are here' root='Home' delimiter='»'}
   <hr class="accessibility" />
   </div>
   {* End Breadcrumbs *}

      {* Start Sidebar *}
      <div id="sidebar">
      <div id="sidebartop" class="clearfix"></div>
      <div id="sidebarmiddle" class="clearfix">
         {news}
      </div>
      <div id="sidebarbottom"></div>
      </div>
      {* End Sidebar *}

      {* Start Content Area *}
      <div id="main">
         <div style="float: right;">{print showbutton=true script=true}</div>
         <h2>{title}</h2>
         {content} <br />

      <hr class="accessibility" />
      </div>
	  {* End Content Area *}

   </div>
   {* End Content *}


   {* Start Footer *}
   <div id="footer">
      {global_content name='footer'}
   </div>   
   {* End Footer  *}


</div>{* end pagewrapper *}
<__body>
</__html>

CSS :

Code: Select all

* {
margin : 0;
padding : 0;
}
body {
text-align : left;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 75.01%;
line-height : 1em;
}
div {
font-size : 1em;
}
img {
border : 0;
}
a, a:link a:active a:visited {
text-decoration : none;
background-color : inherit;
color : #18507c;
border-bottom : 1px dashed #18507c;
}
a:hover {
text-decoration : none;
background-color : #c70000;
color : #fff;
border-bottom : none;
}
body {
background-color : #fff;
color : #333;
margin : 20px;
background-image : url(http://www.coolroomsspain.com/style/bg-body.png);
background-repeat : repeat-x;
background-position : bottom left;
}
div#pagewrapper {
margin : 0 auto;
color : #333333;
width : 800px;
}
div#header {
height : 150px;
background-image : url(http://www.coolroomsspain.com/style/header.gif);
background-repeat : no-repeat;
}
div#header h1 a {
background : inherit;
display : block;
height : 80px;
text-indent : -999em;
text-decoration : none;
border-bottom : none;
}
div#search {
float : right;
width : 27em;
text-align : right;
padding : 0.6em 0 0.2em 0;
margin : 0 1em;
}
div.breadcrumbs {
padding : 1em 0 1.2em 0;
font-size : 90%;
margin : 0 1em;
}
div.breadcrumbs span.lastitem {
font-weight : bold;
}
div#content {
margin : 0 auto 0 0;
background-color : #e9f7fe;
}
div#main {
margin-left : 29%;
margin-right : 2%;
}
div#sidebar {
float : left;
width : 26%;
display : inline;
margin-left : 10px;
}
div#sidebartop {
background-color : inherit;
background-image : url(http://www.coolroomsspain.com/style/newsbox-top.gif);
background-repeat : no-repeat;
height : 17px;
}
div#sidebarmiddle {
background-color : #d70000;
color : #fff;
clear : both;
}
div#sidebarmiddle a, div#sidebarmiddle a:link div#sidebarmiddle a:active div#sidebarmiddle a:visited {
text-decoration : none;
background-color : inherit;
color : #ffcc00;
border-bottom : none;
}
div#sidebarmiddle a:hover {
text-decoration : none;
color : #fff;
border-bottom : none;
}
div#sidebarbottom {
background-color : inherit;
background-image : url(http://www.coolroomsspain.com/style/newsbox-bottom.gif);
background-repeat : no-repeat;
height : 18px;
}
div#sidebar.hascontent {
padding : 0 1%;
width : 24%;
}
div#footer {
clear : both;
color : #333333;
background-color : inherit;
background-image : url(http://www.coolroomsspain.com/style/bg-footer.gif);
background-repeat : no-repeat;
height : 58px;
text-align : center;
padding-top : 0;
}
div#footer p {
font-size : 0.8em;
padding : 1.5em;
text-align : center;
margin : 0;
}
div#footer p a {
color : #18507c;
}
div#footer p a:hover {
color : #666;
background-color : inherit;
}
div.hr {
height : 1px;
margin : 1em;
border-bottom : 1px dotted black;
}
div.left49 {
float : left;
width : 49%;
font-size : 90%;
}
div.right49 {
float : right;
width : 49%;
text-align : right;
font-size : 90%;
}
div#content {
background-color : #e9f7fe;
background-image : url(http://www.coolroomsspain.com/style/bg-main.png);
background-repeat : no-repeat;
min-height : 560px;
}
div#content h1 {
font-size : 2em;
line-height : 1em;
margin : 0;
}
div#content h2 {
color : #ffcc00;
font-size : 1.5em;
text-align : left;
padding-left : 0.5em;
padding-bottom : 1px;
border-bottom : 1px solid #ffcc00;
border-left : 3px double #ffcc00;
line-height : 1.5em;
margin : 0 0 0.5em 0;
}
div#content h3 {
color : #294b5f;
font-size : 1.3em;
line-height : 1.3em;
margin : 0 0 0.5em 0;
}
div#content h4 {
color : #294b5f;
font-size : 1.2em;
line-height : 1.3em;
margin : 0 0 0.25em 0;
}
div#content h5 {
font-size : 1.1em;
line-height : 1.3em;
margin : 0 0 0.25em 0;
}
h6 {
font-size : 1em;
line-height : 1.3em;
margin : 0 0 0.25em 0;
}
p {
font-size : 1em;
margin : 0 0 1.5em 0;
line-height : 1.4em;
padding : 0;
}
blockquote {
border-left : 3px solid #ffcc00;
margin-left : 10px;
}
pre {
font-family : monospace;
font-size : 1em;
}
strong, b {
font-weight : bold;
}
em, i {
font-style : italic;
}
code, pre {
white-space : pre-wrap;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 1em;
}
code, pre {
border : 1px dashed #005185;
color : #000;
background-color : #cbeaff;
margin : 0 1em 1em 1em;
padding : 0.5em;
line-height : 1.5em;
font-size : 90%;
font-style : italic;
}
div#main ul, div#main ol, div#main dl {
font-size : 1em;
line-height : 1.4em;
margin : 0 0 1.5em 0;
}
div#main ul li, div#main ol li {
margin : 0 0 0.25em 3em;
}
div#dl dt {
font-weight : bold;
margin : 0 0 0.25em 3em;
}
div#dl dd {
margin : 0 0 0 3em;
}
span.accesskey {
text-decoration : none;
}
.accessibility, hr {
position : absolute;
top : -999em;
left : -999em;
}
dfn {
position : absolute;
left : -1000px;
top : -1000px;
width : 0;
height : 0;
overflow : hidden;
display : inline;
}
a.external span {
position : absolute;
left : -5000px;
width : 4000px;
}
a.external {
padding : 0 12px 0 0;
}
a.external:link {
color : #18507c;
background : url(images/cms/external.gif) no-repeat 100% 0;
}
a.external:visited {
color : #18507c;
background : url(images/cms/external.gif) no-repeat 100% 0;
}
a.external:hover {
color : #18507c;
background : url(images/cms/external.gif) no-repeat 100% 0;
background-color : #c3d4df;
}
.clearfix:after {
content : ".";
display : block;
height : 0;
clear : both;
visibility : hidden;
}
* html > body .clearfix {
display : inline-block;
width : 100%;
}
* html .clearfix {
height : 1%;
}
#menu_vert {
margin-left : 0;
margin-right : 0;
}
.clearb {
clear : both;
}
#menuwrapper {
background-color : inherit;
width : 100%;
background-image : url(http://www.coolroomsspain.com/style/bg-menu.png);
background-repeat : no-repeat;
height : 30px;
}
#primary-nav li li {
width : 150px;
}
#primary-nav, #primary-nav ul {
list-style : none;
margin : 0;
padding : 0;
}
#primary-nav ul {
position : absolute;
top : auto;
display : none;
}
#primary-nav ul ul {
margin-top : 1px;
margin-left : -1px;
left : 100%;
top : 0;
}
#primary-nav li {
margin-left : -1px;
float : left;
}
#primary-nav li li {
margin-left : 0;
margin-top : -1px;
float : none;
position : relative;
}
#primary-nav a {
display : block;
margin : 0;
padding : 5px 10px;
text-decoration : none;
color : #fff;
font-weight : bold;
border-bottom : none;
}
#primary-nav li a {
border-right : 0;
border-left : 1px solid #fff;
}
#primary-nav li li a {
background-color : #487493;
}
#primary-nav li, #primary-nav li.menuparent {
background-color : inherit;
}
#primary-nav li.menuactive {
background-color : #c70000;
}
#primary-nav ul li.menuparent, #primary-nav ul li.menuparent:hover, #primary-nav ul li.menuparenth {
background-image : url(images/cms/arrow.gif);
background-position : center right;
background-repeat : no-repeat;
}
#primary-nav li:hover, #primary-nav li.menuh, #primary-nav li.menuparenth, #primary-nav li.menuactiveh {
background-color : #a60000;
}
#primary-nav ul, #primary-nav li:hover ul, #primary-nav li:hover ul ul, #primary-nav li.menuparenth ul, #primary-nav li.menuparenth ul ul {
display : none;
}
#primary-nav li:hover ul, #primary-nav ul li:hover ul, #primary-nav ul ul li:hover ul, #primary-nav li.menuparenth ul, #primary-nav ul li.menuparenth ul, #primary-nav ul ul li.menuparenth ul {
display : block;
}
#primary-nav li li {
float : left;
clear : both;
}
#primary-nav li li a {
height : 1%;
}
div#newstop {
margin : 2em 0 1em 1em;
border : 1px solid #000;
background : #ffe9af;
}
div#newsbottom {
margin : 2em 0 0 1em;
border : 1px solid #000;
background : #ffe9af;
}
div#news {
margin : 2em 0 1em 1em;
border : 1px solid #000;
background : #ffe9af;
}
div#news h2 {
line-height : 2em;
background : #fff;
}
.NewsSummary {
padding : 0.5em 0.5em 1em;
margin : 0 0.5em 1em 0.5em;
border-bottom : 1px solid #ffcc00;
}
.NewsSummaryPostdate {
font-size : 90%;
font-weight : bold;
}
.NewsSummaryLink {
font-weight : bold;
padding-top : 0.2em;
}
.NewsSummaryCategory {
font-style : italic;
margin : 5px 0;
}
.NewsSummaryAuthor {
font-style : italic;
padding-bottom : 0.5em;
}
.NewsSummarySummary, .NewsSummaryContent {
line-height : 140%;
}
.NewsSummaryMorelink {
padding-top : 0.5em;
color : #ffcc00;
}
#NewsPostDetailDate {
font-size : 90%;
margin-bottom : 5px;
font-weight : bold;
}
#NewsPostDetailSummary {
line-height : 150%;
}
#NewsPostDetailCategory {
font-style : italic;
border-top : 1px solid #ccc;
margin-top : 0.5em;
padding : 0.2em 0;
}
#NewsPostDetailContent {
margin-bottom : 15px;
line-height : 150%;
}
#NewsPostDetailAuthor {
padding-bottom : 1.5em;
font-style : italic;
}
body {
color : #000 !important ;
background-color : #fff !important ;
font-family : arial;
border : 0 !important ;
}
* {
border : 0 !important ;
}
.accessibility, .noprint {
display : none !important ;
}
div#content, div#main {
display : block !important ;
width : 100% !important ;
border : 0 !important ;
padding : 1em !important ;
}
div#header, div#header h1 a, div.breadcrumbs, div#search, div#footer, div#menu_vert, div#news, div.right49, div.left49, div#sidebar {
display : none !important ;
}
img {
float : none;
}

djkirstyjay · Post by **djkirstyjay** » Mon Aug 18, 2008 6:10 pm

I've sorted it!!! I added the following code

div#sidebarmiddle {
margin-top:0; For all other browsers
#margin-top:-7px; Only for IE
}

christiaans · Post by **christiaans** » Tue Aug 19, 2008 12:19 pm

Good you solved it, but that is never going to be validated.

Something else you could try, through a conditional comment:

Place the content here!

And leave the 'tweaked' css out.

That way it will be validated, both xhtml and css.

djkirstyjay · Post by **djkirstyjay** » Tue Aug 19, 2008 12:42 pm

Thanks for that

christiaans · Post by **christiaans** » Tue Aug 19, 2008 12:57 pm

You're very welcome, we're all here to help eachother out, aren't we

.

djkirstyjay · Post by **djkirstyjay** » Tue Aug 19, 2008 1:06 pm

and it works perfick!

Unfortunately I cannot give you 2 karma applauds in the same hour

christiaans · Post by **christiaans** » Tue Aug 19, 2008 1:27 pm

djkirstyjay wrote: and it works perfick!

Unfortunately I cannot give you 2 karma applauds in the same hour

Very good to hear it works. The reason I stressed the importance is that I have been fiddling with it for a long time aswell myself

.

djkirstyjay · Post by **djkirstyjay** » Tue Aug 19, 2008 1:30 pm

Well, I will remember that little snippet for as long as I live, and as it has caused me considerable hours of agonising in the past too, ultimately you have probably saved oodles of my time in the furture and I may even get to take a holiday at some point as a result

So... it just goes to show how little things can make a huge difference

FYI : The site now works perfectly in IE6, IE7, FF & Safari.

In the words of Hannibal... I love it when a plan comes together

CMS Made Simple Forums

[Solved] This is driving me nutty! Gap in IE7, but not in FF.

[Solved] This is driving me nutty! Gap in IE7, but not in FF.

Re: [solved] This is driving me nutty! Gap in IE7, but not in FF.

Re: [solved] This is driving me nutty! Gap in IE7, but not in FF.

Re: [solved] This is driving me nutty! Gap in IE7, but not in FF.

Re: [solved] This is driving me nutty! Gap in IE7, but not in FF.

Re: [solved] This is driving me nutty! Gap in IE7, but not in FF.

Re: [solved] This is driving me nutty! Gap in IE7, but not in FF.

Re: [solved] This is driving me nutty! Gap in IE7, but not in FF.