Aligning menu - Here is my page: HTML Code: <!DOCTYPE html PUBLIC "-// W3C //DTD XHTML 1.0 Transitional//EN" " http ://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <title>

trixiemay · 10th February 2010, 09:17 PM

Here is my page:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Carina Snow - Bridal Couture</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="carinasnow.css" rel="stylesheet" type="text/css">

</head>
<body bgcolor="#FFFFFF">
<div id="wrapper">
<div id="top"></div><br />
<div id="header"></div>
<div id="nav-menu">
<ul>
        <li><a href="index.html" alt="Homepage">Home</a></li>
        <li><a href="accessories.html">Accessories</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="testimonials.html">Portfolio</a></li>
        <li><a href="testimonials.html">Testimonials</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="links.html">Links</a></li>
  </ul>
</div>
<div class="maincontent" id="container">
<img src="http://webprocafe.com/images/homepage1.jpg" alt="services" width="245" height="425" border="0" align="left" /><span class="drop">C</span>orina Snow Bridal Couture for the past&nbsp;6 years have been designing and making &ldquo;Exquisite&rdquo;&nbsp;Bridal Gowns&nbsp;here in New Zealand's sunny Bay of Plenty .   With over 29 years experience in the fashion industry and 17 years specialising in bridal,&nbsp;Corina Snow has gathered the wealth of knowledge required for designing original gowns, uniquely created for you and your big day.   Corina is not just restricted to weddings based here in the beautiful Bay of Plenty or&nbsp; New Zealand as a whole. On the contrary over the past few years Corina&rsquo;s horizons have broadened designing for clients who have married overseas including Canada, Ireland, England, Pacific Islands, Australia, Japan and Switzerland.<br />
        &nbsp;<br />
        &quot;The skills and knowledge earned over that period allows me to create a Gown that not only suits your physical attributes but uses the chosen Fabric to complement the overall design.&rdquo;<br />
        &nbsp;<br />
      Corina&rsquo;s vast experience in design, coupled with the clients unique ideas, pictures, inspirations and the theme of the wedding, has allowed Corina to create the perfect look for countless Brides.
<br />

</div>
</div>
<div id="footer">©2010 Corina Snow . Design by <a href="http://www.iconadvertising.co.nz" class="copyright">Icon</a> . Powered by <a href="http://www.fullflavour.co.nz" target="_blank" class="copyright">Full Flavour</a></div>

</body>
</html>

//and the css//

Code:

@charset "UTF-8";
/* CSS Document */

* {
    background-color:#FFF;
    text-align: center;
}
#wrapper {
    height: 800px;
    width: 800px;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-image: url(images/borderwhite.png);
}
#header {
    height: 84px;
    width: 715px;
    margin: 0 auto;
    background-image: url(images/header.png);
    background-repeat: no-repeat;
}
#top {
    height: 65px;
    width: 0.5px;
    margin: 0 auto;
}
#container {
    width: 715px;
    margin: 0 auto;
    overflow: auto;
    height: 515px;
    padding: 25px 10px 0 10px;
}
#spacer {
    height: 10px;
    width: 715px;
    margin: 0 auto;
}
#footer {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 9px;
    color: #000;
    text-decoration: none;
    text-align: center;
    height: 20px;
    width: 850px;
    margin: 0 auto;
    letter-spacing: 1px;
}
a:link.copyright {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 9px;
    color: #666;
}
#nav-menu ul
{
    list-style: none;
    padding-top:10px;
    height: 20px;
    width: 800px;
    margin: 0 auto;
}

#nav-menu li
{
    float: left;
    margin-left: 4px;
}

#nav-menu li a
{
    float: left;
    width: 99px;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size:10px;
    line-height:20px;
    color: #000;
    text-decoration: none;
    text-align: center;
    text-transform:uppercase;
    background-image: url(images/menu.png);
}
.drop {
    float:left;
    color:#999;
    font-size:80px;
    line-height:70px;
    padding-top:2px;
    padding-right:2px;
    font-family: Times, serif, Georgia;
    }
.maincontent {
    text-align: left;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 12px;
    line-height:20px;
    color: #333;
}
.maincontentSubhead {
    height: auto;
    width: 668px;
    text-align: left;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 12px;
    line-height:20px;
    color: #333;
    margin: 50px auto;
    text-transform: uppercase;
}
.maincontentItalic {
    height: auto;
    width: 668px;
    text-align: left;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 12px;
    line-height:20px;
    color: #333;
    margin: 50px auto;
    font-style: italic;
}
.maincontentHeading {
    text-align: left;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 14px;
    line-height:20px;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 4px;
}

There is an alignment bug in IE7.
I also have a problem of the menu div overlaying the outer border graphic (borderwhite.png) so the border has a gap where the div sits.

Any ideas please?

Frinkky · 10th February 2010, 09:48 PM

Can you post a link to a live version of the page please? Otherwise we've all got to copy your code and create a new html doc to see what the problem is.

Ta muchly :)

trixiemay · 10th February 2010, 10:23 PM

Sure. Here it is.

kozata-xakep · 11th February 2010, 09:08 AM

Hello trixiemay,

Your problem is that your ul has padding-left: 40px;

Use:

Code:

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

And you will see that even on Firefox the ul goes left.

You haven't recent all elements default definitions witch are slightly different for most of the browsers.

trixiemay · 11th February 2010, 07:38 PM

@kozata-xakep
So the code goes in the nav-menu ul?
I've tried it in the body and the nav-menu. Doesn't work.

This is my current css:
#nav-menu ul
{
list-style: none;
padding-top:10px;
height: 20px;
width: 800px;
margin: 0 auto;
}

I can't see from my supplied css where the padding-left:40px is?

kozata-xakep · 11th February 2010, 08:59 PM

There's no padding-left: 40px in your css because it cames from the browser. It's a default value for it.

In the future make sure your project css starts with the first simple line of

Code:

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

or use a deeper reset such as CSS Reset ( CSS Tools: Reset CSS ).

10th February 2010, 09:48 PM	#2
Frinkky Join Date: Dec 2008 Posts: 700 Thanks: 0 Thanked 37 Times in 37 Posts Expertise: Design & Graphics Experience: Professional	Can you post a link to a live version of the page please? Otherwise we've all got to copy your code and create a new html doc to see what the problem is. Ta muchly :) __________________ Jon Warner Web Pro Cafe :: The PixelForge :: Follow my Twits (or something) :: LinkedIn

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

10th February 2010, 10:23 PM	#3
trixiemay Member Join Date: Jan 2009 Posts: 99 Thanks: 2 Thanked 0 Times in 0 Posts	Sure. Here it is.

11th February 2010, 09:08 AM	#4
kozata-xakep Join Date: Feb 2010 Location: Varna, Bulgaria Posts: 50 Thanks: 0 Thanked 11 Times in 11 Posts Expertise: Web Development Experience: Professional	Hello trixiemay, Your problem is that your ul has padding-left: 40px; Use: Code: * { margin: 0; padding: 0; outline: 0; } And you will see that even on Firefox the ul goes left. You haven't recent all elements default definitions witch are slightly different for most of the browsers.

11th February 2010, 07:38 PM	#5
trixiemay Member Join Date: Jan 2009 Posts: 99 Thanks: 2 Thanked 0 Times in 0 Posts	@kozata-xakep So the code goes in the nav-menu ul? I've tried it in the body and the nav-menu. Doesn't work. This is my current css: #nav-menu ul { list-style: none; padding-top:10px; height: 20px; width: 800px; margin: 0 auto; } I can't see from my supplied css where the padding-left:40px is?

11th February 2010, 08:59 PM	#6
kozata-xakep Join Date: Feb 2010 Location: Varna, Bulgaria Posts: 50 Thanks: 0 Thanked 11 Times in 11 Posts Expertise: Web Development Experience: Professional	There's no padding-left: 40px in your css because it cames from the browser. It's a default value for it. In the future make sure your project css starts with the first simple line of Code: * { margin: 0; padding: 0; outline: 0; } or use a deeper reset such as CSS Reset ( CSS Tools: Reset CSS ).