Weird one i cant figure out???

ace2109

ace2109

ace2109

Associate
Joined
28 Dec 2002
Posts
2,400
Location
Northern Ireland
Hi guys,
if you could would you go to www.pcsupergeeks.co.uk

Have a look at the main page and notice the text on the left hand side, he way it is nice and close like normal writing.

Now

Go to the Home Services section and look at the text in the middle of the screen, it is all double line spacing and i cant figure out why.

I have styled the sheet with css and the two content areas are the same apart from the position, am i missing something here?????

css script:

Main screen css
div.contentareaentrance {
position:absolute;
width: 420px;
height: 200px;
left: 17px;
top: 100px;
font:11px;
text-align:justify;
}

Home Services css
div.contentarea_homeservices {
position:absolute;
width: 500px;
height: 50px;
left: 250px;
top : -420px;
font-size:13px;
color: #FFFFFF;
text-align:justify;
}
 
Main screen html

<html>
<head>
<title>PC Super Geeks - Computer Repair, Networking, Security </title>
<meta name="verify-v1" content="MEOJrTTBls8TLt13BaMlZp5jJCivWFueaE8jCr5krvo=" />
<link rel="stylesheet"href="./main.css"type="text/css" />
<style type= "text/css" title="styleid" media="all"
<!--
-->
</style>
</head>

<body>
<div id="container">

<div class="imageholder1"><img src="images/desktoppc.jpg" alt="Desktop PC" /></div></div>
<div class="imageholder3"><img src="images/entranceholder.jpg" alt="Desktop PC" /></div></div>

<div class="navigation">
<p><font color="#FF3300">Where do you want to go</font></p>
<span class="style1">|</span> <a class="navigation" href="./homeservices.html">Home Services</a> <br />
<span class="style1">|</span> <a class="navigation" href="./businessservices.html">Business Services</a> <br />
<span class="style1">|</span> <a class="navigation" href="./futureproofing.html">Future Proofing</a> <br />
<span class="style1">|</span> <a class="navigation" href="./cableinstallation.html">Cable Installation</a> <br />
<span class="style1">|</span> <a class="navigation" href="./jargonbuster.html">Jargon Buster</a> <br />
<span class="style1">|</span> <a class="navigation" href="./Downloads.html">Downloads</a> <br />
<span class="style1">|</span> <a class="navigation" href="./contact.html">Contact Us</a> <br />
<span class="style1">|</span> <a class="navigation" href="./about.html">About Us</a> </div>


<div class="contentareaentrance">
<p><span class="style4"><b>Welcome to PC Super Geeks</b></span></p>
<p>PC Super Geeks is a newly established company that endeavour's to help you with all your PC problems, in home or at the office.</p>
<p>Many people don't know where to turn when they are having trouble and thats where we come in, we visit you in your home or office and fix problems onsite and we will even show you what we are doing to help you gain a better understanding of your PC.</p>
<p>All our Super Geeks have extensive experience in fixing problems and we pride ourselves in providing a fast proffessional service, you will always know the price upfront to stop any nasty suprises.</p>
<br>
<p><font color="#FF3300"><LI type="disc"><b>No fix, No fee, Guarantee</b></font></p>
<p><font color="#FF3300"><LI type="disc"><b>No Callout fee</b></font></p>
<p><font color="#ff3300"><b>Our website is currently undergoing construction so there maybe some broken links or empty pages, please keep checking back.</b></font></p>

</div>
<style type="text/css">
.style4 {
font-size: 24px;
color: #FF6600;
}

</style>


</body>
</html>
 
Home Services html

<html>
<head>
<title>PC Super Geeks - Home Services</title>
<link rel="stylesheet"href="./main.css"type="text/css" />
<style type= "text/css" title="styleid" media="all"
<!--
-->
</style>
</head>

<body>
<div id="container">

<div class="imageholder2"><img src="images/background.jpg" alt="Background" /></div></div>

<div class="navigation2">
<a class="navigation" href="./index.html">Home</a> <br />

<div class="contentareacopyright">
<p><font color="#999999">Copyright 2007 PC Super Geeks <a href="mailto:[email protected]">Site Administrator</a> </p></font>
</div>

<div class="contentarea_sidemenu">
<p><font color="#FF3300">Where do you want to go</font></p>
<span class="style1"></span> <a class="navigation" href="./Home Services/Service and Repair.html">Service & Repair</a> <br />
<span class="style1"></span> <a class="navigation" href="./Home Services/System Upgrades.html">Upgrades</a> <br />
<span class="style1"></span> <a class="navigation" href="./Home Services/Internet setup.html">Internet Setup</a> <br />
<span class="style1"></span> <a class="navigation" href="./Home Services/Home Networking.html">Home Networking</a> <br />
<span class="style1"></span> <a class="navigation" href="./Home Services/Training.html">Training</a> <br />
<span class="style1"></span> <a class="navigation" href="./Home Services/PC Security.html">PC Security</a> <br />
<span class="style1"></span> <a class="navigation" href="./Home Services/Virus Protection.html">Virus Protection</a> <br />
</div>

<div class="contentarea_homeservices">
<p><font color="#000000"><b>Welcome to PC Super Geeks</b></font></p>
<p><font color="#000000">Here at PC Super Geeks we want to help you in anyway we can, whether you want to install a new component, install a home network or even install a new piece of software, we are here to help.</font></p>
</body>
</html>
 
probably it's the in your CSS
Code: 
div.navigation2{
	position:absolute;
	width:200px;
	height:50px;
	left:20px;
	top:490px;
	font-weight:bold;
	z-index:5;
	
line-height:30px;
	font-family:Calibri;
	font-size:15px;
	font-weight18:45 12/08/2007;
}


the line-height is doing that.i'm pretty sure
 
I agree. Just removed the lineheight rule using the Web Developer plugin for FF and it made the text look normal :)
 
Hi guys,
first off sorry for posting all the code.

I took away the line spacing but it still doesnt work right have alook at it now, it looks as if the 2 content areas which are completly different are acting the same for some reason??

I want the side menu with the hyperlinks to be double line spacing but i want single line spacing for the text?

cant understand this at all.

ace
 
First of all dude, sort this out:

Code: 
<link rel="stylesheet"href="./main.css"type="text/css" />
<style type= "text/css" title="styleid" media="all"
<!--
-->
</style>

you're missing a > after media="all" and you have a /> but you're not specifying what type of HTML you're using. Validate your site at w3c.org (HTML validator, CSS validator) and iron out any problems it gives you, first.

Once you've sorted those problems out, then have a look at the other problems you have.

Also, the problem would be very obvious if you indented your HTML properly. I can see the problem. You're missing bits of HTML...

The validator would tell you that you've missed bits ;)

The moral of the story: Always indent AND always validate!

It's a complete chore at first, but very helpful later.

Code: 
<html><head>
<title>Blah
</title>
<body>
<div class="wrapper"><div class="header">this is the header of the website<img src="headerimg.jpg">
</div><div class="body">
    this is the body
    text<img src="blah.gif">
    <div class="footer">
contact us | copyright info </div>
</div></body>
</html>

Messy. Ugly. Broken. Horrible.

But tidying it up makes the problem obvious:

Code: 
<html><head>
<title>Blah
</title>
<body>
<div class="wrapper">
    <div class="header">
        this is the header of the website
        <img src="headerimg.jpg">
    </div>
    <div class="body">
        this is the body text
        <img src="blah.gif">
    <div class="footer">
        contact us | copyright info
    </div>
</div>
</body>
</html>

See now I know where one DIV opens and one DIV ends, and because of the indenting I can see what's inside what div. I can quite clearly see that I forgot to close (</div>) the body div.

Tidy your code up - theres multiple problems which would be made easy to spot if you A) indented/tidied your code, and B) validated your code :)

Sorry I'm not giving you a direct answer! But I just think that you need to figure it out for yourself or you'll get these kind of problems again. I'm just pointing you in the right direction ;)
 
You must log in or register to reply here.
Back
Top Bottom