1. Home
  2. Forums Index
  3. Browser Side / HTML 8:07 am May 1, 2026

Forum Moderators: open

Message Too Old, No Replies

IE skews my pages

         

mirozake

11:56 pm on Nov 12, 2009 (gmt 0)

10+ Year Member



Hi,
This code works fine on other browsers it seems but IE(8) doesn't make it look centered as it should. It also scewes some of my divisions. Any chance for some help please. THanks. Here's html code followed by css.

<meta name="description" content="example" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Derek's Voice :: 100% Natural Voice Talent</title>
<style type="text/css">
<!--
body {
background-color: #2E2210;
}
-->
</style>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header"></div>
<div id="container">

<div id="leftMenu"><ul>
<li><a href="index.html">Home</a></li>
<li><a href="studio.html">Studio</a></li>
<li><a href="demos.html">Additional Demos</a></li>
<li><a href="clients.html">Clients</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul></div>

<div id="rightArea">
<div id="frameTop"></div>
<div id="mainFrame"></div>
<div id="rightFrame">
<p><img src="images/spacer_high.gif" width="1" height="60" /><br />
<img src="images/spacer2.gif" width="68" height="1" />&nbsp;&nbsp;Corporate<br />
<img src="images/spacer1.gif" width="64" height="1" />
&nbsp;&nbsp;
<object id="FlashID2" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="60" height="30">
<param name="movie" value="mp3player_c.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="mp3player_c.swf" width="60" height="30">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</p>
<p><img src="images/spacer2.gif" width="64" height="1" />&nbsp;&nbsp;Commercial<br />
<img src="images/spacer1.gif" width="60" height="3" />
&nbsp;&nbsp;
<object id="FlashID3" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="60" height="30">
<param name="movie" value="mp3player_co.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="mp3player_co.swf" width="60" height="30">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</p>
<p><img src="images/spacer2.gif" width="64" height="1" />&nbsp;&nbsp;Educational<br />
<img src="images/spacer1.gif" width="60" height="3" />&nbsp;&nbsp;
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="60" height="30">
<param name="movie" value="mp3player_ed.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="mp3player_ed.swf" width="60" height="30">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</p>
</div>
<div id="bottomRight"></div>
</div>
<div id="footer" class="footerMenu"><a href="index.html">Home</a> ¦ <a href="studio.html">Studio</a> ¦ <a href="demos.html">Additional Demos</a> ¦ <a href="clients.html">Clients</a> ¦ <a href="about.html">About </a> ¦ <a href="contact.html">Contact</a><br />
Copyright 2009 </div>
</div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
swfobject.registerObject("FlashID2");
swfobject.registerObject("FlashID3");
//-->
</script>
</body>
</html>

_______________________ CSS

@charset "UTF-8";
/* CSS Document */

/* ------------- ELEMENTS --------------- */

p {
font-family:Georgia, "Times New Roman", Times, serif;
font-size: .7em;
}

/* ------------- DIVS --------------- */

#header{
margin: 0 auto;
width: 834px;
background-image:url(images/header_04.jpg);
background-repeat: no-repeat;
height: 97px;
}

#container{
margin: 0 auto;
width: 834px;
}

#leftMenu{
float: left;
background-image:url(images/menu_07.jpg);
background-repeat: no-repeat;
width: 145px;
height: 465px;
padding: 100px 0 0 15px;
}

#leftMenu ul{
list-style-type: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: .8em;
text-align: center;
line-height: 1.5em;
}

#leftMenu li a{
text-decoration: none;
}

#leftMenu a:link{
color:#333300;
}
#leftMenu a:visited{
color:#333333;
}
#leftMenu a:hover{
color:#990000;

}
#leftMenu a:active{
color:#990000;
}

#rightArea{
}

#frameTop{
width: 674px;
height: 82px;
background-image:url(images/web_bg_08.jpg);
background-repeat: no-repeat;
float: left;
}

#mainFrame{
background-image:url(images/web_bg_11.jpg);
background-repeat: no-repeat;
width:458px;
height: 483px;
float:left;
}

#rightFrame{
background-image:url(images/web_bg_12.jpg);
background-repeat: no-repeat;
width: 216px;
height: 274px;
float: left;
}

#bottomRight{
background-image:url(images/web_bg_13.jpg);
background-repeat: no-repeat;
width:216px;
height: 209px;
float: right;
}

#footer{
text-align:center;
width: 836px;
}

/* ------------- CLASSES --------------- */

.footerMenu{
font-family:Georgia, "Times New Roman", Times, serif;
float:left;
padding: 20px 0 0 0;
color: #CCCCCC;
font-size: .8em;
line-height: 1.8em;
text-decoration:none;
}
.footerMenu a:link{
text-decoration:none;
color: #CCCCCC;
}

.footerMenu a:visited{
text-decoration:none;
color: #996600;
}

.footerMenu a:hover{
text-decoration:none;
color:#FFFFFF;
}

.footerMenu a:active{
text-decoration:none;
color:#999999;
}

[edited by: incrediBILL at 2:14 am (utc) on Nov. 13, 2009]
[edit reason] removed personal details [/edit]

D_Blackwell

12:23 am on Nov 13, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



My recommendation is to strip the HTML and CSS down to the problem itself by commenting out extraneous markup unrelated to the problem. If the fix is not found during this process, post the test ready code that replicates the problem and we will look at the options.

Validate the XHTML and CSS.

rocknbil

12:34 am on Nov 13, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You can start with moving that meta description and the <script.....</script lines into the <head> section . . . the very first line needs to be the doctype. After that change, I get 7 errors validating via direct input, and they are all just "missing alt attributes" which would not cause this . . . it might be just those two lines, and that alone!

W3C Validator [validator.w3.org]

BTW PM sent, we are neighbors. :-)

mirozake

4:26 pm on Nov 13, 2009 (gmt 0)

10+ Year Member



Thank you. It really helps to have more set of eyes on a problem. I just didn't see that meta tucked in on top.. THanks so much.

rocknbil

7:16 pm on Nov 14, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Did it work? Don't forget to move the <javascript> line too, it needs to be in the head, but can be inside <body> too, just not outside either of those.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / HTML 8:07 am May 1, 2026