Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    max width, odd navigation problem, question

    First off, here is what I'm working with:

    http://exiledknights.net
    Code:
    a:link{
    	color:#759AB3;
    	background:inherit;
    	text-decoration:none;
    	font:13px Trebuchet MS, Arial;
    }
    a:visited{
    	color:#759AB3;
    	background:inherit;
    	text-decoration:none;
    	font:13px Trebuchet MS, Arial;
    }
    a:hover{
    	color:#003A4D;
    	background:inherit;
    	text-decoration:underline;
    	font:13px Trebuchet MS, Arial;
    }
    body{
    	background:#003A4D;
    	color:#000;
    	font:16px Trebuchet MS, Arial;
    	}
    pre{
    	font:12px Andale Mono;
    }
    .box{
    	color:inherit;
    	background:#FFF;
    	border:1px solid #000;
    	margin-top:0px;
    	margin-left:0px;
    	width:100%;
    	height:100%;
    	}
    .rightnav{
    	float:right;
    	border:none;
    	color:inherit;
    	background:inherit;
    	margin-right:6.2em;
    	}
    .header{
    	bottom-border:1px dotted #000;
    	width:100%
    	height:60px;
    	background:#435866;
    	color:#000;
    	font:24px Trebuchet MS, Arial;
    	padding-left:8px;
    	}
    .header a:link{
    	color:#759AB3;
    	background:inherit;
    	text-decoration:none;
    	font:24px Trebuchet MS, Arial;
    }
    .header a:visited{
    	color:#759AB3;
    	background:inherit;
    	text-decoration:none;
    	font:24px Trebuchet MS, Arial;
    }
    .header a:hover{
    	color:#003A4D;
    	background:inherit;
    	text-decoration:underline;
    	font:24px Trebuchet MS, Arial;
    }
    #content{
    	border:none;
    	font:13px Trebuchet MS, Arial;
    	width:500px;
    	margin-right:22em;
    	height:auto;
    	color:inherit;
    	background:inherit;
    	padding:8px;
    	float:right;
    	}
    .footer{
    	top-border:1px dotted #000;
    	width:100%
    	height:30px;
    	background:#435866;
    	color:#000;
    	font:13px Trebuchet MS, Arial;
    	padding-left:40%;
    	}
    #navigation {
    	margin-top:3em;
    	}
    #topnavigation li {
    	display: inline;
    	list-style-type: none;
    	padding-right: 15px;
    	font:18px Trebuchet MS, Arial;
    	}
    #topnavigation li a {
    	color: #4E4E4E;
    	text-decoration: none;
    	font-weight: bold;
    	font:18px Trebuchet MS, Arial;
    	}
    #topnavigation li a:hover {
    	color: #800000;
    	text-decoration: underline;
    	font:20px Trebuchet MS, Arial;
    	}
    	
    #navigation li a {
    	color: #000;
    	text-decoration: none;
    	border-top-width: 1px;
    	border-top-style: solid;
    	border-top-color: #000000;
    	width: 100px;
    	display: block;
    	padding: 3px;
    	border-right-width: 1px;
    	border-left-width: 1px;
    	border-right-style: solid;
    	border-left-style: solid;
    	border-right-color: #FFFFFF;
    	border-left-color: #FFFFFF;
    	text-align: left;
    	background-color: #FFFFFF;
    	}
    #navigation {
    	width: 100px;
    	border-bottom-width: 1px;
    	border-bottom-style: solid;
    	border-bottom-color: #FFFFFF;
    	}
    #navigation li {
    	list-style-type: none;
    	}
    #navigation li a:hover {
    	text-decoration: none;
    	color: #FFFF80;
    	background-color: #0080C0;
    	}
    Lets start with a simple question.
    Is there a difference between width: and max-width: ?

    For my div, .box, I have set the width to 100%. In IE, it creates a white space to the right. This might be the header, actually. (.header) Would it be better to simply set a width? I intended for the page to span across, but it would probably be better to set the width for my .box to be, say, 1100px?

    Also - in IE 6.0, my navigation is underneath my content. This may be linked to the 100% thing.

  • #2
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    http://jlhaslip.trap17.com/samples/t...eft/index.html

    Width and max-width are different, yes.
    Width is a stated value, max-width says for the item to be 'no bigger than' the value. It can be smaller.

    IE6 likely doesn't like the floats, padding, margins. It doesn't play fair.
    Look at the link I posted. It is a 100% width on the full page with a fixed width left hand sidebar for navigation which is measured in em's. Change that value to px if you need to, but you will also need to put a 'slightly' larger value to the margin-left of the content area for the float to work properly. This should work fairly well in most Browsers around the Web today. Might be a few IE5/mac's around that burp a little. Can't recall if this works in IE/mac or not.

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks. I'm going to school now, but I will be sure to try that out.

    Mac's don't have IE. If they do, they are ancient and need to be replaced anyways lol :P

    I may check it in safari and opera too (mac os). The windows safari should be the same as mac safari, you would assume.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •