WP-Brown Theme Broken in IE

  • trekwithus

    (@trekwithus)


    16 years ago

    I just downloaded and installed the WP-Brown 1.3 theme and really like it. However, the background of the main cell doesn’t display correctly in IE. It works fine in Firefox. Even the sample site doesn’t display correctly in IE. You can see the preview site here:

    https://wp-themes.com/wp-brown/

    Has anyone else worked on this theme and come up with a fix? I’m sure it’s a real simple tweak, but I can’t figure it out. If you look at my site – trekwith.us – you can see that the background displays halfway down the page. It’s almost as though the right nav is controlling the background because the background displays just below the last of the widgets.

    This is the background css:
    .content { background: #ffffff url(images/sidebarbg.jpg) repeat-y right; }
    .leftcontent { width: 550px; margin: 25px; float: left; }
    .rightcontent { float: left; width: 350px; }

    The display is controlled here:
    <?php get_header(); ?>
    <div class=”content”>
    <div class=”leftcontent”>
    <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
    <div class=”article”>
    <h2>” title=”<?php the_title(); ?>”><?php the_title(); ?></h2>
    <div class=”postcontent”>
    <?php the_content(‘Read the rest…’); ?>
    </div>
    </div>
    <?php endwhile; ?>
    <?php endif; ?>
    </div>
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>

    Help!

Viewing 12 replies - 1 through 12 (of 12 total)
  • Thread Starter trekwithus

    (@trekwithus)

    If a developer could take a peak at this I’d really appreciate it… I’ve got a feel for css, but this is beyond me. Thanks!

    ameo02

    (@ameo02)

    I really wish I could do more for you, but only thing I have now is this: CODE FOR ie.css:

    .sidebar .item {
margin-left : 25px;
}
.search input.submit {
height : 26px;
}
.search input {
height : 26px;
}
.half ul li {
width : 150px;
float : left;
padding : 5px;
}
.content {
margin-bottom : 20px;
height : 100%;
}

    So main thing for that background fix would be
    height;100%;
    in content I guess.

    But that doesn’t really fix positioning of sidebar and other things on right which fall down,
    and don’t display properly. I really suggest you use “modern browsers” and aks your readers
    to do so. Firefox, Opera, Chrome. IE has such issues that it’s awful to fix them. Sorry again I wasn’t more helpfull. Hopefully someone will help you with that.

    Thread Starter trekwithus

    (@trekwithus)

    Thanks for your help. I’ll try that and hope it helps. Of course, everything displays great in Firefox and I use Firefox exclusively, but I still check everything in IE because so many people use it.

    ameo02

    (@ameo02)

    here it is; updated .css 4 display in IE – I worked hard with my insufficient .css knowledge to get
    it right on my localhost. I really do hope it helps you, I’ve fixed display of posts, and hopefully, sidebar shall be on top right now! [if maybe it isn’t then you should look in default style.css and find & replace with this line: .rightcontent { float: right; width: 350px; }]

    —-IE.css——–

    .sidebar .item {
margin-left : 25px;
}
.search input.submit {
height : 26px;
}
.search input {
height : 26px;
}
.half ul li {
width : 150px;
float : left;
padding : 5px;
}
.content {
margin-bottom : 20px;
height: 100%;
}
.rightcontent{
  position: relative;
  bottom: 6030px;
}
.mcomments {padding-right: 30px;} 

.postcontent {
padding-right: 35px;
text-align:justify;
}
    eric-simon

    (@eric-simon)

    I used ameo02’s CSS above and added a few tweaks:

    * sidebar wasn’t appearing at all
    * sidebar li elements were too wide to fit two side-by-side
    * search input was too tall
    * ‘search’ text (img) was offset too low

    YMMV, but the results look really good for me in IE7 (see salonjm.net). Again, hat tip to ameo02 for doing most of the work. You can just slap this code verbatim into the theme’s included ie.css file.

    .sidebar .item {margin-left : 25px;}
.search {padding: 20px 0 0px 0; width: 275px; float: right; text-align: right;}
.search input.submit {height : 26px;}
.search input {height : 16px;}
.half ul li {width : 140px;float : left;padding : 5px;}
.content {margin-bottom : 20px;height: 100%;}
.rightcontent { float: right; width: 350px; }
.mcomments {padding-right: 30px;}
.postcontent {padding-right: 35px;text-align:justify;}

    I have recoded the wp-bown theme. So the style sheets and theme PHP files have be rewritten.

    Currently I’m testing wordpress with my altered wp-brown theme.
    I have tested my version with several browsers (like IE /Firefox) on different Operation Systems (Windows/Mac). Everything looks ok and all the browsers show the same behaviour.

    Does anyone know where I can distribute my modified theme? And are there any guidelines?

    That fixed worked great for me. Thanks a bunch Eric and ameo02 !

    Thanks so much…this saved me alot of headache. Works great in IE

    Can you put a link up where we can download the recoded working theme for wp-brown. You can always just put it up on a server and give the download link i guess. The above fix is not quite working for me

    And neither for me. Would definitely be interested in you putting up a zip file of the recoded theme.

    Any more progress on this?

    I really would like some help. ??

    Thanks so much for your help!
    So far it’s working perfectly on IE7

    For those who have troubles fixing the style, the only thing you have to do is to open this file with any plain text editor (notepad is a good option):

    wp-content/themes/p-brown/ie.css (this file tries to fix the style bugs of the annoying IE).

    Then replace the whole text with the code that Eric Simon posted, and that’s it!

    Thanks again!
    Esteban López Adriano from Argentina

    p.s.: Can anyone kill IE?

    Muchas Gracias por su ayuda!
    Hasta ahora funciona perfectamente en IE7

    Para aquellos que tienen problemas para arreglar el estilo, lo único que tienen que hacer es abrir este archivo con cualquier editor de texto plano (block de notas es una buena opción):

    wp-content/themes/p-brown/ie.css (este archivo intenta solucionar los bugs de estilo del molesto IE).

    Luego, reemplace el texto completo por el código que posteó Eric Simon, y eso es todo!

    Gracias de nuevo!
    Esteban López Adriano desde Argentina

    p.s.: Alguien puede matar al Explorer?

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘WP-Brown Theme Broken in IE’ is closed to new replies.