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 14 of 14

Thread: CSS Body help?

  1. #1
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    CSS Body help?

    Heya guys,

    new to the site here, although have visited a few times to help me solve a through problems before without asking!

    But now I'm stumped! I can't get my site to display properly in I.E, got it displaying fine in FF, been trying to play with the CSS for ages with no avail and would really appreciate any help at all before I lost all my hair!

    The site in question is www.scottspod.com/index2.html, and all source is readily available for you to view!

    Any help will be immensely appreciated at this stage! Thanks,

    Perkins
    Last edited by Perkins08; 02-28-2008 at 07:06 PM.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    What version of IE? Also you are using an XHTML1.1 doctype. If you don't know how to pass the correct application/xhtml+xml mimetype then I suggest going down to XHTML1.0 strict. I know its what Dreamweaver made for you, its okay.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    The best thing to do also is make your header, the image on top, a seperate div. Then the content will be under it no matter what and it wont be hidden.

  • Users who have thanked jcdevelopment for this post:

    Perkins08 (02-28-2008)

  • #4
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I.E does not handle XHTML 1.1 yet, put FF does, so instead I just kept the handle as .html put mimetype as xhtml, no problems anywhere and passed validation fine.

    I.E 7, I can attach a screen shot if you like but if you view the site in I.E. you should see the main content div overlap the top logo, which is the body.

    Thanks,
    Perkins

  • #5
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Righto, I've managed to pretty much sort it out now! Thanks jcdevelopment!

    Just another quickie, the logo is now hovering way above the next div below it and I can't for the life of my figure out why it's doing this!

    I've set margin and padding to 0 on the new header div I'm using.

    Thanks,
    Perkins

  • #6
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    something is missing here!!

    Code:
    header
    {
       margin: 0 auto;
       padding: 0;
       position: absolute;
    }
    havnt guessed yet.... "#" add that so its a div then mess with it!!

    good luck

  • #7
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Whoops! Slapped my wrist for that one!

    Ok I've set it up but still got a gap I'm trying to figure out how to close, tried defining the padding with no luck too.

    Thanks again!

    Perkins

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Just changing the meta tag content type doesn't do anything. Your page is still being sent as text/html. Thats why the validator gives you a warning. You need a server side language in order to pass the correct headers. You have a top padding on your navigation. Just noticed this
    Code:
    <!<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    Last edited by _Aerospace_Eng_; 02-28-2008 at 07:49 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Yeah, sorry that was me, did a bit of research and noticed xhtml 1.1 required a module I don't have, so it wouldn't actually work properly anyway.

    Dropped it to 1.0 because I have no need for 1.1 at the moment, thanks for the heads up!

    - Perkins

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    This fixes your page almost
    Code:
    ul#navigation {
    margin:0;
    padding:0;
    overflow:hidden;
    }
    div#main-content {
    margin-top:0;
    }
    .clear {
    clear:both;
    font-size:0;
    line-height:0;
    }
    Because you floated the links on your navigation you need to clear the floats.

    Code:
    <ul id="navigation">
    	<li><a href="http://www.scottspod.com/index2.html" title="Home"><span>Home</span></a></li>
    	<li><a href="http://www.scottspod.com/services.html" title="Services"><span>Services</span></a></li>
    	<li><a href="http://www.scottspod.com/about-me.html" title="About Me"><span>About me</span></a></li>
    	<li><a href="http://www.scottspod.com/resources.html" title="Resources"><span>Resources</span></a></li>
    	<li><a href="http://www.scottspod.com/contact-me.html" title="Contact me"><span>Contact me</span></a></li>
    </ul>
    <div class="clear">&nbsp;</div>
    You may want to look into an image replacement technique for your header.

    Also now your content will be shorter than your sidebar. You can fix this by using the http://alistapart.com/articles/fauxcolumns/ method.

    I've gone ahead and implemented the faux columns method with your layout. I added a containing div around your sidebar and main content column.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <base href="http://www.scottspod.com/" />
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    <title>ScottsPod</title>
    <style type="text/css">
    ul#navigation {
    margin:0;
    padding:0;
    overflow:hidden;
    }
    div#main-content {
    margin-top:0;
    }
    #container {
    background:#FFF url(images/bg.png) repeat-y;
    clear:both;
    }
    p.w3c {
    clear:both;
    }
    .clear {
    clear:both;
    font-size:0;
    line-height:0;
    }
    </style>
    </head>
    <body>
    <div id="header"><img src="images/logo3.png" alt="ScottsPod.com" /></div>
    <ul id="navigation">
    	<li><a href="http://www.scottspod.com/index2.html" title="Home"><span>Home</span></a></li>
    	<li><a href="http://www.scottspod.com/services.html" title="Services"><span>Services</span></a></li>
    	<li><a href="http://www.scottspod.com/about-me.html" title="About Me"><span>About me</span></a></li>
    	<li><a href="http://www.scottspod.com/resources.html" title="Resources"><span>Resources</span></a></li>
    	<li><a href="http://www.scottspod.com/contact-me.html" title="Contact me"><span>Contact me</span></a></li>
    </ul>
    <div id="container">
    	<div id="side-col">
    		<ul id="services">
    			<li id="computer-upgrades"><a href="computer-upgrades.html" title="Computer Upgrades">Computer Upgrades</a><br />
    				Time for an upgrade?</li>
    			<li id="comp-errors"><a href="computer-errors.html" title="Computer Errors">Computer Errors</a><br />
    				Need computer first aid?</li>
    			<li id="home-network"><a href="home-networking.html" title="Home Networking">Home Networking</a><br />
    				Network your home!</li>
    			<li id="pc-maintenance"><a href="pc-maintenance.html" title="PC Maintenance">PC Maintenance</a><br />
    				Full PC Diagnostic &amp; Security!</li>
    		</ul>
    		<p> <a href="http://www.scottspod.com/services.html">and more...</a> </p>
    		<h3>Charlie Giffen says...</h3>
    		<p> <i>&quot;Thanks for restoring my PC back to its full use, and for explaining everything you had done! I can finally use it for what I intended.&quot;</i> </p>
    		<p id="quote-link"> <a href="testimonials.html">Read More...</a> </p>
    	</div>
    	<div id="main-content">
    		<div id="welcome">
    			<h3>Welcome</h3>
    			<p> to my site, ScottsPod.com!<br />
    				<br />
    				I'm not going to lie to you, this site is for me, to reach you, to sell myself. I am a 20yr old student living in the UK, and this site is my hub. I freelance in computer repairs and upgrades, home network setup, and small network setup, I also offer an extensive wealth of knowledge for general computer help. <a href="about-me.html">Interested? Click here</a>.<br />
    				<br />
    				<strong>Please note that my site is still under construction, and as a result errors can be expected.</strong> </p>
    		</div>
    		<h3>ScottsPod turns from nothing into a something</h3>
    		<h4>January 25th, 2008</h4>
    		<p> The sites up, finally! Today I open the doors to my site! My Point-of-sale! Here I hope many of you will acquire my services, and refer me to your friends and family! For now this site will act as my beacon, and I hope you find it aesthetically pleasing and easy to navigate! Thank you for visiting! </p>
    		<p id="footer"> Copyright &copy; 2007 Scott Perkins - Best Viewed in <a href="http://www.getfirefox.com">Mozilla Firefox</a> </p>
    	</div>
    	<div class="clear">&nbsp;</div>
    </div>
    <p class="w3c"> <a href="http://validator.w3.org/check?uri=referer"><img
            src="http://www.scottspod.com/images/w3c_xhtml11.gif"
            alt="Valid HTML 4.01 Strict" height="15" width="80" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:80px;height:15px"
           src="http://www.scottspod.com/images/css_valid.gif" 
           alt="Valid CSS!" /></a> </p>
    </body>
    </html>
    You also needed to clear your floats but I took care of this. Its suggested to use the method found here http://positioniseverything.net/easyclearing.html however this method doesn't work in IE7.
    Last edited by _Aerospace_Eng_; 02-28-2008 at 08:01 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #11
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you so much for all your help! I think I have it working perfect now, the only slight issue is weird, when resizing in IE the logo moves, but when you put your cursor over a link it moves back into it's correct location.

    Weird, I'll live with this I think though! Thanks so much for everyones help, legends!

    Perkins

  • #12
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    As I said before you should be using an image replacement technique on your header since that logo is presentation. Unless you plan on linking the logo then you should replace
    Code:
    <div id="header"><img src="images/logo3.png" alt="ScottsPod.com" /></div>
    with
    Code:
    <h1 id="header">ScottsPod.com</h1>
    and use this for the CSS
    Code:
    #header {
    height:74px;
    text-indent:-999em;
    background:url(images/logo3.png) no-repeat;
    }
    Hmm I'll look into the bug.
    Last edited by _Aerospace_Eng_; 02-28-2008 at 08:34 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #13
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Fantastic help, really appreciate it! I'll stick around and see if I can help people out in the php forum!

    Site displays perfectly in FF, IE, and Opera! Really appreciate everyone's help!

    Thanks again,
    Perkins

  • #14
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try this for your code
    Code:
    <div id="container">
    	<h1 id="header">ScottsPod.com</h1>
    	<ul id="navigation">
    		<li><a href="http://www.scottspod.com/index2.html" title="Home"><span>Home</span></a></li>
    		<li><a href="http://www.scottspod.com/services.html" title="Services"><span>Services</span></a></li>
    		<li><a href="http://www.scottspod.com/about-me.html" title="About Me"><span>About me</span></a></li>
    		<li><a href="http://www.scottspod.com/resources.html" title="Resources"><span>Resources</span></a></li>
    		<li><a href="http://www.scottspod.com/contact-me.html" title="Contact me"><span>Contact me</span></a></li>
    	</ul>
    	<div id="main">
    		<div id="side-col">
    			<ul id="services">
    				<li id="computer-upgrades"><a href="computer-upgrades.html" title="Computer Upgrades">Computer Upgrades</a><br />
    					Time for an upgrade?</li>
    				<li id="comp-errors"><a href="computer-errors.html" title="Computer Errors">Computer Errors</a><br />
    					Need computer first aid?</li>
    				<li id="home-network"><a href="home-networking.html" title="Home Networking">Home Networking</a><br />
    					Network your home!</li>
    				<li id="pc-maintenance"><a href="pc-maintenance.html" title="PC Maintenance">PC Maintenance</a><br />
    					Full PC Diagnostic &amp; Security!</li>
    			</ul>
    			<p> <a href="http://www.scottspod.com/services.html">and more...</a> </p>
    			<h3>Charlie Giffen says...</h3>
    			<p> <i>&quot;Thanks for restoring my PC back to its full use, and for explaining everything you had done! I can finally use it for what I intended.&quot;</i> </p>
    			<p id="quote-link"> <a href="testimonials.html">Read More...</a> </p>
    		</div>
    		<div id="main-content">
    			<div id="welcome">
    				<h3>Welcome</h3>
    				<p> to my site, ScottsPod.com!<br />
    					<br />
    					I'm not going to lie to you, this site is for me, to reach you, to sell myself. I am a 20yr old student living in the UK, and this site is my hub. I freelance in computer repairs and upgrades, home network setup, and small network setup, I also offer an extensive wealth of knowledge for general computer help. <a href="about-me.html">Interested? Click here</a>.<br />
    					<br />
    					<strong>Please note that my site is still under construction, and as a result errors can be expected.</strong> </p>
    			</div>
    			<h3>ScottsPod turns from nothing into a something</h3>
    			<h4>January 25th, 2008</h4>
    			<p> The sites up, finally! Today I open the doors to my site! My Point-of-sale! Here I hope many of you will acquire my services, and refer me to your friends and family! For now this site will act as my beacon, and I hope you find it aesthetically pleasing and easy to navigate! Thank you for visiting! </p>
    			<p id="footer"> Copyright &copy; 2007 Scott Perkins - Best Viewed in <a href="http://www.getfirefox.com">Mozilla Firefox</a> </p>
    		</div>
    		<div class="clear">&nbsp;</div>
    	</div>
    </div>
    <p class="w3c"> <a href="http://validator.w3.org/check?uri=referer"><img
            src="http://www.scottspod.com/images/w3c_xhtml11.gif"
            alt="Valid HTML 4.01 Strict" height="15" width="80" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:80px;height:15px"
           src="http://www.scottspod.com/images/css_valid.gif" 
           alt="Valid CSS!" /></a> </p>
    I've added a #container div. and replaced the previous container div with a div with id="main".

    Get rid of the width on the body in your CSS as well as the background image on #container. Use the following CSS for #container, #main, and #header
    Code:
    #container {
    width:840px;
    margin:auto;
    background:none;
    }
    #main {
    background:#FFF url(images/bg.png) repeat-y;
    clear:both;
    }
    #header {
    height:74px;
    text-indent:-999em;
    background:url(images/logo3.png) no-repeat;
    }
    We do have a "Thank User for this helpful post" button btw...
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    Perkins08 (02-28-2008)


  •  

    Posting Permissions

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