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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Feb 2005
    Location
    Lawrence, Kansas
    Posts
    125
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Macintosh Funky width in IE

    For reference:

    http://www.cynthiawhalen.com/test/index.php

    If you look and see the nav box comes close to squishing against the body box in IE. In Firefox it doesn't (and Safari and Firefox for the Mac). Any ideas on how to fix?

    Thanks!

    Eric

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Use this for your css
    Code:
    /* CSS Document */
    
    #head {
    	margin-left: 7px;
    }
    
    body { 
     	background-image: url(images/bodywrap.gif);
    	background-position: top center;
    	background-repeat: repeat-y;
    	line-height: 18px;
    	font: 16px "Trebuchet MS", arial, Helvetica, sans-serif;
    	color: #666666;
    	text-align: center;
     	margin: 0px; 
    	padding: 0px;
    }
    
    #container {
    	margin: 0 auto;
    	width:  750px;
    	text-align: left;
    }
    
    #leftcolumn {
    	float: left;
    	width: 160px;
    	margin-top: 1em;
    	position:relative;
    	left:7px;
    	padding-top: 0;
    	border: 1px solid rgb(156, 144, 144);
    	background-color: white;
    }
    
    #leftcolumn ul {
    	margin-top: 0;
    	padding-top: .5em;
    	padding-left:0;
    	margin-left:0;
    }
    
    
    #leftcolumn ul li {
    	list-style-type: none;
    	line-height: 1.25em;
    }
    
    #leftcolumn ul li a:link {
    	text-decoration: none;
    	color: rgb(156, 144, 144);
    }
    
    #leftcolumn ul li a:visited {
    	color: black;
    	text-decoration: none;
    }
    
    #leftcolumn ul li a:hover {
    	text-decoration: underline;
    	color: #333;
    }
    
    /* Right column styles */
    
    #rightcolumn {
    	padding: .5em .5em .5em .5em;
    	margin: 1em 1em 0 200px;
    	border: 1px solid rgb(156, 144, 144);
    	background-color: white;
    }
    
    #rightcolumn p {
    	margin-left: .5em;
    }
    
    #rightcolumn h2 {
    	margin-top: 0;
    	margin-left: .5em;
    	color: #333333;
    	font: 30px;
    }
    
    #rightcolumn h4 {
    	margin-left: .5em;
    }
    
    /* artwork page styles */
    #rightcolumn div.pic {
    	float: left; 
    	height: 180px; 
    	width: 130px;
    	padding: 0 10px; 
    	margin: 5px 3px;
    }
    
    #rightcolumn div.pic img {
    	border: 1px solid; 
    	border-color: #444 #AAA #AAA #444;
    }
    
    #rightcolumn div.ls img {
    	height: 96px; 
    	width: 128px; 
    	margin: 32px 0 0;
    }
    
    #rightcolumn div.pt img {
    	height: 128px; width: 96px; 
    	margin: 16px 16px 0px 16px;
    }
    
    #rightcolumn div.pic ul {
    	margin: 0.25em 0 0; 
    	padding: 0;
      	font: small Arial, Verdana, sans-serif;
      }
    
    #rightcolumn div.pic ul li {
    	text-align: center;
    	list-style-type: none;
    }
    #rightcolumn div.pic ul li.title {
    	font-weight: bold;
    }
    
    #rightcolumn div.pic li.catno {
    	text-align: center;
    }
    
    #rightcolumn div.pic li.dem {
    	text-align: center;
    	font-style: italic;
    }
    #rightcolumn div.pic li.price {
    	text-align: right; 
    	font-style: italic;
    	border-bottom: 1px solid #aaa;
    	/* margin: -1.5em 0 0 50%; 
    	padding: 0 0 0 0.5em; */
    }
    
    /* footer styles */
    #footer { 
    	width: 723px;
    	font-size: .75em;
    	clear: both;
    	border: 1px solid rgb(156, 144, 144);
    	background-color: white;
    	margin-top: 2em;
    	margin-bottom: 1em;
    	padding: 4px;
    	text-align: left;
    	color: #666;
    }
    
    #footer a { 
    	font-weight: bold;
    	text-decoration: none;
    	color: #666;
    }
    
    img.right { float: right; margin: 5px; }
    
    img.left { float: left; margin: 5px; }
    
    .strike { text-decoration: line-through; }
    a ul has different padding and margin among different browsers, and when you use margin those are read differently as well, so I used position relative on the left div instead of margin and it seems to be fine.

  • #3
    Regular Coder
    Join Date
    Feb 2005
    Location
    Lawrence, Kansas
    Posts
    125
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Macintosh

    Can you tell me what you changed? I'm not really a ran of just trading out my stylesheet without really seeing what was changed.

    Thanks!

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You could compare it to your original CSS to see what I changed but if you must, this is what I changed (its bold):
    Code:
    #leftcolumn {
    	float: left;
    	width: 160px;
    	margin-top: 1em;
    	position:relative;
    	left:7px;
    	padding-top: 0;
    	border: 1px solid rgb(156, 144, 144);
    	background-color: white;
    }
    
    #leftcolumn ul {
    	margin-top: 0;
    	padding-top: .5em;
    	padding-left:0;
    	margin-left:0;
    }
    
    
    #leftcolumn ul li {
    	list-style-type: none;
    	line-height: 1.25em; /*Took out margin here, you can put it back if you want*/
    }

  • #5
    Regular Coder
    Join Date
    Feb 2005
    Location
    Lawrence, Kansas
    Posts
    125
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks. I've been staring at code all day. I wasn't really in the mood for checking all my code.

    Thanks again. I'll give it a shot!


  •  

    Posting Permissions

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