/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] IE6 and CSS positioning

Copy linkTweet thisAlerts:
Feb 04.2008

I have my website working and looking properly in every browser except IE6. Below you will find two links to screenshots of what the page looks like in IE6 and what it is supposed to look like courtesy of IE7.

Basically, it looks like the margins are all out of whack between two divs. IE6 gives me about 5 inches before and 5 inces after.

[URL=”http://www.travissecrest.com/images/ie6.png”]http://www.travissecrest.com/images/ie6.png[/URL]

[URL=”http://www.travissecrest.com/images/ie6.png”]http://www.travissecrest.com/images/ie7.png[/URL]

Here is the CSS I am using:

[CODE]
* {
margin: 0;
padding: 0;
}
div#newscontent p { margin-bottom: 1em; font-size: 1.2em; }
body {
background-color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
#holder {
width: 766px;
margin: 0 auto;
}
#header {
height: 259px;
background-image: url(images/Template_bkh.gif);
}
#content {
background-image: url(images/bodybkgd.gif);
}
#footer {
height: 69px;
background-image: url(images/footer.gif);
clear: both;
}
#flash {
width:680px;
height:259px;
background-image: url(images/flash.gif);
margin: 0 auto;
}
#sidemenu {
width:200px;
height:auto;
margin-left: 43px;
float: left;
display: inline;
background-repeat: repeat-y;
}
#maincontent {
margin-left: 250px;
margin-right: 42px;
}
#newscontent {
margin-left: 250px;
margin-right: 42px;
font-family:”Times New Roman”, Times, serif;
font-size:16px;
}
.style1 {
font-family: Calibri;
font-size: 24px;
font-weight: bold;
color: #FFFFFF;
}
.style3 {font-size: 16px; color: #FFFFFF; font-family: Calibri;}
#holder #content #sidemenu .style3 {
}
.classone {
border-top-width: thin;
border-bottom-width: thin;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #FFFFFF;
border-bottom-color: #FFFFFF;
}
.style4 {
border-top-width: thin;
border-bottom-width: thin;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #FFFFFF;
border-bottom-color: #FFFFFF;
font-family: Calibri;
font-size: 18px;
}
.style5 {
color: #FFFFFF;
font-weight: bold;
font-size: 36px;
}
.style6 {color: #FFFFFF}
.style7 {
color: #FFFFFF;
font-weight: bold;
font-size: 18px;
font-family: Calibri;
}
.style9 {
font-size: 24px;
font-weight: bold;
font-family: Calibri;
}
.style10 {color: #650000}
.style11 {
font-family: Calibri;
font-size: 12px;
color: #FFFFFF;
padding-left: 25%;
}
.style12 {font-family: Calibri}
[/CODE]

Thank you

to post a comment
CSS

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@smyhreFeb 04.2008 — Your link above to the ie7.png image points to the ie6.png image. The path shown on screen is correct though.
Copy linkTweet thisAlerts:
@smyhreFeb 04.2008 — You also have 18 validation errors on your page. You should fix them they could cause havoc on the site.

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.travissecrest.com%2Fnews&charset=%28detect+automatically%29&doctype=Inline&group=0
Copy linkTweet thisAlerts:
@mshalabiFeb 04.2008 — post html code or link to ur page to figure out ur problema..
Copy linkTweet thisAlerts:
@smyhreFeb 04.2008 — post html code or link to ur page to figure out ur problema..[/QUOTE]

http://www.travissecrest.com/news.html is the link to that page.
Copy linkTweet thisAlerts:
@trioneauthorFeb 04.2008 — Just to respond to all of the above:

Sorry about the incorrect image link, here are the correct ones to click on to see the difference in IE6 http://www.travissecrest.com/images/ie6.png and IE7 http://www.travissecrest.com/images/ie7.png

I am aware of the validator messages, and they have no impact on the page what so ever. I recreated the page without the flash animation and meta tags, and it looks exactly the same, so I am pretty sure it has something to do with IE6 and how it interprets margins.

Below you will find the css, and the html code for the page which has no validator errors.

I appreciate all of the assistance in solving this problem.

[CODE]* {
margin: 0;
padding: 0;
}
div#newscontent p { margin-bottom: 1em; font-size: 1.2em; }
body {
background-color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
#holder {
width: 766px;
margin: 0 auto;
}
#header {
height: 259px;
background-image: url(images/Template_bkh.gif);
}
#content {
background-image: url(images/bodybkgd.gif);
}
#footer {
height: 69px;
background-image: url(images/footer.gif);
clear: both;
}
#flash {
width:680px;
height:259px;
background-image: url(images/flash.gif);
margin: 0 auto;
}
#sidemenu {
width:200px;
height:auto;
margin-left: 43px;
float: left;
display: inline;
background-repeat: repeat-y;
}
#maincontent {
margin-left: 250px;
margin-right: 42px;
}
#newscontent {
margin-left: 250px;
margin-right: 42px;
font-family:"Times New Roman", Times, serif;
font-size:16px;
}
.style1 {
font-family: Calibri;
font-size: 24px;
font-weight: bold;
color: #FFFFFF;
}
.style3 {font-size: 16px; color: #FFFFFF; font-family: Calibri;}
#holder #content #sidemenu .style3 {
}
.classone {
border-top-width: thin;
border-bottom-width: thin;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #FFFFFF;
border-bottom-color: #FFFFFF;
}
.style4 {
border-top-width: thin;
border-bottom-width: thin;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #FFFFFF;
border-bottom-color: #FFFFFF;
font-family: Calibri;
font-size: 18px;
}
.style5 {
color: #FFFFFF;
font-weight: bold;
font-size: 36px;
}
.style6 {color: #FFFFFF}
.style7 {
color: #FFFFFF;
font-weight: bold;
font-size: 18px;
font-family: Calibri;
}
.style9 {
font-size: 24px;
font-weight: bold;
font-family: Calibri;
}
.style10 {color: #650000}
.style11 {
font-family: Calibri;
font-size: 12px;
color: #FFFFFF;
padding-left: 25%;
}
.style12 {font-family: Calibri}[/CODE]

[code=html]<!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">

<head>
<title>Secrest for Commissioner - Press Center</title>
<link rel="stylesheet" type="text/css" href="secrest.css" />
<link rel="stylesheet" type="text/css" href="print.css" title="" media="print" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/ajaxpagefetcher.js"></script>
<style type="text/css">
<!--
.style13 {font-size: 18px}
.style20 {color: #630000}
.style21 {
font-family: Calibri;
font-size: 18px;
}
.style24 {font-size: 16px; }
-->
</style>

</head>

<body>

<div id="holder">

<div id="header">
<div id="flash"></div>
<!-- Header Items -->


</div>

<div id="content">
<div id="sidemenu">
<p>&nbsp;</p>
<p align="center" class="style1">Welcome!</p>
<p align="center" class="style3">Thank you for taking the time to visit our site. I look forward to meeting you during our campaign. I am grateful for your confidence, your support, and your vote.</p>
<p align="center" class="style3">&nbsp;</p>
<p align="center" class="style3">&nbsp;</p>
<p align="center">&nbsp;</p>
<div class="style4">
<div align="center" class="style5">
<p>&nbsp;</p>
<p><a href="contribute.html" class="style6">Contribute</a></p>
<p>&nbsp;</p>
</div>
</div>
<p align="center" class="style3">&nbsp;</p>
<p align="center" class="style7 style13 style14">Contact Travis</p>
<div>
<p align="center" class="style6 style13 style12">Secrest for Commissioner<br />
2522 Baum Street<br />
Canton, OH 44707<br />
Phone: 330-412-5425<br />
[email protected]</p>
</div>
<p align="center" class="style3">&nbsp;</p>
</div>
<div id="maincontent">
<div align="left" class="style9">Press<span class="style20">Center</span></div>
<p>&nbsp;</p>
<p><span class="style21">Thank you for visiting the Secrest for Commissioner Press Center. Below you will find all of the press releases, articles, and endorsements of our campaign. Please remember to check the <a href="http://www.travissecrest.com/traviblog">traviBLOG</a> for our recent campaign activities and discussions with the great citizens of Stark County.</span></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<table width="100%" border="0">
<tr>
<td><a href="javascript:ajaxpagefetcher.load('newscontent', 'PressCenter/01202008.html', false)" class="style24">20-JAN-2008</a></td>
<td><span class="style24">Secrest Receives Endorsement from Stark GOP</span></td>
</tr>
<tr>
<td><a href="javascript:ajaxpagefetcher.load('newscontent', 'PressCenter/01072008.html', false)" class="style24">07-JAN-2008</a></td>
<td><span class="style24">Announcement of Primary Filing</span></td>
</tr>
</table>
</div>
<div id="newscontent">
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<div id="footer">
<div align="center">
<p align="center">
<!-- Footer Items -->
<span class="style11"> Paid for by Secrest for Commissioner</span></p>
<p align="center" class="style11">Toby Hoy, Ph.D, Treasurer </p>
<p align="center" class="style11">2522 Baum Street Canton, OH 44707 </p>
<p align="center" class="style11">&copy;2008</p>
</div>
</div>
</div>
</div>
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@smyhreFeb 04.2008 — Well this may not help per say but You could really do away with all those &nbsp; if you used margin and/or padding on your pargraphs it would make for much cleaner code.
Copy linkTweet thisAlerts:
@smyhreFeb 04.2008 — Have you tried messing with the width of the table you have to see if that fixes it, because width of 100% generally means take up the full width of the page not just full width of the container its in. Thats how it has always been when I used width 100% anyway.
Copy linkTweet thisAlerts:
@trioneauthorFeb 04.2008 — smyhre, your advice worked. I thought it would have had something to do with the height of the table since that was what appeared to be wrong when viewing the site in the browser.

I rest all table width and height properties and it worked like a charm.

Thanks!
×

Success!

Help @trione spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...