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 8 of 8
  1. #1
    New Coder
    Join Date
    Jan 2009
    Location
    Florida
    Posts
    12
    Thanks
    3
    Thanked 0 Times in 0 Posts

    IE is causing many issues!

    http://up2go.co.uk/v3/?p=home

    This is far as I could get "IE friendly", I'm really having trouble with it. In IE six it doesn't place the logo, in IE7 it places the logo but hides the navigation. In IE6 the clear float for the news bar creates an extra pixel or two of white space just popping out.

    http://up2go.co.uk/image/200902211235211757ff3.PNG
    Here it is in FF3

    http://up2go.co.uk/image/200902211235211786ie6.PNG
    IE6

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    I don't have FF where I am right now so I can't cross-browser check it, but try this:

    Code:
    * {margin:0;padding:0;}
    
    body {
    	background-color: #C1C1C1;
    	padding: 50;
    	text-align: center;
    	font-size: 13px;
    	font-family: Verdana, Helvetica, sans-serif;
    	color: #8E8E8E;
    }
    #container {
    	width: 656px;
    	margin:0 auto;
    	text-align: left;
    	padding: 50px 0px 0px 0px;
    }
    /* expanding content boxes */
    #header {
    	background: url(http://up2go.co.uk/v3/images/header.gif) no-repeat bottom left;
    	height: 53px;
    }
    #contentmid {
    margin-top:40px;
    	background: url(http://up2go.co.uk/v3/images/contentmid.gif);
    	width: 656px;
    	padding: 5;
    }
    #footerbot {
    	background: url(http://up2go.co.uk/v3/images/footerbot.gif);
    	height: 62px;
    	width: 656px;
    	font-size:0;
    }
    #uploadt {
    	font-size:0;
    	background: url(http://up2go.co.uk/v3/images/uploadt.gif);
    	height: 5px;
    	width: 378px;
    }
    #uploadm {
    	background: url(http://up2go.co.uk/v3/images/uploadm.gif);
    	width: 378px;
    	padding: 5;
    }
    #uploadb {
    	background: url(http://up2go.co.uk/v3/images/uploadb.gif);
    	height: 6px;
    	width: 378px;
    	font-size:0;
    }
    /* navgiation */
    #navbar2 {
    background: url(http://up2go.co.uk/v3/images/contentmid.gif);
    margin-top:1px;
    padding-bottom:10px;
    	height: 30px;
    	width: 100%;
    }
    #navbar2 ul {
    	text-align: right;
    	font-weight: bold; 
    	margin: 5px;
    	padding: 20px;
    	font-family: Verdana, Helvetica, sans-serif;
    	font-size: small;
    	color: #CCC;
    	white-space: nowrap;
    }
    #navbar2 li {
    	list-style-type: none;
    	display: inline;
    }
    #navbar2 li a {
    	text-decoration: none;
    	padding: 0px 5px;
    	color: #8E8E8E;
    	font-size: 12px;
    }
    /* style **** */
    .content {
    	padding: 20px;
    	width: 610x;
    }
    #topbar {
    	font-size:0;
    	background: url(http://up2go.co.uk/v3/images/topbar.png) no-repeat bottom left;
    	height: 7px;
    	width: 620px;
    }
    #middlebar {
    	background: url(http://up2go.co.uk/v3/images/middlebar.png);
    	width: 620px;
    	padding: 5;
    }
    #bottombar {
    	background: url(http://up2go.co.uk/v3/images/bottombar.png);
    	height: 6px;
    	width: 620px;
    	font-size:0;
    }
    #infobar {
    	float: left;
    	padding: 0px 0px 20px 0px;
    	width: 600px;
    	text-align: center;
    }
    #footerl {
    	text-align: center; 
    	font-weight: bold; 
    	padding: 20px 20px 20px 20px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: small;
    	color: #666666;
    	white-space: nowrap;
    	font-size: 11px;
    }
    #logo {
    	float: left;
    	margin-left: 20px;
    	margin-top: 10px;
    	white-space: nowrap;
    }
    /* side bar */
    #sidebox {
    	float: left;
    	width: 170px;
    	padding: 10;
    }
    a:link { 
    	color: #CCC; text-decoration: none;
    }
    a:visited { 
    	color: #CCC; text-decoration: none;
    }
    a:active { 
    	color: #666; text-decoration: none;
    }
    a:hover { 
    	color: #000; text-decoration: underline;
    }
    .floatstop {
    	clear:both;
    } 
    .selectbox {
    	font-family: Arial, Helvetica, sans-serif;
    	line-height: normal;
    	padding: 4px;
    	width: 100%;
    }
    .textarea {
        font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	letter-spacing: 0pt;
    	line-height: normal;
    	padding: 4px;
    	width: 97%;
    }
    .text {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	letter-spacing: 0pt;
    	line-height: normal;
    	padding: 4px;
    	width: 92%;
    }
    #right {
    	float:right;
    	width:300px;
    	padding: 0px 0px 0px 0px;
    }
    #left {
    	float:left;
    	width:200px;
    }
    #left h2, #main h3, #main p {
    	padding:10 10px;
    }
    If that makes FF go crazy you could take the red bits from above and create a separate IE css file (add with a conditional statement) to take care of IE7 at least. This bit I added in blue (at the very top) is optional but it's a nice way to get your browsers to all start from common ground as much as possible.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    New Coder
    Join Date
    Jan 2009
    Location
    Florida
    Posts
    12
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I tried your edits and they ended up messing everything up in every browser.

    I done some more work and came out with this

    http://up2go.co.uk/image/200902221235247187ie666.PNG
    IE6 (almost there..)

    http://up2go.co.uk/image/20090222123...ie7working.PNG
    IE7 (works fine)

    http://up2go.co.uk/image/200902221235247267ffup2go.PNG
    FF3 (works fine)

  • #4
    New Coder
    Join Date
    Jan 2009
    Location
    Florida
    Posts
    12
    Thanks
    3
    Thanked 0 Times in 0 Posts
    bump

  • #5
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Oh, I didn't realize that the menu items were supposed to be inside the grey bubble heading... That probably didn't help much then!

    I don't have IE6 available here either so I can't help you debug that at all. Sorry!
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #6
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    Try this code:
    CSS:
    Code:
    * {
    	margin:0;
    	padding:0;
    }
    body {
    	background-color: #C1C1C1;
    	padding: 50px;
    	text-align: center;
    	font-size: 13px;
    	font-family: Verdana, Helvetica, sans-serif;
    	color: #8E8E8E;
    }
    #container {
    	width: 656px;
    	margin:0 auto;
    	text-align: left;
    	padding: 0px 0px 0px 0px;
    }
    /* expanding content boxes */
    #header {
    	background: url(header.gif) no-repeat bottom left;
    	height: 53px;
    }
    #contentmid {
    	background: url(contentmid.gif);
    	width: 100%;
    }
    #footerbot {
    	background: url(footerbot.gif);
    	height: 62px;
    	width: 100%;
    	font-size:0;
    }
    #uploadt {
    	font-size:0;
    	background: url(uploadt.gif);
    	height: 5px;
    	width: 378px;
    }
    #uploadm {
    	background: url(uploadm.gif);
    	width: 378px;
    	padding: 5px;
    }
    #uploadb {
    	background: url(uploadb.gif);
    	height: 6px;
    	width: 378px;
    	font-size:0;
    }
    /* navgiation */
    #navbar2 {
    	margin-left: 0px;
    	margin-top: 0px;
    	float: right;
    	display:inline;
    }
    #navbar2 ul {
    	float: left;
    	text-align: right;
    	font-weight: bold;
    	margin: 5px;
    	padding: 20px;
    	font-family: Verdana, Helvetica, sans-serif;
    	font-size: small;
    	color: #CCC;
    	white-space: nowrap;
    }
    #navbar2 li {
    	list-style-type: none;
    	display: inline;
    }
    #navbar2 li a {
    	text-decoration: none;
    	padding: 0px 5px;
    	color: #8E8E8E;
    	font-size: 12px;
    }
    /* style **** */
    .content {
    	margin-left: 20px;
    }
    #topbar {
    	font-size:0;
    	background: url(topbar.png) no-repeat bottom left;
    	height: 7px;
    	width: 620px;
    	padding-top:5px;
    }
    #middlebar {
    	background: url(middlebar.png);
    	width: 620px;
    	height: 10px;
    	padding-top: 5px;
    	padding-bottom: 5px;
    }
    #bottombar {
    	background: url(bottombar.png);
    	height: 6px;
    	width: 620px;
    	font-size:0;
    }
    #infobar {
    	float: left;
    	padding: 0px 0px 20px 0px;
    	width: 600px;
    	text-align: center;
    }
    #footerl {
    	text-align: center;
    	font-weight: bold;
    	padding: 20px 20px 20px 20px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: small;
    	color: #666666;
    	white-space: nowrap;
    	font-size: 11px;
    }
    #logo {
    	margin:12px 0px 0px 10px;
    	float: left;
    	display:inline;
    }
    /* side bar */
    #sidebox {
    	float: left;
    	width: 170px;
    	padding: 10px;
    }
    a:link {
    	color: #CCC;
    	text-decoration: none;
    }
    a:visited {
    	color: #CCC;
    	text-decoration: none;
    }
    a:active {
    	color: #666;
    	text-decoration: none;
    }
    a:hover {
    	color: #000;
    	text-decoration: underline;
    }
    .floatstop {
    	clear:both;
    }
    .selectbox {
    	font-family: Arial, Helvetica, sans-serif;
    	line-height: normal;
    	padding: 4px;
    	width: 100%;
    }
    .textarea {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	letter-spacing: 0pt;
    	line-height: normal;
    	padding: 4px;
    	width: 97%;
    }
    .text {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	letter-spacing: 0pt;
    	line-height: normal;
    	padding: 4px;
    	width: 92%;
    }
    #right {
    	float:right;
    	width:300px;
    	padding: 0px 0px 0px 0px;
    }
    #left {
    	float:left;
    	width:200px;
    }
    #left h2, #main h3, #main p {
    	padding:10px 10px;
    }
    .submit {
    	background: #DBDBDB none repeat scroll 0% 50%;
    	border-color: #BBBBBB;
    	border-style: solid;
    	border-width: 2px 1px 1px;
    	color: #8a8a8a;
    	font-family: "Trebuchet MS";
    	font-size: 15px;
    	font-style: normal;
    	font-variant: normal;
    	font-weight: bolder;
    	letter-spacing: 0pt;
    	line-height: normal;
    	padding: 4px;
    	width: 98%;
    }
    .textarea {
    	border-style: solid;
    	border-width: 2px 1px 1px;
    	color: #999999;
    	font-style: normal;
    	font-variant: normal;
    	letter-spacing: 0pt;
    	line-height: normal;
    	padding: 4px;
    	width: 98%;
    }
    Edit: Oops! You'll have to put back your correct paths to the images.
    Last edited by Fisher; 02-23-2009 at 03:42 PM.

  • Users who have thanked Fisher for this post:

    WillyR (02-23-2009)

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Hi WillyR,

    Do you need your navigation inside those white space(below header)? If, you can easily move that markup into div#contentmid.
    Or do you need to align your navigation along with your logo inside header?

    PS: beware of the Box model bug, while applying a fixed width/height and margin/padding to your elements
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    New Coder
    Join Date
    Jan 2009
    Location
    Florida
    Posts
    12
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Fisher View Post
    Try this code:
    CSS:
    Code:
    * {
    	margin:0;
    	padding:0;
    }
    body {
    	background-color: #C1C1C1;
    	padding: 50px;
    	text-align: center;
    	font-size: 13px;
    	font-family: Verdana, Helvetica, sans-serif;
    	color: #8E8E8E;
    }
    #container {
    	width: 656px;
    	margin:0 auto;
    	text-align: left;
    	padding: 0px 0px 0px 0px;
    }
    /* expanding content boxes */
    #header {
    	background: url(header.gif) no-repeat bottom left;
    	height: 53px;
    }
    #contentmid {
    	background: url(contentmid.gif);
    	width: 100%;
    }
    #footerbot {
    	background: url(footerbot.gif);
    	height: 62px;
    	width: 100%;
    	font-size:0;
    }
    #uploadt {
    	font-size:0;
    	background: url(uploadt.gif);
    	height: 5px;
    	width: 378px;
    }
    #uploadm {
    	background: url(uploadm.gif);
    	width: 378px;
    	padding: 5px;
    }
    #uploadb {
    	background: url(uploadb.gif);
    	height: 6px;
    	width: 378px;
    	font-size:0;
    }
    /* navgiation */
    #navbar2 {
    	margin-left: 0px;
    	margin-top: 0px;
    	float: right;
    	display:inline;
    }
    #navbar2 ul {
    	float: left;
    	text-align: right;
    	font-weight: bold;
    	margin: 5px;
    	padding: 20px;
    	font-family: Verdana, Helvetica, sans-serif;
    	font-size: small;
    	color: #CCC;
    	white-space: nowrap;
    }
    #navbar2 li {
    	list-style-type: none;
    	display: inline;
    }
    #navbar2 li a {
    	text-decoration: none;
    	padding: 0px 5px;
    	color: #8E8E8E;
    	font-size: 12px;
    }
    /* style **** */
    .content {
    	margin-left: 20px;
    }
    #topbar {
    	font-size:0;
    	background: url(topbar.png) no-repeat bottom left;
    	height: 7px;
    	width: 620px;
    	padding-top:5px;
    }
    #middlebar {
    	background: url(middlebar.png);
    	width: 620px;
    	height: 10px;
    	padding-top: 5px;
    	padding-bottom: 5px;
    }
    #bottombar {
    	background: url(bottombar.png);
    	height: 6px;
    	width: 620px;
    	font-size:0;
    }
    #infobar {
    	float: left;
    	padding: 0px 0px 20px 0px;
    	width: 600px;
    	text-align: center;
    }
    #footerl {
    	text-align: center;
    	font-weight: bold;
    	padding: 20px 20px 20px 20px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: small;
    	color: #666666;
    	white-space: nowrap;
    	font-size: 11px;
    }
    #logo {
    	margin:12px 0px 0px 10px;
    	float: left;
    	display:inline;
    }
    /* side bar */
    #sidebox {
    	float: left;
    	width: 170px;
    	padding: 10px;
    }
    a:link {
    	color: #CCC;
    	text-decoration: none;
    }
    a:visited {
    	color: #CCC;
    	text-decoration: none;
    }
    a:active {
    	color: #666;
    	text-decoration: none;
    }
    a:hover {
    	color: #000;
    	text-decoration: underline;
    }
    .floatstop {
    	clear:both;
    }
    .selectbox {
    	font-family: Arial, Helvetica, sans-serif;
    	line-height: normal;
    	padding: 4px;
    	width: 100%;
    }
    .textarea {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	letter-spacing: 0pt;
    	line-height: normal;
    	padding: 4px;
    	width: 97%;
    }
    .text {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	letter-spacing: 0pt;
    	line-height: normal;
    	padding: 4px;
    	width: 92%;
    }
    #right {
    	float:right;
    	width:300px;
    	padding: 0px 0px 0px 0px;
    }
    #left {
    	float:left;
    	width:200px;
    }
    #left h2, #main h3, #main p {
    	padding:10px 10px;
    }
    .submit {
    	background: #DBDBDB none repeat scroll 0% 50%;
    	border-color: #BBBBBB;
    	border-style: solid;
    	border-width: 2px 1px 1px;
    	color: #8a8a8a;
    	font-family: "Trebuchet MS";
    	font-size: 15px;
    	font-style: normal;
    	font-variant: normal;
    	font-weight: bolder;
    	letter-spacing: 0pt;
    	line-height: normal;
    	padding: 4px;
    	width: 98%;
    }
    .textarea {
    	border-style: solid;
    	border-width: 2px 1px 1px;
    	color: #999999;
    	font-style: normal;
    	font-variant: normal;
    	letter-spacing: 0pt;
    	line-height: normal;
    	padding: 4px;
    	width: 98%;
    }
    Edit: Oops! You'll have to put back your correct paths to the images.
    Thanks!, your edits worked a treat

    I ended up doing some edits so it still styles the content fine.

    .content {
    padding: 15px;
    width: 620px;
    margin: 0 auto;
    overflow: hidden;
    }
    Last edited by WillyR; 02-23-2009 at 08:04 PM.


  •  

    Posting Permissions

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