Forum Moderators: open

Message Too Old, No Replies

Image borders and padding not (really) showing up in IE

Image borders and padding work in Firefox, but not really in IE

         

Emile

5:13 pm on Sep 12, 2009 (gmt 0)

10+ Year Member



Hey everyone,

I have a question about my website, and I was hoping someone could please help me out in here. The problem I have is with the image borders and padding. They both work in Firefox, and in Internet Explorer, they show up for a second before disappearing.

I already checked the CSS and didn't find the problem there, but of course, I could very well be wrong. Could someone please help me out here? The thing that sort of confuses me is the fact that the borders and padding show up briefly, but disappear right as the page finishes loading.

Everything else works fine, and It's not a really big deal, but If things could show up as I intended, that'd be great.

Thanks,
Emile

[edited by: tedster at 5:33 pm (utc) on Sep. 12, 2009]
[edit reason] no personal links please [/edit]

D_Blackwell

5:39 pm on Sep 12, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome to WebmasterWorld. The link is going to get chopped, and though the problem is easy enough to see, and probably to fix - I cannot comment without a sample of HTML/CSS that replicates the problem. There will be no context to tie the question to the answer, which would make the thread worthless a reference.

Strip the code down to the problem. If the solution does not present itself in that process, then post the relevant code here (preferably 'test ready').

Emile

6:01 pm on Sep 12, 2009 (gmt 0)

10+ Year Member



Well, here's where the problem applies to, specifically, the 'theme-snapshot' div:

<div class="post-theme">
<div class="theme-snapshot"><img src="IMG" /></div>
<div class="theme-content">
<div class="theme-header">
<div class="title"><h2>Killbot Design</h2></div>
<a href="URL" target="_blank">View Project</a>
<a href="#">Website</a>
<br><br><br>CONTENT</div>
</div>
</div>

The CSS directly applying to this is:

.theme-snapshot {

float: left;
height: 260px;
width: 310px;

}

.theme-snapshot img {

border: 4px solid #202020;
height: 250px;
padding: 1px;
width: 300px;

}

If you need anymore, just let me know.

D_Blackwell

6:19 pm on Sep 12, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The provided code does not, so far as I can see, recreate the problem described. Take some more time. Look deeper, watch more carefully.

in Internet Explorer, they show up for a second before disappearing.

Emile

6:34 pm on Sep 12, 2009 (gmt 0)

10+ Year Member



I fixed it! For some reason, IE was taking off the border and padding as the png.js file I included for PNG fixes was loaded. I have absolutely no idea why that would affect those elements, but hey, It's IE. Thanks for your help, D_Blackwell!