SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist safeasfcuk's Avatar
    Join Date
    Jan 2006
    Location
    UK (SWANSEA)
    Posts
    517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    spot my errors!!

    hey guys im working on this layout for a new site this is my first full css layout and iv run into a few probs thought i was doing ok.

    the layout spot how many errors
    the style sheet is here


    i can see 3 errors

    1. the layout messes up in ie the left colum dosnt display in it correct place.

    2. the navagation menu for some reason in ie expands its width even thow i set it a width dont understand this one.

    3. the footer is supost to contain the text but dosnt for some reason.

    if any of you could help me out with my probs please.

    thank you

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) The left column looks fine in IE6.

    3) Remove the height from #footer and see what happens in Firefox.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Evangelist safeasfcuk's Avatar
    Join Date
    Jan 2006
    Location
    UK (SWANSEA)
    Posts
    517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    interesting looks to close in mac ie and ie 5 i think it is in work.

    dont have ie6 on my machine

    thank that fixed the firefox footer error.

    now for the ie prob with the nav menu. if you put your mouse on the nav menu and move it to the right then you will notice that you can still select the data from the right.

    what happening is the nav bar is expanding to the right in ie.

    any one have any ideas?

  4. #4
    SitePoint Member ghettopixel's Avatar
    Join Date
    Mar 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1.)

    (Corrected Version)

    Code:
    /* Mac hide\*/
    html, body {height:100%}
    /* end Mac hide */
    Hacks are bad sometimes, if you need an expanding type layout try using a background image or layers its easier to do cross-browser, cross-platform programming that way

    2.) the border at the top makes it look very unclean, I would add a margin or a border, the same follows for the top and the bottom border on the "center" content.

    3.)

    Code:
    #outer{
    	width:760px;
    	border:1px solid #000;
    	text-align:left;
    	margin:auto;
    	position:relative;
    	background-color:#FFFFFF;
    	position:relative;
    	
    	
    	
    	}
    	html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
    	
    /*#outer {
    width:760px;
    border:1px #000000 solid;
    }
    */
    Why are you relativly positioning the wrapper? you dont need to apply a position to horizontally center your layout, this can also make it so your layout go quirky, and could fix your footer issue that somone mentioned before, this can cause some floated elements to over float the main wrapper.








    Notes: There are alot of redudant mistakes to me, some things that shouldnt be there, you are absolutly positioning but I dont see any left, right, top, bottom positions, which is a complete waste of code mate, this type of layout isnt meant to be expanded across 100% height if you ask me because it would look alot cleaner without all that fancy stuff that just makes the code non-semantic, Im not trying to be mean just trying to help you creat cleaner source

  5. #5
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  6. #6
    SitePoint Evangelist safeasfcuk's Avatar
    Join Date
    Jan 2006
    Location
    UK (SWANSEA)
    Posts
    517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks m8 il try those out tomorow

  7. #7
    SitePoint Evangelist safeasfcuk's Avatar
    Join Date
    Jan 2006
    Location
    UK (SWANSEA)
    Posts
    517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry to be a pain what you said worked so far only pro now is im left with the nav bar being the wright size but the acual navagation bar header streching the page instead?


    any ideas?

  8. #8
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    100% high ?, for right / left border use a bgr image 1px x 1px on the wrapper

    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>12345 12345 12345 12345 12345</title>
    	<style type="text/css">
    	/* mac hide\*/
    	html, body {height:100%;}
    	/* end hide */
    	*{padding:0;margin:0;}
    	
    	body{
    	text-align:center;
    	min-width:760px;/* for mozilla*/
    	color: #000;
    	background:#CCCCCC;
    	}
    	
    	#outer{
    	width:760px;
    	border-left:1px solid #000;
    	border-right:1px solid #000;
    	text-align:left;
    	margin:0 auto;
    	background:#FFFFFF;
    	position:relative;
    	}
    	* html #outer{height:100%;}
    	head+body #outer{min-height:100%}
    	
    	#header {
    	border-top:1px solid #000;
    	border-bottom:1px solid #000;
    	height:125px;
    	background:#54A1D8;
    	}
    
    	#center {
    	padding-top:5px;
    	float:right;
    	width:575px;
    	background:#fff;
    	border-left:1px #54A1D8 solid;
    	}
    	#center p{padding:5px 5px 0 5px;}
    
    	#footer{
    	width:760px;
    	height:25px;
    	margin:-27px auto;
    	border:1px solid #000;
    	background:#54A1D8;
    	color:#000;
    	text-align:center;
    	position:relative;
    	}
    	
    	#clearfooter{width:100%;height:27px;clear:both;background:#ffffcc;}
    
    	* html #footer {/*only ie gets this style*/
    	\height:25px;/* for ie5 */
    	he\ight:25px;/* for ie6 */
    	}
    
    	#left {
    	display:inline;
    	float:left;
    	width:184px;
    	background:#fff;
    	}
    
    	.buttonscontainer {
    	border:1px solid #54A1D8;
    	margin:5px 5px 0 5px;
    	}
    
    	/* BUTTON LINK STYLES */
    	.buttons a {
    	color: #54A1D8; /* color of the text */
    	background-color: #FFF; /* color of the background (not hovered on) */
    	padding: 3px; /* padding */
    	display: block; /* display as a block */
    	font: 11px Arial, sans-serif; /* set the font as 11 point arial */
    	font-weight: bold; /* make the font bold */
    	text-decoration: none; /* no link styles */
    	text-align: left; /* align the text to the left */
    	}
    
    	/* When you hover the buttons... */
    	.buttons a:hover {
    	background-color: #54A1D8; /* Change the background color to this */
    	color: #fff; /* Set the font color */
    	text-decoration: none; /* No link styles */
    	}
    
    	.bar {
    	color: #fff; /* color of the text */
    	background-color: #54A1D8; /* color of the background (not hovered on) */
    	padding:10px 5px 5px 3px; /* padding */
    
    
    	display: block; /* display as a block */
    	font: 11px Arial, sans-serif; /* set the font as 11 point arial */
    	font-weight: bold; /* make the font bold */
    	text-decoration: none; /* no link styles */
    	text-align: center;
    	}
    
    	.blankbox {
    	color: #54A1D8; /* color of the text */
    	background-color: #FFF; /* color of the background (not hovered on) */
    	padding: 40px; /* padding */
    	display: block;
    	}
    	</style>
    </head>
    
    <body>
    <div id="outer">
    
    <div id="header"></div>
    
    <div id="center">
    <p>dsfjlksjdflksjdfljsdlfjsdlfjsdlfjsdlkfjsdlkfjsldkjfsldkjfsdjflsjdfljsdlkfjsd</p>
    <p>dsfjlksjdflksjdfljsdlfjsdlfjsdlfjsdlkfjsdlkfjsldkjfsldkjfsdjflsjdfljsdlkfjsd</p><p>dsfjlksjdflksjdfljsdlfjsdlfjsdlfjsdlkfjsdlkfjsldkjfsldkjfsdjflsjdfljsdlkfjsd</p><p>dsfjlksjdflksjdfljsdlfjsdlfjsdlfjsdlkfjsdlkfjsldkjfsldkjfsdjflsjdfljsdlkfjsd</p><p>dsfjlksjdflksjdfljsdlfjsdlfjsdlfjsdlkfjsdlkfjsldkjfsldkjfsdjflsjdfljsdlkfjsd</p><p>dsfjlksjdflksjdfljsdlfjsdlfjsdlfjsdlkfjsdlkfjsldkjfsldkjfsdjflsjdfljsdlkfjsd</p><p>dsfjlksjdflksjdfljsdlfjsdlfjsdlfjsdlkfjsdlkfjsldkjfsldkjfsdjflsjdfljsdlkfjsd</p><p>dsfjlksjdflksjdfljsdlfjsdlfjsdlfjsdlkfjsdlkfjsldkjfsldkjfsdjflsjdfljsdlkfjsd</p><p>dsfjlksjdflksjdfljsdlfjsdlfjsdlfjsdlkfjsdlkfjsldkjfsldkjfsdjflsjdfljsdlkfjsd</p><p>dsfjlksjdflksjdfljsdlfjsdlfjsdlfjsdlkfjsdlkfjsldkjfsldkjfsdjflsjdfljsdlkfjsd</p><p>dsfjlksjdflksjdfljsdlfjsdlfjsdlfjsdlkfjsdlkfjsldkjfsldkjfsdjflsjdfljsdlkfjsd</p><p>dsfjlksjdflksjdfljsdlfjsdlfjsdlfjsdlkfjsdlkfjsldkjfsldkjfsdjflsjdfljsdlkfjsd</p><p>dsfjlksjdflksjdfljsdlfjsdlfjsdlfjsdlkfjsdlkfjsldkjfsldkjfsdjflsjdfljsdlkfjsd</p><p>dsfjlksjdflksjdfljsdlfjsdlfjsdlfjsdlkfjsdlkfjsldkjfsldkjfsdjflsjdfljsdlkfjsd</p><p>dsfjlksjdflksjdfljsdlfjsdlfjsdlfjsdlkfjsdlkfjsldkjfsldkjfsdjflsjdfljsdlkfjsd</p><p>dsfjlksjdflksjdfljsdlfjsdlfjsdlfjsdlkfjsdlkfjsldkjfsldkjfsdjflsjdfljsdlkfjsd</p><p>dsfjlksjdflksjdfljsdlfjsdlfjsdlfjsdlkfjsdlkfjsldkjfsldkjfsdjflsjdfljsdlkfjsd</p><p>dsfjlksjdflksjdfljsdlfjsdlfjsdlfjsdlkfjsdlkfjsldkjfsldkjfsdjflsjdfljsdlkfjsd</p>
     
    </div>
    
    <div id="left">
    
    <div class="buttonscontainer">
    <div class="bar"><b> Navagation</b></div>
    <div class="buttons">
    <a href="##">Home</a>
    <a href="##">Tutorials</a>
    <a href="##">Templates</a>
    <a href="##">Buy Tutorials</a>
    <a href="##">Contact Us</a></div>
    </div>
    
    <div class="buttonscontainer">
    <div class="bar">Latest Tutorials </div>
    <div class="blankbox"></div>
    </div>
    
    
    </div>
    <div id="clearfooter"></div>
    <!--  -->
    
    
    </div>
    <div id="footer"><p>footer - test </p>
    </div>
    </body>
    </html>


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
  •