www.webdeveloper.com
Results 1 to 15 of 15

Thread: Alignment Issues - All Browsers

  1. #1
    Join Date
    May 2007
    Posts
    25

    Alignment Issues - All Browsers

    Hey, this has probably been covered in many, many other topics, I've read a few but as I'm new to CSS web layouts they're not making much sense to me (that and the topic is usually slightly different from what I'm having problems with.

    I have a block layout, I found, very easily, how to put this in the middle of the page, but when I tested it on IE 6 and 7 it was back on the left. I don't use the browser, I use Firefox, and it looks just fine in there.

    Can anyone help me out with fixing this problem?

    Code:
    body {
    	background-color:rgb(175,245,182);
    	padding:0;
    	margin:0;
    }
    
    #container {
    	width:762px;
    	height:100%;
    	margin-left: auto;
    	margin-right: auto;
    	background-color:rgb(255,255,255);
    	border-left:1px solid rgb(0,0,0);
    	border-right:1px solid rgb(0,0,0);
    }
    
    .banner {
    	background-image: url(/cppcc/inc/banner.jpg);
    	width:740px;
    	height:124px;
    }
    
    #logo {
    	width: 740px;
    	height: 116px;
    	margin: 0;
    	padding: 0;
    }
    
    #logo h1 {
    	float: left;
    	margin: 0;
    	padding: 0;
    }
    
    #logo h2 {
    	float: right;
    	margin: 0px 10px 0px 0px;
    	padding-top: 95px;
    	font-size: 12px;
    	color: rgb(0,0,0);
    }
    
    #logo a.ltop, a.ltop:active, a.ltop:visited {
    	text-decoration: none;
    	color:rgb(0,0,0);
    	outline: none;
    }
    
    #logo a.ltop:hover {
    	background-color:rgb(64,103,24);
    	color:rgb(255,255,255);
    	outline: none;
    }
    
    .nav {
    	font-family: "Franklin Gothic Medium";
    	padding-bottom:6px;
    	font-size:15px;
    	height:35px;
    	text-align: center;
    }
    
    .nav ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    
    .nav li {
    	display: inline;
    }
    
    .nav a.block, a.block:active, a.block:visited {
    	display: block;
    	float: left;
    	width: 123px;
    	height: 20px;
    	padding: 10px 0 10px 0;
    	text-align: center;
    	text-transform: lowercase;
    	text-decoration: none;
    	color:rgb(0,0,0);
    	outline: none;
    }
    
    .nav a.block:hover {
    	background-color:rgb(64,103,24);
    	color:rgb(255,255,255);
    	outline: none;
    }
    
    #main {
    	padding:5px 10px 5px 10px;
    	font-family: Georgia;
    	text-align: justify;
    	color: rgb(70,70,70);
    }
    
    #main a, a:active, a:visited {
    	color:rgb(0,100,0);
    	outline: none;
    }
    
    #main a:hover {
    	background-color:rgb(0,100,0);
    	color:rgb(255,255,255);
    	outline: none;
    }
    
    .header {
    	background-color:rgb(0,150,195);
    	font-family:verdana;
    	font-size:17px;
    	color:rgb(255,255,255);
    	padding:5px;
    	letter-spacing:5px;
    	text-transform: uppercase;
    }
    
    .space {
    	padding-top:5px;
    }

  2. #2
    Join Date
    Mar 2007
    Location
    Orlando
    Posts
    670
    You will have to post the markup where you are using these styles.

  3. #3
    Join Date
    May 2007
    Posts
    25
    The markup is:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    <title>CPPCC: Campbell Park Parish Community Choir</title>
    <link rel="STYLESHEET" type="text/css" href="/cppcc/inc/page.css">
    </head>
    <body>
    
    <div id="container">
    <div id="main">
    
    
    <div id="logo">
    	<h1><img src="/cppcc/inc/logo.jpg" width="523" height="116" alt=""></h1>
    	<h2><a href="" class="ltop">Home</a> | <a href="" class="ltop">Contact Us</a></h2>
    </div>
    
    <div class="banner"></div>
    <div class="nav">
    <ul>
    	<li><a href="" class="block">our history</a>
    	<li><a href="" class="block">latest news</a>
    	<li><a href="" class="block">how to join us</a>
    	<li><a href="" class="block">how to book us</a>
    	<li><a href="" class="block">photo gallery</a>
    	<li><a href="" class="block">our sponsors</a>
    </ul>
    </div>
    <div class="space"></div>
    
    <div class="header">Welcome...</div>
    text
    
    </div>
    </div>
    
    </body>
    </html>

  4. #4
    Join Date
    Mar 2007
    Location
    Orlando
    Posts
    670
    Try changing your body style to this:
    Code:
    body {
    	background-color:rgb(175,245,182);
    	padding:0;
    	margin:0;
    	text-align:center;
    }

  5. #5
    Join Date
    May 2007
    Posts
    25
    Wow, that was strangely simple. Thank you!

  6. #6
    Join Date
    May 2005
    Posts
    2,040
    Your doctype is incomplete, though, and you will never get IE to pretend to act like a modern browser without one. Use this one:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

  7. #7
    Join Date
    May 2007
    Posts
    25
    With that line changed, it doesn't do the height: 100%; anymore (on any browser), which I would really like to keep.

    While I'm here, can I have some help with Columns?
    I want to split the main page into 2, a column down the right for snippets of info and images etc, and the main detail on the left. I did this:

    Code:
    #colOne {
    	float: left;
    	width: 380px;
    	padding: 20px 23px 0 0;
    }
    
    #colTwo {
    	float: right;
    	width: 180px;
    	padding: 20px 23px 0 0;
    }
    but the columns mess up a footer I have (using the code below). These are the only changes (other than those that have helped solve some problems) that have changed.

    Code:
    #footer {
    	width: 762px;
    	margin-left: auto;
    	margin-right: auto;
    	background-color: rgb(255,255,255);
    	border-left: 1px solid rgb(0,0,0);
    	border-right: 1px solid rgb(0,0,0);
    }
    
    #footer .box {
    	display: block;
    	padding: 5px 10px 5px 10px;
    	width: 740px;
    	height: 45px;
    	text-decoration: none;
    	font-family: Georgia;
    	text-align: center;
    	color: rgb(70,70,70);
    	font-size: 11px;
    }

  8. #8
    Join Date
    Mar 2007
    Location
    Orlando
    Posts
    670
    in your footer add the following

    clear:both;

  9. #9
    Join Date
    May 2007
    Posts
    25
    Quote Originally Posted by jasonahoule
    in your footer add the following

    clear:both;
    That almost worked perfectly. It sorted out the footer problem, but the main white background (container) doesn't go all the way down with the columns. Any ideas?

  10. #10
    Join Date
    Mar 2007
    Location
    Orlando
    Posts
    670
    Yeah, the height:100% does not work. You can try setting min-height to a pixel value but IE will ignore it. I have used Javascript to detect window height and do a ton of calculations to get the correct height. If anyone else has a CSS suggestion to this I would like to know also.

  11. #11
    Join Date
    May 2007
    Posts
    25
    I don't get along with javascript very well, I know how to do a few basic things but that's about it

  12. #12
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Quote Originally Posted by jasonahoule
    Yeah, the height:100% does not work. You can try setting min-height to a pixel value but IE will ignore it. I have used Javascript to detect window height and do a ton of calculations to get the correct height. If anyone else has a CSS suggestion to this I would like to know also.
    You need to set the parent elements to 100% first, in your CSS:

    html, body {height:100%;}

    then, and child element (a "#wrapper", for instance, or "#container") is set to "height:100%;", will BE "100% the height of the parent" instead of "100% the height of your viewscreen"...

    Yeah, -we're dealing with an IE-weakness.

    And, a valid !doctype always, including a URL, to get :
    #container {
    width:762px;
    height:100%;
    margin-left: auto;
    margin-right: auto;

    background-color:rgb(255,255,255);
    border-left:1px solid rgb(0,0,0);
    border-right:1px solid rgb(0,0,0);
    }
    to work properly. While "text-align:center;" on "body" and "text-align:left;" on '#content' works for centering content, this is how browsers (prior to and including generation 4) worked.
    It's easier to 'center' the container with auto left-right margins, and let the text be the default 'left aligned'.

  13. #13
    Join Date
    May 2007
    Posts
    25
    I did that change to the css and corrected the doctype, but I'm still getting a gap along the bottom of pages with a fair amount of text on it. I've attached a screen captures for you to see.
    Attached Images Attached Images

  14. #14
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Quote Originally Posted by Heimedall
    I did that change to the css and corrected the doctype, but I'm still getting a gap along the bottom of pages with a fair amount of text on it. I've attached a screen captures for you to see.
    html, body {margin:0; padding:0;}

    Removes default margin/padding from html, body

  15. #15
    Join Date
    May 2007
    Posts
    25
    Still didn't work, just so you know, I'm posting a fresh set of my CSS and Markup. I still get the gap in my content box.

    CSS:
    Code:
    /* ################################################## */
    /* ##################### LAYOUT ##################### */
    /* ################################################## */
    html, body {
    	height:100%;
    	background-color: rgb(175,245,182);
    	padding: 0;
    	margin: 0;
    	text-align: center;
    }
    
    #container {
    	width: 762px;
    	height: 100%;
    	margin-left: auto;
    	margin-right: auto;
    	background-color: rgb(255,255,255);
    	border-left: 1px solid rgb(0,0,0);
    	border-right: 1px solid rgb(0,0,0);
    }
    
    #banner {
    	background-image: url(/cppcc/inc/banner.jpg);
    	width: 740px;
    	height: 124px;
    }
    
    #logo {
    	width: 740px;
    	height: 116px;
    	margin: 0;
    	padding: 0;
    }
    
    #logo h1 {
    	float: left;
    	margin: 0;
    	padding: 0;
    }
    
    #logo h2 {
    	float: right;
    	margin: 0px 10px 0px 0px;
    	padding-top: 95px;
    	font-size: 12px;
    	color: rgb(0,0,0);
    }
    
    #logo a.ltop, a.ltop:active, a.ltop:visited {
    	text-decoration: none;
    	color: rgb(0,0,0);
    	outline: none;
    }
    
    #logo a.ltop:hover {
    	background-color: rgb(64,103,24);
    	color: rgb(255,255,255);
    	outline: none;
    }
    
    
    
    /* ######################################################### */
    /* ##################### NAVIGATION ON ##################### */
    /* ######################################################### */
    .nav {
    	font-family: "Franklin Gothic Medium";
    	padding-bottom: 6px;
    	font-size: 15px;
    	height: 35px;
    	text-align: center;
    }
    
    .nav ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    
    .nav li {
    	display: inline;
    }
    
    .nav a.block, a.block:active, a.block:visited {
    	display: block;
    	float: left;
    	width: 123px;
    	height: 20px;
    	padding: 10px 0 10px 0;
    	text-align: center;
    	text-transform: lowercase;
    	text-decoration: none;
    	color: rgb(0,0,0);
    	outline: none;
    }
    
    .nav a.block:hover {
    	background-color: rgb(64,103,24);
    	color: rgb(255,255,255);
    	outline: none;
    }
    
    
    
    /* ##################################################### */
    /* ##################### MAIN TEXT ##################### */
    /* ##################################################### */
    #main {
    	padding: 0 10px 5px 10px;
    	font-family: Georgia;
    	text-align: justify;
    }
    
    #main a, a:active, a:visited {
    	color: rgb(64,103,24);
    	text-decoration: none;
    	outline: none;
    }
    
    #main a:hover {
    	background-color: rgb(64,103,24);
    	text-decoration: none;
    	color: rgb(255,255,255);
    	outline: none;
    }
    
    .header {
    	background-color: rgb(0,150,195);
    	font-family: verdana;
    	font-size: 17px;
    	color: rgb(255,255,255);
    	padding: 5px;
    	letter-spacing: 5px;
    	text-transform: uppercase;
    }
    
    .space {
    	padding-top: 5px;
    }
    
    #footer {
    	width: 762px;
    	margin-left: auto;
    	margin-right: auto;
    	background-color: rgb(255,255,255);
    	border-left: 1px solid rgb(0,0,0);
    	border-right: 1px solid rgb(0,0,0);
    	clear: both;
    }
    
    #footer .box {
    	display: block;
    	padding: 5px 10px 5px 10px;
    	width: 740px;
    	height: 75px;
    	text-decoration: none;
    	font-family: Georgia;
    	text-align: center;
    	color: rgb(70,70,70);
    	font-size: 11px;
    }
    
    
    
    /* ################################################# */
    /* ##################### COLMS ##################### */
    /* ################################################# */
    #colOne {
    	float: left;
    	width: 550px;
    	padding: 0 0 0 0;
    }
    
    #colTwo {
    	float: right;
    	width: 160px;
    	padding: 0 0 0 0;
    }
    
    
    
    /* ################################################# */
    /* ##################### FORMS ##################### */
    /* ################################################# */
    input {
    	font-family: Georgia;
    	font-size: 10px;
    }

    Markup:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    <head>
    <title>CPPCC: Campbell Park Parish Community Choir</title>
    <link rel="STYLESHEET" type="text/css" href="/cppcc/inc/page.css">
    </head>
    <body>
    
    <div id="container">
    <div id="main">
    
    
    <div id="logo">
    	<h1><img src="/cppcc/inc/logo.jpg" width="523" height="116" alt=""></h1>
    	<h2><a href="/cppcc/" class="ltop">Home</a> | <a href="/cppcc/contact.asp" class="ltop">Contact Us</a></h2>
    </div>
    
    
    <div id="banner"></div>
    <div class="nav">
    <ul>
    	<li><a href="/cppcc/history.asp" class="block">our history</a>
    	<li><a href="/cppcc/news.asp" class="block">latest news</a>
    	<li><a href="/cppcc/joinus.asp" class="block">how to join us</a>
    	<li><a href="/cppcc/bookus.asp" class="block">how to book us</a>
    	<li><a href="/cppcc/gallery.asp" class="block">photo gallery</a>
    	<li><a href="/cppcc/sponsors.asp" class="block">our sponsors</a>
    </ul>
    </div>
    <div class="space"></div>
    
    
    <div id="colOne">
    
    
    <div class="header">our history</div>
    We are a Community Choir that was originally formed to perform at the Milton Keynes 40th Anniversary Gala Concert. Members of the Choir are mainly from Campbell Park Parish.<br><br>
    
    Many of the members enjoyed the project so much that we, as a group, wanted to continue. We not only benefited from the chance to work with professional musicians on a project that allowed us to discover a talent for producing music, but we also enjoyed the camaraderie and social interaction with people from different age groups and backgrounds with whom we would not have otherwise come together with a common bond.<br><br>
    
    In August 2007, we elected a Committee and drafted our Constitution. We are currently seeking a music director and hope to resume rehearsals early in 2008.<br><br>
    
    We currently have 25 members, but once we are fully established, we would like to welcome new members to share the enjoyment and supportiveness of the group. Making music is very therapeutic and our aim is to extend the opportunity to any member of the Community who wishes to participate.
    
    
    </div>
    
    <div id="colTwo">
    <div class="header">Venue</div>
    Address here
    <br><br>
    <div class="header">Gallery</div>
    A few random images here, they will update on their own on every refresh and will appear on every page.
    </div>
    
    
    </div>
    </div>
    
    
    <div id="footer">
    <div class="box">
    <br><br>&copy; Copyright 2007 <strong>Campbell Park Parish Community Choir (CPPCC)</strong>. All Rights Reserved.<br>
    <strong><a href="/cppcc/constitution.asp">Our Constitution</a> | <a href="/cppcc/child.asp">Child Protection</a> | <a href="/cppcc/equal.asp">Equal Opportunities</a></strong><br>
    Designed and maintained by <a href="">a<b>muse</b>ingWRITERS</a>.
    </div>
    </div>
    
    
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles