By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,517 Members | 1,172 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,517 IT Pros & Developers. It's quick & easy.

IE7 display issues

Stubert
P: 20
Hey, I was just wondering if anyone could diagnose the error in my CSS/HTML for my website, it displays how I want it to on FF but not in IE7.

Here is the link to the site:

Website

I am wanting the navigation bar, to be inside the wrapper div, but it displays outside when viewed in IE7.

If you want me to post the code please say and I will.

Thanks, Stu.
Apr 29 '08 #1
Share this Question
Share on Google+
3 Replies


hsriat
Expert 100+
P: 1,654
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.
May 5 '08 #2

Stubert
P: 20
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
May 7 '08 #3

harshmaul
Expert 100+
P: 490
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:fixed;
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:fixed;
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:relative;
line-height:2.5em;
width:12em;
}

#menu li ul
{
position:absolute;
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:#AEC245;
}

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

#footer
{
background-image:url('gfx/testBG3inv.jpg');
/*background-position:5%,0%;*/
background-repeat:no-repeat;
background-attachment:fixed;
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">


<!--Wrapper-->
<div id="wrapper">


<!--Main content-->
<div id="main">
<div id ="nav">
<ul id="menu">
<li class="topTab"><a href="index.html">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.html">Extra-Curricular</a></li>
<li class="bottomTab"><a href="gall.html">Gallery</a></li>
</ul></li>
<li class="topTab"><a href="links.html">Linkys</a>
<ul>
<li class="topTab"><a href="acad.html">Academic Links</a></li>
<li class="bottomTab"><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>

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

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

</html>[/HTML]
May 7 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.