Forum Moderators: not2easy
Okay, so as of now, the site is looking perfect in pretty much every browser except for IE6/Win. Basically, the site is a two-column site in a container <div>, with the right column used for navigation. I've got images for all of the navigation headings, using the Fahrner Image Replacement technique. The problem is that in IE6/Win, those images are flush with the right edge of the container <div>. It looks fine in every other browser, just not IE. But if I do anything to move the images to the left a few pixels (like add margin or padding), it either breaks the design in the other browsers and looks fine in every other browser, or it breaks the design altogether.
*******************************************
Here's the XHTML (stripped down to its basics):
<body>
<div id="container">
<div id="home"><a href="http://www.webmasterworld.com" id="banner"><span>WebmasterWorld.com: Home</span></a></div>
<div id="maincontent">
<p>content goes here</p>
</div>
<div id="sidebar">
<h4 id="nav"><span>navigation</span></h4>
<ul><li>item 1</li><li>item 2</li><li>item 3</li><li>item 4</li></ul>
<!-- whitespace removed to avoid IE's whitespace bug -->
</div>
<div id="footer"><p>Footer text goes here</p></div>
</div>
</body>
*******************************************
And here's the relevant CSS:
body{
margin: 0;
padding: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 76%;
color: #000;
background: rgb(114,136,158);
}
h4{
font-size: 1.0em;
margin: 1.2em 0em 1.2em 0em;
font-weight: bold;
}
ol, ul, li {
list-style: none outside;
font-size: 1.0em;
line-height: 1.8em;
margin: 0.2em 0 0.1em 0;
padding: 0;
}
#sidebar ul, li {
font-weight: normal;
padding-left: 0.4em;
}
span {
visibility: hidden;
}
#home{
background: url(http://www.webmasterworld.com/images/titleo.jpg) no-repeat;
width: 596px;
height: 130px;
padding: 0;
border: 0;
margin: 0;
border-bottom: 1px solid #000;
}
h4#nav {
display: block;
width: 160px;
height: 46px;
margin: 0 0 0 3.5px;
background: url(http://www.webmasterworld.com/images/navigation.jpg) no-repeat;
padding: 0;
border: 0;
border-style: none;
}
#container {
background: url(http://www.webmasterworld.com/images/fauxcolumns.jpg) repeat-y;
color: #fff;
margin: 10px auto;
padding: 0;
border: 2px solid #000;
width: 600px; /* box model hack for IE */
voice-family: "\"}\"";
voice-family:inherit;
width: 596px;
}
html>#container{
width: 596px;
}
#maincontent {
float: left;
display: inline; /* to avoid IE double margin bug */
text-align: justify;
margin-left: -3px; /* to counteract IE 3px Float bug */
padding: 15px;
width: 430px; /* box model hack for IE */
voice-family: "\"}\"";
voice-family:inherit;
width: 400px;
}
html>#maincontent {
width: 400px;
}
#sidebar {
margin: 2px 0 30px 430px;
padding: 0;
background: transparent;
height: 100%;
}
#footer {
border: 0;
border-top: 1px dotted #555;
color: #666;
background: rgb(134,156,178);
padding: 5px 7px 7px 10px;
text-align: left;
clear: both;
font-size: 0.8em;
}
*******************************************
Okay, still with me? :)
The navigation image is 160x46 pixels. The banner image is 596x130 pixels. And the Faux Columns image is 596x2 pixels.
If you need any more info, please let me know.
Any ideas? Thanks in advance. :)
-ian
You have an h4 in your nav div, this could be causing the problem. Check out the discussion linked above and see if it helps you out.
hth!
The H4 is a must for the structural markup, since, well, they actually ARE H4's. Are you saying that it's something to do with the rules for the H4?
-ian
h4{
font-size: 1.0em;
margin: 1.2em 0em 1.2em 0em;
font-weight: bold;
}
#sidebar ul, li {
font-weight: normal;
padding-left: 0.4em;
}
Ok, now you have your heading within the sidebar,
so, if you use something like this
#sidebar h4 (
margin: 0px;
padding: 0px;
)
It should take care of it.
This should not interfer with your other styles for this. I have used this and it does work. It removes the padding that some browsers put around a heading. test this on a test page with headings and see how it works out for you.
I know someone who knows more could explain this better as I am learning this as well. Just in this case, I know it works.
The H4's are hidden using Fahrner Image Replacement, though, so I don't think it's the h4 itself...
-ian
#sidebar h4 {
margin: 0;
padding: 0;
}
But with that rule in, nothing changed visually on the page, in IE6/Win or any other browser for that matter. So at this point I'm not sure if it's the h4 that's the problem or not.
-ian
If I had time I would do a search for you, but we have so much to do today with christmas eve. If no one gets here to help you out before sunday/monday, I'll see what I can do in finding links for you and sticky them to you.
quiet around here for some reason, I'm hiding from kitchen as I'm about to cook Christmas Lunch #2 ..
anyways quick look, you've triggered IE's other main faux-pax their quirky float model, with the height on the sidebar.
#sidebar {
margin: 2px 0 30px 430px;
padding: 0;
background: transparent;
height: 100%;
}
When you trigger layout in the float model IE reverts back to it's quirks way of floating whereby it doesn't actually float "properly" instead the main content and the sidebar will sit "side by side" (with the 3px gap) without the need for a margin on the sidebar.
I've removed all your sizes/hacks as I haven't time to explain it all, but instead I've taken the middle bit and will try to show how the float model is affecting your header placement.
There is a choice as usual :)
HTML (for both):
<div id="container">
<div id="maincontent">
<p>Main Content Text</p>
</div><div id="sidebar">
<h4>navigation</h4>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</div>
</div>CSS for both
body{
margin: 0;
padding: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 76%;
color: #000;
}ul {
list-style: none;
font-size: 1.0em;
line-height: 1.8em;
margin: 0;
padding: 0 0 0 0.4em;
background: #00f; /* blue */
}li {
background: #ff0; /* yellow */
color: #000;
border-top: 1px solid #000;
padding: 0 0 0 0.4em;
}#sidebar h4 {
background: #ddd;
font-size: 1.0em;
width: 160px;
height: 46px;
margin: 0;
margin: 0 5px; /* this centers heading in 170px wide sidebar */
padding: 0;
border: 0;
}#container {
background: transparent;
color: #fff;
margin: 10px auto;
padding: 0;
border: 2px solid #000;
width: 600px;
}
1. additional CSS: with height trigger intact
Note: I've used * html hacks but only to clarify which bits of CSS are affecting IE only */
#maincontent {
background: #080;
float: left;
width: 430px;
}* html #maincontent {display: inline; margin-right: -3px;} /* to counteract IE's double margin and 3px Float bug */
#sidebar {
margin-left: 430px;
padding: 0;
background: #fcf; /* pink */
}* html #sidebar {height: 100%; margin-left: 0px;} /* height is the IE Trigger */
2. additional CSS: without height trigger
#maincontent {
background: #080;
float: left;
width: 430px;
}* html #maincontent {}
#sidebar {
margin-left: 430px;
padding: 0;
background: #fcf; /* pink */
}* html #sidebar {margin-left: 427px;} /* to counteract the 3px jog */
I prefer method #1, although it seems like more workaround CSS is required you are actually getting a 170px wide sidebar, which may be important for accurately placing the headers, In method #2, the sidebar is actually 173px wide (you should see the colors overlapping). In method 2 if you use the 430px margin for IE the columns line up but the content doesn't becasue the 3px jog is playing havoc with the h4 margins, (e.g. with CSS no.2. set the sidebar margin to 430px for IE and zero the h4 margin and you see the h4 gets the 3px (bug) left margin)
this might not have answered your question, but I think it's what's happening in the columns that is ultimately affecting the h4 placement, but maybe this will help a little ~ Merry Christmas!
Suzy
Does anybody have experience using IE7? I've heard that it can fix some of those bugs, but I know next to nothing about scripting.
-ian
