border in IE not displaying correctly
I've put a round cornered border round a Flash swf on a webpage, and the company's logo needs to sit below it. (As can be seen correctly in Safari, Chrome etc at http://www.designboutiqueuk.com/loader/index.html).
The problem is, in internet explorer the border envelops the flash A开发者_C百科ND the logo (the logo should not be within the border). Also in some versions of IE everything appears ranged left, whereas it SHOULD be centred in the browser. It's not the end of the world if the border isn't round cornered in IE - I believe this isn't possible yet, although if you know differently it would be a bonus! Any help would be greatly appreciated. Many thanks.
You will never get IE to attempt to perform like the other far more modern browsers without a proper doctype. You are in quirks mode. Add this to your first line:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
This is happening because, according to your source, your logo div is inside the movie div.
<div style="width: 800px; margin: 20px auto; padding: 20px; border: #DD002B solid 2px; border-radius: 10px; -moz-border-radius: 10px;">
<div align="center">
//movie stuff here
</div>
<div style="margin: 0px 0px 0px -20px; padding: 40px 0px; display:block; float: left;"><img src="images/gsma_logo.jpg" width="100px"></div>
</div>
It is floated and taken outside the normal document flow, and combined with the padding, is sitting fine in the modern browsers.
Try placing the logo outside the last closing div above.
I agree with Jason. To add to the answer however, you could have another container of the same width, and put the logo in there as supposed to the current one it is in. You may need to adjust the margin and padding to how you want it, but that should roughly achieve what you are looking for.
<div style="width:800px;margin:20px auto">
<div style="width: 800px; margin: 0 auto; padding: 20px; border: #DD002B solid 2px; border-radius: 10px; -moz-border-radius: 10px;">
<div align="center">
//movie stuff here
</div>
</div>
<div style="margin: 0px 0px 0px -20px; padding: 40px 0px; display:block; float: left;"><img src="images/gsma_logo.jpg" width="100px"></div>
</div>
use this CSS:
#movie {
width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
padding: 20px;
border: #DD002B solid 2px;
border-radius: 10px;
-moz-border-radius: 10px;
}
#logo {
width: 100px;
height: //logo height
margin-left: auto;
margin-right: auto;
float: left;
display: block;
clear: both;
}
<div id="movie">
//movie stuff here
</div>
<div id="logo"><img src="images/gsma_logo.jpg" width="100px"></div>
加载中,请稍侯......
精彩评论