SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Dec 2004
    Location
    Vancouver, BC
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question FireFox works IE doesn't - Margin error?

    xhtml: http://www.itsjustwhatwedo.com/index2.html
    css: http://www.itsjustwhatwedo.com/style.css

    I am having a few problems that I cannot seem to workout.
    1) As you can see the content div is not floating properly, it appears that the margin or padding is being interpreted differently in IE then Firefox. I think thi causes the content div to stay below the floated navbar div.

    2) At the bottom of the navbar in IE, there is a slight bit of menu that shouldnt be there I am totally lost on this one.

    3) How can I get it so the "main" div which contains the background goes to the bottom of the floated menu. It only goes down as far as the content div.

    4) How can I get the whole thing centered? All different combinations of text-align dont seem to work.

    Very glad I found this site, I'm finding the transition from tables to standards gratifying but at the same time I need to learn all the CSS browser hacks, which is frustrating. Why can't the browsers just get along
    Last edited by abridges; Dec 13, 2004 at 02:56. Reason: spelling

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,282
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    1) Ie has a double margin-bug on the side of a float nearest the containers edge (or windows edge). The fix is to add display-inline which fixes it for some unknown reason as it shouldn't make any difference as floats are display:block whatever you specify.

    Code:
    div#navbar {
     color: #000;
     width: 200px;
     height: 100%;
     background-image: url('http://www.itsjustwhatwedo.com/images/menumiddle.gif'); /*http://www.itsjustwhatwedo.com*/
     padding: 0;
     margin: 0 0 0 30px;
     vertical-align: top;
     float: left;
     display:inline;/* ie double margin bug*/
     }
    
    That will fix ie and make no difference to other browsers.
    3) You need to clear the floated menu to pull the background around it.

    Css:
    Code:
    .clearer {
     height:1px;
     overflow:hidden;
     margin-top:-1px;
     clear:both;
    }
    Html:
    Code:
    	<p> Content here Content here Content here Content here </p>
      </div>
    <div class="clearer"></div>
    </div>
    <div id="bottom"></div>
    </body>
    Hope that helps

    Paul

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,282
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    2) Don't know quite what ie's playing at here so i think you'll have to hack it.
    Code:
    * html #navbar img {display:block;margin-bottom:-4px;}
    Usually display:block cures it but theres seems to me some margins being applied in error.

    Paul

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,282
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    4)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    	 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <title> The N Crew - Its just what we do...</title>
    <style>
    body {
     background-color: #303030;
     min-width: 780px;
     text-align:center;
     }
    #outer{
     position:relative;
     width:780px;
     margin-left:auto;
     margin-right:auto;
     text-align:left;
    } 
    /*Layout CSS */
    div#top {
     width: 780px;
     height: 175px;
     background-image: url('http://www.itsjustwhatwedo.com/images/header.jpg'); /*http://www.itsjustwhatwedo.com*/
     margin: 0;
     padding: 0;
     text-align: center;
     }
    div#main {
     background-image: url('http://www.itsjustwhatwedo.com/images/background.jpg'); /*http://www.itsjustwhatwedo.com*/
     width: 780px;
     padding: 0;
     margin: 0;
     text-align: left;
     }
    div#navbar {
     color: #000;
     width: 200px;
     height: 100%;
     background-image: url('http://www.itsjustwhatwedo.com/images/menumiddle.gif'); /*http://www.itsjustwhatwedo.com*/
     padding: 0;
     margin: 0 0 0 30px;
     vertical-align: top;
     float: left;
     display:inline;/* ie double margin bug*/
     }
     
    div#content {
     color: #000;
     width: 500px;
     margin: 0 0 0 240px; 
     padding: 0;
     vertical-align: top;
     }
     
    div#bottom {
     width: 780px;
     height: 57px;
     background-image: url('http://www.itsjustwhatwedo.com/images/bottom.jpg'); /*http://www.itsjustwhatwedo.com*/
     margin: 0;
     padding: 0;
     text-align: center;
     }
    /*General tags*/
    #navbar li.selection {
     width: 200px;
     display: block;
     font-size: 0.75em;
     font-family: verdana, sans-serif;
     padding: 0;
     margin: 3px 0 3px 0;
     text-align: left;
     list-style-type: none;
     }
     
    img {
     padding: 0;
     margin: 0;
     }
    p {
     font-size: 0.75em;
     font-family: verdana, sans-serif;
     padding: 0 0 1em 0;
     margin: 0;
     text-align: left;
     }
    .right {
     text-align: right;
     }
    .center {
     text-align: center;
     } 
    p.ptop {
     margin: 0 30px 0 530px;
     padding-top: 30px;
     }
    ul {
     text-align: left;
     padding: 0;
     margin: 0;
     }
    /* Used for list item headers*/
    .header, .fheader {
     display: block;
     width: 178px;
     height: 20px;
     color: #F00;
     font-size: 0.85em;
     font-family: verdana, sans-serif;
     font-weight: bold;
     margin: 1em 0 0 0;
     background-color: #F4F4F4;
     padding: 3px 0px 3px 20px;
     border: 1px solid #AFAFAF;
     }
    .fheader {
     margin:0;
     }
    .boldit {
     font-weight: bold;
     }
    a:link {
     color: #000;
     text-decoration: none;
     background: transparent;
     }
     
    a:visited {
     color: #000;
     text-decoration: none;
     background: transparent;
     }
    a:hover {
     color: #000;
     text-decoration: none;
     background: transparent;
     }
    a:active {
     color: #000;
     text-decoration: none;
     background: transparent;
     }
    .clearer {
     height:1px;
     overflow:hidden;
     margin-top:-1px;
     clear:both;
    }
    * html #navbar img {display:block;margin-bottom:-4px;}
    </style>
    </head>
    <body>
    <div id="outer"> 
      <div id="top"> 
    	<p class="ptop"> <span class="boldit"> Last update:</span> <br />
    	  Sunday, Dec 12, 2004: 11:50pm <br />
    	  <span class="boldit">Sections updated: </span> <br />
    	  Menu <br />
    	  <span class="boldit">What we're saying: </span> <br />
    	  What?!?!? Double What?!?!? <br />
    	</p>
      </div>
      <div id="main"> 
    	<div id="navbar"> <img src="http://www.itsjustwhatwedo.com/images/menutop.gif" width="200" height="24" alt="Top of Menu" /> 
    	  <ul>
    		<div id="party"> 
    		  <li class="fheader" title="Partying"> Partying </li>
    		</div>
    		<li class="selection" title=""><a href="index.html">:: Drinking Games</a></li>
    		<li class="selection" title=""><a href="news.html">:: Drinks</a></li>
    		<li class="selection" title=""><a href="dating.html">:: How to throw a 
    		  party</a></li>
    	  </ul>
    	  <ul>
    		<div id="events"> 
    		  <li class="header" title=""> Events </li>
    		</div>
    		<li class="selection" title=""><a href="index.html">:: Upcoming Events</a></li>
    		<li class="selection" title=""><a href="index.html">:: FraserFest</a></li>
    		<li class="selection" title=""><a href="news.html">:: Tailgate</a></li>
    		<li class="selection" title=""><a href="dating.html">:: Sweater Party</a></li>
    	  </ul>
    	  <ul>
    		<div id="culture"> 
    		  <li class="header" title="">Culture</li>
    		</div>
    		<li class="selection" title=""><a href="index.html">:: Movie Reviews</a></li>
    		<li class="selection" title=""><a href="news.html">:: Grooming</a></li>
    		<li class="selection" title=""><a href="dating.html">:: Style Tips</a></li>
    		<li class="selection" title=""><a href="dating.html">:: Workout Tips</a></li>
    	  </ul>
    	  <ul>
    		<div id="Dating"> 
    		  <li class="header" title="">Dating</li>
    		</div>
    		<li class="selection" title=""><a href="index.html">:: Tips and Tricks</a></li>
    		<li class="selection" title=""><a href="dating.html">:: Ask the Crew</a></li>
    	  </ul>
    	  <ul>
    		<div id="Projects"> <!-- these are not valid here -->
    		  <li class="header" title="">Projects</li>
    		</div>
    		<li class="selection" title=""><a href="index.html">:: Bridges over the 
    		  Fraser</a></li>
    		<li class="selection" title=""><a href="dating.html">:: Bowling</a></li>
    		<li class="selection" title=""><a href="dating.html">:: The Heckler</a></li>
    	  </ul>
    	  <ul>
    		<li class="fheader" title="Partying"> What we do </li>
    		<li class="selection" title=""><a href="index.html">:: Cellphone Challenge</a></li>
    		<li class="selection" title=""><a href="news.html">:: Wings for a week</a></li>
    		<li class="selection" title=""><a href="dating.html">:: Wig weekend</a></li>
    	  </ul>
    	  <img src="http://www.itsjustwhatwedo.com/images/menubottom.gif" width="200" height="25" alt="Bottom of Menu" /> 
    	</div>
    	<div id="content"> 
    	  <p> a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a 
    		a a a a a a a aa a a a a a a a a a a a a a a a a a a a a a a a a a a a 
    		a a a a a a a a a a a a a a </p>
    	  <p> Content here Content here Content here Content here Content here Content 
    		here Content here Content here </p>
    	  <p> Content here Content here Content here Content here Content here Content 
    		here Content here Content here </p>
    	  <p> Content here Content here Content here Content here </p>
    	  <p> Content here Content here Content here Content here </p>
    	  <p> Content here Content here Content here Content here Content here Content 
    		here Content here Content here </p>
    	  <p> Content here Content here Content here Content here Content here Content 
    		here Content here Content here </p>
    	  <p> Content here Content here Content here Content here </p>
    	  <p> Content here Content here Content here Content here Content here Content 
    		here Content here Content here </p>
    	  <p> Content here Content here Content here Content here Content here Content 
    		here Content here Content here </p>
    	  <p> Content here Content here Content here Content here </p>
    	  <p> Content here Content here Content here Content here </p>
    	  <p> Content here Content here Content here Content here Content here Content 
    		here Content here Content here </p>
    	  <p> Content here Content here Content here Content here Content here Content 
    		here Content here Content here </p>
    	  <p> Content here Content here Content here Content here </p>
    	</div>
    	<div class="clearer"></div>
      </div>
      <div id="bottom"></div>
    </div>
    </body>
    </html>
    See FAQ on centering

    Also change the invalid code you have where you have nested divs inside your ul but outside the li tags.

    Hope that helps and sorts all the problems.

    Paul

  5. #5
    SitePoint Member
    Join Date
    Dec 2004
    Location
    Vancouver, BC
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking thankyou

    Thank you Paul!

  6. #6
    SitePoint Member
    Join Date
    Dec 2004
    Location
    Vancouver, BC
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool center doesn't work and one new prob

    Quote Originally Posted by Paul O'B
    4)

    See FAQ on centering

    Also change the invalid code you have where you have nested divs inside your ul but outside the li tags.

    Hope that helps and sorts all the problems.

    Paul
    Ok I followed the faq's but it is still not centering. I thougt maybe some margins were extending past the 780px design so I tried many dif widths for the central div. After using a class for a while I tried everything over with central as a div and it is still not working.

    Here is the CSS hopefully I did something easy/dumb wrong one of you can point out to me.

    Code:
    body {
    	background-color: #303030;
    	width: 790px;
    	text-align: center;
    	margin: 10px 0 0 1px;
    	padding: 0px;
    	min-width: 785px; /* stop mozilla sliding off the edge */
    	}
    
    /* Empty div to center page*/
    div#central {
    	margin: 0 auto 0 auto;
    	position: relative;
    	width: 790px;
    	text-align: left;
    	}
    A new problem I am having is IE is putting margins much larger then I specified above and below my <li> (menu items), even though firefox looks correct. I tried changing it to inline which of course just put it all on one line. I tried to make a IE hack to eliminate the margins but it did not work. This is what I tried:
    Code:
    * html li.selection {margin: 0}
    URL to full code and css in first post in thread.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,282
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you looked at the code I gave you you would have seen that the centering did work

    You have set the body to 780px wide so how can you expact something that is also 780px wide to centre inside it. Take the width out of the body tag and the page will centre.

    You can try setting the line-height for the lists to even them up a bit although they will probably be a little different due to the em fonr sizes etc.

    Code:
    #navbar li {line-height:1.1em;}
    You don't need all those hundreds of classes li.selection. You could have targetted them without classes. e.g. #navbar li. Its only anything thats different that will need a class.

    Hope that helps.

    Paul

  8. #8
    SitePoint Member
    Join Date
    Dec 2004
    Location
    Vancouver, BC
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ahhh yes

    That makes perfect sense. Thank you


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
  •