Theme breaks in Explorer

  • Resolved false1

    (@false1)


    16 years, 1 month ago

    I finaly found a theme that works right for my site but unfortunately it breaks in Explorer 6 and 7. I had started setting it up in Firefox so I didn’t realize there was a problem. It can be viewed at http://www.quadratix.com/families/rnh.

    For some reason the content of the site shifts to the left. It should be within the white background. I thought that maybe it was a typical Explorer issue that could be fixed with a known hack. Works fine in Firefox Win/Mac and Safari Mac so it must be an Explorer issue, right?

    any help would be appreciated.

    thanks

Viewing 4 replies - 1 through 4 (of 4 total)
  • drewactual

    (@drewactual)

    16 years, 1 month ago

    try this:

    in your css file:

    in .post
    get rid of the float:left

    just a shot though… I think that may do it.

    Thread Starter false1

    (@false1)

    16 years, 1 month ago

    Thanks for the help but that didn’t work. Actually the site is passable in IE7. The content starts to center itself as you open the window. IE6 is just worse. It seems like it would have something to do with how the basic “wrapper” divs are not centering themselves in the site. Here is the CSS:

    `
    body {

    font-family: Verdana, Tahoma, Arial, Helvetica; font-size: 13px;
    background: #ebeae3 url(images/bg.gif) repeat-y top center;
    margin: 0;
    padding: 0;
    color: #3c3c3c;
    }

    #box {
    width: 940px;
    margin: 0 auto;
    padding: 0px;
    }

    #top {
    width: 940px;
    background: url(images/header.jpg) no-repeat;
    height: 241px;
    margin-top: 10px;
    padding: 0;
    }

    #header {
    float: left;
    width: 940px;
    margin: 120px 0 0 100px;
    padding: 0;
    }

    #header h1 {
    font-family: "Trebuchet MS", Arial, Verdana, Helvetica;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    color: #f2f2f2;
    font-size: 20px;
    font-weight: normal;
    }

    #header h1 a, #header h1 a:link {
    color: #fff;
    margin-left: 400px;
    }

    #header h1 a:hover {
    color: #f9f9f9;
    text-decoration: none;
    }

    #description {
    color: #f9f9f9;
    font-size: 12px;
    padding: 0 0 0 502px;
    }
    `

    The basic wrappers are called “box” and “top”
    Does this help?

    false1

    drewactual

    (@drewactual)

    16 years, 1 month ago

    been investigating…..

    here we go:

    Your content relies on a picture to give it the white background. That is fine, and certainly a way to do it, but not the right way to do it… why? ’cause all browsers render their perception of YOUR code… and a couple browsers (I.E.) which are the responsible party for many a bald developer, will render it without predictability every time when you do something like you did with the picture background.

    how to fix it:

    roll your sleeves up.
    open your css.

    find:

    background: #ebeae3 url(images/bg.gif) repeat-y top center;

    in your BODY declaration. make it look like:

    background: #ebeae3;

    Now, go to your #box declaration, and add to it:

    background: #ffffff;

    you may also want to add a nice little border around the #box too, just for the heckuvit. 🙂

    this should do your thing for you, and it will eliminate browsers from tripping all over themsleves trying to figure it out….

    Thread Starter false1

    (@false1)

    16 years, 1 month ago

    thanks for the help drewactual,

    Your advice helped but the white background area was still bigger on the right hand side in ie 6 and 7. Plus my blog title was falling out of the box on the right side; ie 6. I had to adjust some margins and padding in order to get the content from going right to the edge of the white box.

    I finally realized that some the margin coding in the “header” tag was causing problems. So I basically removed all the padding and margin code for the header and description, floated both to the right, and added padding or margins, depending on what worked in all browsers, to place the text where I wanted.

    It took awhile but job well done. Also my blog name and description are now flush right. No big deal though. Here is the new code, commented as best as I could.

    Thanks for the help

    <code>

body { 

 font-family: Verdana, Tahoma, Arial, Helvetica; font-size: 13px;
 background: #ebeae3; /*REMOVED BACKGROUND IMAGE BG.GIF*/
 margin: 0;
 padding: 0;
 color: #3c3c3c;
 }

#box {
	width: 940px;
	margin: 0 auto;
	padding: 10px 10px; /* NEW */
	background: #ffffff; /*ADDED BACKGROUND COLOR*/
}

#top {      /*HOLDS HEADER IMAGE, TITLE "H1", AND SUBTITLE "description"*/
width: 940px;
 background: url(images/header.jpg) no-repeat;
 height: 241px;
 margin: 0 auto; /*NEW*/
/*margin-top: 10px;*/
 padding: 0;
 }

/* Header */

#header {
 float: right; /*modified*/
 width: 940px;
 margin: 120px 0 0 0; /*-was breaking out of margin-*/
 padding: 0;
 }

#header h1 {
  float: right; /*NEW*/
 font-family: "Trebuchet MS", Arial, Verdana, Helvetica;
 text-transform: uppercase;
 margin: 0;
 padding: 0 20px 0 0; /*MODIFIED*/
 color: #f2f2f2;
 font-size: 20px;
 font-weight: normal;
 }

#header h1 a, #header h1 a:link {
 color: #f2f2f2;

 /* margin-left: 400px; */
 }

#header h1 a:hover {
 color: #fff;
 text-decoration: none;
 }

#description {
  float: right; /*NEW*/
  color: #f9f9f9;
  font-size: 12px;
  padding: 0 20px 0 0; /*modified*/
 }
</code>
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Theme breaks in Explorer’ is closed to new replies.

Tags