SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: help my css

  1. #1
    SitePoint Wizard dethfire's Avatar
    Join Date
    Aug 2000
    Posts
    2,477
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help my css

    this page looks decent in IE, but completely messed up in firefox. I can't see what i've done wrong.

    http://www.gaming-nation.net/test1/
    Free Science Homework Help
    http://www.physicsforums.com

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

    What you have done wrong is design your site in ie and taken advantage of ie's quirks mode because you don't have a doctype.

    (Because you don't have a doctype you can't also run your code through the validator and pick up the few simple typing errors that you have in there as well.)

    However that won't solve your problems in firefox/mozilla because you have chosen a design that can only be done in ie. Mozilla will not inherit the 100% down through the code it will only apply it to the top level container.

    Also mozilla will apply 100% on the first container unless you also supply a min-width and a height auto specifically for moz.

    What you basically have is a 5 equalising column layout and this is not easily achievable with css unless you fix the width of some elements and apply bg gifs etc to achieve the full height borders.

    I think the nearest you can get without complete re-design is something like the following code. This displays as you want in ie and gices mozilla a reasonable layout.
    Code:
    <html>
    <head>
    <title></title>
    <style>
    /* mac hack \*/
    html,body {height:100%}
    /* end hack */
    body {
    text-align:center;
    background-color:#ffffff;
    font-family: verdana;
    }
    #container {
     width:93%;
     margin:auto;
     height:100%;
     
     border:1px #cccccc solid;
    }
    #container:after{
    	content: "."; 
    	display: block; 
    	height: 0; 
    	clear: both; 
    	visibility:hidden;
    	}
    html>body #container {height:auto}
    
    #topbar {
    width:93%;
    margin:10px auto 0;
    padding:2px 0;
    font-family: verdana;
    font-size: 10pt;
    text-align:right;
    border-bottom: 1px #cccccc solid;
    }
    form {
    display: inline;
    }
    #submit {
    background-color: #4582C6;
    width:50px;
    height:22px;
    font-size:10px;
    color: #ffffff;
    border:0px;
    }
    #world {
    margin: 0%;
    padding: 0px;
    border-left:1px #cccccc solid; 
    border-right:1px #cccccc solid;
    }
    #uwmlogo {float:right;}
    #bluefont {
    padding-right: 8px;
    color: #4582C6;
    font-weight: bold;
    }
    #banner {
    width:93%;
    margin:0px auto;
    padding: 0px;
    text-align:left;
    border-bottom: 1px #cccccc solid;
    border-right:1px #cccccc solid;
    }
    #banner b {
    }
    #leftmenu {
    padding:0px;
    float:left;
    width:20%;
    height: 100%;
    min-height:100%;
    }
    html>body #leftmenu {height:auto}
    #eventsbar {
    margin:0%;
    padding:0px;
    float:left;
    width:3.5%;
    height:100%;
    min-height:100%;
    border-left: 1px #cccccc solid;
    border-right: 1px #cccccc solid;
    }
    html>body #eventsbar {height:auto;border-bottom: 1px #cccccc solid;}
    #main {
    margin:0%;
    padding-top: 10px;
    float: left;
    width: 49%;
    height: 100%;
    min-height:100%;
    }
    html>body #main {height:auto}
    #icon {
    width:20%;
    margin:0%;
    padding:5px;
    float:left;
    }
    #desc {
    width: 80%;
    margin:0%;
    padding:5px;
    float:left;
    font-family:verdana;
    font-size: 10px;
    text-align:left;
    }
    #desc b {
    font-family:verdana;
    font-size: 14px;
    font-weight: normal;
    }
    #upcomingeventsbar {
    margin:0 20px 0 0;
    padding:0px;
    float:left;
    width:3.5%;
    height:100%;
    min-height:100%;
    border-left: 1px #cccccc solid;
    border-right: 1px #cccccc solid;
    }
    html>body #upcomingeventsbar{height:auto;border-bottom: 1px #cccccc solid}
    #currentevents {
    margin:0%;
    padding-top: 15px;
    font-family: verdana;
    font-size: 10px;
    text-align:left;
    height: 100%;
    min-height:100%;
    }
    html>body #currentevents {height:auto}
    #currentevents p {padding-left:10px}
    </style>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    	var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    	if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    	d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    </head>
    <body onLoad="MM_preloadImages('images/aboutus2.gif','images/membership2.gif','images/eventsprograms2.gif','images/contactus2.gif')">
    <!-- TOP HEADER -------------->
    <div id="topbar"> <span id="bluefont">IWA Login</span> Email: 
      <form>
    	<input type="text">
    	Password: 
    	<input type="text">
    	<input id="submit" type="submit" value="Login">
      </form>
      <img src="http://www.gaming-nation.net/test1/images/password.gif"> <img src="http://www.gaming-nation.net/test1/images/house.gif"> 
    </div>
    <!-- TOP BANNER BAR ---------------->
    <div id="banner"><b><img id="uwmlogo" src="http://www.gaming-nation.net/test1/images/uwmlogo.gif"></b> 
      <img id="world" src="http://www.gaming-nation.net/test1/images/world.gif"> <img src="http://www.gaming-nation.net/test1/images/logo.gif"> 
    </div>
    <div id="container"> 
      <!-- LEFT MENU ------------------------>
      <div id="leftmenu"> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('aboutus','','images/aboutus2.gif',1)"><img src="http://www.gaming-nation.net/test1/images/aboutus.gif" name="aboutus" width="161" height="26" border="0"></a> 
    	<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('membership','','images/membership2.gif',1)"><img src="http://www.gaming-nation.net/test1/i...membership.gif" name="membership" width="161" height="25" border="0"></a> 
    	<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('events','','images/eventsprograms2.gif',1)"><img src="http://www.gaming-nation.net/test1/i...tsprograms.gif" name="events" width="161" height="26" border="0"></a> 
    	<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contractus','','images/contactus2.gif',1)"><img src="http://www.gaming-nation.net/test1/images/contactus.gif" name="contractus" width="161" height="24" border="0"></a> 
      </div>
      <!-- EVENTS PROGRAMS BAR -------------->
      <div id="eventsbar"> <img src="http://www.gaming-nation.net/test1/images/events.gif"> 
      </div>
      <!-- MAIN COLUMN --------------------->
      <div id="main"> 
    	<div id="icon"> <img src="http://www.gaming-nation.net/test1/images/great.gif"> 
    	</div>
    	<div id="desc"> <b>Great Decisions</b><br />
    	  Great Decsions is a national program help in the fall </div>
    	<br />
    	<br />
    	<div id="icon"> <img src="http://www.gaming-nation.net/test1/images/kennan.gif"> 
    	</div>
    	<div id="desc"> <b>Kenna Forum</b><br />
    	  Kennan Forum is a nation program held in fall </div>
    	<br />
    	<br />
    	<div id="icon"> <img src="http://www.gaming-nation.net/test1/images/fallworld.gif"> 
    	</div>
    	<div id="desc"> <b>Fall World Series</b><br />
    	  Fall World Series is a nation program help in fall </div>
    	<br />
    	<br />
    	<div id="icon"> <img src="http://www.gaming-nation.net/test1/images/dialogue.gif"> 
    	</div>
    	<div id="desc"> <b>Dialogues with Diplomats</b><br />
    	  Dialogs with Diplomats is a nation program held in fall </div>
    	<br />
    	<br />
    	<div id="icon"> <img src="http://www.gaming-nation.net/test1/images/rapid.gif"> 
    	</div>
    	<div id="desc"> <b>Rapid Response</b><br />
    	  Rapid Response is a nation program held in fall </div>
    	<br />
    	<br />
    	<div id="icon"> <img src="http://www.gaming-nation.net/test1/images/corporate.gif"> 
    	</div>
    	<div id="desc"> <b>Kenna Forum</b><br />
    	  Corporate is a nation program held in fall </div>
    	<br />
    	<br />
    	<div id="icon"> <img src="http://www.gaming-nation.net/test1/images/special.gif"> 
    	</div>
    	<div id="desc"> <b>Special Programs</b><br />
    	  Special Programs is a nation program held in fall </div>
    	<br />
    	<br />
    	<div id="icon"> <img src="http://www.gaming-nation.net/test1/i...precollege.gif"> 
    	</div>
    	<div id="desc"> <b>Pre-College</b><br />
    	  Pre-College is a nation program held in fall </div>
    	<br />
    	<br />
    	<div id="icon"> <img src="http://www.gaming-nation.net/test1/images/radio.gif"> 
    	</div>
    	<div id="desc"> <b>Television & Radio</b><br />
    	  Televsion & Radio is a nation program held in fall </div>
      </div>
      <!-- UPCOMING EVENTS PROGRAMS BAR -------------->
      <div id="upcomingeventsbar"> <img src="http://www.gaming-nation.net/test1/i...mingevents.gif"> 
      </div>
      <!--  NEWS EVENTS --------------------------->
      <div id="currentevents"> 
    	<p> <img src="http://www.gaming-nation.net/test1/images/arrow.gif"> Kennan 
    	  Forum <br />
    	  April 22, 2004 <br />
    	  4:00-6:00<br />
    	  <a href="">Details</a> <br />
    	  <br />
    	  <img src="http://www.gaming-nation.net/test1/images/arrow.gif"> Corporate 
    	  <br />
    	  April 24, 2004 <br />
    	  4:00-5:00<br />
    	  <a href="">Details</a></p>
      </div>
    </div>
    </body>
    </html>
    Hope it helps.

    Paul

  3. #3
    SitePoint Wizard dethfire's Avatar
    Join Date
    Aug 2000
    Posts
    2,477
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It does help thanks! I know a little css, but there is still so much that puzzles me. ANyway, do you know why the desc div goes below the icon div? Both are set to float:left, doesn't that snap them side by side?

    Also I put a bg image in those two columns that won't go down 100% but it didn't help
    Free Science Homework Help
    http://www.physicsforums.com

  4. #4
    SitePoint Wizard dethfire's Avatar
    Join Date
    Aug 2000
    Posts
    2,477
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nm, I just made long images and put them in the div, so it's fixed set, also I made divs in between the icon/desc dives and set clear:both and that works
    Free Science Homework Help
    http://www.physicsforums.com

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Glad it helped a bit

  6. #6
    SitePoint Wizard dethfire's Avatar
    Join Date
    Aug 2000
    Posts
    2,477
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    bah, now it looks like complete crap in netscape 7. man this stinks, I love css, but it's just not reliable, or it takes a complete expert to get layouts to work in most browsers. this is for a university and i've been trying to promote css designs, but it looks like I'll have to go back to tables for this one
    Free Science Homework Help
    http://www.physicsforums.com


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
  •