Forum Moderators: not2easy
I am having a display issue within Google Chrome (other browsers render such correctly) and I'm looking for a little help.
Essentially, 'slug-1' displays under 'featured', and not under 'popular' - granted, that probably hard to follow, but let me try and explain.
Here's how the page should look:
{-----------ROTATOR------------}
{--POPULAR--} {----FEATURED----}
{-SLUG-1-} {-SLUG-2-} {-SLUG-3-}
And here's how it's rendering in Chrome:
{-----------ROTATOR------------}
{--POPULAR--} {----FEATURED----}
---------------{-SLUG-1-}
{-SLUG-2-} {-SLUG-3-}
I'm relatively new to XHTML/CSS, but the page validates correctly and I'm, more or less, out of ideas.
Any help will be greatly appreciated.
With thanks,
R.
<body>
<div id="container">
<div id="rotator">
<div id="rotate">
<a href="http://www.example.co.uk/shop/results/1/201/our-gift-range/our-products.aspx"><img src="http://www.example.com/gs/rotator-christmas-gifts.jpg" width="910" height="385" alt="Improved gift range: delightful gift ideas!" class="rotator" /></a>
<a href="http://www.example.co.uk/shop/results/1/1100/bulbs/our-products.aspx"><img src="http://www.example.com/gs/rotator-bulbs.jpg" width="910" height="385" alt="Autumn Planting Bulbs: Save 40%!" class="rotator" /></a>
<a href="http://www.example.co.uk/shop/results/1/612/garden-tidy-and-recycling/our-products.aspx"><img src="http://www.example.com/gs/rotator-autumn.jpg" width="910" height="385" alt="Autumn tidying begins!" class="rotator" /></a>
<a href="http://www.example.co.uk/content/free-trees.aspx"><img src="http://www.example.com/gs/rotator-trees.jpg" width="910" height="385" alt="Claim five free trees with every order over £40!" class="rotator" /></a>
<a href="http://www.example.co.uk/shop/results/1/503/wildlife/our-products.aspx"><img src="http://www.example.com/gs/rotator-birds.jpg" width="910" height="385" alt="Birds and wildlife need your help as the weather turns!" class="rotator" /></a>
</div>
</div>
<div id="popular">
<p class="popular-header">Our best selling products this week:</p>
<ul id="pop_a">
<li><span class="popular-price">£8.99</span><span class="popular-product"><a href="http://www.example.co.uk/shop/product/605/product-search/11257/large-seed-box.aspx" class="popular">Garden Trading Large Seed Box</a></span></li>
<li><span class="popular-price">£43.99</span><span class="popular-product"><a href="http://www.example.co.uk/shop/product/1050/product-search/11240/compact-walk-in-greenhouse-and-shelving.aspx" class="popular">Gardman Compact Walk-in Greenhouse</a></span></li>
<li><span class="popular-price">£32.95</span><span class="popular-product"><a href="http://www.example.co.uk/shop/product/670/product-search/11309/grower-system-frame.aspx" class="popular">Haxnicks Grower System</a></span></li>
<li><span class="popular-price">£29.95</span><span class="popular-product"><a href="http://www.example.co.uk/shop/results/1/102/garden-footwear/our-products.aspx" class="popular">Town & Country Premium Wellies</a></span></li>
<li><span class="popular-price">£18.95</span><span class="popular-product"><a href="http://www.example.co.uk/shop/product/605/product-search/10983/bulb-and-seed-tin.aspx" class="popular">Burgon & Ball Bulb & Seed Tin</a></span></li>
<li><span class="popular-price">£8.99</span><span class="popular-product"><a href="http://www.example.co.uk/shop/product/680/product-search/11836/johnsons-autumn-bio-active-lawn-feed.aspx" class="popular">Johnsons Bio-Active Autumn Lawn Feed</a></span></li>
</ul>
</div>
<div id="featured">
<p class="popular-header">Featured products:</p>
<div id="featured-1"><a href="http://www.example.co.uk/shop/results/1/103/garden-gloves/brand/1047/laura-ashley.aspx"><img class="featured" src="http://www.example.com/gs/gloves.jpg" alt="Laura Ashley Gloves" /></a><p class="featured-title"><a href="http://www.example.co.uk/shop/results/1/103/garden-gloves/brand/1047/laura-ashley.aspx" class="featured">Laura Ashley Gloves</a></p><p class="featured-price">From £3.45</p></div>
<div id="featured-2"><a href="http://www.example.co.uk/shop/results/1/102/garden-footwear/our-products.aspx"><img class="featured" src="http://www.example.com/gs/wellies.jpg" alt="Town & Country Wellies" /></a><p class="featured-title"><a href="http://www.example.co.uk/shop/results/1/102/garden-footwear/our-products.aspx" class="featured">Town & Country Wellies</a></p><p class="featured-price">From £29.95</p></div>
<div id="featured-3"><a href="http://www.example.co.uk/shop/results/1/503/wildlife/brand/1054/the-nuttery.aspx"><img class="featured" src="http://www.example.com/gs/bird-feeders.jpg" alt="The Nuttery Bird Feeders" /></a><p class="featured-title"><a href="http://www.example.co.uk/shop/results/1/503/wildlife/brand/1054/the-nuttery.aspx" class="featured">The Nuttery Bird Feeders</a></p><p class="featured-price">From £8.99</p></div>
</div>
<div id="slug-1">
<img src="http://www.example.com/gs/trees-header.jpg" alt="Free trees with orders over £40" />
<p class="slug-header">Five free trees with every order over £40!</p>
<p class="slug-text">Every order placed over the value of £40 qualifies for five free trees as part of our commitment to the environment and carbon neutrality.</p>
<a href="http://www.example.co.uk/content/free-trees.aspx" class="slug-link">Find out how to claim your free trees...</a>
</div>
<div id="slug-2">
<img src="http://www.example.com/gs/christmas-header.jpg" alt="Delightful Christmas gift ideas" />
<p class="slug-header">Delightful Christmas gift ideas</p>
<p class="slug-text">So, what do you buy the gardener who has everything? Our Christmas gift range is sure to provide much needed sources of inspiration.</p>
<a href="http://www.example.co.uk/shop/results/1/201/garden-gifts/our-products.aspx" class="slug-link">Visit our Christmas gift range...</a>
</div>
<div id="slug-3">
<img src="http://www.example.com/gs/HDNL-header.jpg" alt="Your order is unaffected by strike action" />
<p class="slug-header">Orders are unaffected by strike action</p>
<p class="slug-text">We're proud to confirm that measures are in place to ensure that orders are completely unaffected by Royal Mail strike action.</p>
<a href="http://www.example.co.uk/content/delivery-details.aspx" class="slug-link">Read our delivery details...</a>
</div>
<div id="clear"></div>
</div>
</body>
CSS:
/* MAIN ELEMENTS */
body {
background: #87BF20;
font:100.1%/1.5 Arial, Helvetica, sans-serif;
color: #5b5b5b;
}
#container {
width: 921px;
margin: 20px 0px 15px 15px;
padding: 0 5px 0 12px;
background-color: #FFF;
}
#rotator {
padding: 10px 0 0 0;
}
#popular {
float: left;
width: 360px;
margin: 4px;
padding: 1px;
background-color: #ffffff;
border-width: 1px;
border-style: solid;
border-color: #f4f4f4;
min-height: 180px;
}
#featured {
float: left;
width: 530px;
margin: 4px;
padding: 1px;
background-color: #ffffff;
border-width: 1px;
border-style: solid;
border-color: #f4f4f4;
min-height: 180px;
}
/* ROTATOR */
.nav {
margin: 0px 10px 7px 0px;
}
#nav a, #s7 strong {
margin: 2px 2px;
padding: 3px 5px;
border: 1px solid #f4f4f4;
font-size: 10px;
text-decoration: none;
color: #5b5b5b;
}
#nav a.activeSlide {
background: #f4f4f4;
}
#nav.a:focus {
outline: none;
}
#output {
text-align: left;
}
#nav {
text-align: right;
}
img.rotator {
border: 0;
}
/* SLUG ADS */
#slug-1 {
float: left;
margin: 2px;
margin-top: 5px;
padding: 4px;
width: 292px;
background-color: #f4f4f4;
min-height: 230px;
} #slug-2 {
float: left;
margin: 2px;
margin-top: 5px;
padding: 4px;
width: 291px;
background-color: #f4f4f4;
min-height: 230px;
}
#slug-3 {
float: left;
margin: 2px;
margin-top: 5px;
padding: 4px;
width: 291px;
background-color: #f4f4f4;
min-height: 230px;
}
#clear {
clear: both;
}
p.slug-header {
font-size: 0.9em;
color: #4b9814;
margin-top: 12px;
margin-bottom: 0px;
padding: 3px;
}
p.slug-text {
font-size: 13px;
margin: 0px;
padding: 3px;
}
a.slug-link {
margin-bottom: 0;
font-size: 13px;
padding: 3px;
color: #4b9814;
}
/* POPULAR PRODUCTS */
p.popular-header {
font-size: 0.9em;
color: #4b9814;
margin-bottom: 4px;
margin-top: 8px;
margin-left: 5px;
padding: 0px;
}
.popular-product {
font-size: 0.8em;
margin: 0 0 0 5px;
line-height: 25px;
display: inline;
}
.popular-price {
float: right;
font-size: 14px;
color: #4b9814;
display: inline;
margin: 4px 3px 0 0;
}
.odd {
background-color: #ffffff;
}
.even {
background-color: #f4f4f4;
}
ul {
list-style: none;
padding: 0px;
margin: 0px;
}
a.popular:link {
color: #5b5b5b;
text-decoration: none;
}
a.popular:visited {
color: #5b5b5b;
text-decoration: none;
}
a.popular:hover {
color: #4b9814;
text-decoration: none;
}
a.popular:active {
color: #5b5b5b;
text-decoration: none;
}
/* FEATURED PRODUCTS */
#featured-1 {
float: left;
margin: 4px;
margin-top: 0px;
padding: 0px;
width: 168px;
min-height: 140px;
margin-bottom: 4px;
}
#featured-2 {
float: left;
margin: 4px;
margin-top: 0px;
padding: 0px;
width: 168px;
min-height: 140px;
margin-bottom: 4px;
}
#featured-3 {
float: left;
margin: 4px;
margin-top: 0px;
padding: 0px;
width: 168px;
min-height: 140px;
margin-bottom: 4px;
}
img.featured {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
border-width: 2px;
border-style: solid;
border-color: #f4f4f4;
}
p.featured-title {
text-align: center;
font-size: 14px;
color: #4b9814;
margin: 5px 0 0 0;
}
p.featured-price {
text-align: center;
font-size: 13px;
color: #5b5b5b;
margin: 2px 0 0 0;
}
a.featured:link, a.featured:visited, a.featured:hover, a.featured:active {
color: #4b9814;
text-decoration: none;
}
Either way, it looks like it's a problem with your 'width' and 'margin' properties somewhere in your css, as i'm not sure they add up correctly to the value of your #contatiner <div>
Hope this helps...
1. Add clear: left; to #slug-1. That should force #slug-1 to appear below any left floated items (including #popular).
2. Give #popular and #featured an explicit height of the same size, so that the next item will be forced below them both. Note, the down side is that you could potentially clip some text (if for example a user views your sites using a greater text size than you develop against).
