ThemeShaper Forums » Thematic


Understanding CSS

(2 posts)
  • Started 3 years ago by astima
  • Latest reply from middlesister
  • This topic is not resolved


  1. astima

    Okay, so my site displays differently in Safari and Firefox then it does in Internet explorer. In Internet explorer it displays exactly how I want it to and in the others there are some minor changes. In Safari and Firefox it pushes my menu up off the top of the page and it gets rid of the top padding around the thumbnail gallery so it is pushed up against the header.

    I noticed in the gallery's CSS near the bottom there are fixes for Internet explorer 6. All in the fixes start with .ie6. For example:

    .ie6 #container{
      width: 100%;
      overflow: hidden

    so my first question is does the.ie6 let the browser know that if it is using Internet Explorer 6 then to include these parameters or is that recognized by all browsers? And if that is only recognized by Internet Explorer 6 is there a way to write a CSS parameter for Safari?

    Posted 3 years ago #
  2. middlesister

    Well, to have sites display slightly differently in different browsers is something you sometimes have to live with, since they all have their own way of interpreting the code. That said, getting the same layout in all the browsers should not be a problem. Usually though, it is Safari and Firefox that gets it right, and you need to include some fixes for Explorer to play nicely.

    To answer your question about that code, it is targeting IE6 through a CSS class that gets added by thematic. Only IE6 will use that code, and is probably there because of a quirky behaviour it has. (Most web developers would gladly see IE6 die a horrible but speedy death).

    I second helgatheviking's recommendation to It is an extension to Firefox that will let you poke around and actually see how your HTML markup looks and what CSS declarations are used on those elements. You can easily see the layout and how the browser interprets your code.

    Looking at your site in firebug, I would suggest to add this to your style.css

    #access {

    That will make the access div play more nicely and your absolute positioning of the menu will refer to the whole page rather than the containing element. As for the padding of the gallery, I see no padding declared in the css, so I don't know where that space would come from. But you can add a bit of padding by changing the padding-top value of the #content div to something other than zero.

    Posted 3 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.