PDA

View Full Version : Quick 2 problems that need solved



The_Return
Mar 16th, 2009, 10:06 PM
I'm coding this site and have 2 problems...

1.) The way I did the navigation was valid a couple days ago but now is not and if I make it <ul> then it screws everything up.

2.) the title text for the bottom content is perfect on firefox but on internet explore its stays at the top and if I move it then it moves down on firefox I'm stumped on why theirs a difference

Site: http://www.securewebdesigns.net/stcroix/

Thanks

The_Return
Mar 17th, 2009, 09:43 PM
*Bump*

Daf
Mar 17th, 2009, 11:33 PM
Maybe I can help.

The list items (<li>) will never be right - valid- without either ul or ol. You say adding the ul tags screws it up - do you mean that it makes each item drop below the other? If so you might try adding

display: inline

to the ul styles. I haven't tried this but that should allow the list items to remain in a horizontal row.

Not sure about the titles without tearing into it a bit more, hopefully someone else will be able to pitch in there. Do those divs have a height value?

Keep hammering at it! Good luck!:thumbsup:

effpeetee
Mar 17th, 2009, 11:44 PM
You do have a few html errors. here (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.securewebdesigns.net%2Fstcroix%2F&charset=%28detect+automatically%29&doctype=Inline&group=0)

Frank

bazz
Mar 17th, 2009, 11:51 PM
maybe you have it fixed because I can see little wrong in ff ~ just the fact that you have a horizontal scrollbar at 1024x768.

IE 6 is horrendous. horiz scrollbar as well but also, the image for the logo, the packet and the tag line are all with a grey/white background. didn't look but maybe they are png's which I think ie has problems with.

bazz

ps. you didn't ask for a review but anyway, I think it is a very professional design - clean in a coffee emporium sort of way and it reminds me of coffee with mint chocolate. MMmmmmmmm.

Excavator
Mar 18th, 2009, 01:36 AM
This may help your menu/header:
CSS -

.logo {
width:137px;
height:138px;
float: left;
margin-left:123px;
margin-top:7px;
}
markup -
<div id="wrapper">
<div id="topborder">
<div id="navagation-wrapper">
<img src="images/logo.png" alt="" class="logo" height="138" width="137" />

<ul id="nav">
<li id="home"><a href="index.html"><span>Home</span></a></li>
<li id="products"><a href="products.html"><span>Products</span></a></li>
<li id="about"><a href="about.html"><span>About</span></a></li>
<li id="contact"><a href="contact.html"><span>Contact</span></a></li>
</ul>
</div>
</div>

Excavator
Mar 18th, 2009, 01:46 AM
2.) the title text for the bottom content is perfect on firefox but on internet explore its stays at the top and if I move it then it moves down on firefox I'm stumped on why theirs a difference


Different browsers have different default margin/padding. You need to zero those out so you can specify your own. Put this at the top of your CSS -
* {
margin: 0;
padding: 0;
border: none;
}
After adding that you will have to specifically add any padding margin to anything that lost it.
For the titles of your #main-content and #footer-content you should use h tags. That's what they're for - http://www.w3schools.com/TAGS/tag_hn.asp
Like this -
<div id="divider3"></div>
<div id="fbox3">
<h3 class="fbox-title">Vestibulum tincidunt</h3>
<p class="fbox-font">Proin volutpat lacus in purus. Phasellus faucibus diam fermentum lorem. </p>
<p class="fbox-font">Nulla at enim vitae leo dapibus ornare. Suspendisse sapien tellus, tincidunt ac.</p>
<div class="morebutton"><a href="more.html"></a></div>
</div>
<div id="divider4"></div>
</div>
<div id="copyright-wrapper">
<div class="copyright">Copyright of St. Croix Coffee and Tea Company 2009</div>
</div>
</div>
</div>

The_Return
Mar 18th, 2009, 10:44 PM
Thanks everyone works great now :)