IE7 display issues

**hsriat** · May 5 '08, 01:14 PM

I saw your site.
Unfortunately you would have to live with that.

But I have another advice for you.
Always give height and width attributes to the image in img tag. It tells the browser how to render other elements even before the image is loaded, and thus make the site look better when it's being loaded.

**Stubert** · May 7 '08, 10:17 AM

Originally posted by hsriat

I saw your site.
Unfortunately you would have to live with that.

But I have another advice for you.
Always give height and width attributes to the image in img tag. It tells the browser how to render other elements even before the image is loaded, and thus make the site look better when it's being loaded.

Oh wells, thanks anyway. I'll go set them up now and just sulk at IE for a bit.

Thanks,

Stuart

**harshmaul** · May 7 '08, 10:51 AM

Hi try this out.... there is an awful lot of markup.... firstly it would help if you validate the markup.... then putting ur list in the div where you want it to appear.

All you need to do now is sort out the styles on the "topTab" class so they display right.

[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll1/DTD/xhtmll1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content = "text/html; charset=UTF-8" />
<style type="text/css">

body
{
background-image:url('gfx/testBG3.jpg');
/*background-position:5%,0%; */
background-repeat:no-repeat;
background-attachment:fixe d;
font-family: Verdana, sans-serif;
font-size: 1em;
background-color:#FFFFFF;
color:#505050;
}

#container
{
padding-top:10%;
padding-left:10%;
}
#navBar
{
border: solid 1px #FFFFFF;
width:158px;
}

#wrapper
{
width:800px;
}

#main
{
background-image:url('gfx/testBG3inv.jpg' );
/*background-position:5%,0%; */
background-repeat:no-repeat;
background-attachment:fixe d;
background-color:#FFF;
border: solid 2px #505050;
border-bottom:solid 1px #FFF;
width: 100%;
padding:0px 20px 20px 20px;
color:#505050;
}

td.tdPlayer
{
border:solid 2px black;
width: 12em;
}

#mkTable
{
border: none;

font-size:medium;
text-align:center;
}

.leftmosttab
{
border-left:solid 2px #505050;
}

.bottomTab
{
border-bottom:solid 2px #505050;
}

.topTab
{

}
#nav
{
width:800px;
margin:auto;
margin-top:0px;
padding:0;
border:0px;
}

#menu, #menu ul
{
list-style:none;
margin:0;
padding:0;
border:0px;

}

#menu li
{
float:left;
position:relati ve;
line-height:2.5em;
width:12em;
}

#menu li ul
{
position:absolu te;
display:none;
}

#menu ul li ul
{
margin-top:-3em;
margin-left:7em;
}

#menu a
{
font-family: Tahoma, Verdana, sans-serif;
color:#505050;
display:block;
/*border-right:solid 2px #505050;
border-bottom:solid 2px #505050;*/
padding-left:5px;
font-size:1.5em;
}

#menu a:hover
{
background-color:#505050;
color:#fff;
}

#menu li ul li a
{
background-color:#FFF;
color:#505050;
border-left:solid 2px #505050;
border-right:solid 2px #505050;
}
#menu ul a
{
border-right:none;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
border-left:1px solid #fff;
background:#AEC 245;
}

#menu li:hover ul
{
display:block;
}

#footer
{
background-image:url('gfx/testBG3inv.jpg' );
/*background-position:5%,0%; */
background-repeat:no-repeat;
background-attachment:fixe d;
background-color:#FFFFFF;
border:solid 2px #505050;
text-align:center;
width:840px;
}

h3
{
border-bottom:solid 1px #505050;
}

#main a
{
color: #505050;
font-size:medium;
}

#gallery li
{
list-style-type: none;
}

#gallery img
{
border: solid 1px #000;
}
#placeholder
{
border: solid 1px #000;
margin-left: 20%;
margin-top:-30%;
width:500px;
height: 340px;
}

h2
{
font-family: Tahoma, Verdana, sans-serif;
font-size: 4em;
}

h3
{
font-family: Tahoma, Verdana, sans-serif;
font-size: 2em;
}

</style>
<title>The Trunk | Home</title>
</head>

<body>
<div id="container" >


<div id="wrapper">


<div id="main">
<div id ="nav">
<ul id="menu">
<li class="topTab"> <a href="index.htm l">Home</a></li>
<li class="topTab"> <a href="proj.html ">Projects</a>
<ul>
<li class="topTab"> <a href="uni.html" >University</a></li>
<li><a href="excur.htm l">Extra-Curricular</a></li>
<li class="bottomTa b"><a href="gall.html ">Gallery</a></li>
</ul></li>
<li class="topTab"> <a href="links.htm l">Linkys</a>
<ul>
<li class="topTab"> <a href="acad.html ">Academic Links</a></li>
<li class="bottomTa b"><a href="rand.html " >Random Links</a></li>
</ul></li>
</ul>
</div>

<h2>The Trunk:</h2>
<p>Welcome to The Trunk, home of the slightly derranged game-loving me.</p>
<h3>Mario Kart Wii</h3>
<p>Oh. Meh. Goad. If you've not bought MKWii yet, then you are a fag and a tool. Go buy it now.
I don't care if you don't own a Wii. Buy the game then get a Wii. It's awesome.<br />
<br />
My Wii Console Code is: 3014-4263-3354-1655<br />
My MK Friend code is: 0774-4387-2581<br />
<br />
Get Adding!
</p>
<h3>Merry Christmas!</h3>
<p>It's cold, wet and windy, but still everyone's favourite time of the year! I don't know why really,
to be completely honest, it makes a poor man of most of us and ruins families. But you just can't destroy the Christmas spirit it seems...
Hope you all enjoyed your holidays.
</p>
<h3>Team Fortress</h3>
<p> Been playing a lot of <a href="http://orange.half-life2.com/tf2.html">Team Fortress 2</a> lately.
It really is a cracker of a game, it came with <a href="http://orange.half-life2.com/">The Orange Box</a>, another amazing bundle that I purchased.
If you haven't already got it, you should get a shot off a mate or buy it, I mean it's only 29GBP or something so it's not like it's that expensive...
</p>

<h3>State of the site</h3>
<p>I understand that the site looks a bit crud at the moment, but things will be a-changing shortly. Just give me time. Cheers. </p>

</div>


<div id="footer">
<p>Made by Stuart Clark.</p>
</div>

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

</html>[/HTML]

IE7 display issues

IE7 display issues

Comment

Comment

Comment