/    Sign up×
Community /Pin to ProfileBookmark

IE6 shift breaks design

Copy linkTweet thisAlerts:
Oct 10.2008

Can anyone help me with a shift in the design for the following. Unfortunately, I am constrained to a Joomla template – and I can’t work out what to do to get IE6 to behave. I have stripped the html as far back as I can to reveal the issue: a gap appearing.

Here is the page [URL=”http://www.ashby-design.co.uk/littees/testing2.html”]http://www.ashby-design.co.uk/littees/testing2.html[/URL]

Attached is an image to show the IE6 issue – notice the small white gap (denoting the div#wrapper) appearing between the left column (red) and the #main2 (yellow) div. This does not appear on compliant browsers.

[B]Here’s the HTML (body only)[/B]

[code=html]
<body>
<div id=”all”>
<div id=”header”>

<div class=”wrap”>&nbsp;</div>
</div><!– end header –>

<div id=”contentarea2″>

<div id=”left”>
</div><!– left –>

<div id=”wrapper”>
<div id=”main2″>

</div><!– end main or main2 –>

<div class=”wrap”></div>
</div><!– wrapper –>
</div><!– contentarea –>

<div id=”footer”>
<p class=”syndicate”>
Website Credits | <a href=”../” target=”blank” title=”Credits”>ashbydesign</a>
</p>

<div class=”wrap”></div>
</div><!– footer –>
</div><!– all –>

</body>
[/code]

[B]And here’s the CSS:[/B]

*
{
margin: 0;
padding: 0;
}

#contentarea, #contentarea2, #main, #main2 { zoom: 1; }
#header { width: auto; height: 1%; }

body
{
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 100.1%;
padding: 0px;
text-align: center;
background-color: #000;
}

/* ################ Position ################ */
#all
{
color: #000;
font-size: 0.8em;
line-height:1.4em;
margin: 0 auto;
max-width: 1000px;
padding: 0;
text-align: left;
}

#header {
height: 100px;
background-color: #ccc;
}

#contentarea,#contentarea2 {
margin:0;
padding:0;
position: relative;
overflow: hidden;
background-color: blue;
}

#wrapper {
margin: 0 0 0 21%;
background-color: white;
}

#left {
height: 500px;
float: left;
margin: 0;
width: 21%;
background-color: red;
}

#main, #main2 {
height: 400px;
margin: 0;
padding: 0 30px 20px 30px;
position: relative;
background-color: yellow;
position: relative;
}

.wrap
{
border: 0;
clear: both;
float: none;
font-size: 1px;
height: 0px;
line-height: 1px;
margin: 0;
padding: 0;
visibility: hidden;
}

[upl-file uuid=0d905e2a-22f5-4465-b33f-7e94dc88c0bb size=1kB]IE6-testing.gif[/upl-file]

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@NatdizzleOct 11.2008 — [CODE]
<?xml version="1.0" encoding="utf-8"?><!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" xml:lang="en-gb" lang="en-gb" dir="ltr" >
<head>


<style type="text/css" media="screen">
<!--

*
{
margin: 0;
padding: 0;
}

#contentarea, #contentarea2, #main, #main2 { zoom: 1; }
#header { width: 1000px; height: 1px; }


body
{
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 100.1%;
padding: 0px;
text-align: center;
background-color: black;
}

/* ################ Position ################ */
#all
{
color: #000;
font-size: 0.8em;
line-height:1.4em;
margin: 0 auto;
max-width: 1000px;
padding: 0;
text-align: left;
}

#header {
height: 100px;
background-color: #ccc;
}

#contentarea,#contentarea2 {
margin:0;
padding:0;
position: relative;
overflow: hidden;
background-color: blue;
}


#wrapper {
margin: 0 0 0 0;
background-color: white;
padding:0;
}


#left {
height: 500px;
float: left;
margin: 0;
width: 220px;
background-color: red;
}

#main, #main2 {
height: 400px;
margin: 0;
padding:0;
position: relative;
background-color: yellow;
width:780px;
float:left;
}

.wrap
{
border: 0;
clear: both;
float: none;
font-size: 1px;
height: 0px;
line-height: 1px;
margin: 0;
padding: 0;
visibility: hidden;
}


#header h1 {
font-size:1.5em;
font-weight:normal;
text-transform:uppercase;
}


-->
</style>

</head>

<body>
<div id="all">
<div id="header">

<div class="wrap">&nbsp;</div>
</div><!-- end header -->

<div id="contentarea2">

<div id="left">
</div><!-- left -->


<div id="wrapper">
<div id="main2">

</div><!-- end main or main2 -->

<div class="wrap"></div>
</div><!-- wrapper -->
</div><!-- contentarea -->

<div id="footer">
<p class="syndicate">
Website Credits | <a href="../" target="blank" title="Credits">ashbydesign</a>
</p>



<div class="wrap"></div>
</div><!-- footer -->
</div><!-- all -->



</body>
</html>
[/CODE]
Copy linkTweet thisAlerts:
@bydesignauthorOct 13.2008 — Thanks for this - it looks as though fixing the widths may be the only option; is this because IE6 **^$% with percentages?

x bydesign
×

Success!

Help @bydesign 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.17,
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,
)...