PDA

View Full Version : Broken Lines, Missing Borders in IE and MF



Jordan Beckett
Feb 29th, 2008, 01:47 AM
Hey all,
I'm new to the forums... but looking forward to all that I can learn and share here! So, thanks for having me! :thumbsup:

I'm working on www.builder4u.com and having trouble. I want there to be no break between the header (comprised of 3 images) and the navigation bars (154px wide). Also, I have a border-top (gray) above the bottom navigational links, but it doesn't show up in Mozilla Firefox.

Files being used in reference:

index.htm
mainstyles.css
images/*

:( I'm stumped, and keep going around in circles. I scratch and rewrite the divs, and the CSS... all to no avail! Could I get a fresh set of eyes looking at this stuff with me? THANKS SOOO MUCH!


Ciao,
Jordan Beckett
[email protected]

jcdevelopment
Feb 29th, 2008, 03:47 AM
the first thing to do is add a doctype, all files need them!! doctypes (http://www.w3schools.com/tags/tag_doctype.asp)!

second im not sure i know what u are talking about with the links, i think they are as close as they can get, but see if this is what u meant



#pageEndlinks{
margin: 0 auto;;
padding: 0px;
border-top: 2px solid #EFEDED;
width: 796px;
float:left;
clear:both;}


also add this



* {
margin:0px;
padding:0px;
}


let me know about it!!

rangana
Feb 29th, 2008, 04:51 AM
Apparently, there are no margins already as set in your pageHeader and pageNav divs.

Jordan Beckett
Mar 1st, 2008, 04:16 AM
Hey thanks for the help! Okay, here're some better details:

My idea for the site is this: header logos (3 images) above the nav. links with the lightning bolts (5 linked images). Notice how there are circles coming from the logo? The circle continues into the image of the first link. (This had previously broken up... a small gap, between logo and the first Nav link... when viewed in IE). Next, I want the content of each page in the pageContent div. At the BOTTOM of the page, about 15px up from the bottom of the browser window, or the end of the page, respectively... here...it's just easier to show you.


*5 minutes later* Okay, I'm tired of working with Dreamweaver and Photoshop, so here's my MS Paint design mockup. Kinda get it?
http://www.jbandcompany.com/design.JPG

So I fixed the gap between the header and the Nav images, but still having trouble getting the pageEndlinks and pageCopyright to show up. I think they're hiding beneath the pageCell?

So on both of those, imagine that pageCell extends the vertical length of the window browser, or to the end of the pageContent portion... which ever is longer. Then 15px after that I want the endlinks, and then about 10px below that I want the copyright. Why are they hiding?

Thanks, y'all!

Jordan Beckett

Jordan Beckett
Mar 1st, 2008, 04:48 AM
Okay, a new problem arises when I declare the DOC type. C'mon guys... we're supposed to be FIXing problems, not making new ones! ;-) JK

Anyway, look at the difference here:
http://www.builder4u.com/index.htm
http://www.builder4u.com/doclessindex.htm

The nav buttons (in Firefox) spread out when I declare the document type. IE they stay the same whether I do or don't. I hope all of this is getting me closer to having a bulletproof website that will work in any broswer?

abduraooft
Mar 1st, 2008, 08:15 AM
The DOCTYPE is essential for a webpage, if you'd like to get the same look and feel in all browsers. After putting a DOCTYPE, you have to fix all errors in your markup (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.builder4u.com%2Findex.htm&charset=%28detect+automatically%29&doctype=Inline&group=0)

rangana
Mar 1st, 2008, 08:30 AM
Not showing??..I don't think so..
Yes its showing...apparently in the wrong place!.
Try changing your pageEndLinks and pageCopyright divs to:


#pageEndlinks{
margin:0;
padding: 15px 0px 10px 154px;
border-top: 2px solid #EFEDED;
width: 700px;
clear:both;
}

#pageCopyright{
margin: 0px 0px 0px 0px;
padding: 30px 0px 0px 0px;
width: 700px;
clear:both;
}


...and place pageEndLinks and pageCopyrightLinks in the pageContent div

Change the <div id="pageContent"....> part of your page to:


<div id="pageContent">
<h2><font face="Geneva,Arial,Veranda,Helvetica,sans-serif" size="3" color="#FF0000">Are you looking for the best custom home builders in the Willamette Valley? Call Steve or Linda Today! </font><font face="Geneva,Arial,Veranda,Helvetica,sans-serif" size="3"><span class="style4"><font face="Geneva,Arial,Veranda,Helvetica,sans-serif" size="3">&quot;We are the builder 4 u!&quot;<span class="textblack"></span></font></span></font></h2><font face="Geneva,Arial,Veranda,Helvetica,sans-serif" size="-1"><img src="images/signsPlace.jpg">For over 21 years Oregon homeowners have chosen Steven W. Johnson Construction, Inc. to build the custom home of their dreams. We build one-of-a-kind, comfortable showcases that cater to your distinctive needs and lifestyle. Steven W. Johnson Construction, Inc. offers unlimited possibilities, with our finished products going above and beyond your expectations. Specializing in hands-on craftsmanship to ensure that your home is uniquely yours, we incorporate mat erials from all over the country and world. <br>
<br>&ldquo;With any design or ideas you can think of&hellip; and some you can&rsquo;t&hellip; we can build it for you.&rdquo; Please call us today!</font><BR>
<!--ENDS pageContent-->
<div id="pageEndlinks" align="center"><font size="1">[ <a href="about.htm" class="hblack">About Us</a> ] [ <a href="general_contracting.htm" class="hblack">General Contracting</a> ] [ <a href="current_projects.htm" class="hblack">Current Projects</a> ] [ <a href="picture_gallery.htm" class="hblack">Picture Gallery</a> ] [ <a href="client_testimonials.htm" class="hblack">Client Testimonials</a> ] <!-- [ <a href="contact.htm" class="hblack">Contact Form</a> ] --></font>
</div><!--ENDS pageEndlinks-->

<div id="pageCopyright" align="right" ><font size="1" color="#C0C0C0" face="Geneva,Arial,Veranda,Helvetica,sans-serif">Copyright &copy; 2008 by Steven W. Johnson Construction, Inc.&nbsp; All Rights Reserved.</font>
</div><!--ENDS pageCopyright-->
</div>
</div><!--ENDS pageCell-->

</body>

</html>


In the markup errors...those are easy to fix. Remember that <font> is a deprecated HTML element. You can use CSS's font-family, font-size, font-weight property to fill in your heart's desire.

See if it helps :D

Jordan Beckett
Mar 2nd, 2008, 06:28 AM
Okay, you guys are brilliant! Now a new problem!

it's now hosted here:

http://www.jbandcompany.com/builder4u.com/

Everything else is looking good, but 2 new questions.

1. Why now do the NAV links spread out in Firefox?
2. Is there a way for me to get the copyright info 15px from the bottom of the browswer window OR 15px from the end of the page (after the end links) ... whichever comes LAST?


Thanks for all your help so far! I'm learning a ton! Why exactly did that clear thing work?


Ciao,
Jordan Beckett

abduraooft
Mar 2nd, 2008, 02:17 PM
Validate your code and fix the errors using http://validator.w3.org

rangana
Mar 3rd, 2008, 12:39 PM
Okay, you guys are brilliant! Now a new problem!

it's now hosted here:

http://www.jbandcompany.com/builder4u.com/

Everything else is looking good, but 2 new questions.

1. Why now do the NAV links spread out in Firefox?
2. Is there a way for me to get the copyright info 15px from the bottom of the browswer window OR 15px from the end of the page (after the end links) ... whichever comes LAST?


Thanks for all your help so far! I'm learning a ton! Why exactly did that clear thing work?


Ciao,
Jordan Beckett

It work not only because of the clear property but also of the correct placement of your divs.