Forum Moderators: not2easy
Hoping someone can point me in the right direction here. I've been building a two column layout complete with header, horizontal nav and a footer.
I have three outstanding issues which are really beginning to frustrate me now as nothing i do seems to fix the problem.
1) My design is displaying in Firefox, with what appears to be no problem, however when I view in IE6, the horizontal nav and the actual content (i.e the two columns) are hidden in some way. If you refresh IE then you see the content briefly.
2) Another issue is that the footer seems to expand for no reason, when refreshed, and when you mouse over it produces a guillotine effect.
3) I want the containing div to sit 18px in from the viewport, this works fine in Firefox, but not IE
I believe my html to be correct, and so I've turned to IE known bug list, and their appears to be two which may be the root cause
1) Peekaboo
2) Guillotine bug
In addition, this error may be down to my misunderstanding of the float and box model?
I would very much appreciate some help fixing this.
Here is my code:
/* Global
================================================*/
* {
margin:0;
padding:0;
}
body, html {background:#fff url(images/background.gif) repeat-x 67% 0;}
body {padding:0 18px 18px; color:#222; font:76%/150% "Geneva",Verdana,Arial,Helvetica,sans-serif;}
/* Main layout
================================================*/
#container {
margin:0 auto;
max-width:70em;
background:#fff url(images/separator.gif) repeat-y 67% 0;
border:1px solid #ccc;
border-width:0 1px 1px;
position:relative;
}
#content {
float:left;
width:59%;
margin:1em 0 0 4%;
overflow:hidden;
}
#sidebar {
font-size:0.94em;
background:#fff;
line-height:1.3em;
float:right;
width:29%;
margin:0 2% 0 0;
}
#footer {
clear:both;
background:#fca965;
padding:1em;
text-align:center;
font-size:0.94em;
border-top:1px solid #ccc;
}
/* Header
================================================*/
#header {
background:#fff url(images/header.jpg) no-repeat;
height:100px;
}
#header img {
position:absolute;
left:10px;
color:#fff;
top:5px;
}
#header a,
#header a:hover {
border:0;
color:#fff;
background:transparent;
}
/* Navigation
================================================*/
#nav {
float:left;
width:100%;
background:#fff;
margin:0 0 2em;
padding:0 0 2px;
}
#nav ul {
float:left;
width:100%;
margin:0;
padding:0;
background:#2362aa;
list-style-type:none;
}
#nav li {
display:inline;
padding:0;
margin:0;
}
#nav a {
background:#2362aa;
padding:10px 10px 10px 10px;
margin:0;
color:#fff;
text-decoration:none;
display:block;
float:left;
width:auto;
font:bold 0.96em/1em Arial, Helvetica, sans-serif;
}
#nav a:hover,
#nav a:focus {background:#91cc14;}
#nav .current a {
background:#fca965;
color:#000;
}
#nav .current a:hover {background:#91cc14;}
#nav .current a:focus {background:#F1F8E1;}
#nav a:active {
background:#920D02;
color:#fff;
}
/* Images
================================================*/
img {
border:0;
display:block;
}
/* Forms
================================================*/
#searchForm {
border:1px solid #ccc;
float:right;
margin:1em 1em 1.5em;
padding:4px;
background:#f9f9f9;
}
</style>
<body>
<div id="container">
<div id="header">
<a href="/"><img src="images/orange.gif" alt=""></a>
<div id="searchForm">
<input type="hidden" name="" value="1">
<input type="text" id="search" name="search" class="txt" size="15" accesskey="4">
<input type="submit" class="btn" value="Search">
</div></div>
<div id="nav">
<ul>
<li class="current"><a href="" accesskey="1">Home</a></li>
<li><a href="" accesskey="0" title="">link</a></li>
<li><a href="" title="">link</a></li>
<li><a href="" title="">link</a></li>
<li><a href="" title="">link</a></li>
<li><a href="" accesskey="7" title="">link</a></li>
</ul>
</div>
<div id="content">
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi</p>
<br /><br /> </div>
<div id="sidebar">
<div id="latest">
<h3>Local Nav</h3>
<ul>
<li><a href="" title="">Local Nav Link</a></li>
</ul>
</div>
</div>
<div id="footer">
footer text
</div>
</div>
I'm not a Windows user, but I believe Win/IE needs a width on the parent element (#container) if you assign a relative width to a child (#content, #sidebar). Try adding "width:100%;" to your #container declaration.
Maybe using margin on your body tag instead of padding works for IE?
And welcome to the forums, Beck.
Thanks for the reply and the welcome!
I've added width to #container, which has appeared to fix the problem. Dont know how I missed that!
However another bug has surfaced, when you hover over any links the text in the content body jumps! I've seen this as an IE visual formatting bug, but not sure how to fix it.
Many thanks Beck
