Hallo,
Please have a look in the attached example:
the layout works fine (after some testing) in Mozilla. My problem is that the navigation breaks after the fourth button in IE. If i give a width to the list than the whole navigation breaks after the content at the left side.
Anyone with some advice?Change #page width:761px;
Add to #navcontainer float:left; width:100%;Hallo Fang,
thanks this will helps to remove this nasty break in the navigation bar. It seems that IE ignores the negative margin value.
Do you have an idea how i have to style the outer left border in the navigation?
At the moment the grey line is not at the same position.Change the #navcontainer padding:0;
Add #first a {width:110px; border-left:0;}
Change: <li id="first"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://bergtoys/mainUK.php">Home</a></li>
Looks good in Moz., IE doesn't load the flash so I can't see if it's correct, but it loks ok.Hallo,
I did already something similar...
I added a left border to the rightcontent-div and used the border only for button 2-5. After using a white light background-color the left border at the top is also visible in IE.
Now i have a problem with my header in Mozilla!
The value for padding works in relation to upper div (#page) and not for the navigation (i hope you understand what i mean...
here the actual css-code with the prolem:
body {
background: #003399 url(/Images/page_elements/bg_main.jpg) repeat-x top;
}
h1 {
color:#CCCCCC;
font: 18px Arial, Helvetica, sans-serif;
text-align:left;
padding: 20px 10px 10px;
margin:0;
}
h2 {
color:#666666;
font: bold 14px/22px Arial, Helvetica, sans-serif;
text-align:left;
padding: 0 10px;
margin:0;
background-color: #CCCCCC;
background-image: url(/Images/page_elements/bg_h2.jpg);
background-repeat: repeat-x;
}
p {
text-align:left;
padding: 5px 10px;
margin:0;
font: 12px Arial, Helvetica, sans-serif;
color: #666666;
}
#page {
width:760px;
margin:10px auto;
padding:0;
border: 1px solid #CCCCCC;
text-align:center;
}
#leftCol {
float: left;
padding:0;
width: 210px;
}
#rightCont {
margin: 0 0 0 210px;
border-left: 1px solid #CCCCCC;
background:#FFFFFF url(/Images/page_elements/bg_right_content.jpg) repeat-x;
}
#navcontainer {
float:left;
width:100%;
list-style-type: none;
height:35px;
margin:0;
padding:0;
background: url(/Images/page_elements/btn_normal.jpg) repeat-x;
border-bottom: 1px solid #003399;
}
#navcontainer li {
padding: 0;
margin: 0;
display: block;
float: left;
font: 12px/35px Arial, Helvetica, sans-serif;
text-align: center;
border-left:0;
}
#navcontainer a {
color: #FFFFFF;
text-decoration: none;
display: block;
width: 109px;
}
.borderleft {
border-left: 1px solid #CCCCCC;
}
#navcontainer a:hover {
background: url(/Images/page_elements/btn_normalover.jpg) no-repeat;
color: #666666;
}
and the html code...
<div id="page">
<div id="leftCol">
<object classid="clsid
27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://Download .macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="210" height="130">
<param name="movie" value="Images/page_elements/bt_logo.swf">
<param name="quality" value="high">
<embed src=http://www.webdeveloper.com/forum/archive/index.php/"Images/page_elements/bt_logo.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="210" height="130"></embed>
</object>
<h2>left colomn</h2>
</div>
<div id="rightCont">
<ul id="navcontainer">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"mainUK.php">Home</a></li>
<li class="borderleft"><a href=http://www.webdeveloper.com/forum/archive/index.php/"profil.php">About BERG</a></li>
<li class="borderleft"><a href=http://www.webdeveloper.com/forum/archive/index.php/"producten/prodindexUK.php">Products</a></li>
<li class="borderleft"><a href=http://www.webdeveloper.com/forum/archive/index.php/"dealers/dealer.php">Find a Dealer</a></li>
<li class="borderleft"><a href=http://www.webdeveloper.com/forum/archive/index.php/"contact/contactStart.php">Contact</a></li>
</ul><h1>header 1 in right col</h1>
<p>Rem aperi am aqusa, quaeb ill inv tore veritatis Beatae vitae dicta sunt, explicabo. nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit,</p>
</div>
</div>
any idea about the header1 in Mozilla...I remeber that there was something like in anotherpost...ThanksWrap the contents of the #navcontainer below the menu in a div . Give this div background:#fff; and remove the background-color (#FFFFF) from #rightCont.
That should remove the white from the top of the menu.
h1 has only 3 values for padding.Hallo,
oops, i oversaw the white line, right i can fix this with an extra div... the problem with the padding of the header1 is not fixed. Your suggestion changed not the position. Anything else?The new div that wraps the contents of #navcontainer after the menu needs a clear:both;
The menu was floated so a clear is usually required.onzettend bedankt...
The "clear" command sounds logical and has solved the problem.
I ask me what kind of books about CSS read the guy who worked for Microsoft...
Microsoft are contributors to the W3C, but they won't be implementing any of the W3C recommendations until the next version of IE is released.
Another 2 years
With their market share of >85% it's something you will have to live with.With their market share of >85% it's something you will have to live with.
I know almost everyone in Holland surfes with IE.99.9% IE on my sites. 0.1% spiders.
I still do x-browser layout.You're absolutly right...it's like if you are a baker and bake only dark bread.
Hallo Fang,
The clear both works for mozilla but not for IE. In IE the clear command breaks until the end of the left content.
What now?Can you show an example?sure...
<!-- m --><a class="postlink" href="http://www.bergtoys.nl/template.phpI">http://www.bergtoys.nl/template.phpI</a><!-- m --> should have see this coming, the margin:0 0 0 210px; in #rightCont
Remove clear:both; in #contentparts
Remove width:100% in #navcontainer
Change
#rightCont {
float: left;
margin: 0 0 0 0px;
border-left: 1px solid #CCCCCC;
width:549px;
}
Add an empty div with clear:both; here:
</div>
</div>
<div style="clear:both;"></div>
</div>
</body></html>
The basic page layout is:
<div id="page">
<div id="leftCol"></div>
<div id="rightCont"></div>
<div style="clear:both;"></div>
</div>Thank you for your help.
This works for a part. In the meantime i added some extra elements. It looks like in mozilla that the margin of the contentpart div is used for the right-content div and in IE for the navigation list. Is it better to put the list in an extra div?I get it working now, if you like check the link again that i posted before.
Thanks for your time.Looks the same in IE and Moz.The menu displays incorrectly in Opera.
Remove float:left; from #navcontainer, the other browsers should not be affected by it.its possible that there is a way to optimize... i'm happy for now without Opera there are so much elements which are really bad represented in Opera. The footer gets a navigation bar too. this should be enough for this 5 opera users...
Please have a look in the attached example:
the layout works fine (after some testing) in Mozilla. My problem is that the navigation breaks after the fourth button in IE. If i give a width to the list than the whole navigation breaks after the content at the left side.
Anyone with some advice?Change #page width:761px;
Add to #navcontainer float:left; width:100%;Hallo Fang,
thanks this will helps to remove this nasty break in the navigation bar. It seems that IE ignores the negative margin value.
Do you have an idea how i have to style the outer left border in the navigation?
At the moment the grey line is not at the same position.Change the #navcontainer padding:0;
Add #first a {width:110px; border-left:0;}
Change: <li id="first"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://bergtoys/mainUK.php">Home</a></li>
Looks good in Moz., IE doesn't load the flash so I can't see if it's correct, but it loks ok.Hallo,
I did already something similar...
I added a left border to the rightcontent-div and used the border only for button 2-5. After using a white light background-color the left border at the top is also visible in IE.
Now i have a problem with my header in Mozilla!
The value for padding works in relation to upper div (#page) and not for the navigation (i hope you understand what i mean...
here the actual css-code with the prolem:
body {
background: #003399 url(/Images/page_elements/bg_main.jpg) repeat-x top;
}
h1 {
color:#CCCCCC;
font: 18px Arial, Helvetica, sans-serif;
text-align:left;
padding: 20px 10px 10px;
margin:0;
}
h2 {
color:#666666;
font: bold 14px/22px Arial, Helvetica, sans-serif;
text-align:left;
padding: 0 10px;
margin:0;
background-color: #CCCCCC;
background-image: url(/Images/page_elements/bg_h2.jpg);
background-repeat: repeat-x;
}
p {
text-align:left;
padding: 5px 10px;
margin:0;
font: 12px Arial, Helvetica, sans-serif;
color: #666666;
}
#page {
width:760px;
margin:10px auto;
padding:0;
border: 1px solid #CCCCCC;
text-align:center;
}
#leftCol {
float: left;
padding:0;
width: 210px;
}
#rightCont {
margin: 0 0 0 210px;
border-left: 1px solid #CCCCCC;
background:#FFFFFF url(/Images/page_elements/bg_right_content.jpg) repeat-x;
}
#navcontainer {
float:left;
width:100%;
list-style-type: none;
height:35px;
margin:0;
padding:0;
background: url(/Images/page_elements/btn_normal.jpg) repeat-x;
border-bottom: 1px solid #003399;
}
#navcontainer li {
padding: 0;
margin: 0;
display: block;
float: left;
font: 12px/35px Arial, Helvetica, sans-serif;
text-align: center;
border-left:0;
}
#navcontainer a {
color: #FFFFFF;
text-decoration: none;
display: block;
width: 109px;
}
.borderleft {
border-left: 1px solid #CCCCCC;
}
#navcontainer a:hover {
background: url(/Images/page_elements/btn_normalover.jpg) no-repeat;
color: #666666;
}
and the html code...
<div id="page">
<div id="leftCol">
<object classid="clsid
27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://Download .macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="210" height="130"><param name="movie" value="Images/page_elements/bt_logo.swf">
<param name="quality" value="high">
<embed src=http://www.webdeveloper.com/forum/archive/index.php/"Images/page_elements/bt_logo.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="210" height="130"></embed>
</object>
<h2>left colomn</h2>
</div>
<div id="rightCont">
<ul id="navcontainer">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"mainUK.php">Home</a></li>
<li class="borderleft"><a href=http://www.webdeveloper.com/forum/archive/index.php/"profil.php">About BERG</a></li>
<li class="borderleft"><a href=http://www.webdeveloper.com/forum/archive/index.php/"producten/prodindexUK.php">Products</a></li>
<li class="borderleft"><a href=http://www.webdeveloper.com/forum/archive/index.php/"dealers/dealer.php">Find a Dealer</a></li>
<li class="borderleft"><a href=http://www.webdeveloper.com/forum/archive/index.php/"contact/contactStart.php">Contact</a></li>
</ul><h1>header 1 in right col</h1>
<p>Rem aperi am aqusa, quaeb ill inv tore veritatis Beatae vitae dicta sunt, explicabo. nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit,</p>
</div>
</div>
any idea about the header1 in Mozilla...I remeber that there was something like in anotherpost...ThanksWrap the contents of the #navcontainer below the menu in a div . Give this div background:#fff; and remove the background-color (#FFFFF) from #rightCont.
That should remove the white from the top of the menu.
h1 has only 3 values for padding.Hallo,
oops, i oversaw the white line, right i can fix this with an extra div... the problem with the padding of the header1 is not fixed. Your suggestion changed not the position. Anything else?The new div that wraps the contents of #navcontainer after the menu needs a clear:both;
The menu was floated so a clear is usually required.onzettend bedankt...
The "clear" command sounds logical and has solved the problem.
I ask me what kind of books about CSS read the guy who worked for Microsoft...
Microsoft are contributors to the W3C, but they won't be implementing any of the W3C recommendations until the next version of IE is released.Another 2 years
With their market share of >85% it's something you will have to live with.With their market share of >85% it's something you will have to live with.
I know almost everyone in Holland surfes with IE.99.9% IE on my sites. 0.1% spiders.
I still do x-browser layout.You're absolutly right...it's like if you are a baker and bake only dark bread.
Hallo Fang,The clear both works for mozilla but not for IE. In IE the clear command breaks until the end of the left content.
What now?Can you show an example?sure...
<!-- m --><a class="postlink" href="http://www.bergtoys.nl/template.phpI">http://www.bergtoys.nl/template.phpI</a><!-- m --> should have see this coming, the margin:0 0 0 210px; in #rightCont
Remove clear:both; in #contentparts
Remove width:100% in #navcontainer
Change
#rightCont {
float: left;
margin: 0 0 0 0px;
border-left: 1px solid #CCCCCC;
width:549px;
}
Add an empty div with clear:both; here:
</div>
</div>
<div style="clear:both;"></div>
</div>
</body></html>
The basic page layout is:
<div id="page">
<div id="leftCol"></div>
<div id="rightCont"></div>
<div style="clear:both;"></div>
</div>Thank you for your help.
This works for a part. In the meantime i added some extra elements. It looks like in mozilla that the margin of the contentpart div is used for the right-content div and in IE for the navigation list. Is it better to put the list in an extra div?I get it working now, if you like check the link again that i posted before.
Thanks for your time.Looks the same in IE and Moz.The menu displays incorrectly in Opera.
Remove float:left; from #navcontainer, the other browsers should not be affected by it.its possible that there is a way to optimize... i'm happy for now without Opera there are so much elements which are really bad represented in Opera. The footer gets a navigation bar too.
this should be enough for this 5 opera users...