Printable View
hello, i am trying to get the menu to my layout stretch all the width of my column but i somehow can find where to make changes to achieve it on IE, FF, safari, opera and netscape browsers.
the menu is quite straightforward and i think the problem might be coming from the layout. Can someone please help?
many thanks.
Hi,
You will need to provide us with some code or a link in order for us to help :)
hi, sorry paul here is the link
almost there... changed #inner toit was 23% and changedQuote:
#inner{
margin-right:22%;}
from padding:0Quote:
#contentMenu {padding: 0 2px;}
but somehow i am getting on FF and netsacpe a small gap. this only works well if i put.Quote:
#contentMenu {padding: 0 1px;}
anyway, is there a way to display both #contentMenu padding or work around it? many thanks.
Hi,
As you have a fixed pixel width you should be using pixels and not percentages because percentages will always be out.
I think this is what you were trying to do.
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test layout3</title>
<style type="text/css">
* {margin:0;padding:0; border:0;}
p,h1,h2{padding:5px;margin-bottom:1em; margin-left:0.5em;}
h2{font-size:98%}
h3 { font: 12px Georgia, "Times New Roman", Times, serif; padding:2px 3px; margin: 0; color: #ff0000;}
body{
text-align:center;
margin:auto;
background:#FFF url(http://www.layout3.upfrontec.com/images/bg5.png) no-repeat;
color:#F0F0EE;
width:770px;
text-align: left;
font-family: Arial, Tahoma, sans-serif;
font-size:12px;
}
#wrapper{
margin:21px 0;
background:#626D75;/* right column colour*/
text-align:left;
border:5px #F2F2F2 solid;
min-height:0;
}
#header,#footer{
background:#999;
color:#000;
/*width:100%;*/
clear:both;
}
#header{border-bottom:1px solid #FFF; background:url(http://www.layout3.upfrontec.com/images/u_header.jpg) no-repeat; height:114px;}
#footer{border-top:1px solid #FFF; overflow:hidden; padding:4px;}
#footer a{color:#FFF;}
#breadcrumb{ background:#999; color:#FFF; padding:4px; border-bottom:1px solid #FFF;}
#inner{
margin-right:167px;
background:#EBEBEB;
border-right:1px solid #fff;
}
#middle{
background:#AEE758;
margin-left:415px;
color:#000;
position:relative;
border-left:1px solid #FFF;
}
#content2{
position:relative;
width:100%;
float:left;/* contain clearing*/
}
#left{
width:415px;
margin-left:-414px;/*overlap for old mozilla*/
position:relative;
left:-2px;/* now line it up*/
float:left;
color:#000;
}
#right{
width:167px;
margin-right:-166px;/*overlap for old mozilla*/
position:relative;
left:2px;/* now line it up*/
float:right;
}
#left{margin-right:-3px;}/* 3 pixel jog*/
#right{margin-left:-1px;}/* */
/* clear without structural mark-up */
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* mac hide \*/
.clearfix {display: block;}
/* End hide */
/*menu*/
#contentMenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
width: 167px;
margin: 0;
}
#contentMenu h1 {
display: block;
background-color:#FF9900;
font-size: 90%;
padding: 3px 0 5px 5px;
color: #333333;
margin: 0px;
width:162px;
}
#contentMenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#contentMenu ul li {
margin: 0px;
padding: 0px;
}
#contentMenu ul li a {
font-size: 80%;
display: block;
border-bottom: 1px dashed #C39C4E;
padding: 5px 2px 2px 5px;
text-decoration: none;
color: #aee758;
width:160px;
}
#contentMenu ul li a:hover, #contentMenu ul li a:focus {
font-weight:bold;
color: #ff9900;
background-color: #aee758;
}
/*Start breadCrumb */
#breadcrumb {
height: 18px;
font-size:12px;
padding: 2px;
background: #999;
color: #f5f5f5;
}
#breadcrumb li {
float: left;
display: inline;
margin-right: 4px;
}
#breadcrumb a {
color: #fff; /* Our breadcrumb links are going to be white */
font-weight: bold; /* And bold */
background: url(http://www.layout3.upfrontec.com/../images/Ysq_icon.png) bottom right no-repeat;
padding-right: 11px; /* We need to add some padding to the right of the link. This space is where the background image is going to be shown. */
text-decoration: none;
}
#breadcrumb a:hover {
color: #333;
background: url(http://www.layout3.upfrontec.com/../images/Bsq_icon.png) top right no-repeat;
}
/*E O breadCrumb*/
</style>
<!--[if IE ]>
<style type="text/css">
* html #wrapper{height:1%}
* html .clearfix,* html #inner, * html #middle {height: 1%;}
#inner, #middle{min-height:1px}
</style>
<![endif]-->
<script type="text/javascript">
<!--
window.onload=show;
function show(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
</head>
<body>
<div id="wrapper">
<div id="header"> </div>
<!-- end #header-->
<!--<div id="breadcrumb">-->
<ul id="breadcrumb">
<li><a href="#">Home</a></li>
</ul>
<!--</div>-->
<!-- end #breadcrumb-->
<div id="inner">
<div id="middle" class="clearfix">
<div id="content">
<div id="left">
<p> Ut mauris velit, convallis vel, sodales ut, viverra at, nulla. Maecenas dignissim, nulla ut ultricies dignissim, leo risus tempus odio, et dignissim ligula est at elit. Cras ac dolor in neque volutpat iaculis. Suspendisse nunc neque, blandit sit amet, convallis vitae, venenatis et, nisl. Cras lacinia. Maecenas eget sem at mi porta venenatis. Phasellus ac massa. Nunc tempor. Maecenas nunc leo, consectetuer ut, euismod eu, ultrices vitae, elit. Nunc auctor dignissim enim. Cras pretium erat condimentum est. Phasellus non massa luctus mi pretium ullamcorper. Sed ultricies. In id mauris. Duis mollis, nibh a sodales malesuada, ante ipsum tristique lacus, et tristique wisi magna quis dolor. Morbi volutpat sem in tellus. Nunc lacinia velit quis lectus. </p>
</div>
<div id="right" class="column">
<div id="contentMenu"><h1>Navigation</h1>
<ul>
<li><a href="#" tabindex="1">menu1</a></li>
<li><a href="#" tabindex="2">menu2</a></li>
<li><a href="#" tabindex="3">menu3</a></li>
<li><a href="#" tabindex="4">menu4</a></li>
<li><a href="#" tabindex="5">menu5</a></li>
<li><a href="#" tabindex="6">menu6</a></li>
</ul>
</div>
</div>
<div id="content2" class="column">
<h3>W3C Standards?<span> </span></h3>
<p>The Web Standards Group is for web designers & developers who are interested in web standards (HTML, XHTML, XML, CSS, XSLT etc.) and best practices (accessible sites using valid and semantically correct code)... </p>
</div>
</div>
<!-- end #content-->
</div>
<!-- end #middle-->
</div>
<!-- end #inner-->
<div id="footer"> Footer </div>
<!-- end #footer-->
</div>
<!-- end #wrapper-->
</body>
</html>
thanks Paul thats exactly what i have been trying to achieve. many thanks again Maestro.