Issue in IE6

aholmes · #1 Jul 12th, 2007, 10:53

Hi, I have a major issue with IE6. Have a look at the site. It works fine in FF2 and IE7.

The OSS logo on the left hand side seems to get a white line to the right and being new to this and obviously loathing IE6 could someone please advise how I could get rid of it. Thanks very much.

karinne · #2 Jul 12th, 2007, 12:34

wow ... that code is a mess!

I don't know ... Have you tried adding a background-color: #000; to #mainbody?

aholmes · #3 Jul 12th, 2007, 13:25

Yes that already exists.

I have only just started out and this is my first web build after progressing from design. I have been building this site with my trainer however he is unavailable to ask at the minute. Can you possibly tell me why the code is a mess? Thanks

karinne · #4 Jul 12th, 2007, 13:39

Quote:

Originally Posted by aholmes

Yes that already exists.

hmmm ... I don't think so.

Code: Select all

table.mainbody,
table.usermodules,
table.sections {
	width: 100%;
	padding: 0;
}

1) The main thing that makes this code a mess is the indentation. Sounds silly but when you want help, indentation in code makes it much easier to read.

Granted I use Firebug which indents the code properly itself, but sometimes I do like to do a View Source and check it out 'cause Firebug doesn't show the DOCTYPE.

2) You have empty paragraphs?!

Code: Select all

<p align="justify">
&nbsp;
</p>
<p align="justify">
&nbsp;
</p>
<p align="justify">
&nbsp;
</p>
<p align="justify">
&nbsp;
</p>
<p align="justify">
&nbsp;
</p>
<p align="justify">
&nbsp;
</p>
<div align="justify">
</div>
<p align="justify">
&nbsp;
</p>

That's a big no-no ... if you need to "create" space, use the padding or margin properties.

3) Use a STRICT doctype.

4) Why are you using tables for the middle portion? It's not data ...

5) You have classes and id with the same name. That causes confusing when reading the code. You code has to be semantic ... meaning when you look at the markup, it should make sense. You should be able to make a mental picture (and have it right) of exactly how the site "can" look. With names like .mainbody and #mainbody this draws ALOT of confusion.

Lchad · #5 Jul 12th, 2007, 14:07

Here's your code for that logo

Code: Select all

<div class="moduletable">
            <a href=""><img style="margin: 5px; width: 200px; height: 69px; float: left; padding-bottom: 120px; border-right: none" src="images/stories/logo_updated.jpg" border="0" alt="logo" title="logo" width="200" height="69" /></a></div>

First of all the <a href=""> is empty. You need to put in "/"
All the margin, float, padding and border need to be placed into css.

Often times in IE6, if you have spaces between the last element and the closing div, you will see white. So delete all the extra spaces in the code between </a> and </div>

See if that solves that problem. If not come back.

Lchad · #6 Jul 12th, 2007, 14:08

What's this for?

Quote:

and this???

Code: Select all

    <h3>
                    home picture                </h3>

Lchad · #7 Jul 12th, 2007, 14:16

Add a specific width to this table column

Code: Select all

<td class="left">
                        <div class="padding">
                            <div id="vert-menu">                          </div>
                          <div class="moduletable"><a href=""><img style="margin: 5px; width: 200px; height: 69px; float: left; padding-bottom: 120px; border-right: none" src="images/stories/logo_updated.jpg" border="0" alt="logo" title="logo" width="200" height="69" /></a></div>
                <div class="moduletable">

                            <h3>
                    home picture                </h3>
                <img style="margin: 5px 10px; float: left; width: 198px; height: 204px" src="images/stories/homepic.png" alt="homepic.png" title="homepic.png" width="198" height="204" />        </div>
                                </div>                    </td>

Something like this in red:

Code: Select all

<td width="210" class="left">
                        <div class="padding">
                            <div id="vert-menu">                          </div>
                          <div class="moduletable"><a href=""><img style="margin: 5px; width: 200px; height: 69px; float: left; padding-bottom: 120px; border-right: none" src="images/stories/logo_updated.jpg" border="0" alt="logo" title="logo" width="200" height="69" /></a></div>
                <div class="moduletable">

                            <h3>
                    home picture                </h3>
                <img style="margin: 5px 10px; float: left; width: 198px; height: 204px" src="images/stories/homepic.png" alt="homepic.png" title="homepic.png" width="198" height="204" />        </div>
                  </div>                    </td>

aholmes · #8 Jul 13th, 2007, 10:00

Thanks very much for your help, I will try the code however in response to all your comments about the code, is the code different because the site has been built in Joomla?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
JS issue	acrikey	JavaScript Forum	6	Jul 25th, 2007 17:45
CSS issue in IE7	bluetech	Web Page Design	6	Jul 3rd, 2007 15:36
css issue	acrikey	Web Page Design	4	May 24th, 2007 16:01
Help Odd Issue?	drappendix	Web Page Design	8	Aug 9th, 2006 17:53
IE issue	Pheonix	Web Page Design	2	Dec 2nd, 2005 21:58

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Issue in IE6