Forum Moderators: not2easy
I am attempting to place a 400px text container with a black background in the maincontent container that will be basically centered within the container. When I set the width for the text container it displays differently in IE and FF. IE has the text container entirely within the maincontent container. Whereas FF and Opera render the text container with the left margin of the text container to the left edge of the page overlapping the floated left-column.
Here is the applicable code I am currently using:
#navcontainer {
float: left;
width: 150px;
/*border: 1px solid #fff000;*/
}
#maincontent {
margin: 0;
}
#page_title {
margin: 5px 0 0 155px;
}
#text_container {
width: 400px;
/*position: relative;
top: 10px;
left: 260px;*/
background-color: #000000;
border: 1px solid #ff0000;
}
#text_container p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #cccccc;
border: 1px solid #ffff00;
}
Any thoughts on how to have the text container render the same in IE and FF so that I can attempt to align it where I want, would be gratly appreciated.
Thanks
You can use IE's conditional comments to override code you intend to FIX IE's rendering of.
<!--[if IE]>
<link href="fixretardbrowser.css" media="screen" rel="stylesheet" title="default" type="text/css" />
-->
You should ALWAYS code for the most W3C compliant browser first, Gecko based browsers and Opera is dam fine too.
IE is the only other Windows based rendering engine you have to worry about. If you install Linux you can use Konquerer to verify KHTML rendering engine which is the same thing used in Safari on the MACs.
IE's conditional comments has an official page you can find here...
[msdn.microsoft.com...]
You can use an if arguement like if ie5 or if ie5.5 or whatever. This method is ONLY effective for IE 5.0+ though only people who are insane (like myself) still use IE4 to test pages or those few people like this one lady I know of who was still using a 486 along with her daughter I know from college! Ouch!
One of the most common operations performed in a Web page is to detect the browser type and version.
I stopped reading there..... (to recover from my aching belly laugh....)
(Thankfully I have never found a need to do what they suggest - although I do spend hours sometimes on the occasional fiddly bit and have been known to rethink my design to accomodate the differences.... maybe I should go back and re-read it.... NO PLEASE! NOT THAT!)
IE has the text container entirely within the maincontent container. Whereas FF and Opera render the text container with the left margin of the text container to the left edge of the page overlapping the floated left-column.
IE is wrong, it has a quirky float model whereby anything with a width next to a float will cause the element not to interact properly with the float.
In FF and Opera you are seeing the right thing, The maincontent div stretches to the left edge and the nav concontainer div floats over the top of it. so if you then try and centre the 400px width text-container it will centre according to the whole page.
How you get them to act the same depends on your layout. Do you want the main content column to always leave a space at the side for the nav? (i.e. text doesn't wrap arounf the nav div)
If so try margining the main content div, 150/5px for your layout? then reduce the margin on the page title and centre the 400px wide text-container using margin: 0 auto;..
This may cause some other IE display bugs if there's links involved, if that's the case it's possibe that the main-content div might need a "layout" hack.. but see what happens.
#navcontainer {
float: left;
width: 150px;
background: #cfc;
}#maincontent {
margin: 0 0 0 150px;
padding: 1px 0;
background: #eee;
}#page_title {
margin: 5px 0 0 0;
}#text_container {
width: 400px;
margin: 0 auto; /* to center */
background: #000;
border: 1px solid #f00;
}#text_container p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #cccccc;
border: 1px solid #ffff00;
}
I found another way, if you want text to wrap properly, throughout the rest of the layout.
stil haven't figured how this works, but it answers an often asked question.
#navcontainer {
float: left;
width: 150px;
background: #cfc;
}#maincontent {
margin: 0;
padding: 1px 0;
background: #eee;
}#page_title {margin: 5px 0 0 0;}
#text_container {
width: 400px;
margin: 0 auto; /* to center */
position: relative; /* so you can use a left co-ordinate */
background: #000;
border: 1px solid #f00;
}/* IE doesn't need to see this */
html>body #text_container {left: 75px; /* 1/2 the width of the nav */}#text_container p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #cccccc;
border: 1px solid #ffff00;
}
it is the same as what you originally posted I think, except I added margin: 0 auto; to center then position:relative; to the text_container. Then only for the compliant browsers a left co-ordinate of 1/2 the width of the nav column
this seems to center in the "main area" now..
I just guessed at the HTML layout.. and used this code:
<div id="navcontainer">
<ul>
<li>nav container</li>
<li>nav container</li>
<li>nav container</li>
</ul>
</div>
<div id="maincontent">
<div id="page_title">Page Title</div>
<div id="text_container">
<p>foo text... ...</p>
<p>foo text... ...</p>
<p>foo text... ...</p>
<p>foo text... ...</p>
</div>
<p>foo text... ...</p>
<p>foo text... ...</p>
<p>foo text... ...</p>
<p>foo text... ...</p>
</div>
Suzy
Your help is always appreciated!
gldweb
