Unwanted Margins

**aklah** · 08-23-2006 04:05 PM

I am in the process of redeveloping the front page of our website. The layout is as follows

A wrapper has been set at 760px wide
There is a header
A strip of 3 photos under the header
Followed by a drop down menu the full width of the wrapper underneath the photo's.

The issue is that in Firefox everything looks fine

In IE there is a gap between the photos and the drop down menu list (unwanted of course). Also the drop down menu does not cover the full width of the wrapper.

Hopefully the code will help

HTML Code:

<body>
    <div id="wrapper">
        <div id="masthead">
            <h1>Aklah Arabians</h1>
				</div>
            <div id="photos">
								<img alt="Aklah Kesterl Arabian Colt" src="images/FoalMay2006Pic1.JPG" height="191" width="253.333" /><img alt="Shamil Arabian Stallion (18K)" src="images/SpikePosing.JPG" height="191" width="253.333" /><img alt="Aklah Fantasia Arabian Yearling Filly (28K)" src="images/TazAtHome2006.JPG" height="191" width="253.33" />
            </div>
						<div id="navigation">
						<ul id="nav">
      					<li><a href="index.html">Home</a></li>      
      					<li><a href="aboutus.html">About Us</a></li>      
      					<li><a href="#">Services</a>
      							<ul>
      									<li><a href="services/breeding.html">Breeding</a></li>
      									<li><a href="services/breaking.html">Breaking</a></li>
      									<li><a href="services/schooling.html">Schooling</a></li>
      									<li><a href="services/showproduction.html">Show Production</a></li>     
      							</ul>
      					</li>
								<li><a href="#">Horses</a>
      							<ul>
      									<li><a href="horses/stormgold.html">Storm Gold</a></li>
      									<li><a href="horses/alshahrani.html">Al Shahrani</a></li>
												<li><a href="horses/shamil.html">Shamil</a></li>
												<li><a href="horses/kalazeer.html">Kalazeer</a></li>
												<li><a href="horses/aklahfantasia.html">Aklah Fantasia</a></li>
												<li><a href="horses/aklahkesterl.html">Aklah Kestrel</a></li>
												<li><a href="horses/virolet.html">Virolet</a></li>
												<li><a href="horses/forsale.html">For Sale</a></li>
      									<li><a href="horses/wanted.html">Wanted</a></li>												
      							</ul>
      					</li>
								<li><a href="contactus.html">Contact us</a></li>
								<li><a href="links.html">Links</a></li>       
      			</ul>
        		</div>   
        <div id="content">
					<div class="col1">
					<img alt="Tina Bennett (15K)" src="../Aklah%20Arabians/images/Tina%20Bennett.JPG" height="160" width="160" />
					<h3>Stop Press</h3>
					</div>
					<div class="col2"><p>COL2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volupat. Ut wisi enim ad minim veniam quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.</p>

Code:

body {
margin: 0px;
padding: 0px;
text-align: center;
background-image: url(NetworkBlitzBkgrd.gif);
}

#wrapper {
	text-align: left;
	width: 760px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 10px;
	}

#masthead h1 {
	margin: 0;
	padding: 5 0;
	color: #ffd700;
	background-color: Blue;
	text-align: center;
	font-size: 400%
}

#photos img{
	margin: 0px;
	padding: 0px;
	}
	
	
ul {
	/* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
}

li {
	/* all list items */
	float: left;
	position: relative;
	width: 126.666px;
	background-color: Blue;
	
}

a {
	text-decoration: none;
	color: Yellow;
	margin-left: 10px;
	
	
}

li ul {
	/* second-level lists */
	display: none;
	position: absolute;
	top: 1em;
	left: 0;
	border: none;
	
}

li ul li{
	border-top-color: White;
	border-top-style: solid;
	border-top-width: 1px;
}

li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
	top: auto;
	left: auto;
}

li:hover ul, li.over ul { /* lists nested under hovered list items */
	display: block;
}

#content
{
	background-color: white;
	float:left;
	color: Blue;
}

p {
	margin: 0;
	padding: 0;
	margin-bottom: 10px;
}

h3{
	margin: 0;
	padding: 0;
	padding-left: 5px;
	color: Yellow;
	background-color: Blue;
}


.col1{
	float: left;
	width: 159px;
	
}
	
.col1 img{
	margin-bottom: 5px;
}

.col2{
	float: left;
	width: 580px;
	margin: 10px;
	display: inline;
	
}

Hopefully somebody out there will be able to assist me.

Kind Regards

**WebJoel** · 08-23-2006 06:49 PM

HTML Code:

<div id="photos"> 
 <img alt="Aklah Kesterl Arabian Colt" src="images/FoalMay2006Pic1.JPG" height="191" width="253.333" /><img alt="Shamil Arabian Stallion (18K)" src="images/SpikePosing.JPG" height="191" width="253.333" /><img alt="Aklah Fantasia Arabian Yearling Filly (28K)" src="images/TazAtHome2006.JPG" height="191" width="253.33" />
 </div>

No spaces in the HTML. If you close the img tag like " />(space)<img src=", you are going to get a few pixels on the page between these images.
Remove the space(s) (as I have done: above), and that part of the problem is solved.
It shouldn't matter I know, but IE does ...unpredictable things.

Right below that:

<div id="navigation">

<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="services/breeding.html">Breeding</a></li>
<li><a href="services/breaking.html">Bre (etc.)

-I do not see any #navigation nor do I see any #nav in the STYLE section...

Add:
#navigation {width:760px;text-align:center;}
to your STYLE and see if this is what you want...

Thread: Unwanted Margins

Thread Tools

Display

Unwanted Margins

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions