Wordpress blog styling

Hi,

I need some help, maybe I’m just going crazy but I can’t put my finger on the problem…

Please check: Blog | Jam & Cheese. The red box should be floating next to the date. It works in IE7, but not in Chrome/Firefox/Safari (Windows/Mac). And I can’t get the sidebar up at the top next to the blog. Help!

Thanks in advance.

Remove float from .bericht and add display:inline for .post h2

As for sidebar, move it inside #container

Hi thanks for your reply.
It’s not quite what I wanted. The whole post (.bericht) should be indented, including the entry and meta. The sidebar doesn’t work either…

In that case for .post h2 remove display:inline and add clear:none and for .bericht add margin-left: 76px

Sidebar seems fine to me. Did you want it somewhere else?

Hi thanks again!
Yes the sidebar, I figured that one out already.

Thanks anyway, it works perfectly fine now :slight_smile:

Hi it’s me again for the same website: Jam & Cheese - Grafisch ontwerp en webdesign
Can you help me please?

  1. IE problem at the homepage. There’s only 1 list in IE, but in other browsers I see 2 (like it should be). How can I solve this?

  2. IE problem on the portfolio page. Please take a look. The portfolio items should be floating in 2 columns, in IE the third item is not floating …

  3. on the blog page: the next and previous-tags (red border div) should be at the bottom of the page…

Thanks in advance!!!

HI,

I assume you mean IE7 as you didn’t say.

  1. You have the list floated at 50% width and in IE 2 x 50% = 101% most of the time so always round down.

e.g.


#diensten ul li{
    width:49.5%;
    float:left;
}


Ok thanks, yes I meant IE7…

  1. Try removing the overflow:hidden and then add a left position for the caption.

.image-teaser {
    margin: 0;
    position: relative;
[B]    zoom:1.0;[/B]
}

.image-teaser a .caption {
    position: absolute;
    bottom:10px;
 [B]   left:0;[/B]
    width:200px;
} 



Be careful as you are making things bigger than they can be.


#drukwerk ul, #webdesign ul {
  [B]  width:100%;[/B]
    margin:30px 0 0 0;
    }
    
#webdesign ul {
    margin:30px 0 0 [B]15px;[/B]
    }



So webdesign ul is 100% wide + 15px margin makingt it 15px bigger than its parent which can’t be possible.

Also this is invalid.


</ul [B]id="navigation"[/B]>

You can’t put anything in closing tags.

  1. Clear your floats.

.navigation {
    border:1px solid red;
   [B] clear:both[/B]
}


Hi Paul, thanks again!

  1. Try removing the overflow:hidden and then add a left position for the caption.

OK, it’s working but the caption should sit at the bottom of the image thumbnail.

Be careful as you are making things bigger than they can be.

Yes indeed. I deleted the width and it works.

You can’t put anything in closing tags.

Lol I know that of course, just a little mistake (by copying and pasting)

  1. Clear your floats.

Alright, great!

Just adjust it for IE7 as its at the bottom in other browsers.


.image-teaser a .caption {
    position: absolute;
    bottom:10px;
    left:0;
    width:200px;
} 
[B]* html .image-teaser a .caption{bottom:3px}/* ie6*/
*+ html .image-teaser a .caption{bottom:3px}/* ie7*/
.image-teaser a:hover{border:none}[/B]


Thanks again :agree: