jeeremie
Member
Posted 4 years ago #
Hi,
I am creating a free WP theme and I want to create a nice border for the images in the sidebar. Here's the code:
#sidebar img {
display: block;
padding: 3px;
background: #F5F4F3;
border: 1px solid #E8E4E2;
}
Unfortunately, padding is not working in IE6. That's weird because I used the exact same code for a similar Web Template (only a HTML/CSS one) and there was no problem. For your information, Doctype is the same for both (<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">).
Please, don't tell me to put my image within a div to fix this problem. That's not a suitable solution.
Thanks.
I do that by wrapping the image inside a div.... the div has the border and padding... The only problem is that you must specify the height and width of this div... or float it.
StrangeAttractor
Member
Posted 4 years ago #
It's hard to tell without seeing the site -- IE6 has *so* many quirks and bugs with proper rendering of the CSS box model. Is your img wrapped inside a list tag? It can cause problems. Is your image inside a floated element? Or is it inheriting a float? There are an awful lot of different situations, and there's not always consistency in how IE6 manages to screw it up...
Have you googled this issue (since it's really a CSS issue, not a WordPress issue)?
(PS Have you tried using "inline-block" instead of block? Will position "relative" work in this case -- because sometimes that's a fix. Also, have you tried using margin instead of padding?)
jeeremie
Member
Posted 4 years ago #
You can see a very similar example here (look at the image in the second post). The code for this example is:
#content img {
border: 1px solid #D0C5BF;
background-color: #E7E1DE;
padding: 4px;
Margin: 15px 0;
}
As you can see, it is working fine. It is WordPress 2.1 I think.
I tried all the things you suggested above.
wp_guy, I don't want to wrap the image inside a div. Thanks anyway.
jeeremie
Member
Posted 3 years ago #
StangeAttractor,
I have found the problem and it wasn't a CSS issue. My css code was working perfectly fine with other WP themes.
The reason was because I put a comment on top of the page index.php of my theme, like this:
<!-- My comment was here, on top of the page -->
<?php get_header(); ?>
<div id="content">
<!-- My content here -->
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
I discovered it when I tried to put a doctype just before my comment on top of the page and it was working in IE6
StrangeAttractor
Member
Posted 3 years ago #
Ah, ok, interesting catch. I didn't know that would screw with IE6.
You should mark this thread resolved if your problem is fixed. Only you or a mod can do that.
This problem (comments before the get_header fucntion) also messes themes up with IE7 too.
See http://wordpress.org/support/topic/175674?replies=3
