...

View Full Version : CSS Body help?



Perkins08
02-28-2008, 08:04 PM
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

_Aerospace_Eng_
02-28-2008, 08:13 PM
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.

jcdevelopment
02-28-2008, 08:14 PM
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.

Perkins08
02-28-2008, 08:16 PM
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

Perkins08
02-28-2008, 08:29 PM
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

jcdevelopment
02-28-2008, 08:35 PM
something is missing here!!



header
{
margin: 0 auto;
padding: 0;
position: absolute;
}


havnt guessed yet.... "#" add that so its a div then mess with it!!

good luck

Perkins08
02-28-2008, 08:41 PM
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

_Aerospace_Eng_
02-28-2008, 08:43 PM
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

<!<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Perkins08
02-28-2008, 08:52 PM
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

_Aerospace_Eng_
02-28-2008, 08:54 PM
This fixes your page almost

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.


<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.


<!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.

Perkins08
02-28-2008, 09:13 PM
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

_Aerospace_Eng_
02-28-2008, 09:25 PM
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

<div id="header"><img src="images/logo3.png" alt="ScottsPod.com" /></div>
with

<h1 id="header">ScottsPod.com</h1>
and use this for the CSS

#header {
height:74px;
text-indent:-999em;
background:url(images/logo3.png) no-repeat;
}

Hmm I'll look into the bug.

Perkins08
02-28-2008, 10:12 PM
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

_Aerospace_Eng_
02-28-2008, 10:25 PM
Try this for your 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

#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...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum