4 replies [Last post]
psyter
Offline
newbie
Last seen: 12 years 11 weeks ago
Joined: 2007-02-20
Posts: 3
Points: 0

Hello i have a problem with the sidebars in a wordpress theme where it looks like it stretches the left sidebar and the right sidebar is then out of place, this is only in IE.

Im working locally, so dont have the theme live yet, will probably have the theme uploaded some time today though.

I am including the images of how it looks and the code.

http://img368.imageshack.us/my.php?image=topbb5.jpg

http://img53.imageshack.us/my.php?image=bottomrn8.jpg

Added Link http://www.webhostright.com/ i am now providing the link since i now have the theme live, the problem is in IE only, in firefox it shows fine.

HTML:

<?php bloginfo('name'); ?><?php wp_title(); ?>

; charset=<?php bloginfo('charset'); ?>" />
" />

" type="text/css" media="screen" />
" />
" />
" />
" />

<?php wp_get_archives('type=monthly&format=link'); ?>
<?php //comments_popup_script(); // off by default ?>
<?php wp_head(); ?>


    <?php wp_list_pages('depth=1&title_li='); ?>

<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

">

" title="<?php the_title(); ?>"><?php the_title(); ?>

<?php the_content(); ?>

<?php endwhile; ?>

<?php else : ?>


<?php _e('Not Found'); ?>


<?php endif; ?>

    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('leftsidebar') ) : ?>

  • <?php _e('Calendar'); ?>


    <?php get_calendar(); ?>
  • <?php wp_list_pages('depth=3&title_li=

    Pages

    '); ?>

  • <?php _e('Categories'); ?>



      <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>

  • <?php _e('Archives'); ?>



      <?php wp_get_archives('type=monthly'); ?>

  • <?php get_links_list(); ?>

  • <?php _e('Meta'); ?>



      <?php wp_register(); ?>
    • <?php wp_loginout(); ?>

    • <?php wp_meta(); ?>

  • <?php endif; ?>

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('rightsidebar') ) : ?><?php endif; ?>
this is tester text
this is tester text
this is tester text
this is tester text

CSS:

body, h1, h2, h3, h4, h5, h6, blockquote, p, form{ margin: 0; padding: 0; }

body{
margin: 0;
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
text-align: center;
vertical-align: top;
background: #ffffff;
color: #000000;
}

a:link, a:visited{
text-decoration: underline;
color: #11244F;
}

a:hover{
text-decoration: none;
color: #0156FE;
}

p{
padding: 10px 0 0 0;
}

#wrapper{
background: url('images/wrapperbgjp5.jpg') repeat-y;
margin: 0 auto;
width: 950px;
text-align: left;
border: 1px solid #000000;
}

#header{
background: #81A0D9 url('images/950x240.jpg') no-repeat;
width: 950px;
height: 240px;
}

#menu{
float: left;
width: 950px;
border-top: 1px solid #7EFF00;
background: #81A0D9;
}

#menu ul{
list-style: none;
margin: 0;
padding: 0;
}

#menu ul li{
float: left;
}

#menu ul li a{
display: block;
padding: 10px;
border-right: 1px solid #7EFF00;
text-decoration: none;
color: #000000;
}

#menu ul li a:hover{
background: #f9f9f9;
}

#container{
float: left;
width: 530px;
padding: 10px;
}

.post{
padding: 10px 0 10px 0;
}

.post h2{
font-family: Georgia, Sans-serif;
font-size: 18px;
}

.entry{
line-height: 18px;
}

.entry img{
border: none;
margin: 5px;
}

.entry img a{
border: none;
}

p.postmetadata{
border-top: 1px solid #D4DCF1;
margin: 10px 0 0 0;
}

.navigation{
padding: 10px 0 0 0;
font-size: 14px;
font-weight: bold;
line-height: 18px;
}

.leftsidebar{
float: left;
width: 199px;
background: #D4DCF1;
border-left: 1px solid #7EFF00;
margin: 0 0 0 0;
color: #000000;
}

.leftsidebar ul{
list-style-type: none;
margin: 0;
padding: 0 10px 0 10px;
}

.leftsidebar ul li{
padding: 10px 0 10px 0;
}

.leftsidebar ul li h2{
font-family: Georgia, Sans-Serif;
font-size: 14px;
}

.leftsidebar ul ul li{
padding: 0;
line-height: 24px;
}

.rightsidebar{
float: left;
width: 179px;
background: #5E74A3;
margin: 0 0 0 0;
color: #FFFFFF;
padding: 10px;
}

#footer{
clear: both;
width: 930px;
border-top: 1px solid #7EFF00;
background: #81A0D9;
padding: 10px;
color: #ffffff;
text-align: center;
}

psyter
Offline
newbie
Last seen: 12 years 11 weeks ago
Joined: 2007-02-20
Posts: 3
Points: 0

I got it fixed, i resaved

I got it fixed, i resaved the php files as UTF-8 without BOM, that was infact to fix a seperate problem but it ended up fixing the IE problem too. :thumbsup:

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 33 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

That makes sense as anything

That makes sense as anything before the DTD, and that includes the BOM, will put IE into quirks mode where it pretends to be IE5 using the wrong box model, and so applying it's own unique widths to things.

You'll note that the way you chose to post your problem there was no way for us to solve it from this end. If you'd put a link to the page on the other hand, it would have been easy. Also validating your code might have told you about this since the W3C validator tells you about the bom being there.

That's one reason we ask people to make sure there code is valid before posting.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

psyter
Offline
newbie
Last seen: 12 years 11 weeks ago
Joined: 2007-02-20
Posts: 3
Points: 0

Ed Seedhouse wrote:That

Ed Seedhouse wrote:
That makes sense as anything before the DTD, and that includes the BOM, will put IE into quirks mode where it pretends to be IE5 using the wrong box model, and so applying it's own unique widths to things.

You'll note that the way you chose to post your problem there was no way for us to solve it from this end. If you'd put a link to the page on the other hand, it would have been easy. Also validating your code might have told you about this since the W3C validator tells you about the bom being there.

That's one reason we ask people to make sure there code is valid before posting.

At first i couldn't put a link to my site as it was still on my computer, i eventually did add a link once i got the theme uploaded, but i agree its better to provide a link where possible.

I had tried to validate a previous theme and couldn't understand why it was showing errors, then tried validating this one and the same type of errors showing, once i did the resaving as mentioned above it now validates fine.

Of course i didn't understand why certain things were happening but now it makes a little more sense to me, its only my 2nd time working with CSS, only two Wordpress themes so far, so i still have a lot to learn.

I did read your posting rules too, but was eager to try and fix it, there were a number of days of head scratching before i got it sorted.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 33 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

I think you really need good

I think you really need good html and CSS skills first, before wrestling with wordpress. CSS and html are hard enough to learn on your own.

As a matter of fact I'm wrestling with Worpress at the moment and it would be much much harder without such skills as I have already learned for html/css.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.