Log in

View Full Version : A longshot, but IE6/website error, need help :(


Llort
12-07-2007, 12:48 PM
Soo I have this bug in IE6.

A table:


[ <--100%--> ]
[160px] - [x-px] - [210px]


Ok, now you expect the middle TD to fill up the gap, right?
Well in FF it works, in IE7, it works. but in IE6 it does not work! Only if I fill the middle TD with information (e.g. repeated: a a a a a a a a )

If I do not, then all three TDs will have 1/3the of the width avaialbable...


ANyway, check it out:

www.zoeka.com (it is in dutch)

Gwynin
12-07-2007, 02:25 PM
Site looks like this here at work using IE6 (1600x1200 screensize, image is in 800x600 tho)


http://www.ShadowsongEurope.com/forum/imagehosting/thum_185084696399db9d76.jpg

Nerd
12-07-2007, 03:48 PM
Just a tip use divs, I don't even bother using tables anymore it's impossible to support all browsers while using tables. A nice read/reference (http://www.handleidinghtml.nl/css/) (Dutch).

Valoran
12-07-2007, 04:04 PM
Just a tip use divs, I don't even bother using tables anymore it's impossible to support all browsers while using tables. A nice read/reference (http://www.handleidinghtml.nl/css/) (Dutch).
Aye, tables are about as in fashion as a gnome in bloodfang!

Llort
13-07-2007, 10:28 AM
Aye, tables are about as in fashion as a gnome in bloodfang!
I know, I also try not to use tables. I tried using divs with float left/right and a footer with clear:both.

Result is to be seen here:
http://www.zoeka.com/test.html

So that is not really the desired effect :-)

I also had another nice bug in IE6.


<div style="padding:4px;">
<div style="margin:-4px;">
tekst
</div>
other tekst
</div>
This wasnt the exact code but the margin fucked up the second div. Resulting in, if that div became longer then one line, it would draw itself an EXTRA line beneath it....

It did work in FF and IE7 btw :P


Anyway I now fixed the website... in a bit ugly way, but oh well....

Nerd
13-07-2007, 11:51 AM
I miss the good old days when a site only had to work with IE. At the place I work we now need to test with IE 4 - IE 7, FF and Safari and be compliant ofcourse... :thebirdman:

Now make it look pwetty! Good luck.

Mithadriel
13-07-2007, 10:03 PM
Three columns? Divs? Not the easiest bit of code to implement, following should work fine - this is for fixed position.

Borrowed from dynamicdrive.com/style - well worth a look if your serious about using CSS over tables.


<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}

#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin: 0 190px 0 180px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 180px; /*Width of left column in pixel*/
margin-left: -840px; /*Set margin to that of -(MainContainerWidth)*/
background: #C8FC98;
}

#rightcolumn{
float: left;
width: 190px; /*Width of right column*/
margin-left: -190px; /*Set left margin to -(RightColumnWidth)*/
background: #FDE95E;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

</style>

</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube"><h1>CSS Fixed Layout #3.1- (Fixed-Fixed-Fixed)</h1></div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fixed</em></b> <script type="text/javascript">filltext(10)</script></div>
</div>
</div>

<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>180px</em></b> <script type="text/javascript">filltext(20)</script></div>

</div>

<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>190px</em></b> <script type="text/javascript">filltext(15)</script></div>
</div>

<div id="footer"><a href="http://www.shadowsongeurope.com">Shadowsong Europe</a></div>

</div>
</body>
</html>


p.s don't claim to be XHTML valid when you're clearly not :(


I miss the good old days when a site only had to work with IE. At the place I work we now need to test with IE 4 - IE 7, FF and Safari and be compliant ofcourse...

Now make it look pwetty! Good luck.


and Accessibility compliant too not just the usual W3C standards :D