Trying to fix two issues in IE7

I am trying to fix these two issues in IE7:
http://designingthemes.tumblr.com

  1. The yellow bar at the top of the page is actually a drop down menu that should be positioned further down. I dont know why IE7 is not positioning it correctly?

  2. The content has been pushed down the page? I have tried setting the sidebar to overflow hidden but that did nothing?

Thanks for any help
Gavin

ps. I have validated the site, the 3 errors are to do with the vimeo code for video and tumblr the blog software.

Try using conditional commands to display different css rules for IE7. Here is an article that explains how you can use conditionals.

Hope that helps you.

Hi,

Don’t use CCs unless you know its a bug and not just bad coding :slight_smile:

The problem with the top is that you haven’t set any positions for it.


#slidingmenu {
    margin: 0;
  [B]  /*margin-top: -20px;*/
    top:0;
    left:0;[/B]
    padding: 0;
    position: fixed;
    width: 100%;
}


  1. It seems you have the closing tag of the container in the wrong place.

It seems to be here:


                </a> </div>
        </div>
   [B] </div>
[/B]    <div id="content">
        <div class="post">
            <div class="quote">


Move it to after the content container instead.

Also note that the following code is invalid:


    <a href="http://www.tumblr.com/liked/by/designingthemes">
    <p><span>See more stuff I like</span></p>
    </a>

You can’t wrap anchors around block elements. It would need to be like this:


  <p><a href="http://www.tumblr.com/liked/by/designingthemes">
        <span>See more stuff I like</span></a></p>

You could of course then set the anchor to display block if you wanted it to behave like a block element.

Thanks for all the help!

I made the changes to the code and it seems to have worked a treat!

I did add a CC for IE6 - This was because the fixes didnt work for it, but when I did the CC it did. Not really supporting IE6, but it looks ok ish.

I have however just spotted another issue, the two links in the middle of the menu dont seem to show as links in IE7? They do in all other browsers? Not sure what is going on there?

Thanks again for all the help.

Hi,

It’s because you have set the form element to display:inline and then added padding to it. Vertical padding on inline elements won’t do what you think. You don’t really want all forms displaying inline anyway.

Change the code as follows:


form {
    clear: both;
    /*display: inline;*/
    padding-bottom: 10px;
    /*padding-top: 40px;*/
    text-align: center;
}


You would also be better off targeting just that form:


.[B]panel form [/B]{
    clear: both;
  [B]  /*display: inline;*/[/B]
    padding-bottom: 10px;
[B]    /*padding-top: 40px;*/
 [/B]   text-align: center;
}


I also notice that you are doing this:


* {
    border: 0;
    font-family: sans-serif;
    font-style: normal;
    font-weight: normal;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

That’s not really a good idea as specifying the font-family like that will kill inheritance and anything you set on body won’t be inherited into any other elements and ruins the cascade.

The only thing you should set globally with the universal selector is margin and padding and even then it will interfere with the default appearance of form controls and is best avoided.

See the CSS faq on resets for more information.

Thanks again for the help. That fixed the links issue. I will have a look at changing that reset css.

I keep meaning to go back and set the actual elements, but I was given it to start with and now have to think about changing it.

Thanks again

Almost there! lol

I have found one last issue, In my sidebar, The background gradient for the image labels in the likes section are not showing? Only the border is?

This is strange because it is using the same css styles as all the video, photo and audio posts and they all have there gradients intact?

Any ideas?

Thanks

Hi, I looked through almost every element I found, I couldn’t find any element in the likes container/children that even had a background image set?? Am I looking in the wrong place? Which CSS part has the background image? (I also looked through the CSS via CTRL+F)

Hi, I am not using background images here, I am using CSS3 gradients. They seem to work for the other elements on the page, but just not for the text on the sidebar.

Here is the css I am using for that element. You can see it is the same for the other blocks, they just show it and the sidebar doesnt?

Thanks

.photo, .video, .audio, .like_caption p a
{

/* Rounded corners */  
      -moz-border-radius: 3px; /* FF1+ */
      -webkit-border-radius: 3px; /* Saf3+, Chrome */
      border-radius: 3px; /* Opera 10.5, IE 9 */  
      border: 2px solid #cfcd17;  
  
/* Multiple border colors */  
       -moz-border-top-colors: #cfcd17 #ffc556;  
       -moz-border-right-colors: #cfcd17 #ffc556;  
       -moz-border-bottom-colors: #cfcd17 #ffc556;  
       -moz-border-left-colors: #cfcd17 #ffc556; 
  
/* Background subtle gradient, with fallback to solid color */  
      background-image: -moz-linear-gradient(top, {color:Media Top Gradient}, {color:Media Bottom Gradient}); /* FF3.6 */
      background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, {color:Media Top Gradient}),color-stop(1, {color:Media Bottom Gradient})); /* Saf4+, Chrome */
      filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='{color:Media Top Gradient}', EndColorStr='{color:Media Bottom Gradient}'); /* IE6,IE7 */
      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='{color:Media Top Gradient}', EndColorStr='{color:Media Bottom Gradient}')"; /* IE8 */ 
}

The “See more stuff I like” has a gradient background colour. It’s pretty subtle but there is a definite gradient there.

BTW you can’t do this:


<a href="[http://www.tumblr.com/liked/by/designingthemes](http://www.sitepoint.com/forums/view-source:http://www.tumblr.com/liked/by/designingthemes)">
 <p><span>See more stuff I like</span></p>
</a>


An anchor can’t hold a block level element like a paragraph.

You would need to do this:


<p><a href="http://www.tumblr.com/liked/by/designingthemes"><span>See more stuff I like</span> </a></p>

Just set the anchor to display:block (and a width for ie6) and the whole are will be active.

Thanks for the heads up.
So I have played around a little more (doesnt seem to be a good thing for me)

And now I have the sidebar working in IE7 and 8. But in IE7 now the slider and blocks of content have lots all their styling?

Should I create a separate stylesheet just for IE7, that has no CSS3 and just uses solid colours or background images?

Sorry this one last style is taking so much of your time.

Thanks,
Gavin

IE7 will need the element to be in haslayout mode before the filter will work so add zoom:1.0 to the elements that the filter is applied to.

Sorry, when you refer to the filter are you talking about when I add a separate style sheet for ie7?

So any special elements in that stylesheet will have to have a zoom:1.0 set?

Only if you are applying a filter (the IE7 stuff basically) because IE7 needs haslayout.

Not every element should need hte zoom:1 (not every element in your IE7 file will need the zoom:1 (haslayout) :))

Thanks for clearing that up for me, mind is a little frazzled. I’ll give that a go tomorrow.
Thank you both for all your help,
Much appreciated!

Thanks for clearing that up for me, mind is a little frazzled. I’ll give that a go tomorrow.
Thank you both for all your help,
Much appreciated!

Right, a fresh start! lol

I have added a IE7 and bellow stylesheet. I have managed to get everything to display as best I can so very happy with that.

Problem is… The site wont even load in IE6? I am not really worried about how it looks in IE6, but it should at least load? Any ideas?

Thanks for all the help.

ps. I havent set a zoom value? Still not sure where or how that should be done. Will have a look around.

Find the filters you set in your stylesheet. Unles they have a width/height/float/absolute postiion/any other haslayout trigger, then it will need zoom:1; added.

I wish I Could see if it loads in IE6 for you but I’m late for work already :slight_smile:

HI,

It’s not working in iE6 because you have missed the closing style tag within the ie conditional comments.


}
div#slidingmenu{top:40px;}
[B]</style>[/B]
<![endif]-->
</head>


The zoom just needed to be applied to any existing rule that you have applied the filter to and doesn’t already have haslayout.
e.g.


.text, .chat,.video object {zoom:1.0}

To name but a few :slight_smile: