Forum Moderators: not2easy
I'm a relative newbie to CSS. All my other sites have used a table layout, but I clearly see the advantages of a CSS based layout, and I'd really like to make the switch.
I do my development on a mac, and I'm having a few particular problems with IE6 on Windows. (though as I'm typing this, I just checked on IE5.2 on the mac, and it's horrible too). On the upside, the site looks great in both Safari and Firefox.
[snip]
The two problems are:
1. If you resize an IE6 browser to about 800x600, everytime you click on the thumbnail, it cuts off the main iframe, until you move your mouse over the header image, then it seems to fix itself.
2. The iframes seem to have an extra 5px white border around them that I can't seem to get rid of.
I've cobbled the CSS for this site together mainly from copying others. Part of my problem is that there seems to be so many similar IE6 bugs that I don't really know which I'm facing here--so I don't know where to turn for help.
If you could help me A)identify the bug, and B)perhaps you have an idea on how to fix it, I'd really appreciate it. I need to have this site live on Wednesday.
[edit: no urls, please. See CSS Forum Charter [webmasterworld.com] for details.]
[edited by: createErrorMsg at 5:30 pm (utc) on Sep. 11, 2005]
helped out substantially with problem number 1. I just added display:inline-block; to the main content and it drew correctly.
I'm still left with either padding, margin, or a white border around the iframes. Any thoughts?
Am I right in thinking that your remaining problem is with the
iframeCan you post just the section of markup which calls the
iframe
Sorry, I hadn't read the rules about not linking to external sites before my original post.... :(
Below is my HTML and CSS. The particular problem is with the iframes, yes. If you put a source into the css, you'll see that the scrollbars on the iframes will have a white 3-5 pixel padding, border, or margin. In Firefox, this displays as I'd like it to. But in IE6, there is a gap between the left column an the main content iframe, and I can't figure out how to get rid of them. I think I've figured out a way to make it look ok, but it's not quite like it is in firefox.
Thanks in advance!
Peace,
Matt
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#container {
margin: 0 auto;
/* This causes some big problems in FF.
border-top: solid 5em #69c;*/
color: #333;
font: normal 1em Verdana;
padding: 0 10%;
}
#content {
padding-top: 1em;
width: 100%;
text-align: left;
line-height: 170%;
min-width: 560px;
}
div#header {padding: 2%;
text-align: center;
background-color: #bfbfbf;
border: solid #3f3f3f 5px;
height: 75px;
display: inline-block;
}
div#maincontent {
padding: 5px;
text-align: justify;
margin-left: 195px;
background-color: #ffffff;
border: 5px solid #3f3f3f;
border-top:none;
min-height:550px;
}
div#leftcolumn {padding: 0px;
float: left;
background-color: #bfbfbf;
width: 190px;
border: 5px solid #3f3f3f;
border-top:none;
border-right:none;
margin:0px;
padding:0px;
}
div#title {
padding: 0px;
float:left;
width: 100%;
min-height: 60px;
height: 60px;
margin: 0px;
border-bottom: 5px solid #3f3f3f;
text-align: left;
font-weight: bold;
}
div.thumbnail {
display:block;
float:left;
clear:both;
font-size:8pt;
background-color:#FFFFFF;
margin: 0px;
padding: 0px;
}
div.thumbnailalt {
display:block;
float:left;
clear:both;
font-size:8pt;
background-color: #EBF4FD;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" >
<div id="container">
<div id="content">
<div id="header">
</div>
<div id="leftcolumn">
<div id="title"></div>
<div id="navigation">
<iframe id="navFrame" name="navFrame" width="100%" height="400px" frameborder="0" src="">
</iframe>
</div>
</div>
<div id="maincontent">
<iframe id="imageFrame" name="imageFrame" frameborder="0" width="100%" height="650px" src="">
</iframe>
</div>
</div>
</div>
</body>
</html>
