SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Some goofiness going on with IE 6

    Here is the link. am just trying some designs, and this is a 3 column Fluid style. The middle column contains an h2. For some reason, it won't show the background image to go with it, but it works on other browsers.

    Then the paragraphs should have white backgrounds with a light grey border, but in the middle, it doesn't show up.

    Any help?

    Thanks
    Bryan

    p.s. I can't seem to get that right nav bar to be up with the others.

  2. #2
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have fixed a lot of your problems by doing the following
    1. In the style for div#leftnav, changed margin: 10 0 0 10; to margin: 0px 0px 0px 10px;
    2. In the style for div#rightnav, changed margin: 10px 20px 0px 0px; to margin: 0px 10px 0px 0px;
    3. In the style for div#content h2 added position: relative; at the top
    4. In the style for div#content p added position: relative; at the top


    After these changes all that is wrong is that the right nav bar is a little low, I'm still working on that.

  3. #3
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK have managed to align the right nav as well now. The problem appears to be that the way you where using padding and margins on the different elements of the page was not standardised in anyway. This made finding the offending margin/padding (and that is all it was) hard to find. I have standardised paddings and margins, the new style code is:

    HTML Code:
    <style type="text/css">
    body, html {
    	margin: 0px;
    	padding: 0px;
    }
    #container
    {
    	width: 100%;
    	margin: 0px;
    	color: #333;
    	position: relative;
    	background-color: #F5F5F5;
    }
    
    #top
    {
    	width: 100%;
    	background-image: url(images/gamecube_02.jpg);
    	background-repeat: repeat;
    	padding: 0px;
    	height: 127px;
    	margin: 0px;
    	border-bottom-width: 1px;
    	border-bottom-style: solid;
    	border-bottom-color: #CCCCCC;
    	border-top-style: none;
    	border-right-style: none;
    	border-left-style: none;
    }
    
    #top h1
    {
    padding: 0px;
    margin: 0px;
    }
    
    div#leftnav
    {
    float: left;
    width: 130px;
    margin: 20px 0px 0px 10px;
    }
    
    div#rightnav
    {
    	float: right;
    	width: 130px;
    	margin: 20px 10px 0px 0px;
    }
    
    #content
    {
    	margin-left: 200px;
    	margin-right: 200px;
    	margin-top: 20px;
    	margin-bottom: 10px;
    }
    img.floatleft {
    	/*float: left;*/
    	position: absolute; left:0; top: 0;
    	z-index: 200;
    }
    img.floatright {
    	/*float: right;*/
    	position: absolute; right: 0; top: 0;
    	z-index:100;
    }
     dt {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	font-style: normal;
    	font-weight: bold;
    	color: #000000;
    	background-image: url(images/gamecube_06.jpg);
    	background-repeat: repeat-x;
    	padding-left: 5px;
    	border: 1px solid #D8D5E1;
    	padding-top: 5px;
    	padding-bottom: 5px;
    	text-align: center;
    }
    #footer
    {
    	clear: both;
    	margin: 0;
    	padding: 2px;
    	color: #000000;
    	background-color: #E4E4E4;
    	border-top: 1px solid #CCCCCC;
    	border-bottom-width: 1px;
    	border-right-style: none;
    	border-bottom-style: solid;
    	border-left-style: none;
    	border-bottom-color: #999999;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	text-decoration: none;
    	text-align: center;
    }
     dl {
    	background-color: #E6E6E6;
    	width: 128px;
    	border-right-width: 1px;
    	border-bottom-width: 1px;
    	border-left-width: 1px;
    	border-top-style: none;
    	border-right-style: solid;
    	border-bottom-style: solid;
    	border-left-style: solid;
    	border-right-color: #D8D5E1;
    	border-bottom-color: #D8D5E1;
    	border-left-color: #D8D5E1;
    	margin-left: 10px;
    	margin-bottom: 20px;
    	margin-top: 0px;
    }
     dd {
    	padding: 1px;
    	margin: 0px;
    	text-align: center;
    }
    a.even:link, a.even:visited {
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	font-style: normal;
    	font-weight: normal;
    	color: #000000;
    	display: block;
    	width: 100%;
    	text-decoration: underline;
    	background-color: #F3F3F3;
    }
    a.odd:link, a.odd:visited {
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	font-style: normal;
    	font-weight: normal;
    	color: #000000;
    	display: block;
    	width: 100%;
    	text-decoration: underline;
    }
     a.even:hover {
    	color: #FFFFFF;
    	text-decoration: none;
    	background-color: #590288;
    }
    a.odd:hover {
    	color: #FFFFFF;
    	text-decoration: none;
    	background-color: #590288;
    	}
    div#content h2 {
    	position: relative;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 16px;
    	font-weight: bold;
    	color: #999999;
    	text-decoration: none;
    	background-image: url(images/gamecube_06.jpg);
    	background-repeat: repeat-x;
    	padding-top: 2px;
    	padding-right: 0px;
    	padding-bottom: 2px;
    	padding-left: 10px;
    	border: 1px solid #D8D5E1;
    	margin: 0px;
    }
    div#content p {
    	position: relative;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: normal;
    	color: #000000;
    	text-decoration: none;
    	background-color: #FFFFFF;
    	letter-spacing: 1px;
    	padding: 5px;
    	margin: 0px;
    	border-right: 1px solid #E0E0E0;
    	border-bottom: 1px solid #E0E0E0;
    	border-left: 1px solid #E0E0E0;
    	border-top-style: none;
    }
    </style>
    While tracking this problem I used the trick of adding the following style:

    Code:
    div, p, h1, h2, h3, h4 {border: 1px solid black;}
    to the bottom of the style sheet so that I could see everying.

    If you do that to the original code it is easy to see the no-standard padding and margins on the nav left and right divs.

  4. #4
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks.

    When you said standarized way of margins/padding, what did you mean by that?

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Boston
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    padding-top: 2px;
    padding-right: 0px;
    padding-bottom: 2px;
    padding-left: 10px;
    why not:
    Code:
    padding: 2px 0 2px 10px;
    -Lewis

  6. #6
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What Lewis said is not what I meant, although that is the way I would decribe padding, however I always put units on my lengths even if they are 0 (in which case units are, strictly speaking, redundent) in order to avoid what you have done which is to accidentally miss off the units in leftnav margin.

    Considering the positions of your left and right nav bars and looking at some of your original CSS

    Code:
    <style type="text/css">
    #container
    {
    	width: 100%;
    	margin: 0px;
    	color: #333;
    	position: relative;
    	background-color: #F5F5F5;
    }
    
    div#leftnav
    {
    float: left;
    width: 130px;
    margin: 10 0 0 10;
    }
    
    div#rightnav
    {
    	float: right;
    	width: 130px;
    	margin: 10px 20px 0px 0px;
    	padding: 1em;
    }
    
     dl {
    	background-color: #E6E6E6;
    	width: 128px;
    	border-right-width: 1px;
    	border-bottom-width: 1px;
    	border-left-width: 1px;
    	border-top-style: none;
    	border-right-style: solid;
    	border-bottom-style: solid;
    	border-left-style: solid;
    	border-right-color: #D8D5E1;
    	border-bottom-color: #D8D5E1;
    	border-left-color: #D8D5E1;
    	margin-left: 10px;
    	margin-bottom: 20px;
    	margin-top: 10px;
    }
    </style>
    The position of the dl in each nav bar is dependent on, the container padding, the nav bar margin and padding, the dl margin and padding. 2 of these are common the container and the dl. However the leftnav and right nav styles have differing values for margin and padding. If you want them to be opposite then they should be mirror images of each other,
    ie
    same top margin
    same bottom margin
    same top padding
    same bottom padding
    left margin of 1 = right margin of other and vis versa
    left paffing of 1 = right padding of other and vis versa

    For your 2 styles the margins were different and the paddings were too. One of the main things I did to get the positioning right was write the margins and padding in a standard way (in this case all padding 0 and positioned using the margins) and make sure that the values were correct according to the list above, top margins equal and left margin of leftnav = right margin of rightnav.

    Additionally a suspect that your dl border could be written as
    Code:
    	border-width: 1px;
    	border-color: #D8D5E1;
    	border-style: none solid solid solid;
    Which I think is easier to read than what you have. Actually one of my minor gripes with CSS the the shear number of different ways it is possible to set the border to the same thing.

  7. #7
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *cough* Dreamweaver MX *cough*

    That is why I get some of the output I do. I am trying to slowly hand change them, but its so easy to point and click.

  8. #8
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    any reason why in Mozilla, Opera, and Firebird the right navigation hugs the right side and doesn't use the 10px of margin there is?

  9. #9
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright, here is the latest with the changes
    http://www.btkdesigns.com/gamecube

    It appears good in all the browsers from my standpoint, but haven't seen it in older ones.


Bookmarks

Posting Permissions

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